<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 ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/alexkulagin/pen/JXGYXE?limit=all&page=18&q=shop" />
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="apple-mobile-web-app-capable" content="yes">
<link href='https://fonts.googleapis.com/css?family=Arimo:400,700&subset=latin,cyrillic-ext' rel='stylesheet'>
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css" rel="stylesheet">
<style class="cp-pen-styles">
* { 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;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.grid { margin: 0 0 0 -0.5em; list-style-type: none; -webkit-transition: all 0.3s; 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;
-webkit-transition: all 0.3s;
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;
-webkit-transform: scale(0.5);
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 { -webkit-transform: scale(0.75); 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 { -webkit-transform: scale(0.5); 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 { -webkit-transform: scale(0.5); 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 { -webkit-transform: scale(0.75); 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 }
}</style></head><body>
<div class="layout">
<section class="inner">
<ul class="grid">
<li class="grid-tile">
<div class="item">
<div class="item-img" style="background-image: url('http://store.moma.org/dw/image/v2/BBQC_PRD/on/demandware.static/-/Sites-master-moma/default/dw952014b1/images/96511_a.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('http://store.moma.org/dw/image/v2/BBQC_PRD/on/demandware.static/-/Sites-master-moma/default/dw952014b1/images/96511_a.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('http://store.moma.org/dw/image/v2/BBQC_PRD/on/demandware.static/-/Sites-master-moma/default/dw952014b1/images/96511_a.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('http://store.moma.org/dw/image/v2/BBQC_PRD/on/demandware.static/-/Sites-master-moma/default/dw952014b1/images/96511_a.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('http://store.moma.org/dw/image/v2/BBQC_PRD/on/demandware.static/-/Sites-master-moma/default/dw952014b1/images/96511_a.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('http://store.moma.org/dw/image/v2/BBQC_PRD/on/demandware.static/-/Sites-master-moma/default/dw952014b1/images/96511_a.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('http://store.moma.org/dw/image/v2/BBQC_PRD/on/demandware.static/-/Sites-master-moma/default/dw952014b1/images/96511_a.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('http://store.moma.org/dw/image/v2/BBQC_PRD/on/demandware.static/-/Sites-master-moma/default/dw952014b1/images/96511_a.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>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://tympanus.net/Development/Animocons/js/mo.min.js'></script>
<script >
//==============
function createHeartIc(el) {
var el = el,
span = el.querySelector('span'),
svg = span.querySelector('svg'),
opacityCurve = mojs.easing.path('M0,0 C0,87 27,100 40,100 L40,0 L100,0'),
scaleCurve = mojs.easing.path('M0,0c0,80,39.2,100,39.2,100L40-100c0,0-0.7,106,60,106'),
burst = new mojs.Burst({
parent: el,
duration: 1200,
delay: 200,
shape: 'circle',
fill: '#E87171',
x: '50%', y: '50%',
opacity: {1:0},
childOptions: {
radius: {6:0},
type: 'line',
stroke: '#E87171',
strokeWidth: 2
},
radius: {0:32},
count: 7,
//isSwirl: true,
isRunLess: true,
easing: mojs.easing.bezier(0.1, 1, 0.3, 1)
}),
heart = new Animocon(el, {
tweens : [
/* // ring animation
new mojs.Transit({
parent: el11,
duration: 1000,
delay: 100,
type: 'circle',
radius: {0: 95},
fill: 'transparent',
stroke: '#C0C1C3',
strokeWidth: {50:0},
opacity: 0.4,
x: '50%',
y: '50%',
isRunLess: true,
easing: mojs.easing.bezier(0, 1, 0.5, 1)
}),
// ring animation
new mojs.Transit({
parent: el11,
duration: 1800,
delay: 300,
type: 'circle',
radius: {0: 80},
fill: 'transparent',
stroke: '#C0C1C3',
strokeWidth: {40:0},
opacity: 0.2,
x: '50%',
y: '50%',
isRunLess: true,
easing: mojs.easing.bezier(0, 1, 0.5, 1)
}), */
// icon scale animation
burst,
new mojs.Tween({
duration : 800,
easing: mojs.easing.ease.out,
onUpdate: function(progress) {
var opacityProgress = opacityCurve(progress);
span.style.opacity = opacityProgress;
var scaleProgress = scaleCurve(progress);
span.style.WebkitTransform = span.style.transform = 'scale3d(' + scaleProgress + ',' + scaleProgress + ',1)';
var colorProgress = opacityCurve(progress);
svg.style.fill = colorProgress >= 1 ? '#E87171' : 'none';
svg.style.stroke = colorProgress >= 1 ? '#E87171' : '#a1a8ad';
}
})
],
onUnCheck : function() {
svg.style.fill = 'none';
svg.style.stroke = '#a1a8ad';
}
});
return heart;
}
function createCartIc(el) {
var el = el,
span = el.querySelector('span'),
svg = span.querySelector('svg'),
body = svg.getElementsByTagName("path")[0],
opacityCurve = mojs.easing.path('M0,0 C0,87 27,100 40,100 L40,0 L100,0'),
scaleCurve = mojs.easing.path('M0,0c0,80,39.2,100,39.2,100L40-100c0,0-0.7,106,60,106'),
burst = new mojs.Burst({
parent: el,
duration: 1200,
delay: 200,
shape: 'circle',
fill: '#111111',
x: '50%', y: '50%',
opacity: {1:0},
childOptions: {
radius: {6:2},
type: 'line',
stroke: '#111111',
strokeWidth: 2
},
radius: {0:36},
angle: 45,
count: 4,
//isSwirl: true,
isRunLess: true,
easing: mojs.easing.bezier(0.1, 1, 0.3, 1)
}),
heart = new Animocon(el, {
tweens : [
/* // ring animation
new mojs.Transit({
parent: el11,
duration: 1000,
delay: 100,
type: 'circle',
radius: {0: 95},
fill: 'transparent',
stroke: '#C0C1C3',
strokeWidth: {50:0},
opacity: 0.4,
x: '50%',
y: '50%',
isRunLess: true,
easing: mojs.easing.bezier(0, 1, 0.5, 1)
}),
// ring animation
new mojs.Transit({
parent: el11,
duration: 1800,
delay: 300,
type: 'circle',
radius: {0: 80},
fill: 'transparent',
stroke: '#C0C1C3',
strokeWidth: {40:0},
opacity: 0.2,
x: '50%',
y: '50%',
isRunLess: true,
easing: mojs.easing.bezier(0, 1, 0.5, 1)
}), */
// icon scale animation
burst,
new mojs.Tween({
duration : 800,
easing: mojs.easing.ease.out,
onUpdate: function(progress) {
var opacityProgress = opacityCurve(progress);
span.style.opacity = opacityProgress;
var scaleProgress = scaleCurve(progress);
span.style.WebkitTransform = span.style.transform = 'scale3d(' + scaleProgress + ',' + scaleProgress + ',1)';
var colorProgress = opacityCurve(progress);
body.style.fill = colorProgress >= 1 ? '#111111' : 'none';
svg.style.stroke = colorProgress >= 1 ? '#111111' : '#a1a8ad';
}
})
],
onUnCheck : function() {
body.style.fill = 'none';
svg.style.stroke = '#a1a8ad';
}
});
return heart;
}
var hearts = document.getElementsByClassName('pnl-favorites'),
carts = document.getElementsByClassName('pnl-tocart');
for (var i=0;i<hearts.length;i++) {if (window.CP.shouldStopExecution(1)){break;}
createHeartIc(hearts[i].querySelector('div'));
createCartIc(carts[i].querySelector('div'));
}
window.CP.exitedLoop(1);
//# sourceURL=pen.js
</script>
</body></html>
