haroldparis/dabblet.css

## dabblet.css
/**
 * Leadwork : Table de prix
 */

* {margin: 0; padding: 0;}
body {background: #ededed;}

#pt-container {
	width: 780px;
	margin: 100px auto;
}

/*Top Bar*/
.pt-top {
  width: 250px; height: 50px;
  background: #ee4747;
  -webkit-border-radius: 10px 10px 0 0;
     -moz-border-radius: 10px 10px 0 0;
          border-radius: 10px 10px 0 0;
}

.pt-top h2 {
  color: #fff;
  text-align: center;
  font: 300 30px/50px Helvetica, Verdana, sans-serif;
}

/*Shape*/
.pt-pricingtable {
  width: 250px; height: 450px;
  background: white;
  margin: 5px;
  float: left;

  -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
          border-radius: 10px;
  -webkit-box-shadow: 2px 2px 9px rgba(0,0,0,0.3);
     -moz-box-shadow: 2px 2px 9px rgba(0,0,0,0.3);
          box-shadow: 2px 2px 9px rgba(0,0,0,0.3);
}

/*Features*/
.pt-pricingtable ul {
  list-style-type: none;
  font: 300 12px/2 Helvetica, Verdana, sans-serif;
  margin: 20px 15px 0 30px;
}

.pt-pricingtable ul strong {
  font-weight: bold;
}

/*Dividing Line*/
.pt-pricingtable hr {
  border: 0;
  background-color: #BCBEC0;
  color: #BCBEC0;
  height: 1px;
  width: 190px;
  margin: 20px 0 0 30px;
}

/*Price*/
.pt-pricingtable .pt-price {
  text-align: center;
  font: bold 88px/1 Helvetica, Verdana, sans-serif;
  margin: 20px 0 0 0;
  color: #211A55;
}

.pt-pricingtable .pt-price sup {
  font-size: 45px;
}

.pt-pricingtable p {
  text-align: center;
  font: 500 10px/1 Helvetica, Verdana, sans-serif;
  color: #BCBEC0;
}

/*Button*/
.pt-pricingtable a {
  display: block;
  height: 40px;
  width: 170px;
  color: #fff;
  margin: 25px 0 0 40px;

  text-decoration: none;
  text-align: center;
  text-transform: uppercase;
  font: 500 16px/40px Helvetica, Verdana, sans-serif;

  -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
          border-radius: 10px;

  /*Gradient*/
  background: #211A55;
}

.pt-pricingtable a:hover {
  background: #30267c;
}

/*Scaled Version*/
.pt-featured {
	-webkit-transform: scale(1.2, 1.2);
	-moz-transform: scale(1.2, 1.2);
	-o-transform: scale(1.2, 1.2);
	-ms-transform: scale(1.2, 1.2);
	transform: scale(1.2, 1.2);
}

## dabblet.html
<!-- content to be placed inside <body>…</body> -->

<div id="pt-container">
    <div class="pt-pricingtable">
      <div class="pt-top">
        <h2>Soft Tel</h2>
      </div>
      <ul>
        <li>Phoning : <strong>12 heures</strong></li>
        <li>Emailing : -</li>
        <li>Internet : -</li>
        <li>Objectifs : <strong>3 RDV</strong> + 100 qualifiés</li>
        <li>Continuité : <strong>179€</strong> /6h d'appels</li>
        <li>Garantie : <strong>2 RDV</strong> + base contacts</li>
      </ul>

      <hr />

      <div class="pt-price">499<sup>€</sup></div>
      <p>Forfait prospection + Kit de lancement</p>

      <a href="#">En savoir plus</a>
</div>

    <div class="pt-pricingtable pt-featured">
      <div class="pt-top">
        <h2>Rich Tel</h2>
      </div>
      <ul>
        <li>Phoning : <strong>12 heures</strong></li>
        <li>Emailing : <strong>15 000 envois</strong></li>
        <li>Internet : -</li>
        <li>Objectifs : <strong>6 RDV</strong> + 25 intéressés</li>
        <li>Continuité : Soft Tel + <strong>50€</strong> /email</li>
        <li>Garantie : <strong>3 RDV</strong> + base contacts</li>
      </ul>

      <hr />

      <div class="pt-price">699<sup>€</sup></div>
      <p>Forfait prospection + Kit de lancement</p>

      <a href="#">En savoir plus</a>
    </div>

    <div class="pt-pricingtable">
      <div class="pt-top">
        <h2>360 Tel</h2>
      </div>
      <ul>
        <li>Phoning : <strong>12 heures</strong></li>
        <li>Emailing : <strong>15 000 envois</strong></li>
        <li>Internet : <strong>Mini site</strong> + publicité</li>
        <li>Objectifs : <strong>9 RDV</strong> + 25 intéressés</li>
        <li>Continuité : Rich Tel + <strong>19€</strong> /mois</li>
        <li>Garantie : <strong>4 RDV</strong> + base contacts</li>
      </ul>

      <hr />

      <div class="pt-price">899<sup>€</sup></div>
      <p>Forfait prospection + Kit de lancement</p>

      <a href="#">En savoir plus</a>
    </div>

