"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/adri_zag/pen/KdJXXZ?depth=everything&order=popularity&page=61&q=movie&show_forks=false" /> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'> <style class="cp-pen-styles">/* https://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; font-size:100%; font:inherit; vertical-align:baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block; } body { line-height:1; } ol, ul { list-style:none; } blockquote, q { quotes:none; } blockquote:before, blockquote:after, q:before, q:after { content:''; content:none; } table { border-collapse:collapse; border-spacing:0; } /* apply a natural box layout model to all elements */ *,*::before,*::after,*:before,*:after { -moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box; } /* inputs */ input,button,textarea,select { color:inherit; font-size:inherit; font-style:inherit; font-family:inherit; -webkit-border-radius:0; border-radius:0; -webkit-padding-start:0; align-items:flex-start; text-index:0; border:none; outline:none; background:none; padding:0; margin:0; width:auto; height:auto; line-height:1em; } /* inputs appearance (not for every input) */ input[type=text],input[type=reset],input[type=password],input[type=search],input[type=email],input[type=tel],input[type=url],input[type=time],input[type=week],input[type=month],input[type=date],input[type=datetime],input[type=datetime-local],input[type=number], input[type=submit],input[type=reset],input[type=color],input[type=file], button,textarea,select { height:1em; -webkit-appearance:none; -moz-appearance:none; appearance:none; } /* input color width */ input[type=color] { width:1em; } /* IE clear cross */ input::-ms-clear { display:none; } /* details and summary */ details, summary { -webkit-appearance:none; -moz-appearance:none; appearance:none; } /* text size adjusting */ body { -webkit-text-size-adjust:100%; -moz-text-size-adjust:100%; text-size-adjust:100%; } /* mark */ mark {background:none;} /* Font smoothing */ *,*::before,*::after,*:before,*:after { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* hr */ hr { height:1px; margin:0;padding:0; } /* u */ u { text-decoration:none; } /* th */ table th { text-align:left; } /* a */ a { color:inherit; outline:none; } * { box-sizing: border-box; } /*@import url(https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500italic,500,700,900,900italic,700italic);*/ @import url(https://fonts.googleapis.com/css?family=Open+Sans); body { background-color: #1e243b; color: #fefefe; font-family: 'Open Sans', sans-serif; /* font-family: 'Roboto', sans-serif;*/ } .phone { width: 320px; height: 580px; background: #489be3; margin: 80px auto; overflow: hidden; } header.intro { height: 20px; } header.intro .network { display: inline-block; } header.intro .network ul { padding-left: 10px; } ul li { display: inline-block; } header.intro ul li span { background: #fefefe; height: 6px; width: 6px; display: inline-block; border: thin solid #fefefe; } header.intro ul li span.empty { background: transparent; height: 6px; width: 6px; display: inline-block; border: thin solid #fefefe; } header.intro .hours { display: inline-block; position: relative; bottom: 15px; float: left; width: 100%; text-align: center; font-weight: 100; font-size: 0.75rem; padding-top: 3px; } header.intro .battery { display: inline-block; float: right; position: relative; bottom: 31px; right: 5px; } .tasks { text-align: center; margin-bottom: 15px; } .tasks p { display: inline-block; font-size: 0.85rem; padding: 0 10px; font-weight: 600; opacity: 0.5; cursor: pointer; } .tasks p.active { opacity: 1; } .cards { margin-top: 30px; } .cards .categories { font-weight: 300; font-size: 0.8rem; margin-bottom: 15px; margin-top: -5px; } .cards .card { -webkit-animation-name: mymove; animation-name: mymove; -webkit-animation-duration: 3s; animation-duration: 3s; transition: transform 0.15s; background: #fefefe; border-radius: 0.25rem; height: 60px; margin: 10px 0; } .cards .card div { display: inline-block; } .cards .card .icon { color: #489be3; height: 50px; width: 50px; text-align: center; margin-top: 5px; } .cards:nth-child(1) .card .icon {} .cards .card .icon i.fa { margin: auto; padding: 10px; font-size: 2rem; } .cards .card .content { color: #2a235c; font-size: 0.9rem; font-weight: 100; } .card .bold { font-weight: 700; padding-bottom: 5px; vertical-align: top; } nav.nav-bar { background: #2a3246; width: 100%; height: 60px; position: relative; top: 27px; } nav.nav-bar ul li { width: calc(100%/5); float: left; text-align: center; height: 60px; } nav.nav-bar ul li:nth-child(3) { background: #FED460!important; } nav.nav-bar i { font-size: 1.6rem; padding: 15px; color: #7B849D; } nav.nav-bar ul li.active { background: #1e243b; } .cards .card.slide { transform: translateX(-70px) translateY(0); } .cards .card button { top: 5px; position: fixed; right: -70px; height: 50px; width: 60px; border-radius: 0.25rem; color: #fefefe; background: #ff5555; visibility: hidden; } .cards .card button.show { visibility: visible; } .card:nth-child(2) { -webkit-animation-delay: 0.15s; animation-delay: 0.15s; } .card:nth-child(3) { -webkit-animation-delay: 0.30s; animation-delay: 0.30s; } .card:nth-child(4) { -webkit-animation-delay: 0.45s; animation-delay: 0.45s; } /* Chrome, Safari, Opera */ @-webkit-keyframes mymove { from { opacity: 0; } to { opacity: 1; } } @keyframes mymove { from { opacity: 0; } to { opacity: 1; } } /*SET UP BASICS*/ .container { width: 90%; margin: auto; } .circle { border-radius: 50%; } .inline { display: inline-block!important; } </style></head><body> <div class="phone"> <div class="container"> <header class="intro"> <div class="network"> <ul> <li><span class="circle "></span></li> <li><span class="circle "></span></li> <li><span class="circle "></span></li> <li><span class="circle empty"></span></li> <li><span class="circle empty"></span></li> </ul> </div> <div class="hours"> <p>9:41 AM</p> </div> <div class="battery"><i class="fa fa-battery-full"></i> </div> </header> <nav class="tasks"> <p class="active">Open Tasks</p> <p>Past Tasks</p> </nav> <div class="cards"> <div class="categories"> <p>NOW</p> </div> <div class="card"> <div class="icon" style="transform: rotate(-45deg);"><i class="fa fa-plane"></i> </div> <div class="content"> <p class="bold">Air ticket to New York</p> <p>i need a ticket to NY for...</p> </div> <button>Cancel</button> </div> <div class="card"> <div class="icon"><i class="fa fa-cutlery"></i> </div> <div class="content"> <p class="bold">Buy me a lunch right now</p> <p>i would like to have a BK...</p> </div> <button>Cancel</button> </div> <div class="card"> <div class="icon"><i class="fa fa-coffee"></i> </div> <div class="content"> <p class="bold">Get me a latte at Starbucks</p> <p>One latte,non-fat milk, less...</p> </div> <button>Cancel</button> </div> </div> <div class="cards"> <div class="categories"> <p>SCHEDULED</p> </div> <div class="card"> <div class="icon"><i class="fa fa-folder"></i> </div> <div class="content"> <p class="bold">Help me to send packages</p> <p>Hey i need people to send...</p> </div> <button>Cancel</button> </div> <div class="card"> <div class="icon"><i class="fa fa-ticket"></i> </i> </div> <div class="content"> <p class="bold">Help me buy movie ticket</p> <p>i want to watch Spectre 007...</p> </div> <button>Cancel</button> </div> </div> </div> <nav class="nav-bar"> <ul> <li class="active"><a href="#"><i class="fa fa-home "></i></a></li> <li><a href="#"><i class="fa fa-bell-o"></i></a></li> <li><a href="#"><i class="fa fa-commenting-o"></i></a></li> <li><a href="#"><i class="fa fa-user"></i></a></li> <li><a href="#"><i class="fa fa-gear"></i></a></li> </ul> </nav> </div> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script >$(document).ready(function () { var fixBottom = 27; $(this).find("button").click(function () { fixBottom += 70; $(this).parent().remove(); $("nav.nav-bar").css("top", fixBottom + "px"); }); $(".tasks p").click(function () { $(".tasks p").toggleClass("active"); }); $(".cards .card").click(function () { $(this).toggleClass("slide"); $(this).find("button").toggleClass("show"); }); $(".nav-bar li").click(function () { $(".nav-bar li").removeClass("active"); $(this).toggleClass("active"); }) $("a").click(function (event) { event.preventDefault(); }); }); //# sourceURL=pen.js </script> </body></html>

Related: See More


Questions / Comments: