[Diseño Css] Portafolio simple By Buzzdungeon!

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

</p>
   </div>
</div>
<p id="footer">Creado por <a href="http://buzzdungeon.es.tl">Buzzdungeon</a></p>

</style>
<link href="http://meyerweb.com/eric/tools/css/reset/reset.css" rel="stylesheet" type="text/css">
<style type="text/css">
      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;}