"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/abisz/pen/vXyOvz?depth=everything&order=popularity&page=31&q=movie&show_forks=false" /> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'><link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css'><link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto:300,400,500'> <style class="cp-pen-styles">* { box-sizing: border-box; } body { background: #EDFCF7; color: #fff; font-family: 'Roboto', sans-serif; } .container { max-width: 380px; height: 620px; overflow: hidden; margin: 30px auto 0; background: linear-gradient(#41B7F6, #3788F6); box-shadow: 0 0 40px #838383; border-radius: 7px; position: relative; } header { min-height: 124px; padding: 1em 0.75em 0; } .search-field { position: relative; } .search-field input[type="text"] { width: 100%; padding: 1.25em 1.5em; border-radius: 40px; border: none; background: #3789F7; color: #fff; font-weight: 300; font-size: 0.8em; letter-spacing: 1px; margin-top: 0.5em; margin-bottom: 2em; } .search-field input[type="text"]:focus { outline: none; } .search-field input[type="text"]::-webkit-input-placeholder { color: inherit; } .search-field::after { font-family: 'FontAwesome'; content: '\f002'; position: absolute; right: 2em; top: 1.25em; cursor: pointer; } .nav-bar a { color: inherit; font-size: 1.5em; text-decoration: none; float: left; } .nav-bar a:not(:first-child) { float: right; } .nav-title { display: block; text-align: center; font-weight: 100; } .city { text-align: center; } .city h1 { font-weight: 300; font-size: 1.5em; } .city h1::after { font-family: 'FontAwesome'; content: '\f078'; margin-left: 10px; font-size: 0.5em; vertical-align: middle; } ul.days { clear: both; margin: 15px 0 0; padding: 0; list-style: none; display: flex; justify-content: space-around; } li.day { display: inline-block; padding: 1em 0; width: 100%; } li.day.active { background: #40dd8f; } span.number { display: block; font-size: 1.4em; text-align: center; } span.name { text-transform: uppercase; font-weight: 100; font-size: 0.6em; margin-top: 5px; text-align: center; display: block; } .main { padding: 0 0.75em; } .main.light-background { background-color: #F0F7FD; color: #505050; } ul.movies { padding: 0; margin: 0; list-style: none; } li.movie { width: 100%; background: #fff; margin-bottom: 10px; height: 150px; } li.movie img { height: 150px; display: inline-block; } .info { display: inline-block; padding: 12px; vertical-align: top; } .title { color: #505050; font-size: 1em; margin: 0 0 5px; } .lang, .genre, .duration { color: #aaa; } .lang { font-size: 0.75em; margin: 0; font-weight: 100; } .genres { margin: 20px 0; padding: 0; } .genre { display: inline-block; border-radius: 20px; padding: 0.3em 0.5em; font-size: 0.6em; font-weight: 400; text-transform: uppercase; background: #F0F7FD; margin-right: 5px; } .duration { font-size: 0.75em; } .stars { display: inline-block; margin-left: 20px; } .star { display: inline-block; } .star::before { content: '\f005'; font-family: 'FontAwesome'; color: #aaa; font-size: 0.8em; } .stars[data-stars='1'] .star:nth-child(-n + 1)::before { color: #FCCB32; } .stars[data-stars='2'] .star:nth-child(-n + 2)::before { color: #FCCB32; } .stars[data-stars='3'] .star:nth-child(-n + 3)::before { color: #FCCB32; } .stars[data-stars='4'] .star:nth-child(-n + 4)::before { color: #FCCB32; } .stars[data-stars='5'] .star:nth-child(-n + 5)::before { color: #FCCB32; } .rating { color: #3789F7; font-size: 0.8em; margin-left: 1em; } .plus { display: inline-block; height: 100%; position: relative; right: 0; top: 0; cursor: pointer; } .plus::after { content: '+'; position: absolute; font-size: 30px; font-weight: 100; color: #40dd8f; top: calc(50% - 15px); } ul.theaters { padding: 15px 0 25px; margin: 0; list-style: none; } li.theater { background-color: #fff; margin-bottom: 10px; box-shadow: 0 0 5px #dddddd; padding: 15px; position: relative; } span.theater-name { font-weight: 400; } span.theater-name::after { content: ":"; } span.place { color: #aaa; } ul.shows { margin: 10px 0 0; padding: 0; list-style: none; } ul.shows li { display: inline-block; font-size: 0.6em; color: #3789F7; border: 1px solid #c3dff7; padding: 5px 12px; border-radius: 25px; text-transform: uppercase; font-weight: 500; cursor: pointer; } .distance { font-size: 0.6em; font-weight: 500; color: #aaa; position: absolute; top: 15px; right: 15px; } footer { background-color: #fff; position: absolute; bottom: 0; width: 100%; box-shadow: 0 0 20px #838383; } footer ul { padding: 0.75em 0; margin: 0; display: flex; justify-content: space-around; } footer ul li { color: #aaa; display: inline-block; font-size: 1.5em; } footer ul li.active { color: #40dd8f; } .anim-fadeOut { animation-name: fadeOut; animation-duration: 0.8s; animation-fill-mode: forwards; } @keyframes fadeOut { from { bottom: 0; opacity: 1; } to { bottom: 20px; opacity: 0; } } .anim-fadeIn { animation-name: fadeIn; animation-duration: 0.8s; animation-fill-mode: forwards; } @keyframes fadeIn { from { bottom: 20px; opacity: 0; } to { bottom: 0; opacity: 1; } } .anim-slideToLeft { animation-name: slideToLeft; animation-duration: 0.8s; animation-fill-mode: forwards; } @keyframes slideToLeft { from { width: 100%; opacity: 1; } to { width: 0; opacity: 0; } } .anim-slideToRight { animation: slideToRight 0.8s forwards; } @keyframes slideToRight { from { width: 0; opacity: 0; } to { width: 100%; opacity: 1; } } .anim-slideDown { animation: slideDown 0.8s forwards; } @keyframes slideDown { from { height: 0; opacity: 0; } to { height: auto; opacity: 1; } } .anim-slideUp { animation: slideUp 0.8s forwards; } @keyframes slideUp { from { height: auto; opacity: 1; } to { height: 0; opacity: 0; } } .toggleView { position: absolute; bottom: 0; } </style></head><body> <div class="container"> <div class="container-padding"> <header> <div class="nav-bar"> <a href="" class="nav-icon left"> <i class="fa fa-bars"></i> </a> <a href="#" class="nav-icon right"> <i class="fa fa-sliders"></i> </a> <span class="nav-title">Book tickets</span> </div> <div class="city"> <h1>Bangalore</h1> </div> <div class="search-field"> <input type="text" placeholder="Search & discover movies" /> </div> <ul class="days"> <li class="day"> <span class="number">25</span> <span class="name">thu</span> </li> <li class="day"> <span class="number">26</span> <span class="name">fri</span> </li> <li class="day active"> <span class="number">27</span> <span class="name">sat</span> </li> <li class="day"> <span class="number">28</span> <span class="name">sun</span> </li> <li class="day"> <span class="number">29</span> <span class="name">mon</span> </li> </ul> </header> <div class="main"> <ul class="movies" > <li class="movie"> <img src="https://www.cinematerial.com/media/posters/md/pm/pm3fb56s.jpg?v=1456740094" alt="" /> <div class="info"> <h2 class="title">Mechanic Resurrection</h2> <h3 class="lang">English</h3> <ul class="genres"> <li class="genre">Action</li> <li class="genre">Drama</li> <li class="genre">Thriller</li> </ul> <span class="duration">2h 45min</span> <div class="stars" data-stars="4"> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <span class="rating">8.9</span> </div> </div> <div class="plus"></div> </li> <li class="movie"> <img src="http://www.newsinsearch.com/wp-content/uploads/2016/06/Mohenjo-Daro-Official-Poster-Hrithik-Roshan.jpg" alt="" /> <div class="info"> <h2 class="title">Mohenjo Daro</h2> <h3 class="lang">Hindi</h3> <ul class="genres"> <li class="genre">Action</li> <li class="genre">History</li> </ul> <span class="duration">1h 50min</span> <div class="stars" data-stars="3"> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <span class="rating">7.4</span> </div> </div> <div class="plus"></div> </li> <li class="movie"> <img src="http://st1.bollywoodlife.com/wp-content/uploads/2015/10/616850.jpg" alt="" /> <div class="info"> <h2 class="title">A Flying Jatt</h2> <h3 class="lang">Hindi</h3> <ul class="genres"> <li class="genre">Comedy</li> <li class="genre">Superhero</li> <li class="genre">Action</li> </ul> <span class="duration">2h 30min</span> <div class="stars" data-stars="1"> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <span class="rating">6.8</span> </div> </div> <div class="plus"></div> </li> </ul> <ul class="theaters"> <li class="theater"> <span class="theater-name">Balaji Theater</span> <span class="place">Taverkere</span> <ul class="shows"> <li><span>10.30 am</span></li> <li><span>7.00 pm</span></li> </ul> <span class="distance">2.6 km</span> </li> <li class="theater"> <span class="theater-name">PVR Forum</span> <span class="place">Bangalore</span> <ul class="shows"> <li><span>10.30 am</span></li> <li><span>2.30 pm</span></li> <li><span>7.00 pm</span></li> <li><span>9.00 pm</span></li> </ul> <span class="distance">3.6 km</span> </li> <li class="theater"> <span class="theater-name">Rex Theatre</span> <span class="place">Brigade Road</span> <ul class="shows"> <li><span>10.30 am</span></li> <li><span>7.00 pm</span></li> </ul> <span class="distance">5.2 km</span> </li> <li class="theater"> <span class="theater-name">Gopalan Ciemas</span> <span class="place">Bennerghatta</span> <ul class="shows"> <li><span>10.30 am</span></li> <li><span>2.30 pm</span></li> <li><span>7.00 pm</span></li> </ul> <span class="distance">7.3 km</span> </li> <li class="theater"> <span class="theater-name">Cinepolis</span> <span class="place">Bennerghatta Road</span> <ul class="shows"> <li><span>9.30 am</span></li> </ul> <span class="distance">8.5 km</span> </li> </ul> </div> </div> <footer> <ul> <li class="active"> <i class="fa fa-film" aria-hidden="true"></i> </li> <li> <i class="fa fa-ticket" aria-hidden="true"></i> </li> <li> <i class="fa fa-search" aria-hidden="true"></i> </li> <li> <i class="fa fa-user" aria-hidden="true"></i> </li> </ul> </footer> </div> <button class="toggleView">toggle View</button> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> <script >var view = "movie", animDuration = 800; jQuery.fn.extend({ hideAfterAnim: function(anim) { var me = this; this.addClass(anim); setTimeout(function () { me.css('display', 'none'); }, animDuration); }, showThenAnim: function(anim) { return this .css('display', 'block') .addClass(anim); }, slideToLeft: function () { return this .removeClass('anim-slideToRight') .hideAfterAnim('anim-slideToLeft'); }, slideToRight: function () { this .removeClass('anim-slideToLeft') .showThenAnim('anim-slideToRight'); }, }); init(); $('.plus, .toggleView').on('click', function() { toggleView(); }); $('.nav-icon.left').on('click', function(e) { e.preventDefault(); if (view === 'booking') { toggleView('movie'); } }); function toggleView(newView) { if (newView && typeof newView === 'string') { view = newView; } else { view = view == 'booking' ? 'movie' : 'booking'; } setIcons(); switch (view) { case 'movie': $('.nav-title').hide(); $('.main').removeClass('light-background'); $('ul.days') .removeClass('anim-slideDown') .hideAfterAnim('anim-slideUp'); $('ul.theaters') .removeClass('anim-slideDown') .hideAfterAnim('anim-slideUp'); setTimeout(function () { $('ul.movies').slideToRight(); $('.search-field').slideToRight(); $('footer') .removeClass('anim-fadeOut') .showThenAnim('anim-fadeIn'); $('.city') .removeClass('anim-fadeOut') .showThenAnim('anim-fadeIn'); }, animDuration); break; case 'booking': $('ul.movies').slideToLeft(); $('.search-field').slideToLeft(); $('footer') .removeClass('anim-fadeIn') .hideAfterAnim('anim-fadeOut'); $('.city') .removeClass('anim-fadeIn') .hideAfterAnim('anim-fadeOut'); setTimeout(function () { $('.nav-title').show(); $('.main').addClass('light-background'); $('ul.days') .css('display', 'flex') .removeClass('anim-slideUp') .addClass('anim-slideDown'); $('ul.theaters') .css('display', 'block') .removeClass('anim-slideUp') .addClass('anim-slideDown'); }, animDuration); break; default: } } function init() { $('ul.days').hide(); $('ul.theaters').hide(); toggleView('movie'); } function setIcons (isMovies) { if (isMovies) { $('.nav-icon.left i') .addClass('fa-bars') .removeClass('fa-chevron-left'); $('.nav-icon.right i') .addClass('fa-sliders') .removeClass('fa-search'); } else { $('.nav-icon.left i') .removeClass('fa-bars') .addClass('fa-chevron-left'); $('.nav-icon.right i') .removeClass('fa-sliders') .addClass('fa-search'); } } //# sourceURL=pen.js </script> </body></html>

Related: See More

Paper Kit 2 Angular
BS4 Login, Register FORM + Mobile
Mobile Nav Bar
Mobile-Friendly API Documentation

Questions / Comments: