jsfiddle-console example

https://github.com/eu81273/jsfiddle-console

by Anchit Gupta

HTML

<script src="https://cdn.jsdelivr.net/gh/eu81273/jsfiddle-console/console.js"></script>
<head>
  <title>ABC</title>
</head>
<body>
  <div>
  <section>
    <div class="header">
      <h1>
        HEADER
      </h1>
    </div>
  </section>
  <section>
  <div class="row">
    <div class="col left">
      MENU
      <ul>
        <li>ITEM1</li>
        <li>ITEM2</li>
        <li>ITEM3</li>
        <li>ITEM4</li>
        <li>ITEM5</li>
        <li>ITEM6</li>
      </ul>
    </div>
  <div class="col content">
    <h1>
     CONTENT
    </h1>  
    <p>
    Lorem Ipsum dolor site Lorem Ipsum dolor site Lorem Ipsum dolor site Lorem Ipsum dolor site Lorem Ipsum dolor site Lorem Ipsum dolor site Lorem Ipsum dolor site Lorem Ipsum dolor site Lorem Ipsum dolor site Lorem Ipsum dolor site Lorem Ipsum dolor site Lorem Ipsum dolor site Lorem Ipsum dolor site Lorem Ipsum dolor site Lorem Ipsum dolor site Lorem 
    </p>
  </div>
  <div class="col right">
    <h1>
      AD
    </h1>
    <h1>
       AD
    </h1>
  </div>
  </div>
  </section>
  <section>
    <!-- <div class="footer">
      <h1>
        FOOTER
      </h1>
    </div> -->
    <footer class="footer"><h1>
    FOOTER
    </h1></footer>
  </section>
  </div>
</body>

CSS

.header{
  height: 25%;
  background-color: blue;
}
.footer{
  height: 25%;
}
.menu {
  width: 25%;
  float: left;
}
.content {
  width: 50%;
  float: right;
}
.right {
  width: 25%;
  float: right;
}
h1 {
  text-align: center;
}