"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/CodeFrogShow/pen/KWzjrb?depth=everything&order=popularity&page=22&q=movie&show_forks=false" /> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'><link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900'> <style class="cp-pen-styles">* { margin: 0; padding: 0; outline: none; } body { font-family: 'Roboto', sans-serif; background: #da0c00; } .container { width: 380px; margin: 15px auto; } .app { width: 380px; height: 650px; background: #f7f9fc; overflow: hidden; box-shadow: 0 35px 55px -20px rgba(0,0,0,0.4); } .cover { position: relative; height: 200px; overflow: hidden; } .cover img { height: 100%; margin-left: -40px; box-shadow: -5px 60px 15px 55px rgba(2,7,33,0.4), -5px 60px 35px -55px rgba(0,0,0,0.2); } .cover:after { position: absolute; content: ''; width: 100%; height: 200px; display: inline-block; background: transparent; top: 0; left: 0; box-shadow: inset 0 0 185px rgba(2,7,33,0.4); } .cover .fa { position: absolute; font-size: 38px; left: 50%; top: 55px; color: #f7f9fc; margin-left: -15px; opacity: 0.9; } .cover .title { position: absolute; width: 100%; display: inline-block; text-align: center; text-transform: uppercase; bottom: 0; color: #fff; font-size: 15px; font-weight: 600; background: rgba(2,7,33,0.7); padding: 10px 0; letter-spacing: 0.5px; } .cover .title span { display: block; font-size: 10px; font-weight: 300; letter-spacing: 1px; padding-top: 5px; } .fav { position: relative; } .btn { position: absolute; padding: 10px 15px; border: none; border-radius: 35px; margin-top: 2px; margin-left: 15px; background: #ff5349; color: #fff; font-size: 14px; font-weight: 500; box-shadow: 1px 1px 0 rgba(0,0,0,0.2), 0 16px 15px -16px #d24c0f, inset 0 0 25px rgba(0,0,0,0.05); } .fav .fa { font-size: 14px; padding-right: 5px; } .fav .users { position: relative; margin-top: 2px; margin-right: 40px; float: right; z-index: 99999; } .fav .users img { position: relative; width: 29px; border: 2px solid rgba(255,83,73,0.9); border-radius: 100%; margin-left: -15px; } .fav .users span.fav-count { position: absolute; width: 29px; height: 29px; border: 2px solid #fff; background: rgba(255,83,73,0.95); display: inline-block; border-radius: 100%; font-size: 11px; line-height: 32px; text-align: center; top: 0; margin-left: 55px; color: #fff; } .user-1 { z-index: 99; } .user-2 { z-index: 98; } .fav:before, .fav:after { content: ''; width: 100%; height: 100%; display: inline-block; clear: both; } .story { width: 90%; height: auto; background: #fff; margin: 25px auto; padding: 10px 0; border: 1px solid rgba(0,0,0,0.03); box-shadow: 0 10px 15px -1px rgba(0,0,0,0.1); } .story .title { position: absolute; margin-top: -40px; font-size: 16px; font-weight: 600; color: rgba(0,0,0,0.5); } .story div { display: inline-block; } .story .story-icon { width: 20%; text-align: center; } .story .story-icon .fa { position: relative; font-size: 10px; top: -14px; padding: 5px 12px 5px 14px; border: 3px solid #ff5349; color: #ff5349; border-radius: 7px; opacity: 0.7; } .story .story-icon:before { content: ''; width: 7px; height: 7px; display: inline-block; background: #fff; position: absolute; margin-top: -14px; margin-left: 34px; border-radius: 100%; z-index: 999; } .story .story-icon:after { content: ''; display: inline-block; position: absolute; width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 7px solid #ff5349; margin-left: -34px; margin-top: 12px; opacity: 0.7; } .story .story-text { width: 70%; padding: 0 5%; font-size: 12px; color: rgba(0,0,0,0.3); font-weight: 600; line-height: 16px; } .schedule { position: relative; width: 90%; height: auto; background: #fff; margin: 50px auto; border: 1px solid rgba(0,0,0,0.03); box-shadow: 0 10px 15px -1px rgba(0,0,0,0.1); } .schedule > .title { position: absolute; font-size: 16px; margin-top: -35px; font-weight: 600; color: rgba(0,0,0,0.5); } .detail .date { padding: 8px 5px; display: inline-block; background: #4f5393; color: #fff; font-size: 18px; font-weight: 600; text-align: center; box-shadow: inset 0 -25px 75px -25px rgba(0,0,0,0.4); } .detail .date span { display: block; font-size: 11px; text-transform: uppercase; font-weight: 400; padding-top: 2px; } .detail .location { position: relative; font-size: 14px; font-weight: 600; display: inline-block; padding: 0 10px; top: 1px; color: rgba(0,0,0,0.6); } .detail .location span { display: block; font-size: 12px; color: rgba(0,0,0,0.3); } .detail .btn { margin-top: 12px; right: 10px; } .map-location { position: relative; height: 105px; display: inline-block; padding: 15px 0 5px 0; } .map-location img { width: 120px; } .map-location:before { content: ''; display: inline-block; position: absolute; width: 100%; height: 100%; box-shadow: inset 0 0 25px 9px #fff; } .map-location:after { content: ''; display: inline-block; width: 12px; height: 12px; background: #ff5349; position: absolute; top: 0; border-radius: 100%; margin-top: 65px; margin-left: 50px; border: 1px solid rgba(255,255,255,0.4); box-shadow: 0 0 0 5px rgba(255,83,73,0.5), 0 0 0 10px rgba(255,83,73,0.2); } .distance { position: absolute; top: 42px; margin-left: 43px; font-size: 11px; font-weight: 600; padding: 5px 10px; background: #fff; color: rgba(0,0,0,0.5); z-index: 99; box-shadow: 0 0 3px rgba(0,0,0,0.2); } .distance:after { content: ''; display: inline-block; position: absolute; width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 7px solid #fff; left: 7px; margin-top: 18px; } .schedule-info { float: right; margin-top: 15px; width: 62%; margin-right: -7px; } .schedule-info span { display: inline-block; } .rows > span { width: 40%; padding: 5px 5%; } .schedule-info span.info { display: block; } .schedule-info span .title { font-size: 11px; font-weight: 600; color: rgba(0,0,0,0.3); padding-bottom: 5px; } .schedule-info span .name, .schedule-info span .time { font-size: 14px; font-weight: 600; color: rgba(0,0,0,0.7); } .schedule-info span .row-line { font-size: 12px; background: #ff5349; padding: 5px 15px; border-radius: 20px; color: #fff; font-weight: 500; letter-spacing: 1px; } .schedule-info span .seat-num span { font-size: 12px; background: #4f5393; padding: 5px; border-radius: 4px; color: #fff; font-weight: 500; letter-spacing: 1px; } .yt { position: fixed; padding: 7px 10px 3px 10px; top: 5px; right: 5px; background: rgba(0, 0, 0, 0.4); border-radius: 7px; } .yt:hover { background: rgba(0, 0, 0, 0.4); }</style></head><body> <div class="container"> <div class="app"> <div class="cover"> <img src="https://s5.postimg.org/9z4aqltuv/cover.jpg" alt="cover"> <i class="fa fa-youtube-play"></i> <span class="title"> cloudy with the chance of meatballs(2009) <span> 1hr 30mins, 7.4 IMDB, Animation Fantasy/Comedy </span> </span> </div> <div class="fav"> <button class="btn"> <i class="fa fa-plus"></i> Add To Favorite </button> <div class="users"> <img src="https://s5.postimg.org/xh63ish9j/steve.jpg" alt="" class="user-1"> <img src="https://s5.postimg.org/5opmv0orr/bill.jpg" alt="" class="user-2"> <img src="https://s5.postimg.org/qcoa9ra07/mark.jpg" alt="" class="user-3"> <span class="fav-count">+11</span> </div> </div> <div class="story"> <span class="title"> Plot Story </span> <div class="story-icon"> <i class="fa fa-play"></i> </div><div class="story-text"> Flint Lockwood is an inventor who develops insignificant things. However, when his local sardine cannery shuts down and .. </div> </div> <div class="schedule"> <span class="title"> Coming Schedule </span> <div class="detail"> <span class="date">07 <span>November</span> </span> <span class="location"> Cinemax Pro Cinemas <span class="city"> Kalyan, Mumbai </span> </span> <button class="btn"> <i class="fa fa-check"></i> Booked </button> </div> <div class="map-location"> <img src="https://s5.postimg.org/jkxv6wl0n/map.jpg" alt=""> <span class="distance">1.1 Miles</span> </div> <div class="schedule-info"> <div class="rows"> <span class="theatre"> <span class="title"> Theatre </span> <span class="info name"> CinePlex </span> </span><span class="show"> <span class="title"> Show Time </span> <span class="info time"> 2:15 PM </span> </span> </div> <div class="rows"> <span class="row"> <span class="title"> Row </span> <span class="info row-line"> CF Front </span> </span><span class="seat"> <span class="title"> Seat </span> <span class="info seat-num"> <span class="num">06</span> <span class="num">07</span> </span> </span> </div> </div> </div> </div> </div> <div class="yt"> <a href="https://www.youtube.com/watch?v=--C6sD4LGI0" target="_blank"> <img width="151" src="https://s5.postimg.org/vzwuxmw87/template.png" alt="" /> </a> </div> </body></html>

Related: See More


Questions / Comments: