<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" style="border: 1px solid green;">
</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-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-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-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-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-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">
<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°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°</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°</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>
$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(https://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;
}
$(document).ready(function(){
$('.flexslider').flexslider({
controlNav: false
});
});
Also see: Tab Triggers