</div>

## settings.json
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"result"}
	/**
	* Leadwork : Table de prix
	*/

	* {margin: 0; padding: 0;}
	body {background: #ededed;}

	#pt-container {
	width: 780px;
	margin: 100px auto;
	}

	/Top Bar/
	.pt-top {
	width: 250px; height: 50px;
	background: #ee4747;
	-webkit-border-radius: 10px 10px 0 0;
	-moz-border-radius: 10px 10px 0 0;
	border-radius: 10px 10px 0 0;
	}

	.pt-top h2 {
	color: #fff;
	text-align: center;
	font: 300 30px/50px Helvetica, Verdana, sans-serif;
	}

	/Shape/
	.pt-pricingtable {
	width: 250px; height: 450px;
	background: white;
	margin: 5px;
	float: left;

	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: 2px 2px 9px rgba(0,0,0,0.3);
	-moz-box-shadow: 2px 2px 9px rgba(0,0,0,0.3);
	box-shadow: 2px 2px 9px rgba(0,0,0,0.3);
	}

	/Features/
	.pt-pricingtable ul {
	list-style-type: none;
	font: 300 12px/2 Helvetica, Verdana, sans-serif;
	margin: 20px 15px 0 30px;
	}

	.pt-pricingtable ul strong {
	font-weight: bold;
	}

	/Dividing Line/
	.pt-pricingtable hr {
	border: 0;
	background-color: #BCBEC0;
	color: #BCBEC0;
	height: 1px;
	width: 190px;
	margin: 20px 0 0 30px;
	}

	/Price/
	.pt-pricingtable .pt-price {
	text-align: center;
	font: bold 88px/1 Helvetica, Verdana, sans-serif;
	margin: 20px 0 0 0;
	color: #211A55;
	}

	.pt-pricingtable .pt-price sup {
	font-size: 45px;
	}

	.pt-pricingtable p {
	text-align: center;
	font: 500 10px/1 Helvetica, Verdana, sans-serif;
	color: #BCBEC0;
	}

	/Button/
	.pt-pricingtable a {
	display: block;
	height: 40px;
	width: 170px;
	color: #fff;
	margin: 25px 0 0 40px;

	text-decoration: none;
	text-align: center;
	text-transform: uppercase;
	font: 500 16px/40px Helvetica, Verdana, sans-serif;

	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;

	/Gradient/
	background: #211A55;
	}

	.pt-pricingtable a:hover {
	background: #30267c;
	}

	/Scaled Version/
	.pt-featured {
	-webkit-transform: scale(1.2, 1.2);
	-moz-transform: scale(1.2, 1.2);
	-o-transform: scale(1.2, 1.2);
	-ms-transform: scale(1.2, 1.2);
	transform: scale(1.2, 1.2);
	}
	<!-- content to be placed inside <body>…</body> -->

	<div id="pt-container">
	<div class="pt-pricingtable">
	<div class="pt-top">
	<h2>Soft Tel</h2>
	</div>
	<ul>
	<li>Phoning : <strong>12 heures</strong></li>
	<li>Emailing : -</li>
	<li>Internet : -</li>
	<li>Objectifs : <strong>3 RDV</strong> + 100 qualifiés</li>
	<li>Continuité : <strong>179€</strong> /6h d'appels</li>
	<li>Garantie : <strong>2 RDV</strong> + base contacts</li>
	</ul>

	<hr />

	<div class="pt-price">499<sup>€</sup></div>
	<p>Forfait prospection + Kit de lancement</p>

	<a href="#">En savoir plus</a>
	</div>

	<div class="pt-pricingtable pt-featured">
	<div class="pt-top">
	<h2>Rich Tel</h2>
	</div>
	<ul>
	<li>Phoning : <strong>12 heures</strong></li>
	<li>Emailing : <strong>15 000 envois</strong></li>
	<li>Internet : -</li>
	<li>Objectifs : <strong>6 RDV</strong> + 25 intéressés</li>
	<li>Continuité : Soft Tel + <strong>50€</strong> /email</li>
	<li>Garantie : <strong>3 RDV</strong> + base contacts</li>
	</ul>

	<hr />

	<div class="pt-price">699<sup>€</sup></div>
	<p>Forfait prospection + Kit de lancement</p>

	<a href="#">En savoir plus</a>
	</div>

	<div class="pt-pricingtable">
	<div class="pt-top">
	<h2>360 Tel</h2>
	</div>
	<ul>
	<li>Phoning : <strong>12 heures</strong></li>
	<li>Emailing : <strong>15 000 envois</strong></li>
	<li>Internet : <strong>Mini site</strong> + publicité</li>
	<li>Objectifs : <strong>9 RDV</strong> + 25 intéressés</li>
	<li>Continuité : Rich Tel + <strong>19€</strong> /mois</li>
	<li>Garantie : <strong>4 RDV</strong> + base contacts</li>
	</ul>

	<hr />

	<div class="pt-price">899<sup>€</sup></div>
	<p>Forfait prospection + Kit de lancement</p>

	<a href="#">En savoir plus</a>
	</div>

	</div>