"card movie"
Bootstrap 4.1.1 Snippet by Marjox

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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/ryanparag/pen/LLrVbo?depth=everything&order=popularity&page=10&q=movie&show_forks=false" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'><link rel='stylesheet prefetch' href='https://fonts.googleapis.com/icon?family=Material+Icons'> <style class="cp-pen-styles">@import url("https://fonts.googleapis.com/css?family=Arimo:400,700"); body { height: 100%; width: 100%; background: #e9e9e9; font-family: 'Arimo', Arial, sans-serif; font-weight: 400; font-size: 14px; color: #010b26; } * { -webkit-transition: 300ms; transition: 300ms; } .intro { text-align: center; } ul { list-style-type: none; } h1, h2, h3, h4, h5, p { font-weight: 400; } a { text-decoration: none; color: inherit; } a:hover { color: #6ABCEA; } .container { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; max-width: 100%; margin-top: 10vh; margin-left: auto; margin-right: auto; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .movie-card { background: #ffffff; box-shadow: 0px 6px 18px rgba(0, 0, 0, 0.1); width: 100%; max-width: 315px; margin: 2em; border-radius: 10px; display: inline-block; } .movie-header { padding: 0; margin: 0; height: 367px; width: 100%; display: block; border-top-left-radius: 10px; border-top-right-radius: 10px; } .manOfSteel { background: url("http://henrycavill.org/images/Films/2013-Man-of-Steel/posters/3-Walmart-Superman-a.jpg"); background-size: cover; } .babyDriver { background: url("https://i0.wp.com/media2.slashfilm.com/slashfilm/wp/wp-content/images/baby-driver-poster.jpg"); background-size: cover; } .theDarkTower { background: url("http://cdn.collider.com/wp-content/uploads/2017/03/the-dark-tower-poster.jpg"); background-size: cover; background-position: 100% 100%; } .bladeRunner2049 { background: url("http://cdn.collider.com/wp-content/uploads/2017/05/blade-runner-2049-poster-ryan-gosling.jpeg"); background-size: cover; background-position: 100% 80%; } .header-icon-container { position: relative; } .header-icon { width: 100%; height: 367px; line-height: 367px; text-align: center; vertical-align: middle; margin: 0 auto; color: #ffffff; font-size: 54px; text-shadow: 0px 0px 20px #6abcea, 0px 5px 20px #6ABCEA; opacity: .85; } .header-icon:hover { background: rgba(0, 0, 0, 0.15); font-size: 74px; text-shadow: 0px 0px 20px #6abcea, 0px 5px 30px #6ABCEA; border-top-left-radius: 10px; border-top-right-radius: 10px; opacity: 1; } .movie-card:hover { -webkit-transform: scale(1.03); transform: scale(1.03); box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.08); } .movie-content { padding: 18px 18px 24px 18px; margin: 0; } .movie-content-header, .movie-info { display: table; width: 100%; } .movie-title { font-size: 24px; margin: 0; display: table-cell; } .imax-logo { width: 50px; height: 15px; background: url("https://6a25bbd04bd33b8a843e-9626a8b6c7858057941524bfdad5f5b0.ssl.cf5.rackcdn.com/media_kit/3e27ede823afbf139c57f1c78a03c870.jpg") no-repeat; background-size: contain; display: table-cell; float: right; position: relative; margin-top: 5px; } .movie-info { margin-top: 1em; } .info-section { display: table-cell; text-transform: uppercase; text-align: center; } .info-section:first-of-type { text-align: left; } .info-section:last-of-type { text-align: right; } .info-section label { display: block; color: rgba(0, 0, 0, 0.5); margin-bottom: .5em; font-size: 9px; } .info-section span { font-weight: 700; font-size: 11px; } @media screen and (max-width: 500px) { .movie-card { width: 95%; max-width: 95%; margin: 1em; display: block; } .container { padding: 0; margin: 0; } } </style></head><body> <p class="intro">Based from <b><a href="https://dribbble.com/shots/2241918-Movie-Ticket-Card-Sketch-freebie" target="_blank">Soumya's Movie Ticket Card</a></b><p> <div class="container"> <div class="movie-card"> <div class="movie-header manOfSteel"> <div class="header-icon-container"> <a href="#"> <i class="material-icons header-icon"></i> </a> </div> </div><!--movie-header--> <div class="movie-content"> <div class="movie-content-header"> <a href="#"> <h3 class="movie-title">Man of Steel</h3> </a> <div class="imax-logo"></div> </div> <div class="movie-info"> <div class="info-section"> <label>Date & Time</label> <span>Sun 8 Sept - 10:00PM</span> </div><!--date,time--> <div class="info-section"> <label>Screen</label> <span>03</span> </div><!--screen--> <div class="info-section"> <label>Row</label> <span>F</span> </div><!--row--> <div class="info-section"> <label>Seat</label> <span>21,22</span> </div><!--seat--> </div> </div><!--movie-content--> </div><!--movie-card--> <div class="movie-card"> <div class="movie-header babyDriver"> <div class="header-icon-container"> <a href="#"> <i class="material-icons header-icon"></i> </a> </div> </div><!--movie-header--> <div class="movie-content"> <div class="movie-content-header"> <a href="#"> <h3 class="movie-title">Baby Driver</h3> </a> <div class="imax-logo"></div> </div> <div class="movie-info"> <div class="info-section"> <label>Date & Time</label> <span>Tue 4 July - 05:00PM</span> </div><!--date,time--> <div class="info-section"> <label>Screen</label> <span>01</span> </div><!--screen--> <div class="info-section"> <label>Row</label> <span>H</span> </div><!--row--> <div class="info-section"> <label>Seat</label> <span>15</span> </div><!--seat--> </div> </div><!--movie-content--> </div><!--movie-card--> <div class="movie-card"> <div class="movie-header theDarkTower"> <div class="header-icon-container"> <a href="#"> <i class="material-icons header-icon"></i> </a> </div> </div><!--movie-header--> <div class="movie-content"> <div class="movie-content-header"> <a href="#"> <h3 class="movie-title">The Dark Tower</h3> </a> <div class="imax-logo"></div> </div> <div class="movie-info"> <div class="info-section"> <label>Date & Time</label> <span>Wed 16 Aug - 07:00PM</span> </div><!--date,time--> <div class="info-section"> <label>Screen</label> <span>06</span> </div><!--screen--> <div class="info-section"> <label>Row</label> <span>C</span> </div><!--row--> <div class="info-section"> <label>Seat</label> <span>18</span> </div><!--seat--> </div> </div><!--movie-content--> </div><!--movie-card--> <div class="movie-card"> <div class="movie-header bladeRunner2049"> <div class="header-icon-container"> <a href="#"> <i class="material-icons header-icon"></i> </a> </div> </div><!--movie-header--> <div class="movie-content"> <div class="movie-content-header"> <a href="#"> <h3 class="movie-title">Blade Runner 2049</h3> </a> <div class="imax-logo"></div> </div> <div class="movie-info"> <div class="info-section"> <label>Date & Time</label> <span>Mon 16 Oct - 10:00PM</span> </div><!--date,time--> <div class="info-section"> <label>Screen</label> <span>06</span> </div><!--screen--> <div class="info-section"> <label>Row</label> <span>D</span> </div><!--row--> <div class="info-section"> <label>Seat</label> <span>05,06</span> </div><!--seat--> </div> </div><!--movie-content--> </div><!--movie-card--> </div><!--container--> </body></html>

Related: See More


Questions / Comments: