<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/hellmutmatheus/pen/yggyRz?depth=everything&order=popularity&page=73&q=shop&show_forks=false" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css'><link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,600'>
<style class="cp-pen-styles">body {
background-image: url(https://unsplash.it/1080/720/?image=1067);
background-size: cover;
}
a {
text-decoration: none;
}
.container {
max-width: 350px;
max-height: 650px;
overflow: hidden;
box-shadow: 0 0 20px black;
margin: 30px auto 0;
font-family: 'Open Sans', sans-serif;
background-color: #EBEBEB;
}
.container .ripple-effect {
position: relative;
overflow: hidden;
transition: all 0.3s ease;
}
.container .ripple-effect:hover {
box-shadow: rgba(0, 0, 0, 0.3) 0 16px 16px 0;
}
.container .red {
background-color: #FB052A;
}
.container .gray {
background-color: #dddddd;
}
.container .blue {
background-color: #4285F4;
}
.container .pink {
background-color: #f0ff0f;
}
.container .ink {
display: block;
position: absolute;
background: rgba(255, 255, 255, 0.3);
border-radius: 100%;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
}
.container .animate {
-webkit-animation: ripple 0.65s linear;
-moz-animation: ripple 0.65s linear;
-ms-animation: ripple 0.65s linear;
-o-animation: ripple 0.65s linear;
animation: ripple 0.65s linear;
}
@keyframes ripple {
100% {
opacity: 0;
transform: scale(2.5);
}
}
.header {
background-color: #404E92;
color: #fff;
box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.5);
font-size: 0.9em;
}
.android-phones-status {
background-color: #303b6f;
font-size: 0.8em;
text-align: right;
padding-right: 1em;
padding-top: 3px;
padding-bottom: 3px;
display: block;
}
.main-header {
font-wight: 600;
font-size: 1em;
padding-left: 1em;
padding-bottom: 1em;
margin-bottom: 1em;
margin-top: 1em;
}
.main-header span {
padding-left: 1em;
}
.material-banner {
width: 92%;
background: url("https://d13yacurqjgara.cloudfront.net/users/588874/screenshots/2347205/dribbble.png");
background-size: cover;
margin-left: 1em;
margin-right: 1em;
height: 70px;
margin-bottom: 1em;
color: #fff;
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.5);
}
.material-banner p {
font-size: 0.8em;
font-weight: 500;
display: block;
padding: 0;
margin-left: 1em;
margin-top: 1em;
}
.material-banner span {
font-weight: 300;
font-size: 0.8em;
}
.material-banner .location {
float: right;
display: flex;
font-size: 0.8em;
margin-right: 1em;
margin-top: 1.3em;
}
.material-banner .location span {
position: relative;
top: -5px;
}
.material-banner .loja {
display: inline;
position: relative;
top: 0.4em;
left: 0.7em;
font-size: 1.2em;
}
.break-text {
font-size: 0.8em;
font-weight: 400;
color: #b8b8b8;
margin-left: 2em;
margin-bottom: 1em;
}
.card {
background-color: #fff;
width: 92%;
margin-left: 1em;
margin-right: 1em;
border-radius: 2%;
margin-bottom: -7px;
box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.2);
}
.card .blue-location {
color: #5262b3;
font-size: 0.7em;
display: flex;
padding-top: 1em;
padding-left: 1em;
}
.card .blue-location span {
color: #b8b8b8;
top: -2px;
position: relative;
}
.card .nome-loja {
font-size: 0.8em;
font-weight: 300;
padding-left: 1.3em;
padding-top: 0.3em;
padding-bottom: 3.2em;
}
.card .favoritos {
font-size: 0.8em;
color: red;
display: inline-block;
float: right;
top: -6.2em;
margin-right: 1em;
position: relative;
}
.card .favoritos span {
font-size: 0.7em;
}
.card .tag-loja {
height: 15px;
width: 60px;
background-color: #F9A825;
border-radius: 10%;
margin-bottom: 1em;
justify-content: center;
align-items: center;
display: flex;
position: relative;
left: 1em;
top: -0.8em;
}
.card .tag-loja span {
color: #fff;
font-size: 0.5em;
display: inline-block;
font-weight: 600;
text-transform: uppercase;
}
.card .dash {
border: 1px solid #EBEBEB;
opacity: 0.5;
height: 0px;
margin-top: 0;
position: relative;
top: -1.5em;
}
.card .qtd-promocoes-ativas {
display: flex;
font-size: 0.8em;
float: right;
position: relative;
top: -3.5em;
right: -1.3em;
}
.card .qtd-promocoes-ativas .messages {
color: #b8b8b8;
font-weight: 300;
padding-left: 0.5em;
}
.card .qtd-promocoes-ativas .number {
color: #858585;
}
</style></head><body>
<div class="container">
<div class="header">
<div class="android-phones-status">
<i class="zmdi zmdi-network zmdi-hc-fw"></i>
<i class="zmdi zmdi-battery zmdi-hc-fw"></i>
<span>12:48</span>
</div>
<div class="main-header">
<i class="zmdi zmdi-menu zmdi-hc-fw"></i>
<span>Shopping-club</span>
</div>
</div>
<div class="material-banner">
<div class="loja"><span><b>Centauro</b></span></div>
<div class="location">
<i class="zmdi zmdi-pin zmdi-hc-fw"></i>
<div class="local-shopping"><span>Shopping Parangaba</span></div>
</div>
<div class="anuncio"><p>Tênis Nike Air j20 apenas R$ 299,90. Corra!</p></div>
</div>
<div class="break-text">
<span>Recomendado pela nossa equipe</span>
</div>
<div class="card">
<div class="blue-location">
<i class="zmdi zmdi-pin zmdi-hc-fw"></i>
<div class="local-shopping"><span>Shopping Parangaba</span></div>
</div>
<div class="nome-loja">
<span><b>Athos Moda e Calçados</b></span>
</div>
<div class="favoritos">
<i class="zmdi zmdi-favorite-outline zmdi-hc-fw"></i>
<div class="fav-numero"><span><b>355</b></span></div>
</div>
<div class="dash"></div>
<div class="tag-loja">
<span>masculino</span>
</div>
<div class="qtd-promocoes-ativas">
<div class="number"><b>02</b></div>
<div class="messages"><span>mensagens</span></div>
</div>
</div>
<div class="break-text">
<span>Novidades perto de você</span>
</div>
<div class="card">
<div class="blue-location">
<i class="zmdi zmdi-pin zmdi-hc-fw"></i>
<div class="local-shopping"><span>North Shopping</span></div>
</div>
<div class="nome-loja">
<span><b>McDonald's</b></span>
</div>
<div class="favoritos">
<i class="zmdi zmdi-favorite-outline zmdi-hc-fw"></i>
<div class="fav-numero"><span><b>355</b></span></div>
</div>
<div class="dash"></div>
<div class="tag-loja">
<span>masculino</span>
</div>
<div class="qtd-promocoes-ativas">
<div class="number"><b>10</b></div>
<div class="messages"><span>mensagens</span></div>
</div>
</div>
<div class="card">
<div class="blue-location">
<i class="zmdi zmdi-pin zmdi-hc-fw"></i>
<div class="local-shopping"><span>Shopping Iguatemi</span></div>
</div>
<div class="nome-loja">
<span><b>Polo Camisas e Calças</b></span>
</div>
<div class="favoritos">
<i class="zmdi zmdi-favorite-outline zmdi-hc-fw"></i>
<div class="fav-numero"><span><b>255</b></span></div>
</div>
<div class="dash"></div>
<div class="tag-loja">
<span>masculino</span>
</div>
<div class="qtd-promocoes-ativas">
<div class="number"><b>01</b></div>
<div class="messages"><span>mensagens</span></div>
</div>
</div>
<div class="card">
<div class="blue-location">
<i class="zmdi zmdi-pin zmdi-hc-fw"></i>
<div class="local-shopping"><span>Shopping Messejana</span></div>
</div>
<div class="nome-loja">
<span><b>Cacau-Show</b></span>
</div>
<div class="favoritos">
<i class="zmdi zmdi-favorite-outline zmdi-hc-fw"></i>
<div class="fav-numero"><span><b>240</b></span></div>
</div>
<div class="dash"></div>
<div class="tag-loja">
<span>masculino</span>
</div>
<div class="qtd-promocoes-ativas">
<div class="number"><b>02</b></div>
<div class="messages"><span>mensagens</span></div>
</div>
</div>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script>
<script >var ink, dimension, x, y;
$(".ripple-effect").click(function(e){
if($(this).find(".ink").length === 0){
$(this).prepend("<span class='ink'></span>");
}
ink = $(this).find(".ink");
ink.removeClass("animate");
if(!ink.height() && !ink.width()){
dimension = Math.max($(this).outerWidth(), $(this).outerHeight());
ink.css({height: dimension, width: dimension});
}
x = e.pageX - $(this).offset().left - ink.width()/2;
y = e.pageY - $(this).offset().top - ink.height()/2;
ink.css({top: y+'px', left: x+'px'}).addClass("animate");
});
//# sourceURL=pen.js
</script>
</body></html>
