"mobile"
Bootstrap 3.0.0 Snippet by evarevirus

<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>

Related: See More


Questions / Comments: