<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 ---------->
<div class="layout">
<section class="inner">
<ul class="grid">
<li class="grid-tile">
<div class="item">
<div class="item-img" style="background-image: url('https://www.momastore.org/wcsstore/MOMASTORE1/images/products/96511_A2_Print_NYC_8x10_In.jpg'); background-size: auto auto; background-size: 150%; background-position: center 30%;"></div>
<div class="item-pnl">
<div class="pnl-wrapper">
<div class="pnl-description">
<span class="pnl-label">Product Name</span>
<span class="pnl-price">$100,00</span>
</div>
<div class="pnl-favorites">
<div class="pnl-ic-wrapper">
<span class="pnl-ic"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve"><path d="M22.6,6.5c-2.9,0-5.4,1.7-6.6,4.1c-1.2-2.4-3.7-4.1-6.6-4.1C5.3,6.5,2,9.8,2,13.9C2,23.7,15.8,29,15.8,29S30,23.6,30,13.9C30,9.8,26.7,6.5,22.6,6.5L22.6,6.5z"></path></svg></span>
</div>
</div>
<div class="pnl-tocart">
<div class="pnl-ic-wrapper">
<span class="pnl-ic"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve"><g><path d="M25.4,29H6.6c-1.7,0-3-1.4-2.8-2.9l1.9-13.8C5.9,11,6.6,10,8,10h16c1.4,0,2.1,1,2.3,2.3l1.9,13.8 C28.4,27.6,27.1,29,25.4,29z"></path><path d="M10.6,12.7V8.4C10.6,5.4,13,3,16,3h0c3,0,5.4,2.4,5.4,5.4v4.3"></path></g></svg></span>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="grid-tile">
<div class="item">
<div class="item-img" style="background-image: url('https://www.momastore.org/wcsstore/MOMASTORE1/images/products/110390_A2_Pixel_Worktop_Saver.jpg'); background-size: auto auto; background-size: 150% 150%;"></div>
<div class="item-pnl">
<div class="pnl-wrapper">
<div class="pnl-description">
<span class="pnl-label">Product Name</span>
<span class="pnl-price">$100,00</span>
</div>
<div class="pnl-favorites">
<div class="pnl-ic-wrapper">
<span class="pnl-ic"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve"><path d="M22.6,6.5c-2.9,0-5.4,1.7-6.6,4.1c-1.2-2.4-3.7-4.1-6.6-4.1C5.3,6.5,2,9.8,2,13.9C2,23.7,15.8,29,15.8,29S30,23.6,30,13.9C30,9.8,26.7,6.5,22.6,6.5L22.6,6.5z"></path></svg></span>
</div>
</div>
<div class="pnl-tocart">
<div class="pnl-ic-wrapper">
<span class="pnl-ic"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve"><g><path d="M25.4,29H6.6c-1.7,0-3-1.4-2.8-2.9l1.9-13.8C5.9,11,6.6,10,8,10h16c1.4,0,2.1,1,2.3,2.3l1.9,13.8 C28.4,27.6,27.1,29,25.4,29z"></path><path d="M10.6,12.7V8.4C10.6,5.4,13,3,16,3h0c3,0,5.4,2.4,5.4,5.4v4.3"></path></g></svg></span>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="grid-tile">
<div class="item">
<div class="item-img" style="background-color: #ffff00; background-image: url('https://www.momastore.org/wcsstore/MOMASTORE1/images/products/96511_A2_Print_NYC_8x10_In.jpg'); background-size: contain;"></div>
<div class="item-pnl">
<div class="pnl-wrapper">
<div class="pnl-description">
<span class="pnl-label">Product Name</span>
<span class="pnl-price">$100,00</span>
</div>
<div class="pnl-favorites">
<div class="pnl-ic-wrapper">
<span class="pnl-ic"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve"><path d="M22.6,6.5c-2.9,0-5.4,1.7-6.6,4.1c-1.2-2.4-3.7-4.1-6.6-4.1C5.3,6.5,2,9.8,2,13.9C2,23.7,15.8,29,15.8,29S30,23.6,30,13.9C30,9.8,26.7,6.5,22.6,6.5L22.6,6.5z"></path></svg></span>
</div>
</div>
<div class="pnl-tocart">
<div class="pnl-ic-wrapper">
<span class="pnl-ic"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve"><g><path d="M25.4,29H6.6c-1.7,0-3-1.4-2.8-2.9l1.9-13.8C5.9,11,6.6,10,8,10h16c1.4,0,2.1,1,2.3,2.3l1.9,13.8 C28.4,27.6,27.1,29,25.4,29z"></path><path d="M10.6,12.7V8.4C10.6,5.4,13,3,16,3h0c3,0,5.4,2.4,5.4,5.4v4.3"></path></g></svg></span>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="grid-tile">
<div class="item">
<div class="item-img" style="background-color: #EEEEEE; background-image: url('https://www.momastore.org/wcsstore/MOMASTORE1/images/products/96511_A2_Print_NYC_8x10_In.jpg'); background-size: 50% 50%;"></div>
<div class="item-pnl">
<div class="pnl-wrapper">
<div class="pnl-description">
<span class="pnl-label">Product Name</span>
<span class="pnl-price">$100,00</span>
</div>
<div class="pnl-favorites">
<div class="pnl-ic-wrapper">
<span class="pnl-ic"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve"><path d="M22.6,6.5c-2.9,0-5.4,1.7-6.6,4.1c-1.2-2.4-3.7-4.1-6.6-4.1C5.3,6.5,2,9.8,2,13.9C2,23.7,15.8,29,15.8,29S30,23.6,30,13.9C30,9.8,26.7,6.5,22.6,6.5L22.6,6.5z"></path></svg></span>
</div>
</div>
<div class="pnl-tocart">
<div class="pnl-ic-wrapper">
<span class="pnl-ic"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve"><g><path d="M25.4,29H6.6c-1.7,0-3-1.4-2.8-2.9l1.9-13.8C5.9,11,6.6,10,8,10h16c1.4,0,2.1,1,2.3,2.3l1.9,13.8 C28.4,27.6,27.1,29,25.4,29z"></path><path d="M10.6,12.7V8.4C10.6,5.4,13,3,16,3h0c3,0,5.4,2.4,5.4,5.4v4.3"></path></g></svg></span>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="grid-tile">
<div class="item">
<div class="item-img" style="background-image: url('https://www.momastore.org/wcsstore/MOMASTORE1/images/products/96511_A2_Print_NYC_8x10_In.jpg'); background-size: cover;"></div>
<div class="item-pnl">
<div class="pnl-wrapper">
<div class="pnl-description">
<span class="pnl-label">Product Name</span>
<span class="pnl-price">$100,00</span>
</div>
<div class="pnl-favorites">
<div class="pnl-ic-wrapper">
<span class="pnl-ic"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve"><path d="M22.6,6.5c-2.9,0-5.4,1.7-6.6,4.1c-1.2-2.4-3.7-4.1-6.6-4.1C5.3,6.5,2,9.8,2,13.9C2,23.7,15.8,29,15.8,29S30,23.6,30,13.9C30,9.8,26.7,6.5,22.6,6.5L22.6,6.5z"></path></svg></span>
</div>
</div>
<div class="pnl-tocart">
<div class="pnl-ic-wrapper">
<span class="pnl-ic"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve"><g><path d="M25.4,29H6.6c-1.7,0-3-1.4-2.8-2.9l1.9-13.8C5.9,11,6.6,10,8,10h16c1.4,0,2.1,1,2.3,2.3l1.9,13.8 C28.4,27.6,27.1,29,25.4,29z"></path><path d="M10.6,12.7V8.4C10.6,5.4,13,3,16,3h0c3,0,5.4,2.4,5.4,5.4v4.3"></path></g></svg></span>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="grid-tile">
<div class="item">
<div class="item-img" style="background-image: url('https://www.momastore.org/wcsstore/MOMASTORE1/images/products/96511_A2_Print_NYC_8x10_In.jpg'); background-size: cover;"></div>
<div class="item-pnl">
<div class="pnl-wrapper">
<div class="pnl-description">
<span class="pnl-label">Product Name</span>
<span class="pnl-price">$100,00</span>
</div>
<div class="pnl-favorites">
<div class="pnl-ic-wrapper">
<span class="pnl-ic"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve"><path d="M22.6,6.5c-2.9,0-5.4,1.7-6.6,4.1c-1.2-2.4-3.7-4.1-6.6-4.1C5.3,6.5,2,9.8,2,13.9C2,23.7,15.8,29,15.8,29S30,23.6,30,13.9C30,9.8,26.7,6.5,22.6,6.5L22.6,6.5z"></path></svg></span>
</div>
</div>
<div class="pnl-tocart">
<div class="pnl-ic-wrapper">
<span class="pnl-ic"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve"><g><path d="M25.4,29H6.6c-1.7,0-3-1.4-2.8-2.9l1.9-13.8C5.9,11,6.6,10,8,10h16c1.4,0,2.1,1,2.3,2.3l1.9,13.8 C28.4,27.6,27.1,29,25.4,29z"></path><path d="M10.6,12.7V8.4C10.6,5.4,13,3,16,3h0c3,0,5.4,2.4,5.4,5.4v4.3"></path></g></svg></span>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="grid-tile">
<div class="item">
<div class="item-img" style="background-image: url('https://www.momastore.org/wcsstore/MOMASTORE1/images/products/96511_A2_Print_NYC_8x10_In.jpg'); background-size: cover;"></div>
<div class="item-pnl">
<div class="pnl-wrapper">
<div class="pnl-description">
<span class="pnl-label">Product Name</span>
<span class="pnl-price">$100,00</span>
</div>
<div class="pnl-favorites">
<div class="pnl-ic-wrapper">
<span class="pnl-ic"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve"><path d="M22.6,6.5c-2.9,0-5.4,1.7-6.6,4.1c-1.2-2.4-3.7-4.1-6.6-4.1C5.3,6.5,2,9.8,2,13.9C2,23.7,15.8,29,15.8,29S30,23.6,30,13.9C30,9.8,26.7,6.5,22.6,6.5L22.6,6.5z"></path></svg></span>
</div>
</div>
<div class="pnl-tocart">
<div class="pnl-ic-wrapper">
<span class="pnl-ic"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve"><g><path d="M25.4,29H6.6c-1.7,0-3-1.4-2.8-2.9l1.9-13.8C5.9,11,6.6,10,8,10h16c1.4,0,2.1,1,2.3,2.3l1.9,13.8 C28.4,27.6,27.1,29,25.4,29z"></path><path d="M10.6,12.7V8.4C10.6,5.4,13,3,16,3h0c3,0,5.4,2.4,5.4,5.4v4.3"></path></g></svg></span>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="grid-tile">
<div class="item">
<div class="item-img" style="background-image: url('https://www.momastore.org/wcsstore/MOMASTORE1/images/products/96511_A2_Print_NYC_8x10_In.jpg'); background-size: cover;"></div>
<div class="item-pnl">
<div class="pnl-wrapper">
<div class="pnl-description">
<span class="pnl-label">Product Name</span>
<span class="pnl-price">$100,00</span>
</div>
<div class="pnl-favorites">
<div class="pnl-ic-wrapper">
<span class="pnl-ic"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve"><path d="M22.6,6.5c-2.9,0-5.4,1.7-6.6,4.1c-1.2-2.4-3.7-4.1-6.6-4.1C5.3,6.5,2,9.8,2,13.9C2,23.7,15.8,29,15.8,29S30,23.6,30,13.9C30,9.8,26.7,6.5,22.6,6.5L22.6,6.5z"></path></svg></span>
</div>
</div>
<div class="pnl-tocart">
<div class="pnl-ic-wrapper">
<span class="pnl-ic"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve"><g><path d="M25.4,29H6.6c-1.7,0-3-1.4-2.8-2.9l1.9-13.8C5.9,11,6.6,10,8,10h16c1.4,0,2.1,1,2.3,2.3l1.9,13.8 C28.4,27.6,27.1,29,25.4,29z"></path><path d="M10.6,12.7V8.4C10.6,5.4,13,3,16,3h0c3,0,5.4,2.4,5.4,5.4v4.3"></path></g></svg></span>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="grid-tile">
<div class="item">
<div class="item-img" style="background-image: url('https://www.momastore.org/wcsstore/MOMASTORE1/images/products/96511_A2_Print_NYC_8x10_In.jpg'); background-size: cover;"></div>
<div class="item-pnl">
<div class="pnl-wrapper">
<div class="pnl-description">
<span class="pnl-label">Product Name</span>
<span class="pnl-price">$100,00</span>
</div>
<div class="pnl-favorites">
<div class="pnl-ic-wrapper">
<span class="pnl-ic"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve"><path d="M22.6,6.5c-2.9,0-5.4,1.7-6.6,4.1c-1.2-2.4-3.7-4.1-6.6-4.1C5.3,6.5,2,9.8,2,13.9C2,23.7,15.8,29,15.8,29S30,23.6,30,13.9C30,9.8,26.7,6.5,22.6,6.5L22.6,6.5z"></path></svg></span>
</div>
</div>
<div class="pnl-tocart">
<div class="pnl-ic-wrapper">
<span class="pnl-ic"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve"><g><path d="M25.4,29H6.6c-1.7,0-3-1.4-2.8-2.9l1.9-13.8C5.9,11,6.6,10,8,10h16c1.4,0,2.1,1,2.3,2.3l1.9,13.8 C28.4,27.6,27.1,29,25.4,29z"></path><path d="M10.6,12.7V8.4C10.6,5.4,13,3,16,3h0c3,0,5.4,2.4,5.4,5.4v4.3"></path></g></svg></span>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</section>
</div>
* { margin: 0; padding: 0 }
body {
background-color: #f9f9f9;
}
.layout {
width: 100%; height: 100%;
position: relative;
font-family: 'Arimo', sans-serif;
font-size: 16px;
line-height: 1.5em;
font-weight: 400;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.inner {
max-width: 100%;
padding: 0 0.5em;
padding-top: 0.5em;
transition: all 0.3s;
}
.grid { margin: 0 0 0 -0.5em; list-style-type: none; transition: all 0.3s }
.grid:before, .grid:after { content: " "; display: table }
.grid:after { clear: both }
.grid-tile {
width: 100%;
position: relative; float: left;
padding: 0 0 0.5em 0.5em;
box-sizing: border-box;
transition: all 0.3s;
}
.item {
width: 100%;
position: relative;
overflow: hidden;
background-color: #fff;
border-radius: 15px;
border: 2px solid #eee;
box-sizing: border-box;
}
.item-img {
width: 100%;
padding-bottom: 115%;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.item-img:hover {
cursor: -webkit-grab; cursor: -moz-grab;
}
.item-img:active {
cursor: -webkit-grabbing; cursor: -moz-grabbing;
}
.item-pnl {
/*position: relative;*/
width: 100%;
}
.pnl-wrapper {
width: 100%;
height: 60px;
display: table;
}
.pnl-wrapper > div {
display: table-cell;
vertical-align: middle;
}
.pnl-description {
position: relative;
padding: 0;
padding-left: 0.5em;
}
.pnl-label {
color: #424346;
line-height: 16px;
max-height: 2.6em;
font-size: 0.75em;
overflow: hidden;
display: block;
}
.pnl-price {
line-height: 16px;
color: #111;
font-weight: 700;
font-size: 0.75em;
display: block;
/*margin-top: 0.125em;*/
}
.pnl-ic-wrapper {
width: 32px; height: 32px;
line-height: 0;
position: relative;
margin: 0 auto;
transform: scale(0.5);
}
.pnl-ic-wrapper svg {
fill: none;
stroke-width: 2.0;
stroke-linecap: round;
stroke-miterlimit: 4;
stroke-location: outside;
}
.pnl-ic {
display: inline-block;
vertical-align: middle;
width: 100%; height: 100%;
}
.pnl-favorites svg {
stroke: #a1a8ad;
}
.pnl-favorites {
width: 32px;
cursor: pointer;
position: relative;
}
.pnl-tocart svg {
stroke: #a1a8ad;
}
.pnl-tocart {
width: 32px;
cursor: pointer;
position: relative;
}
@media screen and (min-width: 320px) {
.pnl-wrapper { height: 70px }
.pnl-label, .pnl-price { font-size: 1em; line-height: 20px; }
.pnl-favorites, .pnl-tocart { width: 56px }
.pnl-ic-wrapper { transform: scale(0.75) }
.pnl-description { padding-left: 1.0em }
}
@media screen and (min-width: 360px) {
.inner { padding: 0 1.0em; padding-top: 1.0em }
.grid { margin: 0 0 0 -1.0em }
.grid-tile { padding: 0 0 1.0em 1.0em }
.pnl-description { padding-left: 1.5em }
.pnl-wrapper { height: 70px }
}
/* PORTRAIT MOBILE MODE
*/
@media screen and (min-width: 480px) {
.inner { padding: 0 0.5em; padding-top: 0.5em }
.grid { margin: 0 0 0 -0.5em }
.grid-tile { padding: 0 0 0.5em 0.5em }
.grid-tile { width: 50% }
.pnl-wrapper { height: 60px }
.pnl-description { padding-left: 0.5em }
.pnl-label, .pnl-price { font-size: 0.75em; line-height: 18px; }
.pnl-ic-wrapper { transform: scale(0.5) }
.pnl-favorites, .pnl-tocart { width: 40px }
}
/* LANDSCAPE MOBILE MODE (~416px)
*/
@media (max-height: 26em) {
.pnl-wrapper { height: 48px }
.grid-tile { width: 33.3333% }
.pnl-label { font-size: 0.7em; line-height: 14px; }
.pnl-price { font-size: 0.7em; line-height: 14px; }
.pnl-favorites { position: absolute; width: 40px; height: 40px; top:0; right: 0 }
.pnl-ic-wrapper { transform: scale(0.5) }
}
@media screen and (min-width: 600px) {
.inner { padding: 0 1.0em; padding-top: 1.0em }
.grid { margin: 0 0 0 -1.0em }
.grid-tile { padding: 0 0 1.0em 1.0em }
.pnl-wrapper { height: 70px }
.pnl-label, .pnl-price { font-size: 1em; line-height: 20px; }
.pnl-favorites, .pnl-tocart { width: 56px }
.pnl-ic-wrapper { transform: scale(0.75) }
.pnl-description { padding-left: 1.0em }
}
@media screen and (min-width: 768px) {
.inner { padding: 0 1.5em; padding-top: 1.5em }
.grid { margin: 0 0 0 -1.5em }
.grid-tile { padding: 0 0 1.5em 1.5em }
}
@media screen and (min-width: 912px) {
}
@media screen and (min-width: 1024px) {
.grid-tile { width: 33.3333% }
}
@media screen and (min-width: 1300px) {
.pnl-description { padding-left: 1.5em }
}
@media screen and (min-width: 1440px) {
.inner { width: 1400px; margin: 0 auto }
}
