Réinitialisation

dabblet.css

/* Réinitialisation */

* {margin: 0px; padding:0px;}

/* Police personnalisée*/
@font-face {
	src: url('http://dl.dropbox.com/u/67963796/ttf/gillsans.ttf');
	font-family: "Gill Sans";
}

body {
font-family:"Gill Sans";}
/* Bordure du haut */

body {border-top: 20px solid #003366; }


/* Haut de Page + Menu */

header {
width:800px; margin:auto; border-bottom: 1px dashed rgba(0,33,66,0.2);} 
nav li {
list-style-type: none;
display: inline-block;
margin-left: 20px;
}
nav ul li a {
text-transform: uppercase;
padding:5px;
}

nav ul li a:hover {
	background-color:rgba(33,66,99,0.8);
	border-radius: 3px;
	color:white;
	padding-bottom: 40px;
	-webkit-transition: all 500ms ease-in-out;
	}
li a {
text-decoration: none; 
}
nav ul {display: inline-block;vertical-align:45px; margin-left: 100px;}
nav h1 {
	width: 100px;
	height: 100px;
	margin-top: 10px;
	/*border: 1px solid black;*/
	background: url('http://dl.dropbox.com/u/67963796/fond/monkey2.jpg') right;
	border-radius: 50px;
	display: inline-block;}
	

/* Fond d'écran */


figure {margin-top:10px;
width: 1280px; height: 400px; /*border: 1px solid black;*/ background: url('http://dl.dropbox.com/u/67963796/maquette2/6915409404_39bbb1c199_b.jpg') no-repeat; background-size:100% 100%;}

figure div { /*border: 1px dashed yellow;*/ width:800px; height: 200px; margin: auto; margin-top:10px; background-color: rgba(0,0,0,0.8);}


/* Article et A propos */

section {width:1024px; margin: auto;}
article, aside {margin-left: 20px; margin-top:10px;}
article {width:600px; display:inline-block; vertical-align:top;}
aside {width:200px;display: inline-block; }
article p {text-indent: 1em;}
aside li {
list-style-type: none;}

a { color: gray;}

/* Bas de page */
footer {
background: #FF6600;
height: 40px; 
width;1280px; 
color: white;
}

footer ul li, footer h5 { display:inline-block;width: 120px; }

footer a{color: white;}

dabblet.html

<header>
<nav> 
	<h1></h1>
	<ul>
		<li><a href="#">blog</a></li>
		<li><a href="#">about</a></li>
		<li><a href="#">contact</a></li>
		<li><a href="#">twitter</a></li>
	</ul>
<nav>
</header>

<figure>
	<div>
		<h1><h1>
		<h2></h2>
	</div>
</figure>

<section>
	<article>
		<h1>HTML5 Game</h1>
		<p>I'm new in Web Developpement and I've been discovering new languages around HTML5 like the new version of CSS3 and even JavaScript. </p>
	</article>
	<aside><h1>More links</h1>
		<ul>
			<li><a href="#">The Verge<a></li>				
			<li><a href="#">Korben<a></li>			
			<li><a href="#">TechCrunch<a></li>
		</ul>
</aside>
</section>

<footer><h5>© Franck - 2012</h5>
	<ul>
		<li><a href="#">blog</a></li>
		<li><a href="#">about</a></li>
		<li><a href="#">contact</a></li>
		<li><a href="#">twitter</a></li>
	</ul><footer>

settings.json

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