HTML, CSS and JavaScript playground

<!DOCTYPE html>
<html lang="en">
  <head>
	<meta charset="utf-8">
    <title>
      Liveweave
    </title>
    
    
    
    
    
    
    
    <style type="text/css">    
      @charset"UTF-8";
      /* CSS Document */
    
    Html, body {
      padding: 0;
      margin: 0;
      height: 100%;
      font-family: Tahoma, Geneva, sans-serif;
      background: rgb(255,255,255);
      /* Old browsers */
      /* IE9 SVG, needs conditional override of 'filter' to 'none' */
      
      background: url(data:image/svg+xml;
      base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI1MyUiIHN0b3AtY29sb3I9IiNmNmY2ZjYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZjdmN2Y3IiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
      background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 53%, rgba(247,247,247,1) 100%);
      /* FF3.6+ */
      background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(255,255,255,1)), color-stop(53%, rgba(246,246,246,1)), color-stop(100%, rgba(247,247,247,1)));
      /* Chrome,Safari4+ */
      background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 53%, rgba(247,247,247,1) 100%);
      /* Chrome10+,Safari5.1+ */
      background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 53%, rgba(247,247,247,1) 100%);
      /* Opera 12+ */
      background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 53%, rgba(247,247,247,1) 100%);
      /* IE10+ */
      background: radial-gradient(ellipse at center, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 53%, rgba(247,247,247,1) 100%);
      /* W3C */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f7f7f7', GradientType=1 );
      /* IE6-8 fallback on horizontal gradient */
    }
    #header {
      width: 100%;
      height: 60px;
      border-top: solid 4px #00539E;
    }
    #logo {
      position: absolute;
      left: 20px;
      top: 35px;
      color: #000;
      font-size: 20px;
    }
    #header-text {
      width: 400px;
      position: absolute;
      top: 70px;
      left: 20px;
      font-size: 12px;
      font-weight: 300;
      color: #333;
    }
    /* mainmenu */
    
    #mainmenu {
      width: 100%;
      margin-right: 20px;
      /* min-height: 180px;
      */
      padding-bottom: 20px;
      margin-top: -52px;
      /* padding-top: -42px;
      */
      overflow: hidden;
    }
    #mainmenu ul {
      list-style: none;
      margin: 0;
      float: right;
      color: #FFF;
    }
    #mainmenu ul li {
      display: inline-block;
      float: left;
      width: 140px;
      line-height: 18px;
    }
    #mainmenu>ul>li {
      margin-left: 20px;
    }
    #mainmenu ul li a {
      font-size: 12px;
      display: block;
      text-decoration: none;
    }
    #mainmenu ul li a, #mainmenu ul ul:hover li a {
      color: #333;
      padding-left: 4px;
      letter-spacing: 1px;
      -moz-transition-property: all, -moz-transform;
      -moz-transition-duration: .4s, .4s, .4s, .4s;
      -moz-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
      -ms-transition-property: all, -ms-transform;
      -ms-transition-duration: .4s, .4s, .4s, .4s;
      -ms-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
      -o-transition-property: all, -o-transform;
      -o-transition-duration: .4s, .4s, .4s, .4s;
      -o-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
      -webkit-transition-property: all, -webkit-transform;
      -webkit-transition-duration: .4s, .4s, .4s, .4s;
      -webkit-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
      transition-property: all, transform;
      transition-duration: .4s, .4s, .4s, .4s;
      transition-timing-function: ease-out, ease-in, linear, ease-in-out;
    }
    #mainmenu ul ul li a:hover, #mainmenu ul ul li.current-menu-item a {
      color: #005EBC;
      -moz-transition-property: all, -moz-transform;
      -moz-transition-duration: .4s, .4s, .4s, .4s;
      -moz-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
      -ms-transition-property: all, -ms-transform;
      -ms-transition-duration: .4s, .4s, .4s, .4s;
      -ms-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
      -o-transition-property: all, -o-transform;
      -o-transition-duration: .4s, .4s, .4s, .4s;
      -o-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
      -webkit-transition-property: all, -webkit-transform;
      -webkit-transition-duration: .4s, .4s, .4s, .4s;
      -webkit-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
      transition-property: all, transform;
      transition-duration: .4s, .4s, .4s, .4s;
      transition-timing-function: ease-out, ease-in, linear, ease-in-out;
    }
    p {
      font-size: 13px;
      color: #333;
      font-weight: 300;
    }
    h1 {
      font-size: 30px;
      letter-spacing: 1px;
      color: #0064C5;
      /* display: inline-block;
      */
      margin-bottom: 0;
    }
    h2 {
      font-size: 22px;
      letter-spacing: 1px;
      color: #BBB;
      /* display: inline-block;
      */
      margin-bottom: 0;
    }
    H5 {
      text-transform: uppercase;
      letter-spacing: 1px;
      margin-bottom: 5px;
      padding-left: 4px;
      font-size: 11px;
      border-bottom: 1px dotted #666;
      background: rgb(29,115,196);
      /* Old browsers */
      /* IE9 SVG, needs conditional override of 'filter' to 'none' */
      
      background: url(data:image/svg+xml;
      base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFkNzNjNCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDY0YzUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
      background: -moz-linear-gradient(top, rgba(29,115,196,1) 0%, rgba(0,100,197,1) 100%);
      /* FF3.6+ */
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(29,115,196,1)), color-stop(100%, rgba(0,100,197,1)));
      /* Chrome,Safari4+ */
      background: -webkit-linear-gradient(top, rgba(29,115,196,1) 0%, rgba(0,100,197,1) 100%);
      /* Chrome10+,Safari5.1+ */
      background: -o-linear-gradient(top, rgba(29,115,196,1) 0%, rgba(0,100,197,1) 100%);
      /* Opera 11.10+ */
      background: -ms-linear-gradient(top, rgba(29,115,196,1) 0%, rgba(0,100,197,1) 100%);
      /* IE10+ */
      background: linear-gradient(to bottom, rgba(29,115,196,1) 0%, rgba(0,100,197,1) 100%);
      /* W3C */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1d73c4', endColorstr='#0064c5', GradientType=0 );
      /* IE6-8 */
    }
    div#content-left {
      float: left;
      width: 40%;
    }
    div#content-headline {
      float: right;
      width: 55%;
      padding-right: 50px;
      overflow: auto;
    }
    div#content-right {
      float: right;
      width: 55%;
      max-height: 60%;
      padding-right: 50px;
    }
    div#content-center {
      overflow: hidden;
    }
    /* footer */
    #main_footer {
      clear:both;
      position: fixed;
      background: #cfc8c0;
      height: 46px;
      overflow: hidden;
      display: block;
      bottom:0; width: 100%;
    }
    #main_footer #lien_hot_news {
      background: #e14242 url(pics/hot_news.gif) 50% 0 no-repeat;
      color: #fff;
      font: italic normal 24px Georgia, serif;
      height: 38px;
      width: 145px;
      padding-top: 8px;
      display: block;
      text-align: center;
      float: left;
    }
    #main_footer #lien_hot_news:hover {
      background-color: #e92c26;
    }
    #main_footer #dernier_tweet {
      float: left;
      margin-left: 11px;
      margin-top: 11px;
      background: #fff url(ics/dernier_tweet_gauche.gif) 0 0 no-repeat;
      position: relative;
    }
    #main_footer #dernier_tweet .lien_twitter {
      position: absolute;
      top: 0;
      left: 0;
      width: 30px;
      height: 24px;
      display: block;
    }
    #main_footer #dernier_tweet .inner {
      max-width: 550px;
      background: url(../images/picto/dernier_tweet_droite.gif) right 0 no-repeat;
      padding: 4px 15px 5px 53px;
      height: 15px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    #main_footer #dernier_tweet a {
      color: #75716c;
    }
    #main_footer #dernier_tweet a:hover {
      color: #444;
    }
    #main_footer #dernier_tweet .last_tweet {
      overflow: hidden;
    }
    #main_footer .autres_liens {
      position: absolute;
      right: 12px;
      top: 9px;
      font: italic normal 15px Georgia, serif;
      color: #95897c;
    }
    #main_footer .autres_liens .label {
      float: left;
      padding-right: 3px;
      padding-top: 5px;
    }
    #main_footer .autres_liens a {
      float: left;
      display: block;
      margin-left: 5px;
    }
    #main_footer .autres_liens a img {
      width: 28px;
      height: 28px;
      display: block;
    }
    
  }
    </style>
    
    
  </head>
  
  
  <body>
    <script type="text/javascript">
      $(document).ready(function () {
        $("#MetTileFive").MetTileFive({
          timeInterval: 6000
        }
                                     );
      }
                       );
    </script>
    <div id="header">
    </div>
    <div id="logo">
      My Name
    </div>
    <div id="mainmenu">
      <ul>
        <li>
          <h5>
            Menu I
          </h5>
          <ul>
            <li>
              <a title="" href="">
                Biography
              </a>
              
            </li>
            <li>
              <a title="" href="">
                Publications
              </a>
              
            </li>
          </ul>
          <li>
            <h5>
              Menu 2
            </h5>
            <ul>
              <li>
                <a title="" href="">
                  Demo
                </a>
                
              </li>
              <li>
                <a title="" href="">
                  Features
                </a>
                
              </li>
              <li>
                <a title="" href="">
                  Comparison
                </a>
                
              </li>
            </ul>
          </li>
          <li>
            <h5>
              Menu 3
            </h5>
            <ul>
              <li>
                <a title="" href="">
                  Item 1
                </a>
                
              </li>
              <li>
                <a title="" href="">
                  Item 2
                </a>
                
              </li>
              <li>
                <a title="" href="">
                  Item 3
                </a>
                
              </li>
            </ul>
          </li>
          <li>
            <h5>
              Menu 4
            </h5>
            <ul>
              <li>
                <a title="" href="">
                  ddfd
                </a>
                
              </li>
              <li>
                <a title="" href="">
                  dsfd
                </a>
                
              </li>
            </ul>
          </li>
        </ul>
      </div>
      
      
      <div id="header-text">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut.
      </div>
      
      <div id="content-left">
        <a id="MetTileFive" class="tile-five" href="http://www.facebook.com/jEffectBox" target="_blank">
          <div>
            <label>
              Lorem Ipsum
            </label>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit... nisi ut aliquip ex ea commodo consequat.
            </p>
          </div>
          <div>
            <label>
              Ipsum
            </label>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit... laboris nisi ut aliquip ex ea commodo consequat.
            </p>
          </div>
          <div>
            <label>
              Lorem
            </label>
            <p>
              Lorem ipsum dolor sit amet, consectetur a... laboris nisi ut aliquip ex ea commodo consequat.
            </p>
          </div>
        </a>
      </div>
      <div id="content-headline">
        <h1>
          Novitates autem si spem
        </h1>
      </div>
      <div id="content-right">
        <p>
          Novitates autem si spem adferunt, ut tamquam in herbis non fallacibus
          fructus appareat, non sunt illae quidem repudiandae, vetustas tamen suo
          loco conservanda; maxima est enim vis vetustatis et consuetudinis. Quin
          in ipso equo, cuius modo feci mentionem, si nulla res impediat, nemo est,
          quin eo, quo consuevit, libentius utatur quam intractato et novo. Nec vero
          in hoc quod est animal, sed in iis etiam quae sunt inanima, consuetudo
          valet, cum locis ipsis delectemur, montuosis etiam et silvestribus, in
          quibus diutius commorati sumus.
        </p>
        <h2>
          This is a sub-title
        </h2>
        <p>
          Ultima Syriarum est Palaestina per intervalla magna protenta, cultis abundans
          terris et nitidis et civitates habens quasdam egregias, nullam nulli cedentem
          sed sibi vicissim velut ad perpendiculum aemulas: Caesaream, quam ad honorem
          Octaviani principis exaedificavit Herodes, et Eleutheropolim et Neapolim
          itidemque Ascalonem Gazam aevo superiore exstructas.
        </p>
        <p>
          Itaque verae amicitiae difficillime reperiuntur in iis qui in honoribus
          reque publica versantur; ubi enim istum invenias qui honorem amici anteponat
          suo? Quid? Haec ut omittam, quam graves, quam difficiles plerisque videntur
          calamitatum societates! Ad quas non est facile inventu qui descendant.
          Quamquam Ennius recte. END END END
        </p>
      </div>
      <footer id="main_footer">
        
        <a href="#_" id="lien_hot_news">
          Hot News
        </a>
        <div id="dernier_tweet">
          <a href="https://twitter.com/" class="lien_twitter" target="_blank">
          </a>
          <div class="inner">
            
          </div>
        </div>
        <div class="autres_liens">
          
          <div class="label">
            Check us also on :
          </div>
          <a href="http://" target="_blank">
            <img src="pics/footer_facebook_2.png" alt="facebook" />
          </a>
          <a href="http:/" target="_blank">
            <img src="pics/footer_youtube_2.png" alt="twitter" />
          </a>
          <a href="http://" target="_blank">
            <img src="pics/footer_slideshare_2.png" alt="slideshare" />
          </a>
        </div>
      </footer>
      
    </body>
  </html>
  
  
</html>

Check out our Python playground!