[Diseño Css] Flat Design

      <div class="header-bar">
         <div class="container">
            <ul class="menu">
               <li class="active"><a href="#">Logo</a></li>
               <li><a href="#">Link</a></li>
               <li><a href="#">Link</a></li>
               <li><a href="#">Link</a></li>
            </ul>
         </div>
      </div>
      <div class="header">
         <div class="container">
            <h1 class="title"><a href="#">Titulo</a></h1>
            <div class="adheader"></div>
            <div class="clear"></div>
            <div class="main-menu">
               <ul class="menu">
                  <li><a href="">link</a></li>
                  <li><a href="">link</a></li>
                  <li><a href="">link</a></li>
                  <li><a href="">link</a></li>
                  <li><a href="">link</a></li>
               </ul>
            </div>
         </div>
      </div>
      <div class="content container">
         <div class="grid">
            <div class="widget w3">
               <div class="wheader"><div>Titulo</div></div>
               <div class="clear"></div>
               <div class="wcontent"><div>

   </div>
   </div>
         </div>
         <div class="widget w1">
            <div class="box">
               <div class="wheader"><div>Publicidad</div></div>
               <div class="clear"></div>
               <div class="wcontent ad"></div>
            </div>
            <div class="box">
               <div class="wheader"><div>Titulo</div></div>
               <div class="clear"></div>
               <div class="wcontent"><div>Hola mundo bla bla bla</div></div>
            </div>
         </div>
      </div>
<div class="footer">Diseño creado por <a href="http://buzzdungeon.es.tl" target="_BLANK">Buzzdungeon</a>.</div>
   </div>

</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>$(document).ready(function(){
$('table[height="102"] iframe').appendTo(".adheader");
$("#webme_sky_ad").appendTo(".wcontent.ad");
});</script>
<style>
@media (min-width: 1100px) { .container{ width:1200px!important; } }
   body{
      color: #444;
      background: #e9f0f4;
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   }
   a{
      text-decoration: none;
   }
   h1,h2,h3,h4,h5,h6{
      margin: 10px 0;
   }
   h2{
      font-size: 31px;
   }
   h3{
      font-size: 25px;
   }
   hr{
      border: 0;
      border-top: 1px solid #ddd;
      border-bottom: 1px solid #fafafa;
   }
   .header-bar{
      background: #333;
      height: 40px;
   }
   .container{
      margin: 0 auto;
      width: 900px;
   }
   ul.menu{
      list-style: none;
      margin: 0;
      padding: 0;
   }
   ul.menu li{
      float: left;
   }
   .header-bar ul li a{
      color: #BEBEBE;
      display: block;
      line-height: 36px;
      padding: 0 30px;
      height: 40px;
   }
   .header-bar ul .active a{
      color: #DDD;
      background: #444;
   }
   .header{
      background: #32add6;/*http://lorempixel.com/1366/125/city/*/
      height: 125px;
   }
   h1.title{
      font-weight: normal;
      float:left;
      font-size: 36px;
      height: 50px;
      margin: 0;
      padding: 20px 0;
   }
   h1.title  a{
      color: #FEFEFE;
   }
   .main-menu{
      background: #0099CC;/*rgba(0,153,204,0.3)*/
      font-size: 14px;
      height: 35px;
   }
   .main-menu a{
      color: #EEE;
      display: block;
      height: 35px;
      line-height: 36px;
      padding: 0 30px;
   }
   .clear{
      clear: both;
   }
   .widget{
      margin: 10px 0;
   }
   .widget .wheader{
      background: #31363c;
      color: #EEE;
      height: 30px;
      width: 100%;
   }
   .widget .wheader div{
      padding: 6px;
   }
   .widget .wcontent{
      background: #fff;
      margin: 0;
      min-height: 100px;
      width: 100%;
   }
   .widget .wcontent div{
      padding: 6px;
   }
   [class*="w"]{
      float: left;
      margin-right: 2%;
   }
   [class*="w"]:last-of-type{
      margin-right: 0px;
   }
   .w1{
      width: 23.5%;
   }
   .w2{
      width: 49%;
   }
   .w3{
      width: 74.5%;
   }
   .w4{
      width: 100%;
   }
   .grid:after {
      content: "";
      display: table;
      clear: both;
   }
   button, input[type="submit"], input[type="button"]{
      border:0;
      background: #97a3a4;
      color:#f5f5f5;
      text-align: center;
      height: 30px;
      cursor:pointer;
      padding: 0 20px;
   }
   .button.green{
      background: #23c367;
   }
   .button.red{
      background: #e74a3a;
   }
   .button.blue{
      background: #32add6;
   }
   .button.orange{
      background: #ec8c1c;
   }
   .button.black{
      background: #252525;
   }
   .adheader{
      float:right;
   }
body{ margin:0; }
#webme_sky_ad{ position:relative; }
#webme_sky_ad iframe{
   display:block;
   margin:10px auto;
}
.box{
   margin-bottom:12px;
   overflow:hidden;
}
.footer{
   text-align:center;
   margin:10px 15px;
}
#webme_footer_textlink_dont_hide{
   display:block;
   text-align:center;
   color:#333;
   background:transparent;
}
table[height="102"]{ display:none; }
#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;}