"mobile"
Bootstrap 3.0.0 Snippet by evarevirus

Post to Facebook Tweet this

<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/bBQEgN?limit=all&page=42&q=shop" /> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,600'><link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css'> <style class="cp-pen-styles">.contato { font-family: sans-serif; color: white; } body { background-image: url(https://unsplash.it/1080/720/?image=985); background-size: cover; } .container { max-height: 615px; max-width: 360px; overflow: hidden; margin: 30px auto 30px; box-shadow: 0 0 10px 0 #3a3a3a; font-family: 'Open Sans', sans-serif; background: #2E294E; border-radius: 3%; } .phone-status { background: rgba(46, 41, 78, 0.7); color: #fff; padding: 1.5em 1em 0em 1em; font-size: 0.5em; } .phone-status span { font-size: 1.5em; position: relative; display: block; text-align: center; top: -15px; right: -15px; } .phone-status .direita { float: right; font-size: 1.6em; position: relative; top: -15px; } .header { background: url(http://st3.panadea.com/images/travel-guide-guidebook/en-budapest-hungary-panadea-gb-sd-3054643-3434.jpg); background-size: cover; } .header .top-header { padding: 0 0.6em 0.5em; color: #fff; background: rgba(46, 41, 78, 0.7); font-size: 1.3em; } .header .top-header a { text-decoration: none; color: #fff; padding-top: 0px; margin: 0px; } .header .header-content::before { content: ''; position: absolute; top: 284px; width: 360px; height: 50px; padding: 0; margin: 0; background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(8, 61, 80, 0.8)); } .header .header-content h1 { color: #fff; font-size: 1.5em; padding: 1em 0.5em 0.5em; text-transform: uppercase; top: 50px; position: relative; margin-top: 30px; } .header .header-content h2 { color: #fff; font-size: 0.8em; font-weight: 300; padding: 0.8em 1em; text-transform: uppercase; letter-spacing: 1px; padding-bottom: 20px; top: 10px; position: relative; } .header .header-content .botao-favoritar { border: 2px solid #EFDC05; color: #EFDC05; width: 80px; position: relative; display: flex; float: right; right: 20px; top: -60px; justify-content: center; align-items: center; /*span{ text-transform: uppercase; font-weight: 600; font-size: 0.8em; padding:0.3em 0em 0.3em 0.3em; }*/ } .header .header-content .botao-favoritar a { text-decoration: none; color: #EFDC05; font-size: 300; text-transform: uppercase; font-weight: 600; font-size: 0.8em; padding: 0.3em 0em 0.3em 0.3em; } .header .header-content .botao-favoritar i { font-size: 0.8em; display: block; padding: 0.2em 0.1em 0 0; } .content-icons { padding: 0; margin: 20px 20px 20px 20px; display: flex; justify-content: flex-start; width: 80%; position: relative; top: -30px; right: -23px; } .content-icons .coracao { display: flex; width: 40%; margin: auto; } .content-icons .coracao span { color: #fff; font-weight: 300; color: #D499B9; float: left; justify-content: center; padding: 0.4em 0 0 0.5em; } .content-icons .coracao .bola-coracao { width: 35px; height: 35px; background: #221e3a; border-radius: 50%; display: flex; justify-content: center; align-items: center; } .content-icons .coracao .bola-coracao i { color: #F17F42; font-size: 0.8em; } .content-icons .estrelas { display: flex; width: 40%; margin: auto; } .content-icons .estrelas span { color: #fff; font-weight: 300; color: #D499B9; float: left; justify-content: center; padding: 0.4em 0 0 0.5em; } .content-icons .estrelas .bola-estrelas { width: 35px; height: 35px; background: #221e3a; border-radius: 50%; display: flex; justify-content: center; align-items: center; } .content-icons .estrelas .bola-estrelas i { color: #D499B9; font-size: 0.8em; } .content-icons .location { display: flex; width: 40%; position: relative; margin: auto; } .content-icons .location span { color: #fff; font-weight: 300; color: #D499B9; float: left; justify-content: center; padding: 0.4em 0 0 0.5em; } .content-icons .location .bola-location { width: 35px; height: 35px; background: #221e3a; border-radius: 50%; display: flex; justify-content: center; align-items: center; } .content-icons .location .bola-location i { color: #D499B9; font-size: 0.8em; } .content .heading { margin-top: 50px; } .content h2 { color: #fff; font-size: 0.7em; font-weight: 300; text-transform: uppercase; position: relative; display: block; text-align: center; top: -35px; right: -4px; } .content h2::before { content: ''; width: 350px; height: 2px; position: absolute; background-color: #D499B9; opacity: 0.2; top: 50%; left: 0; } .promocao { padding: 0; color: #fff; font-size: 1em; display: flex; align-items: center; margin: -40px 0em 0em 0em; } .promocao .promocao-texto h3 { font-size: 0.8em; color: #D499B9; font-weight: 300; position: relative; top: -20%; margin-bottom: 5px; } .promocao .promocao-texto p { font-size: 0.6em; margin: 0; padding: 0; width: 90%; position: relative; top: -30%; font-weight: 300; } .promocao .promocao-texto a { color: #D499B9; font-weight: 600; text-decoration: none; margin-left: 5px; } .promocao .fa-chevron-left { color: #D499B9; margin: 0em 0em 0em 1em; } .promocao .fa-chevron-right { float: right; color: #D499B9; margin: 0em 1em 0em 0em; } .promocao .profile-pic img { max-width: 30px; max-height: 30px; border-radius: 50%; margin: 0 1em 0 1em; float: left; } .indicacao { margin-top: 0; padding: 0; overflow: hidden; position: relative; top: -35px; } .indicacao .text-direita { padding: 0; margin: 0; border: 1px solid #fff; } .indicacao .fa-heartbeat { color: #FBFFB9; font-size: 1.4em; display: block; margin-left: 20px; } .indicacao .fa-flag { color: #AACD6E; font-size: 1.4em; display: block; margin-left: 20px; } .indicacao .fa-exchange { color: #fcbe32; font-size: 1.4em; display: block; margin-left: 20px; } .indicacao ul { list-style: none; margin: 0; position: relative; padding: 0; } .indicacao li { display: flex; padding: 0; margin-bottom: 10px; } .indicacao .subtitulo { color: #D499B9; display: flex; position: relative; margin: 0; position: relative; right: -30px; } .indicacao p { color: #fff; font-size: 0.6em; margin: 0; position: relative; right: -30px; width: 200px; } .indicacao .horario { color: #D499B9; font-size: 0.6em; text-align: center; position: relative; display: flex; top: -8px; font-weight: 600; float: right; } .indicacao .circular-number { color: #D499B9; border: 2px solid #D499B9; height: 20px; width: 20px; border-radius: 50%; justify-content: center; align-items: center; display: flex; margin-left: 12px; } .indicacao h3 { font-weight: 300; font-size: 1em; } </style></head><body> <div class="contato"> <span>Meu Contato</span> <span><br />hellmut@gmail.com</span> <span><br />Wpp (85) 98107-2635</span> </div> <div class="container"> <div class="header"> <div class="phone-status"> <div class="left-balls"> <i class="fa fa-circle"></i> <i class="fa fa-circle"></i> <i class="fa fa-circle"></i> <i class="fa fa-circle-o"></i> <i class="fa fa-circle-o"></i> </div> <div class="direita"> <i class="fa fa-battery-full"></i> </div> <span>10:58 AM</span> </div> <div class="top-header"> <a href="#"><i class="fa fa-bars"></i></a> </div> <div class="header-content"> <h1>MC DONALD'S</h1> <h2>3.4342 favoritos</h2> <div class="botao-favoritar"> <i class="fa fa-plus"></i> <a href="#"><span>Gostei</span></a> </div> </div> </div> <div class="content"> <div class="content-icons"> <div class="coracao"> <div class="bola-coracao"> <i class="fa fa-heart"></i> </div> <span>343</span> </div> <div class="estrelas"> <div class="bola-estrelas"> <i class="fa fa-street-view"></i> </div> <span>123</span> </div> <div class="location"> <div class="bola-location"> <i class="fa fa-bullhorn"></i> </div> <span>5</span> </div> </div> <h2 class="heading-text">Promoções Recentes</h2> <div class="promocao"> <a href="#"><i class="fa fa-chevron-left"></i></a> <div class="profile-pic"> <img src="https://yt3.ggpht.com/-avTHbIvvjKY/AAAAAAAAAAI/AAAAAAAAAAA/GtO4B-SrWkA/s900-c-k-no-mo-rj-c0xffffff/photo.jpg" alt="" /> </div> <div class="promocao-texto"> <h3>Mais descontos para você!</h3> <p> Bem vindo ao macdonalds. Aproveite os nossos descontos e tenha uma boa refeição. Recomendamos o bigMac! <a href="#">Ver Todo</a> </p> </div> <a href="#"><i class="fa fa-chevron-right"></i></a> </div> <h2 class="heading">Confira também</h2> <div class="indicacao"> <ul> <li> <div class="circular-number"><h3>1</h3></div> <i class="fa fa-heartbeat"></i> <div class="text-block"> <h3 class="subtitulo">Centauro</h3> <p>Blusa Nike Dry-Fit</p> <p>Novidade só aqui na Centauro!</p> </div> <!--<div class="text-direita">--> <h3 class="horario">3 horas</br>restantes</h3> <!--</div>--> </li> <li> <div class="circular-number"><h3>2</h3></div> <i class="fa fa-flag"></i> <div class="text-block"> <h3 class="subtitulo">Crawford</h3> <p>Sapatos de couro</p> <p>Qualidade italiana</p> </div> <!--<div class="text-direita">--> <h3 class="horario">2 horas</br>restantes</h3> <!--</div>--> </li> <li> <div class="circular-number"><h3>3</h3></div> <i class="fa fa-exchange"></i> <div class="text-block"> <h3 class="subtitulo">F&A Exchange</h3> <p>Viagem para os USA</p> <p>Aproveite hoje: Dólar R$3,71</p> </div> <!--<div class="text-direita">--> <h3 class="horario">4 horas</br>restantes</h3> <!--</div>--> </li> </ul> </div> </div> </div> </body></html>

Related: See More

Rotating CSS Card
BS4 Login, Register FORM + Mobile
Mobile Nav Bar
Mobile-Friendly API Documentation

Questions / Comments: