CodePen

HTML

            
              <div class="container">
  <div class="grid_12 heading">
    <h3>Button Navigation</h3>
  </div>
  <nav class="nav btn-navbar grid_12"> 
    <ul>
       <li><a href="#" class="btn active">All</a></li>
       <li><a href="#" class="btn">Photography</a></li>
       <li><a href="#" class="btn">Inspirations</a></li>
       <li><a href="#" class="btn">Illustrations</a></li>
     </ul>
  </nav>
  <div class="grid_12 heading">
    <h3>Portfolio / Product Posts</h3>
  </div>
  <div class="grid_12">
    <div class="inner_container">
      <div class="col_1of3">
        <article class="post">
          <a href="#" class="post-image">
            <img src="http://placehold.it/400x200/efefef" />
          </a>
          <div class="details">
            <div class="actions">
              <a href="#" class="btn btn-secondary btn-round">
                <span class="icon-search"></span>
              </a>           
            </div>
            <h2><a href="#">Scarabaeidae</a></h2>
            <p>Rezonum & Collectoris</p>
            <div class="intents">
              <span class="icon-heart"></span>
              <span class="count">678</span>
            </div>
          </div>
        </article>
      </div>
      <div class="col_1of3">
        <article class="post">
          <a href="#" class="post-image">
            <img src="http://placehold.it/400x200/efefef" />
          </a>
          <div class="details">
            <div class="actions">
              <a href="#" class="btn btn-round btn-grey">
                <span class="icon-attachment"></span>
              </a>           
            </div>
            <h2><a href="#">Mexico</a></h2>
            <p>Game Characters</p>
            <div class="intents">
              <span class="icon-heart"></span>
              <span class="count">577</span>
            </div>
          </div>
        </article>        
      </div>
      <div class="col_1of3">
        <article class="post post-product">
          <a href="#" class="post-image">
            <img src="http://placehold.it/400x200/efefef" />
          </a>
          <div class="details">
            <div class="actions">
              <a href="#" class="btn btn-white btn-round">
                <span class="icon-plus"></span>
              </a>           
            </div>
            <h2><a href="#">Zero Character</a></h2>
            <p>Game Character</p>
            <div class="product-actions">
              <a href="#" class="btn btn-tertiary btn-large btn-caps">Buy it now</a>
              <a href="#" class="download-count">
                <span class="icon-in"></span>
                10
              </a>
            </div>            
            <div class="intents">
              <span class="icon-star"></span>
              <span class="icon-star"></span>
              <span class="icon-star2"></span>
              <span class="icon-star2"></span>
              <span class="icon-star2"></span>
            </div>
          </div>
        </article>
      </div>
    </div>
  </div>
  <div class="grid_12 heading">
    <h3>Blog Post</h3>
  </div>
  <div class="grid_12">
    <article class="post post-blog">
      <a href="#" class="post-image">
        <img src="http://placehold.it/960x250/efefef" />
      </a>
      <div class="details">
        <h2><a href="#">iOS Game / Slots</a></h2>
        <div class="meta">
          <p>Written by <strong>Mike | Creative Mints</strong> <span class="verified"></span></p>
        </div>
        <p>Get your coins ready, it's slots time! Check out the attachment for instant jackpot! :) <br />___<br /><br />P.S The game concept is for sale, please contact me if you're interested.</p>
        <div class="btn-group" data-grouptype="OR">
          <a href="#" class="btn btn-primary btn-large btn-caps">Like it now</a>
          <a href="#" class="btn btn-secondary btn-large btn-caps">Learn More</a>
        </div>
        <div class="intents">
          <span class="icon icon-heart"></span>
          <span class="count">1,056</span>
          <span class="icon icon-link"></span>
          <span class="count">14,854</span>
        </div>
      </div>
    </article> 
  </div>
  <div class="grid_12 heading">
    <h3>Slider</h3>
  </div>
  <div class="grid_12">
    <div class="slider flexslider">
      <ul class="slides">
        <li>
          <img src="http://placehold.it/960x300/a1d36e/ffffff&text=Slider Example" alt="" />
        </li>
        <li>
          <img src="http://placehold.it/960x300/4fc1e9/ffffff&text=Slider Example" alt="" />
        </li>
      </ul>
    </div>
  </div>
  <div class="grid_4">
    <div class="heading">
      <h3>Weather Widget</h3>
    </div>
    <section class="widget weather">
      <header class="header header-tertiary">
        <h2>4&#176;C</h2>
        <div class="weather-icon-shadow">
          <span class="icon-droplets"></span>
        </div>
        <div class="weather-icon">
          <span class="icon-droplets"></span>
        </div>
      </header>
      <article>
        <ul>
          <li class="day">
            <div class="inner_container">
              <div class="col_4of5">
                <span class="image">
                  <img src="http://placehold.it/50x50/f2f2f2" />
                </span>                
                <span class="day-title">Mon</span><br />
                <span class="temp">30&#176;</span>
              </div>
              <div class="col_1of5 day-icon">
                <span class="icon-sun"></span>
              </div>
            </div>
          </li>
          <li class="day">
            <div class="inner_container">
              <div class="col_4of5">
                <span class="image">
                  <img src="http://placehold.it/50x50/f2f2f2" />
                </span>                
                <span class="day-title">Tues</span><br />
                <span class="temp">15&#176;</span>
              </div>
              <div class="col_1of5 day-icon">
                <span class="icon-sun"></span>
              </div>
            </div>
          </li>
        </ul>
      </article>
    </section>
  </div>
  <div class="grid_8">
    <div class="heading">
      <h3>Misc</h3>
    </div>
    <div class="inner_container">
      <div class="col_1of3">
        <a href="#" class="btn btn-primary btn-large btn-block btn-caps">Button one</a>
      </div>
      <div class="col_1of3">
        <a href="#" class="btn btn-secondary btn-large btn-block btn-caps">Button two</a>
      </div>
      <div class="col_1of3">
        <a href="#" class="btn btn-tertiary btn-large btn-block btn-caps">Button three</a>
      </div>
    </div>
    <div class="tags">
      <a href="#" class="btn btn-quaternary btn-caps">Summer</a>
      <a href="#" class="btn btn-quaternary btn-caps">Hot</a>
      <a href="#" class="btn btn-quaternary btn-caps">Party</a>
      <a href="#" class="btn btn-quaternary btn-caps active">Musical</a>
    </div>
    <div class="social">
      <div class="inner_container">
        <div class="col_1of3">
          <a href="#" class="btn btn-facebook btn-large btn-caps btn-block">Facebook <span class="icon-facebook"></span></a>
        </div>
        <div class="col_1of3">
          <a href="" class="btn btn-twitter btn-large btn-caps btn-block">Twitter <span class="icon-twitter"></span></a>
        </div>
        <div class="col_1of3">
          <a href="" class="btn btn-dribbble btn-large btn-caps btn-block">Dribbble <span class="icon-dribbble"></span></a>
        </div>
      </div>
    </div>
    <div class="feedback">
      <article class="post">
        <div class="details">
          <span class="image"><img src="http://placehold.it/50x50/f2f2f2" /></span>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A rem libero tempore fugit nulla laborum numquam obcaecati ab dignissimos? Velit minima debitis quo repudiandae ipsum vitae eveniet excepturi aperiam. Qui?</p>
          <div class="meta">
            <span class="icon-star"></span>
            <span class="icon-star"></span>
            <span class="icon-star2"></span>
            <span class="icon-star2"></span>
            <span class="icon-star2"></span>
          </div>
        </div>
      </article>
    </div>
  </div>
  <div class="grid_12 heading">
    <h3>Widgets</h3>
  </div>
  <div class="grid_6">
    <section class="widget twitter">
      <header class="header header-twitter">
        <h3>Twitter feeds</h3>
        <div class="background-icon"><span class="icon-twitter"></span></div>
      </header>
      <div class="actions">
        <a href="#" class="btn btn-twitter btn-round"><span class="icon-cw"></span></a>
      </div>
      <article>
        <ul>
          <li>
            <div class="inner_container">
              <div class="col_1of5">
                <span class="avatar"><img src="http://placehold.it/50x50/f2f2f2/f2f2f2" alt="" /></span>
              </div>
              <div class="col_4of5">
                <p class="message"><strong>Ionut Zamfir</strong> is following you.</p>
              </div>
            </div>           
          </li>
          <li>
            <div class="inner_container">
              <div class="col_1of5">
                <span class="avatar"><img src="http://placehold.it/50x50/f2f2f2/f2f2f2" alt="" /></span>  
              </div>
              <div class="col_4of5">
                <p class="message">
                    <strong>Bill S Kenney</strong> added a comment on your tweet. “Hey bro like you liked mine works follow me here to keep updated!”     
                </p>
              </div>
            </div>            
          </li>
        </ul>
      </article>
    </section>
  </div>
  <div class="grid_6">
    <section class="widget storage">
      <header class="header header-quaternary">
        <h3>Cloud Storage</h3>
        <div class="background-icon"><span class="icon-cloud"></span></div>
      </header>
      <article>
        <ul>
          <li>
            Unlimited Space
          </li>
          <li>
            1 Month History
          </li>
          <li class="active">
            500 GB of Space
          </li>
          <li>
            Premium Sources
          </li>
        </ul>
        <div class="meta">Free 30 day trial</div>
      </article>
    </section>
  </div>
  <div class="grid_12 heading">
    <h3>Alerts</h3>
  </div>
  <div class="grid_12">
    <div class="alert alert-success">
      <span class="icon-checkmark"></span>
      Get your coins ready, it's slots time! Check out the attachment for instant jackpot! :)
      <a href="#" class="close"><span class="icon-cross"></span></a>
    </div>
    <div class="alert alert-info">
      <span class="icon-exclamation"></span>
      Get your coins ready, it's slots time! Check out the attachment for instant jackpot! :)
      <a href="#" class="close"><span class="icon-cross"></span></a>
    </div>
  </div>
</div>
<footer></footer>

            
          
!

CSS

            
              $primary: #a1d36e;
$secondary: #6ad1dd;
$tertiary: #fc6e51;
$quaternary: #48cfad;

* { box-sizing: border-box; }
img { max-width: 100%; height: auto; vertical-align: sub; }
a { 
  text-decoration: none; 
  color: rgba(105,105,105,.88);
  transition: color .3s ease;
  &:hover {
    color: #fc6e51;
  }
}
body {
  font-family: 'Open Sans', sans-serif;  
  background: #f9f9f9;
}

.flexslider {
  border: none;
  box-shadow: none;
}
.flex-direction-nav a {
  background: url(http://flexslider.woothemes.com/images/bg_direction_nav.png) no-repeat 0 0;
  width: 30px;
  height: 30px;
  margin: -20px 0 0;
  display: block;
  position: absolute;
  top: 50%;
  cursor: pointer;
  text-indent: -9999px;
  opacity: 0;
  -webkit-transition: all .3s ease;
  &:before {
    content: '';
  }
}
.flex-direction-nav .flex-next {
  background-position: 100% 0;
  right: -36px;
  text-align: left;
  &:before {
    content: '';
  }
}


.heading {
  h3 {
    font-weight: 300;
    color: #888888;
  }
}

.nav {
  ul {
    margin: 0; 
    padding: 0;
  }
  li {
    list-style: none;
    margin: 0;
  }
}

.btn-navbar {
  margin-top: 10px;
  margin-bottom: 10px;
  li {
    float: left;
    margin: 0 5px;
    &:first-child {
      margin-left: 0;
    }
  }
}

.btn {
  display: inline-block;
  padding: 6px 14px;
  background: #f2f2f2;
  border-radius: 3px;
  font-size: (13/16) + em;
  color: #b9bcbc;
  transition: background .3s ease, color .3s ease;
  &:hover {
    background: darken(#f2f2f2, 5%);
    color: darken(#b9bcbc, 15%);
  }
  &.btn-primary {
    background: $primary;
    color: #fff;
    &:hover, &.active {
      background: darken($primary, 5%);
    }
  }
  &.btn-secondary {
    background: $secondary;
    color: #fff;
    &:hover, &.active {
      background: darken($secondary, 5%);
    }
  }
  &.btn-tertiary {
    background: $tertiary;
    color: #fff;
    &:hover, &.active {
      background: darken($tertiary, 5%);
    }
  }   
  &.btn-quaternary {
    background: $quaternary;
    color: #fff;
    &:hover, &.active {
      background: darken($quaternary, 5%);
    }
  }
  &.btn-white {
    background: #fff;
    &:hover {
      background: #fafafa;
    }
  }
  &.btn-grey {
    background: #dddddd;
    &:hover {
      background: #cccccc;
    }
  }
  &.btn-large {
    padding: 12px 28px;
  }
  &.btn-caps {
    text-transform: uppercase;
  }
  &.btn-block {
    display: block;
    width: 100%; 
    text-align: center;
  }
}

.btn-group {
  position: relative;
  display: inline-block;
  margin: 10px 0;
  &:before {
    content: attr(data-grouptype);
    color: #999;
    display: block;
    font-size: (13/16) + em;
    width: 19px; height: 19px;
    padding: 5px;
    border-radius: 50%;
    background: #fff;
    position: absolute;
    left: 50%;
    top: 6px;
    margin-left: -18px;
  }
  a + a {
    margin-left: 5px;  
  }
}

.btn-navbar {
  .btn {
    font-size: (11/16) + em;  
  }
  .active {
    background: #6ad1dd;
    color: #fff;
    &:hover {
      background: darken(#6ad1dd, 5%);
    }
  }
}

.post {
  font-family: 'Source Sans Pro', sans-serif;
  box-shadow: 0 2px 0 rgba(204,204,204,.15);
  margin-bottom: 20px;
  .post-image{ 
    display: block;
  }
  .icon-attachment {
    color: #fff;  
  }
  .details {
    position: relative;
    background: #fff;
    text-align: center;
    padding: 0 10px 10px;
    h2 {
      font-size: (14.5/16) + em;
      font-weight: 600;
      color: #696969;
      margin: 0;
      padding: 5px 0;
    }
    p {
      font-size: (13/16) + em;
      color: #aaaaaa;
      margin: 0 0 5px;
      padding: 0;
    }
    .intents {
      text-align: right;
      position: absolute;
      top: 10px;
      right: 10px;
      font-size: (11/16) + em;
      color: #aaaaaa;
      line-height: 14px;
      [class*="icon-"] {
        font-size: 14px;
      }
      .count {
        line-height: 14px;
        display: inline-block;
        position: relative;
        top: -3px;
        margin: 0 5px;
      }
      .icon-star {
        color: $tertiary;  
      }
    }
  }  
  .actions {
    height: 20px;
    [class*="icon-"] {
      font-size: 18px;
      font-weight: normal;
    }
    .btn-round {
      position: relative;
      border-radius: 50%; 
      padding: 10px 0;
      width: 38px;
      height: 38px;
      top: -19px;
      text-align: center;
    }
  }
  &.post-blog {
    .details {
      font-family: 'Open Sans', sans-serif;
      padding: 10px 20px;
      text-align: left;  
      h2 {
        font-size: (22/16) + em;
        font-weight: 300;
      }
      strong {
        color: #888888;  
      }
    }
  }
  &.post-product {
    .details {
      text-align: left;
      padding: 0 20px 20px;
    }
    .product-actions {
      margin: 20px 0 0;
    }
    .download-count {
      margin: 0 20px;
    }
  }
}

.slider {
  img { 
    border-radius: 3px;
  } 
}

.widget {
  font-family: 'Source Sans Pro', sans-serif;
  box-shadow: 0 2px 0 rgba(204,204,204,.15);
  margin-bottom: 20px;
  border-radius: 0 0 3px 3px;
  background: #fff;
  position: relative;
  .header {
    height: 100px;
    border-radius: 3px 3px 0 0;
    font-size: (20/16) + em;
    font-weight: 600;
    color: #fff;
    line-height: 100px;
    padding: 0 20px;
    overflow: hidden;
      position: relative;
    h2 {
      margin: 0;  
    }
    h3 {
      font-size: (11/16) + em;
      text-transform : uppercase;
      margin: 0;
      line-height: 100px;
      text-align: center;
      font-weight: 300;
    }
    &.header-tertiary {
      background: $tertiary;
    }
    &.header-quaternary {
      background: $quaternary;
    }
    &.header-twitter {
      background: #55acee;
    }
    .background-icon {
      [class*="icon-"]{ 
        color: rgba(0,0,0,.05);
        position: absolute;
        top: -20px;
        left: -40px;
        font-size: (120/16) + em;
      }
    }
  }
  .actions {
    height: 20px;
    text-align: center;
    [class*="icon-"] {
      font-size: 18px;
      font-weight: normal;
    }
    .btn-round {
      position: relative;
      border-radius: 50%; 
      padding: 10px 0;
      width: 38px;
      height: 38px;
      top: -19px;
      text-align: center;
    }
    .btn-twitter {
      background: #55acee;
      color: #fff;
      &:hover {
        background: darken(#55acee, 5%);  
      }
    }
  }
}

.weather {
  .weather-icon {
    position: absolute;
    right: 20px;
    top: 35px;
    font-size: (20/16) + em;
    line-height: 1em;
  }
  .weather-icon-shadow {
    position: absolute;
    color: rgba(0,0,0,0.05);
    font-size: (100/16) + em;
    top: -20px; right: -20px;
    -webkit-transform: rotate( -20deg );
  }
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .day {
    padding: 20px 30px;
    border-bottom: 1px solid #f2f2f2;
    color: #888;
    font-family: 'Source Sans Pro', sans-serif;
    &:last-child {
      border-bottom: none;
    }
  }
  .image {
    display: block;
    float: left;
    margin-right: 10px;
  }
  .day-title {
    text-transform: uppercase;
    color: #555;
    font-weight: 600;
  }
  .day-icon {
    line-height: 50px;
    color: #aaaaaa;
    font-size: (20/16) + em;
  }
}

.twitter {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li {
    border-bottom: 1px solid #f2f2f2;
    padding: 20px 30px;
    &:last-child {
      border-bottom: none;
    }
  }
  .avatar {
    margin-right: 10px;
    img { border-radius: 50%; }
  }
  .message {
    display: inline-block;
    margin-top: 12px;  
    font-size: (13/16) + em;
    color: #999999;
    strong { color: #555555; }
  }
}

.storage {
  .meta {
    text-align: right;
    text-transform: uppercase;
    font-size: (14/16) + em;
    font-weight: 300;
    color: #888888;
    padding: 10px 20px 20px;
  }
  ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  li {
    padding: 20px 30px 20px 20px;
    border-bottom: 1px solid #f2f2f2;
    color: #999999;
    &:last-child {
      border-bottom: none;  
    }
    &:before {      
      content: '';
      width: 20px; height: 20px;
      background: #f2f2f2;
      border-radius: 50%;
      display: inline-block;
      position: relative;
      top: 5px;
      margin-right: 10px;
    }
    &.active {
      color: #555555;
      &:before{
        content: '\e60c';
        font-family: icomoon;
        background: $quaternary;
        color: #fff;
        box-sizing: border-box;
        padding: 2px;
      }
    }
  }
}

.tags { 
  margin: 10px 0;
}

.social {
  margin-bottom: 10px;
  [class*="icon-"]{
    margin-left: 10px;
    display: inline-block;
  }
  .btn {
    color: #fff;
  }
  .btn-facebook {
    background: #3b5998;
    color: #fff;
    &:hover, &.active {
      background: darken(#3b5998, 5%);
    }
  }
  .btn-twitter {
    background: #55acee;
    color: #fff;
    &:hover, &.active {
      background: darken(#55acee, 5%);
    }
  }
  .btn-dribbble {
    background: #ea4c89;
    color: #fff;
    &:hover, &.active {
      background: darken(#ea4c89, 5%);
    }
  }
}

.feedback {
  .details {
    padding: 20px;
    text-align: left;
    p{
      font-size: (14/16) + em;           
    }
    .image {
      float: left;
      margin-right: 10px;
    }
    .meta {
      text-align: right;
      color: #cccccc;
      font-size: (20/16) + em;  
      .icon-star {
        color: #fecd5f;  
      }
    }
  }
}

.alert {
  background: #FCF8E3;
  padding: 15px 0 15px 15px;
  margin-bottom: 10px;
  font-size: (13/16) + em;
  color: #888;
  border-radius: 3px;
  position: relative;
  .icon-checkmark, .icon-exclamation {
    display: inline-block;
    margin-right: 10px;
  }
  .close {
    background: rgba(0,0,0,.1);
    display: block;
    position: absolute;
    right: 0; top: 0; bottom: 0;
    border-radius: 0 3px 3px 0;
    padding: 10px 30px;
    [class*="icon-"]{
      font-size: (30/16) + em;
      color: #fff;
    }
  }
  &.alert-success {
    background: $primary;
    color: #fff;
  }
  &.alert-info {
    background: $secondary;
    color: #fff;
  }
}

.verified {
  &:before {     
    content: '\e60c';
    font-family: icomoon;
    width: 20px; height: 20px;
    border-radius: 50%;
    display: inline-block;
    margin-left: 10px;
    background: $primary;
    color: #fff;
    box-sizing: border-box;
    padding: 3px;
  }
  &.active {
    &:before{
    }
  }
}

footer {
  height: 100px;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              $(document).ready(function(){
  $('.flexslider').flexslider({
    controlNav: false
  });  
});
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................