Untitled

dabblet.css

*{margin: 0; padding : 0;}
body {background:linear-gradient(125deg,#00BA6D 0%, #00CF78 100%);}
section {
	width: 600px;
	height: 300px;
	margin: auto;
	}
	
#tuile1 {margin:5px; 
width: 130px;
height: 130px;
background-color: #5D57FA;
display: inline-block; }
#tuile2 {margin:5px; 
width: 130px;
height: 130px;
 background-color: #FAC928;
display: inline-block;
 }
 
 
#tuile3 {margin:5px; 
width: 130px;
height: 130px;
 background-color: #E61C47;
display: inline-block;
 }


#tuile4 {margin:5px; 
width: 130px;
height: 130px;
 background-color: #14E051;
display: inline-block;
 }
 
 
#tuile5 {margin:5px; 
width: 275px;
height: 130px;
 background-color: #E61C47;
display: inline-block;
 }
 
 #tuile5:hover {
 	background-color: #D1173F;
 	}
 	
@font-face {
font-family: Segoe;
src: url('http://dl.dropbox.com/u/67963796/ttf/segoeuisl.ttf');}


@font-face {
font-family: Segoe2;
src: url('http://dl.dropbox.com/u/67963796/ttf/segoeuil.ttf');}


section .n1{font-family: Segoe; font-size: 2em; color: #fff; font-weight:bold; }
section .n2{font-family: Segoe2; font-size: 1em; color: #fff;}



 

dabblet.html

<section>
	<div id="tuile1"></div>
	<div id="tuile2"></div>
	<div id="tuile3"></div>
	<div id="tuile4"></div>
	<div id="tuile5"><p class="n1">Tuile n°5 </p><p class="n2">Typographie de la tuile numéro cinq</p></div>

</section>

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}