<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<main role="main">
<article class="card-60 social">
<figure>
<a class="ribbon-buy popular" href="#" title="Popular">
Hot
</a>
<img src="https://source.unsplash.com/ZFQh_gS5TJc/800x600" alt="La Sagrada Familia">
</figure>
<!-- end figure-->
<div class="flex-content">
<header>
<p class="user">
<a class="button follow" href="#" title="Follow">
Follow
</a>
<img class="avatar-32" src="http://jlantunez.com/imgs/avatar.jpg" alt="Avatar">
<strong>
<a title="Full Name" href="#">
username
</a>
</strong>
<span>8 mins ago · Barcelona</span>
</p>
</header>
<h2>
Sagrada Familia .card-60
</h2>
<p>
Figure 60%. Content 40%. Excerpt. 2-3 lines recommended. The style of la Sagrada Família is variously likened to Spanish Late Gothic, Catalan Modernism and to Art Nouveau or Catalan Noucentisme.
</p>
<footer>
<p>
<a class="bt-love" title="Love" href="#">
Love
</a>
<a class="bt-comment" title="Comment" href="#">
Comment
</a>
</p>
</footer>
</div>
<!-- end .flex-content-->
</article>
<article class="card-50">
<figure>
<a href="" title="Buy">
<span class="ribbon-buy">
-20%
</span>
<img src="https://source.unsplash.com/GgEtIbD0hVo/800x600" alt="Nike Shoes">
</a>
</figure>
<!-- end figure-->
<div class="flex-content">
<h2>
Nike RedPlus .card50 odd even
</h2>
<p class="user">
<a class="button" href="#" title="Buy">
Buy $90
</a>
<img class="avatar-32" src="http://jlantunez.com/imgs/avatar.jpg" alt="Avatar">
<strong>
<a title="Full Name" href="#">
username
</a>
</strong>
<span>16 mins ago · Nike</span>
</p>
<ul>
<li>
<strong title="Type">Type:</strong>
Soccer
</li>
<li><strong title="availability">Color:</strong> Red/Orange/Black/Blue</li>
<li><strong title="Shipping">Shipping:</strong> Free</li>
</ul>
<p>
Built for the ultimate playmaker, textured Flyknit fabric enables precise ball control.
Dynamic Fit collar fits over the ankle
for a seamless, sock-like feel. Conical stud pattern delivers 360
degrees of rotational traction.
</p>
<footer>
<p>
<a class="bt-love" title="Love" href="">
Love
</a>
<a class="bt-share" title="Share" href="#">
Share
</a>
<a class="bt-comment" title="Comment" href="">
Comment
</a>
</p>
</footer>
</div>
<!-- end .flex-content-->
</article>
<article class="card-50">
<figure>
<a href="" title="Buy">
<span class="ribbon-buy">
-20%
</span>
</a>
<img src="https://source.unsplash.com/XPvhzVIeETM/800x600" alt="Tapas">
</figure>
<!-- end figure-->
<div class="flex-content">
<h2>
Tapas Deluxe .card50 odd even
</h2>
<p class="subinfo">
<a class="button" href="#" title="Book a table">
Book a table
</a>
<a class="location" title="Location" href="">
Cromwell Rd, London SW7 5BD.
</a>
</p>
<ul>
<li>
<strong title="Type">Type:</strong>
Spanish
</li>
<li><strong title="Rating">Rating:</strong> 8/10</li>
<li><strong title="Price">Price:</strong> $30 and under</li>
</ul>
<p>
Tapas are a wide variety of appetizers, or snacks, in Spanish cuisine. They may be cold (such as mixed olives and cheese) or hot (such as chopitos, which are battered, fried baby squid). In select bars in Spain, tapas have evolved into an entire, sophisticated cuisine.
</p>
</div>
<!-- end .flex-content-->
</article>
<article class="card-40 social">
<figure>
<a class="ribbon-buy popular" href="#" title="Popular">
Hot
</a>
<a href="/news/international/japan"><img src="https://source.unsplash.com/2TlAsvhqiL0/800x600" alt="Woman waiting metro"></a>
</figure>
<!-- end figure-->
<div class="flex-content">
<header>
<p class="user">
<a class="button" href="#" title="Share">
Share
</a>
<img class="avatar-32" src="http://jlantunez.com/imgs/avatar.jpg" alt="Avatar">
<strong>
<a title="Full Name" href="#">
username
</a>
</strong>
<span><a href="" title="Permalink">8 mins ago</a> · <a href="" title="258 comments">258 comments</a></span>
</p>
</header>
<a href=""><h2>
The Tokyo Mistery .card-40
</h2>
<p>
Excerpt. 2-3 lines recommended. Police are investigating the theft of hundreds of straps used by standing passengers on the Tokyo Metro system, it's been reported. Tokyo Metro Co. is providing a free smartphone application to help foreigners navigate the capital's subway system.
</p></a>
</div>
<!-- end .flex-content-->
</article>
<article class="card-60 social">
<figure>
<a class="ribbon-buy popular" href="#" title="Popular">
Hot
</a>
<img src="https://source.unsplash.com/yvx7LSZSzeo/800x600" alt="Woman playing guitar">
</figure>
<!-- end figure-->
<div class="flex-content">
<header>
<p class="user">
<a class="button followed" href="#">
Followed
</a>
<img class="avatar-32" src="http://jlantunez.com/imgs/avatar.jpg" alt="Avatar">
<strong>
<a title="Full Name" href="#">
username
</a>
</strong>
<span>32 mins ago · London</span>
</p>
</header>
<h2>
Card-60 Fender Stratocaster
</h2>
<p>
2-3 lines recommended. The culture within an organization is an essential part for success. The Fender Stratocaster is a model of electric guitar designed in 1954 by Leo Fender, Bill Carson, George Fullerton, and Freddie Tavares.
</p>
<footer>
<p>
<a class="bt-love" title="Love" href="#">
Love
</a>
<a class="bt-comment" title="Comment" href="#">
Comment
</a>
</p>
</footer>
</div>
<!-- end .flex-content-->
</article>
<p>Photos: <a href="https://source.unsplash.com/">Unsplash</a>.</p>
</main>
/*Baseline/Vertical Rhythm: 8px;*/
/*@import url(https://basehold.it/8);*/
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,300italic,400italic,700,700italic|PT+Serif:400,400italic,700,700italic);
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
html,
body {
font-family: "Roboto", helvetica, arial, sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
font-size: 62.5%;
}
body {
background: #fafafa;
color: #333;
/*Sometimes fonts don't display optimally on all devices*/
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
/*font-weight:300;*/
}
a,.user {
text-decoration: none;
color: #88d;
}
a:hover {
color: #5b5;
}
a.button {
display: inline-block;
text-align: center;
padding: 14px 24px;
font-weight: 600;
cursor: pointer;
line-height: 1;
background: #88d;
}
p,
li,
time {
font-size: 1.6rem;
line-height: 3.2rem;
margin: 0 0 2.4rem;
}
[class*="card-"] h1,
[class*="card-"] h2 {
font: 600 2.4rem/3.2rem "PT Serif", palatino, times, serif;
margin: 0 0 .8rem;
padding: 0;
}
figure {
position: relative;
margin: 0;
line-height: 0;
}
img {
border: 0;
height: auto;
max-width: 100%;
}
img:hover {
filter: alpha(opacity=9000);
opacity: 0.90;
filter: alpha(opacity=90);
}
article,
figure,
footer,
header,
main {
display: block;
}
/*--- Clearings ---*/
header:before,
header:after,
main:before,
main:after {
content: "";
display: table;
}
header:after,
main:after {
clear: both;
}
main {
position: relative;
width: 1200px;
max-width: 96%;
margin: 0 auto;
}
/*=== Avatars === */
img[class*="avatar-"] {
display: inline-block;
vertical-align: top;
margin-right: 6px;
}
img[class*="avatar-"] {
border-radius: 50%
}
img.avatar-32 {
width: 32px;
height: 32px;
}
/*=== Cards === */
[class*="card-"],
[class*="card-"]>a {
position: relative;
list-style: none;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
margin-bottom: 6rem;
width: 100%;
/*align-items: center;
/*min-height: 100vh;*/
}
[class*="card-"] figure img {
margin: 0 auto;
display: block;
}
/*== Horizontal Cards / Images inside container:
object-fit to re-frame images rather than just stretch and resize them === */
@media (min-width: 800px) and (max-width: 1200px) {
[class*="card-"] figure {
vertical-align: middle;
text-align: center;
min-width: 250px;
max-height: 100%;
}
[class*="card-"] figure img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
}
.flex-content {
display: -webkit-flex;
display: flex;
flex-direction: column;
justify-content: center;
padding: 2.4rem;
}
.flex-content p,.flex-content li{
position: relative;
font-size: 1.6rem;
line-height: 3.2rem;
}
[class*="card-"] .flex-content p:last-child{margin-bottom: 0;}
[class*="card-"] p.user {
position: relative;
line-height: .8rem;
font-size: 1.4rem;
}
[class*="card-"] p.subinfo {
margin-bottom: .8rem;
}
/*== Social Card - Header === */
[class*="card-"] header p.user {
margin: 0;
}
[class*="card-"] .user img[class*="avatar-"] {
float: left;
}
[class*="card-"] .user span {
display: block;
margin-top: 1.3rem;
}
[class*="card-"] .flex-content a.button {
float:right;
font-weight:600;
padding: .8rem;
border-radius: 3px;
}
/* Featured/Popular/Buy*/
.ribbon-buy {
position: absolute;
z-index: 9999;
top: -1px;
right: 3.2rem;
display: block;
width: 48px;
height: 48px;
text-align: center;
/* text-indent: -4000px; */
font-size: 1.6rem;
padding-top: 2.6rem;
font-weight: 600;
}
.ribbon-buy:after {
position: absolute;
bottom: -8px;
right: 0;
content: "";
border-bottom-width: 8px;
-webkit-transform: scale(1.0001);
-moz-transform: scale(1.0001);
}
.ribbon-buy:hover {
height: 50px;
}
@media (min-width: 800px) {
/*== Cards (Sizes) - Reference: figure img:-70,60,50,40,30... === */
.card-30 figure,
.card-70 .flex-content {
width: 30%;
}
.card-40 figure,
.card-60 .flex-content {
width: 40%;
}
.card-50 figure,
.card-50 .flex-content {
width: 50%;
}
.card-60 figure,
.card-40 .flex-content {
width: 60%;
}
.card-70 figure,
.card-30 .flex-content {
width: 70%;
}
[class*="card-"]:nth-child(odd) figure {
order: 0
}
[class*="card-"]:nth-child(even) figure {
order: 1;
}
[class*="card-"]:nth-child(odd) .ribbon-buy {
left: 3.2rem;
}
.flex-content {
padding: 3.2rem 3.2rem 2.4rem;
}
}
[class*="card-"] header {
padding-bottom:1.6rem;
margin-bottom: 1.4rem;
}
/*== Card - Mobile === */
@media (max-width: 799px) {
[class*="card-"],
[class*="card-"]>a {
flex-flow: column;
}
.card figure,
.card header {
width: 100%
}
/*== Mobile Card - Header === */
[class*="card-"] header {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 2.4rem;
margin-bottom:0;
}
[class*="card-"].social figure {
margin-top: 8.1rem;
}
}
/*== Card - Footer === */
[class*="card-"] footer {
display: -webkit-flex;
display: flex;
flex-direction: column;
flex-grow: 1;
justify-content: flex-end;
text-transform: lowercase;
}
[class*="card-"] footer p {
display: -webkit-flex;
display: flex;
justify-content: space-between;
padding-top: .8rem;
margin-bottom: 0;
}
[class*="card-"] a[class*="bt-"] {
padding-left: 3rem;
background-image: url('http://jlantunez.com/imgs/spritecard.png');
background-repeat: no-repeat;
}
[class*="card-"] a.bt-love {
background-position: 0 7px;
}
[class*="card-"] a.bt-love:hover {
color: #f34;
background-position: 0 -25px;
}
[class*="card-"] a.bt-share {
background-position: 0 -56px;
}
[class*="card-"] a.bt-share:hover {
background-position: 0 -90px;
}
[class*="card-"] a.bt-comment {
background-position: 0 -123px;
}
[class*="card-"] a.bt-comment:hover {
background-position: 0 -157px;
}
a.location {
background: url('http://jlantunez.com/imgs/spritecard.png') no-repeat -4px bottom;
padding-left: 2rem;
}
@media (max-width: 500px) {
[class*="card-"] footer a[class*="bt-"] {
text-indent: -4000px;
width: 24px;
}
}
/*== List Product/Specs === */
[class*="card-"] .flex-content ul {
margin: 0 0 1.2rem;
padding:0;
}
[class*="card-"] .flex-content li strong {width: 96px; display: inline-block;
}
[class*="card-"] .flex-content ul>li {
margin: 0;
padding: .4rem 0;
list-style: none;
}
/*==== COLORS === */
main [class*="card-"] {
background: #fff;
box-shadow: 0 1px 2px rgba(50, 50, 50, 0.15), 0 0 1px rgba(50, 50, 50, 0.15);
}
/*[class*="card-"] figure {
background: #eee;
}*/
[class*="card-"].social header {
border-bottom:1px solid #eee;
}
@media (max-width: 799px) {
[class*="card-"] header {
background: #fff;
border-bottom: 1px solid #eee;
}
}
.user span,[class*="card-"] footer,[class*="card-"] .subinfo {
color: #bbb;
}
[class*="card-"] a {
color: inherit;
}
[class*="card-"] .ribbon-buy {
color: #fff;
}
/*== Card - Footer === */
[class*="card-"] footer p {
border-top: 1px solid #eee;
}
/* --- Featured / Popular --- */
.ribbon-buy,.ribbon-buy:hover {
background: #a00;
color: #fff;
}
.ribbon-buy:after {
border: 24px solid transparent;
border-top: none;
border-bottom-width: 8px;
border-left-color: #a00;
border-right-color: #a00;
}
.ribbon-buy {
background: #a00;
}
.ribbon-buy.popular{
background-image: url('http://jlantunez.com/imgs/spritecard.png');
background-repeat:no-repeat;
background-position:center 88%;
text-indent:-4000px;
}
[class*="card-"] a.button.followed,[class*="card-"] a.button:hover {
background: #6c7;
}
[class*="card-"] ul>li {
border-bottom: 1px solid #f5f5f5;
}
[class*="card-"] ul>li:last-child {border-bottom: none;}
[class*="card-"] a.button {color:#fff;}
[class*="card-"] footer a,
cite {
color: #bbb;
}
[class*="card-"] footer a:hover {
color: #333;
}
