"card"
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/arnellebalane/pen/rxBXqq?limit=all&page=65&q=form" /> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css'> <style class="cp-pen-styles">/** Base Styles **/ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 62.5%; } body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 100vh; font-family: "Proxima Nova", "Myriad Pro", sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #333; background: url("https://cdn.arnellebalane.com/images/codepen-day85/background.jpg") center center no-repeat; background-size: cover; } ul { list-style: none; } button { border: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: none; outline: none; } /** Card Styles **/ .card { width: 38rem; height: 64rem; position: relative; border-radius: 0.5rem; background: #fff top center no-repeat; background-size: cover; box-shadow: 0 0.2rem 8.4rem 0 rgba(0,0,0,0.5); overflow: hidden; -webkit-transition: background-image 500ms ease-out; transition: background-image 500ms ease-out; } .card::before, .card::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 0.5rem; } .card::before { background-color: #21313c; -webkit-clip-path: polygon(0 30%, 100% 48%, 100% 100%, 0% 100%); clip-path: polygon(0 30%, 100% 48%, 100% 100%, 0% 100%); mix-blend-mode: overlay; } .card::after { background-color: #393a3d; -webkit-clip-path: polygon(0 44%, 100% 62%, 100% 100%, 0% 100%); clip-path: polygon(0 44%, 100% 62%, 100% 100%, 0% 100%); opacity: 0.7; } .card .info { width: 100%; height: 23rem; padding: 5rem 0 4rem 0; position: absolute; bottom: 0; z-index: 1; text-align: center; background-color: #fff; } .card .info::before { content: ""; height: 8rem; position: absolute; left: -1px; right: 0; bottom: calc(100% - 1px); background-color: #fff; -webkit-clip-path: polygon(0 100%, 100% 0, 100% 100%); clip-path: polygon(0 100%, 100% 0, 100% 100%); } .card .info .info-list { position: relative; } .card .info li { padding: 0 4rem; position: absolute; top: 0; left: 0; right: 0; visibility: hidden; opacity: 0; -webkit-transform: translateX(100%); transform: translateX(100%); -webkit-transition: visibility 0s ease-out 500ms, opacity 500ms ease-out, -webkit-transform 500ms ease-out; transition: visibility 0s ease-out 500ms, opacity 500ms ease-out, -webkit-transform 500ms ease-out; transition: transform 500ms ease-out, visibility 0s ease-out 500ms, opacity 500ms ease-out; transition: transform 500ms ease-out, visibility 0s ease-out 500ms, opacity 500ms ease-out, -webkit-transform 500ms ease-out; } .card .info li.current { visibility: visible; opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); -webkit-transition: visibility 0s ease-out 0s, opacity 500ms ease-out, -webkit-transform 500ms ease-out; transition: visibility 0s ease-out 0s, opacity 500ms ease-out, -webkit-transform 500ms ease-out; transition: transform 500ms ease-out, visibility 0s ease-out 0s, opacity 500ms ease-out; transition: transform 500ms ease-out, visibility 0s ease-out 0s, opacity 500ms ease-out, -webkit-transform 500ms ease-out; } .card .info li.move-left { -webkit-transform: translateX(-100%); transform: translateX(-100%); } .card .info img { display: none; } .card .info h1 { margin-bottom: 1.8rem; font-size: 3rem; font-weight: normal; } .card .info p { font-size: 1.6rem; color: #999; } .card .info .rating { display: none; } .card .actions { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; background-color: #fff; box-shadow: 0 0 3rem #fff; } .card .actions .rating-container { width: 10rem; height: 10rem; position: absolute; right: 10rem; bottom: 20.5rem; font-size: 2.4rem; text-align: center; line-height: 10rem; background-color: #fff; box-shadow: 0 0.9rem 3.2rem rgba(56,52,57,0.35); } .card .actions .cart { width: 12rem; border: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; position: absolute; left: 8rem; bottom: 21.5rem; text-indent: -100rem; line-height: 12rem; background: #1e1f22 url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAhCAYAAAHGyjm9AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAuxJREFUeNpi/PPnDwM6YILS/4HYC0r/Z4EKMkIVgGg5RnzaQeAdELOBGAABhKGSBYn9H91WRmQBRhjNhGbRRIAAAhkKcuBWIP4NswkdINssBsQvkYyEOwCbR/6jG8TEgB2ATJsI4wAEEMwkRiwmoHj+P5r3sCoCSTojBcp/fL77j81n6A5nwuUuFixeR1aYhq4Ip+PRw2kCNhPRTSpDMu09TBAggEC+ewakJZEUigDxWwYSAchJUlAbYLa8AWI7JDXPYEkdH2bCEgCgCDgIxJVQMWSL0PEaqJp1DKCIw4IfAvF/IN6CQx6EU6FqXoP4WPMgFKwH4gAgfgrEMmhyckD8EDka8RkEAoFgZ2MHKBYQMoikWMMH3iLFDD4xBoAAQnYR3oxJjItgpv9DTqnkGPQCiS8AxGrkGiQJ9VYSVOwmlkKAEH6GHNjzkdgxSOwXRDhoCXr0awHxVUKFHZbCB6O8vQbEn6DsaQQM6YDSF3ElSA4g/k6Eq2Cu4QKpx5YgfwDxGSj7PA5DHKD0H5il+LIIzEZuIP6GJvcbWnI6AvEBQllkMpT+iiW6YcXvAWIzLagmF8Qh5w3E2+ie+6lmECxMOgiIEfTaf6SwEsYjRtBFk6BFiyQBMQaAAAO5yBNIz0WXgCpOhlYCdAPYamxsvsunl4OYsFTI3NDaHgby8NRsIOBJbOuAUBkLMgtXIgI59CwQGyCJgcoVMyz1FaEQJgW8JJSqt0BzOAw8AmJ1aMFHKQAVjPuR+CCHKBPKHT5APAOtJfMS2rqnBIDM2Y0m5gryMDElUSYQVyPx+aCtIk0yHcMJTQ4saE3wA6QUjW1AHIvWxr8G7VKQCo5B294w0A3Es8kt9O2Rqx4oSEJreOADoGZ0MBJ/HRqfrFoI1P66AsSsFKaji2i5mKJqEVRn3IE2EMkBr4FYHqmtQ7GDaFp1DCoHUdIAYYOOCbyFVv0TcQxPEKuO4hACWSCEpU0nTKY6ikNoMRaxORSoAwMA379EywQmkkQAAAAASUVORK5CYII=") center center no-repeat; box-shadow: 0 0.9rem 3.2rem rgba(40,43,41,0.56); overflow: hidden; cursor: pointer; -webkit-transition: background-color 200ms ease-out; transition: background-color 200ms ease-out; } .card .actions .cart:hover, .card .actions .cart:focus { background-color: #282a2e; } .card .actions .cart:active { background-color: #1c1d20; -webkit-transition: none; transition: none; } .card .navigation { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 4rem; } .card .navigation li { width: 0.7rem; height: 0.7rem; margin: 0 0.2rem; border-radius: 50%; background-color: #ccc; cursor: pointer; } .card .navigation li.current { background-color: #1e1f22; } /** Booking Form Styles **/ .booking-form { padding: 5rem 3rem 3rem 3rem; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; border-radius: 0.5rem; background-color: #fff; overflow: hidden; -webkit-transform: translateY(100%); transform: translateY(100%); -webkit-transition: -webkit-transform 250ms ease-in; transition: -webkit-transform 250ms ease-in; transition: transform 250ms ease-in; transition: transform 250ms ease-in, -webkit-transform 250ms ease-in; } .booking-form.visible { -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition: -webkit-transform 350ms ease-out; transition: -webkit-transform 350ms ease-out; transition: transform 350ms ease-out; transition: transform 350ms ease-out, -webkit-transform 350ms ease-out; } .booking-form .cancel { width: 5rem; height: 1rem; position: absolute; top: 2rem; left: calc(50% - 2.5rem); font-size: 0; cursor: pointer; opacity: 0.5; -webkit-transition: opacity 250ms ease-out; transition: opacity 250ms ease-out; } .booking-form .cancel:hover { opacity: 1; } .booking-form .cancel::before, .booking-form .cancel::after { content: ""; width: 2.5rem; border-top: 2px solid #ccc; position: absolute; top: 0; left: 50%; border-radius: 2px; -webkit-transform-origin: left center; transform-origin: left center; } .booking-form .cancel::before { -webkit-transform: translateX(-1px) rotate(20deg); transform: translateX(-1px) rotate(20deg); } .booking-form .cancel::after { -webkit-transform: translateX(1px) rotate(160deg); transform: translateX(1px) rotate(160deg); } .booking-form .input { margin-bottom: 1px; padding: 1.5rem 2rem; position: relative; font-size: 1.6rem; line-height: 1; color: #666; background-color: #ebebeb; } .booking-form .input:first-of-type { border-radius: 0.3rem 0.3rem 0 0; } .booking-form .input:last-of-type { border-radius: 0 0 0.3rem 0.3rem; } .booking-form .input::after { content: ""; width: 0.8rem; height: 0.8rem; border-right: 2px solid #b2b2b2; border-bottom: 2px solid #b2b2b2; position: absolute; top: 1.8rem; right: 2rem; border-radius: 1px; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .booking-form .seats { padding: 3rem; border-radius: 0.3rem; background-color: #ebebeb; } .booking-form .seats header { display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 5rem; } .booking-form .seats .legend { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-right: 3rem; font-size: 1.6rem; } .booking-form .seats .legend-label { margin: 0.3rem 0 0 1rem; color: #666; } .booking-form .seats-row { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .booking-form .seats-row:not(:last-child) { margin-bottom: 1rem; } .booking-form .seat { -ms-flex-negative: 0; flex-shrink: 0; display: inline-block; width: 2rem; height: 2rem; border-radius: 50%; background-color: #ccc; cursor: pointer; } .booking-form .seat:first-child { margin-left: 0; } .booking-form .seat:last-child { margin-right: 0; } .booking-form .seat.taken { background-color: #808080; cursor: default; } .booking-form .seat.selected { background-color: #00aeef; } .booking-form .seats-row .seat { margin: 0 0.5rem; -webkit-transition: background-color 150ms ease-out, -webkit-transform 150ms ease-out; transition: background-color 150ms ease-out, -webkit-transform 150ms ease-out; transition: transform 150ms ease-out, background-color 150ms ease-out; transition: transform 150ms ease-out, background-color 150ms ease-out, -webkit-transform 150ms ease-out; } .booking-form .seats-row .seat:not(.taken):active { -webkit-transform: scale(1.2); transform: scale(1.2); } .booking-form .seats-row:not(:first-child) button:nth-child(2) { margin-right: 3.5rem; } .booking-form .seats-row:not(:first-child) button:nth-last-child(2) { margin-left: 3.5rem; } .booking-form footer { padding: 2rem 2rem 1.5rem 2rem; position: absolute; left: 0; right: 0; bottom: 0; font-size: 1.6rem; border-radius: 0 0 0.5rem 0.5rem; background-color: #313131; } .booking-form .total-label { color: #8f8f8f; } .booking-form .total-price { color: #fcfcfc; } .booking-form .submit-button { padding: 2.8rem 6rem; position: absolute; right: 2rem; bottom: 2rem; font-size: 1.6rem; text-transform: uppercase; color: #fcfcfc; background-color: #1e1f22; box-shadow: 0 1.5rem 4.6rem rgba(11,5,5,0.45); cursor: pointer; -webkit-transform: scale(0); transform: scale(0); -webkit-transition: background-color 200ms ease-out, -webkit-transform 200ms cubic-bezier(0.25, 0.1, 0.51, 1.32) 275ms; transition: background-color 200ms ease-out, -webkit-transform 200ms cubic-bezier(0.25, 0.1, 0.51, 1.32) 275ms; transition: background-color 200ms ease-out, transform 200ms cubic-bezier(0.25, 0.1, 0.51, 1.32) 275ms; transition: background-color 200ms ease-out, transform 200ms cubic-bezier(0.25, 0.1, 0.51, 1.32) 275ms, -webkit-transform 200ms cubic-bezier(0.25, 0.1, 0.51, 1.32) 275ms; } .booking-form .submit-button:hover, .booking-form .submit-button:focus { background-color: #242529; } .booking-form .submit-button:active { background-color: #1d1e21; -webkit-transition: none; transition: none; } .booking-form.visible .submit-button { -webkit-transform: scale(1); transform: scale(1); } </style></head><body> <section class="card"> <div class="info"> <ul class="info-list"> <li class="current"><img src="https://cdn.arnellebalane.com/images/codepen-day85/artwork-1.jpg" alt="The Marcian"/> <h1>The Martian</h1> <p>During a manned mission to Mars, Astronaut Mark Watney (Matt Damon) is presumed dead after a fierce storm and left behind by his crew. </p><span class="rating">9.1</span> </li> <li><img src="https://cdn.arnellebalane.com/images/codepen-day85/artwork-2.jpg" alt="Interstellar"/> <h1>Interstellar</h1> <p> A team of explorers travel through a wormhole in space in an attempt to ensure humanity's survival.</p><span class="rating">8.3</span> </li> <li><img src="https://cdn.arnellebalane.com/images/codepen-day85/artwork-3.jpg" alt="Gravity"/> <h1>Gravity</h1> <p>An astronaut out of three is taken into a series of debris and starts orbiting around the Earth. She will have to stay extremely strong in order to keep her sanity. </p><span class="rating">7.9</span> </li> </ul> </div> <footer class="actions"><span class="rating-container"></span> <button class="cart">Book Movie</button> <ul class="navigation"> <li class="current"></li> <li></li> <li></li> </ul> </footer> <form class="booking-form"> <button class="cancel">Cancel</button> <p class="input">IMAX 3D</p> <p class="input">Monday, 21<sup>st </sup>September - 18:00</p> <p class="input">6 Adults</p> <div class="seats"> <header> <label class="legend"><span class="seat"></span><span class="legend-label">Available</span></label> <label class="legend"><span class="seat taken"></span><span class="legend-label">Taken </span></label> </header> <ul class="seats-container"> <li class="seats-row"> <button class="seat" type="button"></button> <button class="seat" type="button"></button> <button class="seat" type="button"></button> </li> <li class="seats-row"> <button class="seat" type="button"></button> <button class="seat" type="button"></button> <button class="seat" type="button"></button> <button class="seat" type="button"></button> <button class="seat" type="button"></button> <button class="seat" type="button"></button> <button class="seat" type="button"></button> </li> <li class="seats-row"> <button class="seat" type="button"></button> <button class="seat" type="button"></button> <button class="seat" type="button"></button> <button class="seat" type="button"></button> <button class="seat" type="button"></button> <button class="seat" type="button"></button> <button class="seat" type="button"></button> </li> <li class="seats-row"> <button class="seat" type="button"></button> <button class="seat" type="button"></button> <button class="seat" type="button"></button> <button class="seat" type="button"></button> <button class="seat" type="button"></button> <button class="seat" type="button"></button> <button class="seat" type="button"></button> </li> <li class="seats-row"> <button class="seat" type="button"></button> <button class="seat" type="button"></button> <button class="seat" type="button"></button> <button class="seat" type="button"></button> <button class="seat" type="button"></button> <button class="seat" type="button"></button> <button class="seat" type="button"></button> </li> <li class="seats-row"> <button class="seat" type="button"></button> <button class="seat" type="button"></button> <button class="seat" type="button"></button> <button class="seat" type="button"></button> <button class="seat" type="button"></button> <button class="seat" type="button"></button> <button class="seat" type="button"></button> </li> <li class="seats-row"> <button class="seat" type="button"></button> <button class="seat" type="button"></button> <button class="seat" type="button"></button> <button class="seat" type="button"></button> <button class="seat" type="button"></button> <button class="seat" type="button"></button> <button class="seat" type="button"></button> </li> </ul> </div> <footer> <label class="total-label">Total</label> <p class="total-price">$56.90</p> <button class="submit-button">Checkout</button> </footer> </form> </section> <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 >'use strict'; var card = $('.card'); var infos = $('.info-list li'); var nav = $('.navigation li'); var animating = false; showItem(0); renderTakenSeats(); $('.navigation').on('click', 'li:not(.current)', function () { var index = $(this).index(); showItem(index); }); $(document).on('keydown', function (e) { if (!animating) { var index = infos.filter('.current').index(); if (e.keyCode === 37 && index > 0) { // left arrow animating = true; showItem(index - 1); } else if (e.keyCode === 39 && index < infos.length - 1) { // right arrow animating = true; showItem(index + 1); } } }); $(document).on('transitionend', '.current', function () { animating = false; }); $(document).on('click', '.actions .cart, .booking-form .cancel', function () { $('.booking-form').toggleClass('visible'); }); $(document).on('click', '.seats button:not(.taken)', function () { $(this).toggleClass('selected'); }); $(document).on('submit', 'form', function (e) { e.preventDefault(); }); function showItem(index) { var info = infos.removeClass('current').eq(index).addClass('current'); nav.removeClass('current').eq(index).addClass('current'); infos.removeClass('move-left'); info.prevAll().addClass('move-left'); var background = info.find('img').attr('src'); card.css('background-image', 'url("' + background + '")'); var rating = info.find('.rating').text(); card.find('.rating-container').text(rating); } function renderTakenSeats() { var seats = $('.booking-form .seats button'); var seatsCount = seats.length; var n = Math.random() * 10 + 5; for (var i = 0; i < n; i++) {if (window.CP.shouldStopExecution(1)){break;} seats.eq(Math.floor(Math.random() * seatsCount)).addClass('taken'); } window.CP.exitedLoop(1); } //# sourceURL=pen.js </script> </body></html>

Related: See More


Questions / Comments: