Extra Contenido de tu <head>:
<link href="http://meyerweb.com/eric/tools/css/reset/reset.css" rel="stylesheet" type="text/css">
Texto sobre el diseño:
<div id="contenedor">
<div id="cabezal">
<div id="avatar">
<img src="http://lorempixel.com/100/100/" />
</div>
<ul id="menu">
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
<li><a href="#">Link3</a></li>
</ul>
<h1 id="titulo">Juan Fer</h1>
</div>
<div id="contenido">
<p>
Texto por debajo de la página:
</p>
</div>
</div>
<p id="footer">Creado por <a href="http://buzzdungeon.es.tl">Buzzdungeon</a></p>
CSS-Code sin Style Tags:
html, body{
background:#ddd;
font-family:'Arial Rounded MT Bold', Helvetica, Arial, sans-serif;
font-size:15px;
text-shadow:0 1px 1px white;
}
a{
text-decoration:underline;
color:#555;
-webkit-transition: all .8s linear;
-moz-transition: all .8s linear;
-o-transition: all .8s linear;
-ms-transition: all .8s linear;
transition: all .8s linear;
}
a:hover{
color:#222;
}
h1{
font-size:2.3em;
}
h2{
font-size:1.8em;
}
h3{
font-size:1.5em;
}
h1#titulo{
color: #555;
float: right;
font-size:3em;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: all 1s linear;
-moz-transition: all 1s linear;
-o-transition: all 1s linear;
-ms-transition: all 1s linear;
transition: all 1s linear;
position: relative;
text-align:center;
text-shadow:0 2px 1px white;
top:10px;
}
#avatar:hover ~ h1#titulo{
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
top:50px;
}
input, textarea{
background:#f9f9f9;
border:1px solid #bbb;
-webkit-box-shadow:inset 0 1px 2px #ddd,0 1px 1px #ddd;
-moz-box-shadow:inset 0 1px 2px #ddd,0 1px 1px #ddd;
box-shadow:inset 0 1px 2px #ddd,0 1px 1px #ddd;
color: #777!important;
outline:none;
padding:3px;
}
input:focus, textarea:focus{
-webkit-box-shadow:inset 0 1px 2px #ddd;
-moz-box-shadow:inset 0 1px 2px #ddd;
box-shadow:inset 0 1px 2px #ddd;
}
input[type="submit"],input[type="button"],button{
background: #DDD;
-webkit-box-shadow:0 1px 1px #ddd;
-moz-box-shadow:0 1px 1px #ddd;
box-shadow:0 1px 1px #ddd;
}
input[type="submit"]:active,input[type="button"]:active,button:active{
-webkit-box-shadow:inset 0 1px 1px #aaa;
-moz-box-shadow:inset 0 1px 1px #aaa;
box-shadow:inset 0 1px 1px #aaa;
}
table[height ="102"]{
margin: 0 auto;
}
#contenedor{
border:1px solid #bbb;
-webkit-box-shadow:0px 35px 20px -20px rgba(0,0,0,0.2), 0 0 2px rgba(0,0,0,0.1);
-moz-box-shadow:0px 35px 20px -20px rgba(0,0,0,0.2), 0 0 2px rgba(0,0,0,0.1);
box-shadow:0px 35px 20px -20px rgba(0,0,0,0.2), 0 0 2px rgba(0,0,0,0.1);
margin: 100px auto;
min-height:200px;
width:600px;
}
#cabezal{
background:#eee;
-webkit-box-shadow:inset 0 1px 1px white, inset 1px 0 1px white, inset -1px 0 1px white;
-moz-box-shadow:inset 0 1px 1px white, inset 1px 0 1px white, inset -1px 0 1px white;
box-shadow:inset 0 1px 1px white, inset 1px 0 1px white, inset -1px 0 1px white;
overflow: hidden;
padding: 10px;
}
#avatar{
height:100px;
width:100px;
float:left;
}
#avatar img{
background:gray;
-webkit-box-shadow:0 0px 2px #ccc;
-moz-box-shadow:0 0px 2px #ccc;
box-shadow:0 0px 2px #ccc;
height:100px;
width:100px;
-webkit-transition: all .6s linear;
-moz-transition: all .6s linear;
-o-transition: all .6s linear;
-ms-transition: all .6s linear;
transition: all .6s linear;
}
#avatar img:hover{
-webkit-box-shadow:0 0px 8px #777;
-moz-box-shadow:0 0px 8px #777;
box-shadow:0 0px 8px #777;
}
#menu{
float:right;
}
#menu li{
float:left;
padding:4px 8px;
margin:0 10px;
}
#menu li a{
color: #999;
text-decoration:none;
-webkit-transition: all .6s linear;
-moz-transition: all .6s linear;
-o-transition: all .6s linear;
-ms-transition: all .6s linear;
transition: all .6s linear;
}
#menu li a:hover{
color: #777;
}
#contenido{
background-color: #fefefe;
border-top:1px solid #bbb;
clear:both;
color:#555;
min-height:100px;
padding:5px 10px;
}
#contenido p{
padding:8px 0;
}
#counter{
border-top:1px solid #dedede;
text-align:center;
padding-top:3px;
position:relative;
bottom:-40px;
}
#footer{
bottom:20px;
position:relative;
text-align:center;
}
#pre_header {display: none;}
#post_header {display: none;}
#header_container {display: none;}
lli.nav_element{display: none;}
li.nav_element a{display: none;}
h1#title{display: none;}
h2#title span {display: none;}
#title {display: none;}
#nav_container {display:none;}
#container + p{display:none;}
