#tabs
%ul
%li<
%a{href: '#tabs-1'}<
%span.fa.fa-shopping-cart>
Shopping
%li<
%a{href: '#tabs-2'}<
%span.fa.fa-cutlery>
Dining
%li<
%a{href: '#tabs-3'}<
%span.fa.fa-music>
Nightlife
%section.tabs-content
%article#tabs-1
%h3< Hot Deals
%span.tagline< Upcoming Sales
%h4< Building a Winter Wardrobe
%p< Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, facere aliquam accusantium, explicabo natus harum incidunt omnis, nemo quidem blanditiis voluptatibus placeat! Iure nulla obcaecati necessitatibus neque recusandae excepturi aliquid.
<!-- Image by Ian Muttoo [CC-BY-SA-2.0 (http://creativecommons.org/licenses/by-sa/2.0)], via Wikimedia Commons, http://commons.wikimedia.org/wiki/File%3AShoppers_on_Dundas%2C_near_Yonge.jpg -->
%img{src: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/203277/shopping.png', alt: 'Shopping'}
.readmore
%a{href: '#'}<
Read more
%span.fa.fa-chevron-right>
%article#tabs-2
%h3< Good Eats
%span.tagline< Local Favorites
%h4< Anticipated Fall Openings
%p< Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, facere aliquam accusantium, explicabo natus harum incidunt omnis, nemo quidem blanditiis voluptatibus placeat! Iure nulla obcaecati necessitatibus neque recusandae excepturi aliquid.
<!-- Image by Serge Melki from Indianapolis, USA [CC-BY-2.0 (http://creativecommons.org/licenses/by/2.0)], via Wikimedia Commons, http://commons.wikimedia.org/wiki/File%3AThe_restaurant_Inside_Marriott_(5531365092).jpg -->
%img{src: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/203277/dining.png', alt: 'Dining'}
.readmore
%a{href: '#'}<
Read more
%span.fa.fa-chevron-right>
%article#tabs-3
%h3< Live Music
%span.tagline< Hidden Gems
%h4< Can't-miss Weekend Events
%p< Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, facere aliquam accusantium, explicabo natus harum incidunt omnis, nemo quidem blanditiis voluptatibus placeat! Iure nulla obcaecati necessitatibus neque recusandae excepturi aliquid.
<!-- Image by 松岡明芳 (松岡明芳) [GFDL (http://www.gnu.org/copyleft/fdl.html) or CC-BY-SA-3.0 (http://creativecommons.org/licenses/by-sa/3.0)], via Wikimedia Commons, http://commons.wikimedia.org/wiki/File%3AKaraoke-Harbin6303733.jpg -->
%img{src: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/203277/nightlife.png', alt: 'Nightlife'}
.readmore
%a{href: '#'}<
Read more
%span.fa.fa-chevron-right>
View Compiled
@import "bourbon";
* {
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
html {
min-height:100%;
}
body {
background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/203277/bg.jpg');
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
}
#tabs {
margin: 1em auto;
width: 450px;
ul {
margin: 0;
padding: 0;
height: 80px;
@include column-count(3);
@include column-gap(0);
@include clearfix;
li {
display: block;
width: 100%;
height: 100%;
background: #f4f4f3;
border-bottom: 1px solid #e5e5e2;
font-family: 'Josefin Sans', sans-serif;
font-weight: 400;
font-size: 1.2em;
letter-spacing: 1px;
text-align: center;
&:first-child {
-webkit-border-top-left-radius: 3px;
-moz-border-radius-topleft: 3px;
border-top-left-radius: 3px;
border-right: 1px solid #e5e5e2;
}
&:last-child {
-webkit-border-top-right-radius: 3px;
-moz-border-radius-topright: 3px;
border-top-right-radius: 3px;
border-left: 1px solid #e5e5e2;
}
a {
display: block;
padding: 1em;
cursor: pointer;
outline: 0;
border: none;
font-size: 0.85em;
color: #6a6a6a;
text-decoration: none;
text-transform: uppercase;
}
span {
display: block;
margin-bottom: 0.75em;
}
}
// change style on active tab
.ui-tabs-active {
background: #fff;
border-bottom: none;
a {
color: #000;
}
span {
color: #609c09;
}
}
}
h3, h4 {
font-family: 'Josefin Sans', sans-serif;
text-transform: uppercase;
}
h3 {
margin: 0.5em 0;
border-bottom: 1px solid rgba(126,149,180,0.5);
padding-bottom: 0.05em;
font-size: 2.5em;
color: #f38500;
font-weight: 300;
}
h4 {
margin: 0.25em 0;
font-size: 1.35em;
color: #000;
font-weight: 700;
}
.tagline {
display: block;
margin-top: 1.25em;
font-family: 'Josefin Sans', sans-serif;
font-size: 1.2em;
color: #aa7786;
text-transform: lowercase;
}
}
.tabs-content {
background: #fff;
article {
padding: 1em;
p {
font-family: 'Open Sans', sans-serif;
line-height: 24px;
}
.readmore {
display: block;
margin-top: 1.5em;
padding-top: 0.25em;
border-top: 1px solid rgba(126,149,180,0.5);
font-family: 'Josefin Sans', sans-serif;
font-size: 1.2em;
@include clearfix;
a {
display: block;
margin: 1em 0;
float: right;
color: #aa7786;
text-decoration: none;
&:hover {
color: darken(#aa7786, 10%);
}
}
span {
padding-left: 1em;
vertical-align: middle;
}
}
img {
max-width: 100%;
height: auto;
vertical-align: bottom;
}
}
}
View Compiled
