<!--- main navs
——————————————————————————————-->
<p>
  <nav class="mint">
	  <li><a href="#">Home</a></li>
	  <li><a href="#">About</a></li>
	  <li><a href="#">Blog</a></li>
	  <li><a href="#">Work</a></li>
	  <li><a href="#">Contact</a></li>
    <input placeholder="Search..." type="text"/>
	</nav>

  <nav class="oran">
	  <li><a href="#">Home</a></li>
	  <li><a href="#">About</a></li>
	  <li><a href="#">Blog</a></li>
	  <li><a href="#">Work</a></li>
	  <li><a href="#">Contact</a></li>
    <input placeholder="Search..." type="text"/>
	</nav>
  
  <nav class="blue">
	  <li><a href="#">Home</a></li>
	  <li><a href="#">About</a></li>
	  <li><a href="#">Blog</a></li>
	  <li><a href="#">Work</a></li>
	  <li><a href="#">Contact</a></li>
    <input placeholder="Search..." type="text"/>
	</nav>
</p>

<!--- main form elements
——————————————————————————————-->
<p>
  <form>
    <input placeholder="Username" type="text"/>
    <input placeholder="Password" type="password"/>
    <button class="mint">Login</button>
  </form>

  <form>
    <input placeholder="Username" type="text"/>
    <input placeholder="Password" type="password"/>
    <button class="blue">Login</button>
  </form>
  
  <form>
    <input placeholder="Username" type="text"/>
    <input placeholder="Password" type="password"/>
    <button class="oran">Login</button>
  </form>
</p>

<!--- main sidebars
——————————————————————————————-->
<p>
  <aside class="mint">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Work</a></li>
    <li><a href="#">Contact</a></li>
  </aside>
  
  <aside class="blue">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Work</a></li>
    <li><a href="#">Contact</a></li>
  </aside>
  
  <aside class="oran">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Work</a></li>
    <li><a href="#">Contact</a></li>
  </aside>
</p>

<!--- main typography
——————————————————————————————-->
<p>
  <article>
    <h1>Header 1</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut adipiscing fringilla tristique. Curabitur interdum risus venenatis magna molestie molestie.</p>
    <h2>Header 2</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut adipiscing fringilla tristique. Curabitur interdum risus venenatis magna molestie molestie.</p>
    <h3>Header 3</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut adipiscing fringilla tristique. Curabitur interdum risus venenatis magna molestie molestie.</p>
    <h4>Header 4</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut adipiscing fringilla tristique. Curabitur interdum risus venenatis magna molestie molestie.</p>
    <h5>Header 5</h5>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut adipiscing fringilla tristique. Curabitur interdum risus venenatis magna molestie molestie.</p>
    <h6>Header 6</h6>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut adipiscing fringilla tristique. Curabitur interdum risus venenatis magna molestie molestie.</p>
  </article>
</p>

<!--- main avatars
——————————————————————————————-->
<p>
  <section>
    <img class="round" src="http://userserve-ak.last.fm/serve/_/3222203/Afroman.jpg"/>
    <img class="circle" src="http://userserve-ak.last.fm/serve/_/3222203/Afroman.jpg"/>
    <img class="square" src="http://userserve-ak.last.fm/serve/_/3222203/Afroman.jpg"/>
  </section>
</p>

<!--- main buttons
——————————————————————————————-->
<section>
  <button class="mint">Button</button>
  <button class="oran">Button</button>
  <button class="blue">Button</button>
</section>
@base: #2a3644;
@blue: #2296cf;
@gray: #c5c5c5;
@mint: #20b9a4;
@oran: #e2764a;
@norm: #ffffff;
@dark: #000000;
@link: rgba(0, 0, 0, .1);

.rounded (@radius: 6px) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
      -ms-border-radius: @radius;
       -o-border-radius: @radius;
          border-radius: @radius;
}

.trans (@transition: .3s) {
  -webkit-transition: all @transition ease-in-out;
     -moz-transition: all @transition ease-in-out;
          transition: all @transition ease-in-out;
 
}

* {
  margin:0;
  padding:0;
  border:none;
  list-style:none;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

body {
  font:15px/1.25 'Open Sans' sans-serif;
  background:@base;
  padding:50px;
  
  @media (max-width: 480px) { 
    padding:10px;
    padding-right:20px;
  }
  
  @media (min-width: 480px) and (max-width: 1000px) {
    padding:20px;
  }
  
  @media (max-width: 780px) {
    padding:20px;
  }
  
  @media (min-width: 1000px) and (max-width: 1130px) {
    padding:20px;
  }
}

// main nav
nav {
  margin-bottom:20px;
  background:@mint;
  .rounded;
  overflow:hidden;
  @media (min-width: 1130px) {
    position:relative;
  }
  @media (min-width: 480px) and (max-width: 1000px) {
    position:relative;
  }
  
  @media (max-width: 780px) {
    position:relative;
  }
  
  @media (min-width: 1000px) and (max-width: 1130px) {
    position:relative;
  }
}

nav > li {
  display:inline-block;
  vertical-align:top;
  
  @media (max-width: 480px) { 
    display:block;
  }
  
  @media (max-width: 780px) {
    display:block;
  }
}

nav > li > a, a:visited {
  display:block;
  padding:20px;
  color:@norm;
  text-decoration:none;
  .trans;
}

nav > li > a:hover {
  .trans;
  background:@link;
}

nav > input {
  float:right;
  margin:13px 13px 0px 0px;
  vertical-align:top;
  padding:10px;
  .rounded;
  .trans;
  background:@link;
  outline:none;
  color:@norm;
  
  @media (max-width: 480px) { 
    width:100%;
    margin:0;
    -webkit-border-radius:0px 0px 0px 0px;
       -moz-border-radius:0px 0px 0px 0px;
            border-radius:0px 0px 0px 0px;
    
  }
  
  @media (max-width: 780px) {
    width:100%;
    margin:0;
    display:none;
    -webkit-border-radius:0px 0px 0px 0px;
       -moz-border-radius:0px 0px 0px 0px;
            border-radius:0px 0px 0px 0px;  
  }
  
  @media (min-width: 480px) and (max-width: 1000px) {
    position:absolute;
    top:0;
    right:0;
  }

  @media (min-width: 1000px) and (max-width: 1130px) {
     position:absolute;
    top:0;
    right:0;
   }
    
  @media (min-width: 1130px) {
    position:absolute;
    top:0;
    right:0;
  }
}

nav > input:focus {
  color:@dark;
  background:@norm;
}

nav > input::-webkit-input-placeholder {
   color: @norm;
}

nav > input:-moz-placeholder { /* Firefox 18- */
   color: @norm;  
}

// nav colors
.mint {
  background:@mint;
}

.oran {
  background:@oran;
}

.blue {
  background:@blue;
}

// main form 
form {
  width:25%;
  display:inline-block;
  margin-right:20px;
  
  @media (max-width: 480px) { 
    width:100%;
    margin-bottom:20px;
  }

  @media (min-width: 480px) and (max-width: 1000px) {
    width:48.3%;
    margin-right:13px;
    margin-bottom:20px;
  }
  
  @media (min-width: 1000px) and (max-width: 1130px) {
    width:48.6%;
    margin-right:13px;
    margin-bottom:20px;
  }
}

form:last-of-type {
  margin-right:0;
}

form > input {
  display:block;
  width:100%;
  margin-bottom:10px;
  padding:15px;
  .rounded;
  .trans;
  outline:none;
}

form > button {
  width:100%;
  padding:20px;
  .rounded;
  .trans;
  color:@norm;
  font-size:15px;
  cursor:pointer;
}

form > button:hover {
  opacity:0.7;
  .trans;
}

// main sidebars
aside {
  width:25%;
  background:@mint;
  margin-top:20px;
  .rounded;
  overflow:hidden;
  display:inline-block;
  margin-right:20px;
  
  @media (max-width: 480px) { 
    width:100%;
    margin-bottom:20px;
  }
  
  @media (min-width: 480px) and (max-width: 1000px) {
    width:30.5%;
  }
  
  @media (min-width: 1000px) and (max-width: 1130px) {
    width:31.1%;
  }
}

aside:last-of-type {
  margin-right:0px;
}

aside > li {
  border-bottom:1px solid @link;
}

aside > li:last-child {
  border-bottom:none;
}

aside > li > a, a:visited {
  display:block;
  color:@norm;
  text-decoration:none;
  padding:10px;
  padding-left:15px;
  .trans;
}

aside > li > a:hover {
  background:@link;
  .trans;
}

article {
  color:@norm;
  width:30%;
  float:left;
  margin-bottom:100px;
  
  @media (max-width: 480px) { 
    width:100%;
  }
 
  @media (min-width: 480px) and (max-width: 1000px) {
    width:100%;
  }
  
  @media (min-width: 1000px) and (max-width: 1130px) {
    width:100%;
  }
}

article > h1, h2, h3, h4, h5, h6 {
  margin-top:3em;
  margin-bottom:0.7em;
}

article > p {
  font-size:15px;
  line-height:1.4em;
}

section {
  text-align:center;
  padding-top:20px;
}

.round, .circle, .square {
  margin-top:20px;
  width:90px;
  border:3px solid @link;
  margin:20px;
}

.round {
  -webkit-border-radius:10px;
     -moz-border-radius:10px;
          border-radius:10px;
}

.circle {
  -webkit-border-radius:100px;
     -moz-border-radius:100px;
          border-radius:100px;
}

section > button {
  display:block;
  margin:0 auto;
  .rounded;
  .trans;
  width:300px;
  padding:20px;
  margin-bottom:20px;
  font-size:20px;
  color:@norm;
  cursor:pointer;
}

section > button:hover {
  opacity:0.7;
  .trans;
}
View Compiled
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