<div id="layout">
  <header>
    <h1><a href="#">Standard Blog</a></h1>
  </header>
  
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Archives</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
  
  <section id="main">
    
    <article>
      <header>
        <h2><a href="#">Some Awesome Title</a></h2>
      </header>
      <section>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a nisi metus. Morbi accumsan laoreet elit id ultrices. Fusce sit amet dignissim dolor. Maecenas convallis congue purus sed mattis. Sed velit orci, blandit varius fringilla nec, suscipit pretium sapien. Integer blandit blandit porta. Fusce ut gravida orci. Nulla eleifend mi id erat accumsan aliquam. In hac habitasse platea dictumst. Nulla congue sapien in nibh mollis nec laoreet ante bibendum.</p>
      </section>
    </article>
    
    <article>
      <header>
        <h2><a href="#">Another Awesome Title</a></h2>
      </header>
      <section>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a nisi metus. Morbi accumsan laoreet elit id ultrices. Fusce sit amet dignissim dolor. Maecenas convallis congue purus sed mattis. Sed velit orci, blandit varius fringilla nec, suscipit pretium sapien. Integer blandit blandit porta. Fusce ut gravida orci. Nulla eleifend mi id erat accumsan aliquam. In hac habitasse platea dictumst. Nulla congue sapien in nibh mollis nec laoreet ante bibendum.</p>
      </section>
    </article>
    
    <article>
      <header>
        <h2><a href="#">Yet Another Awesome Title</a></h2>
      </header>
      <section>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a nisi metus. Morbi accumsan laoreet elit id ultrices. Fusce sit amet dignissim dolor. Maecenas convallis congue purus sed mattis. Sed velit orci, blandit varius fringilla nec, suscipit pretium sapien. Integer blandit blandit porta. Fusce ut gravida orci. Nulla eleifend mi id erat accumsan aliquam. In hac habitasse platea dictumst. Nulla congue sapien in nibh mollis nec laoreet ante bibendum.</p>
      </section>
    </article>

  </section>
  
  <section class="sidebar">
    
    <aside>
      <header>
        <p>Sidebar Title 1</p>
      </header>
      <section>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a nisi metus. Morbi accumsan laoreet elit id ultrices. Fusce sit amet dignissim dolor. Maecenas convallis congue purus sed mattis. Sed velit orci, blandit varius fringilla nec, suscipit pretium sapien.</p>
      </section>
    </aside>
    
    <aside>
      <header>
        <p>Sidebar Title 2</p>
      </header>
      <section>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a nisi metus. Morbi accumsan laoreet elit id ultrices. Fusce sit amet dignissim dolor. Maecenas convallis congue purus sed mattis. Sed velit orci, blandit varius fringilla nec, suscipit pretium sapien.</p>
      </section>
    </aside>
  
    <aside>
      <header>
        <p>Sidebar Title 3</p>
      </header>
      <section>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a nisi metus. Morbi accumsan laoreet elit id ultrices. Fusce sit amet dignissim dolor. Maecenas convallis congue purus sed mattis. Sed velit orci, blandit varius fringilla nec, suscipit pretium sapien.</p>
      </section>
    </aside>
  
  </section>
   
  <footer id="copyright">
    <p>Copyright © 2012 All Rights</p>
  </footer>
</div>
@text_color: #333;
@text_color_title: #999;
@text_color_title_other: #c9697e;
@text_font: "Oswald", sans-serif;
@text_font_title: "Headland One", Georgia, serif;

/*
These font families are available:
font-family: "Headland One", serif;
font-family: "Oswald", sans-serif;
*/
* { box-sizing: border-box; }
body {
  font-size:14px;
  line-height:24px;
  font-family:@text_font_title;
  color: @text_color;
  background:transparent url('https://subtlepatterns.com/patterns/45degreee_fabric.png');
}

#layout {
  width:80%;
  margin:0 auto;
  position:relative;
  padding:1em;
  background:rgba(0,0,0, .05);
}

header {
  font-family: @text_font;
  h1 {
    a {
      font-size:3em;
      line-height:3em;
      color:@text_color_title;
      text-decoration: none;
      &:hover {
        text-decoration:underline;
      }
    }
  }
}

nav {
  ul {
    display: table;
    width:100%;
    li {
      display:table-cell;
      text-align:center;
      padding:0 0 15px 15px;
      &:first-child {
        padding-left:0;
      }
      a {
        padding:0.75em 0;
        text-transform:uppercase;
        text-decoration:none;
        font-family:@text_font;
        display:block;
        width:auto;
        color:lighten(@text_color_title, 30%);
        background:rgba(0,0,0, .40);
        &:hover {
          color:lighten(@text_color_title, 50%);
          background:rgba(0,0,0, .15);
        }
      }
    }
  }
}

section#main {
  margin-bottom:15px;
  padding-right:15px;
  float:left;
  width:66.66%; 
  background:rgba(0,0,0, .10);
  article {
    padding:1em;
    header {
      h2 {
        a{
          color:@text_color_title_other;
          font-size:1.5em;
          text-decoration: none;
          &:hover {
            text-decoration:underline;
          }
        }
      }
    }
  }
  aside {
    float:right;
    width:33.33%;
    padding:1em;
    background: rgba(0,0,0, .10);
  }
}

section.sidebar {
  margin-bottom:15px;
  padding-left:15px;
  float:left;
  width:33.33%; 
  aside {
    color: lighten(@text_color, 25%);
    padding:1em;
    background: rgba(0,0,0, .10);
    header {
      font-size:1.2em;
      color:darken(@text_color_title_other, 20%);
    }
  }
}

footer#copyright {
  clear:both;
  background:rgba(0,0,0, 0.10);
  font-size:.75em;
  p {
    padding:1em;
  }
}
View Compiled
  WebFontConfig = {
    google: { families: [ 'Headland+One::latin', 'Oswald:400,700,300:latin' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })();
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js