haroldparis/dabblet.css

## dabblet.css
/**
 * Leadwork : Focus No price
 */

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

.fo-container {
	width: 780px;
	margin: 20px auto;
}

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

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

/*Shape*/
.fo-focus {
  width: 780px;
  background: white;
  margin: 5px;
  padding: 0 0 20px 0;
  -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*/
.fo-focus ul {
	width: 525px;
	list-style-type: none;
	font: 300 14px/2 Helvetica, Verdana, sans-serif;
	margin: 20px 0 0 30px;
}

.fo-focus ul strong {
  font-weight: bold;
}

.fo-aside {
	float: right;
	display: ;
	width: 185px;
	margin: 0 20px 0 0;
}

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

.fo-focus .fo-price sup {
  font-size: 45px;
}

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

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

  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;
}

.fo-focus a:hover {
  background: #30267c;
}

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

<div class="fo-container">
	<div class="fo-focus">
		<div class="fo-top"><h2>Soft Tel</h2></div>
		<div class="fo-aside">
		    <a href="#">En savoir plus</a>
	    </div><!-- .fo-aside -->
		<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>
	</div><!-- .fo-focus -->
</div><!-- .fo-container -->

## dabblet.js
// alert('Hello world!');

## settings.json
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"result"}
	/**
	* Leadwork : Focus No price
	*/

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

	.fo-container {
	width: 780px;
	margin: 20px auto;
	}

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

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

	/Shape/
	.fo-focus {
	width: 780px;
	background: white;
	margin: 5px;
	padding: 0 0 20px 0;
	-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/
	.fo-focus ul {
	width: 525px;
	list-style-type: none;
	font: 300 14px/2 Helvetica, Verdana, sans-serif;
	margin: 20px 0 0 30px;
	}

	.fo-focus ul strong {
	font-weight: bold;
	}

	.fo-aside {
	float: right;
	display: ;
	width: 185px;
	margin: 0 20px 0 0;
	}

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

	.fo-focus .fo-price sup {
	font-size: 45px;
	}

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

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

	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;
	}

	.fo-focus a:hover {
	background: #30267c;
	}
	<!-- content to be placed inside <body>…</body> -->

	<div class="fo-container">
	<div class="fo-focus">
	<div class="fo-top"><h2>Soft Tel</h2></div>
	<div class="fo-aside">
	<a href="#">En savoir plus</a>
	</div><!-- .fo-aside -->
	<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>
	</div><!-- .fo-focus -->
	</div><!-- .fo-container -->