<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>
