<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/nathantaylor/pen/qRmWeW?limit=all&page=40&q=form" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Alegreya+Sans:100,300,400,500,700,800,900" rel="stylesheet">
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css'>
<style class="cp-pen-styles">html {
font-size: 1.3px;
}
html * {
box-sizing: border-box;
}
body {
width: 100vw;
height: 100vh;
background: -webkit-linear-gradient(30deg, #1900fa, #616bff);
background: linear-gradient(60deg, #1900fa, #616bff);
background: white;
font-family: "Alegreya Sans", sans-serif;
font-size: 40rem;
overflow: hidden;
}
.wrap {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
color: #312eff;
width: 500rem;
height: 450rem;
}
.wrap.member-selected .member:not(.selected) {
opacity: 0;
pointer-events: none;
-webkit-transform: perspective(100rem) translatez(-50rem);
transform: perspective(100rem) translatez(-50rem);
-webkit-transition: opacity 300ms cubic-bezier(0.645, 0.045, 0.355, 1), height 500ms cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 800ms cubic-bezier(0.645, 0.045, 0.355, 1);
transition: opacity 300ms cubic-bezier(0.645, 0.045, 0.355, 1), height 500ms cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 800ms cubic-bezier(0.645, 0.045, 0.355, 1);
transition: opacity 300ms cubic-bezier(0.645, 0.045, 0.355, 1), transform 800ms cubic-bezier(0.645, 0.045, 0.355, 1), height 500ms cubic-bezier(0.645, 0.045, 0.355, 1);
transition: opacity 300ms cubic-bezier(0.645, 0.045, 0.355, 1), transform 800ms cubic-bezier(0.645, 0.045, 0.355, 1), height 500ms cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 800ms cubic-bezier(0.645, 0.045, 0.355, 1);
}
.wrap.member-selected .instructions .first {
opacity: 0;
}
.wrap.member-selected.date-selected .deselect-date {
opacity: 1;
pointer-events: auto;
}
.wrap.member-selected.date-selected .calendar .date {
-webkit-transform: scale(0.5) translateY(-5rem) translateX(0rem);
transform: scale(0.5) translateY(-5rem) translateX(0rem);
opacity: 1;
}
.wrap.member-selected.date-selected .calendar .month {
-webkit-transform: scale(0.5) translateY(-5rem) translateX(100rem);
transform: scale(0.5) translateY(-5rem) translateX(100rem);
}
.wrap.member-selected.date-selected .calendar .year {
-webkit-transform: scale(0.5) translateY(-5rem) translateX(200rem);
transform: scale(0.5) translateY(-5rem) translateX(200rem);
}
.wrap.member-selected.date-selected .calendar table {
pointer-events: none;
-webkit-transform: translateY(50rem);
transform: translateY(50rem);
border-top: 1px solid rgba(221, 221, 221, 0.8);
}
.wrap.member-selected.date-selected .calendar td:not(.selected), .wrap.member-selected.date-selected .calendar th:not(.selected) {
opacity: 0;
-webkit-transform: perspective(100rem) translatez(-50rem);
transform: perspective(100rem) translatez(-50rem);
-webkit-transition: opacity 300ms cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
transition: opacity 300ms cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
transition: opacity 300ms cubic-bezier(0.645, 0.045, 0.355, 1), transform 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
transition: opacity 300ms cubic-bezier(0.645, 0.045, 0.355, 1), transform 300ms cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
}
.wrap.member-selected.date-selected .slots {
opacity: 1;
-webkit-transform: translatey(0%);
transform: translatey(0%);
pointer-events: auto;
}
.wrap.member-selected.date-selected .slots li {
-webkit-transform: translatey(0);
transform: translatey(0);
opacity: 1;
color: #312eff;
}
.wrap.member-selected.date-selected .slots li:nth-child(1) {
-webkit-transition-delay: 0ms;
transition-delay: 0ms;
-webkit-transform: translateY(0rem) perspective(100rem) translateZ(0);
transform: translateY(0rem) perspective(100rem) translateZ(0);
}
.wrap.member-selected.date-selected .slots li:nth-child(2) {
-webkit-transition-delay: 83.33333ms;
transition-delay: 83.33333ms;
-webkit-transform: translateY(50rem) perspective(100rem) translateZ(0);
transform: translateY(50rem) perspective(100rem) translateZ(0);
}
.wrap.member-selected.date-selected .slots li:nth-child(3) {
-webkit-transition-delay: 166.66667ms;
transition-delay: 166.66667ms;
-webkit-transform: translateY(100rem) perspective(100rem) translateZ(0);
transform: translateY(100rem) perspective(100rem) translateZ(0);
}
.wrap.member-selected.date-selected .slots li:nth-child(4) {
-webkit-transition-delay: 250ms;
transition-delay: 250ms;
-webkit-transform: translateY(150rem) perspective(100rem) translateZ(0);
transform: translateY(150rem) perspective(100rem) translateZ(0);
}
.wrap.member-selected.date-selected .slots li:nth-child(5) {
-webkit-transition-delay: 333.33333ms;
transition-delay: 333.33333ms;
-webkit-transform: translateY(200rem) perspective(100rem) translateZ(0);
transform: translateY(200rem) perspective(100rem) translateZ(0);
}
.wrap.member-selected.date-selected .slots li:nth-child(6) {
-webkit-transition-delay: 416.66667ms;
transition-delay: 416.66667ms;
-webkit-transform: translateY(250rem) perspective(100rem) translateZ(0);
transform: translateY(250rem) perspective(100rem) translateZ(0);
}
.wrap.member-selected.date-selected .slots li:nth-child(7) {
-webkit-transition-delay: 500ms;
transition-delay: 500ms;
-webkit-transform: translateY(300rem) perspective(100rem) translateZ(0);
transform: translateY(300rem) perspective(100rem) translateZ(0);
}
.wrap.member-selected.date-selected.slot-selected .form {
opacity: 1;
-webkit-transform: translatey(0%);
transform: translatey(0%);
pointer-events: auto;
-webkit-transition: opacity 500ms cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 800ms cubic-bezier(0.645, 0.045, 0.355, 1);
transition: opacity 500ms cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 800ms cubic-bezier(0.645, 0.045, 0.355, 1);
transition: opacity 500ms cubic-bezier(0.645, 0.045, 0.355, 1), transform 800ms cubic-bezier(0.645, 0.045, 0.355, 1);
transition: opacity 500ms cubic-bezier(0.645, 0.045, 0.355, 1), transform 800ms cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 800ms cubic-bezier(0.645, 0.045, 0.355, 1);
}
.wrap.member-selected.date-selected.slot-selected .form * {
-webkit-transform: translatey(0);
transform: translatey(0);
}
.wrap.member-selected.date-selected.slot-selected .form *:nth-child(1) {
-webkit-transition-delay: 50ms;
transition-delay: 50ms;
}
.wrap.member-selected.date-selected.slot-selected .form *:nth-child(2) {
-webkit-transition-delay: 100ms;
transition-delay: 100ms;
}
.wrap.member-selected.date-selected.slot-selected .form *:nth-child(3) {
-webkit-transition-delay: 150ms;
transition-delay: 150ms;
}
.wrap.member-selected.date-selected.slot-selected .form *:nth-child(4) {
-webkit-transition-delay: 200ms;
transition-delay: 200ms;
}
.wrap.member-selected.date-selected.slot-selected .form *:nth-child(5) {
-webkit-transition-delay: 250ms;
transition-delay: 250ms;
}
.wrap.member-selected.date-selected.slot-selected .form *:nth-child(6) {
-webkit-transition-delay: 300ms;
transition-delay: 300ms;
}
.wrap.member-selected.date-selected.slot-selected .deselect-slot {
opacity: 1;
pointer-events: auto;
}
.wrap.member-selected.date-selected.slot-selected .slots {
pointer-events: none;
}
.wrap.member-selected.date-selected.slot-selected .slots li:not(.selected) {
opacity: 0;
}
.wrap.member-selected.date-selected.slot-selected .slots li:not(.selected):nth-child(1) {
-webkit-transition-delay: 0ms;
transition-delay: 0ms;
-webkit-transform: translateY(0rem) perspective(100rem) translateZ(-50rem);
transform: translateY(0rem) perspective(100rem) translateZ(-50rem);
}
.wrap.member-selected.date-selected.slot-selected .slots li:not(.selected):nth-child(2) {
-webkit-transition-delay: 83.33333ms;
transition-delay: 83.33333ms;
-webkit-transform: translateY(50rem) perspective(100rem) translateZ(-50rem);
transform: translateY(50rem) perspective(100rem) translateZ(-50rem);
}
.wrap.member-selected.date-selected.slot-selected .slots li:not(.selected):nth-child(3) {
-webkit-transition-delay: 166.66667ms;
transition-delay: 166.66667ms;
-webkit-transform: translateY(100rem) perspective(100rem) translateZ(-50rem);
transform: translateY(100rem) perspective(100rem) translateZ(-50rem);
}
.wrap.member-selected.date-selected.slot-selected .slots li:not(.selected):nth-child(4) {
-webkit-transition-delay: 250ms;
transition-delay: 250ms;
-webkit-transform: translateY(150rem) perspective(100rem) translateZ(-50rem);
transform: translateY(150rem) perspective(100rem) translateZ(-50rem);
}
.wrap.member-selected.date-selected.slot-selected .slots li:not(.selected):nth-child(5) {
-webkit-transition-delay: 333.33333ms;
transition-delay: 333.33333ms;
-webkit-transform: translateY(200rem) perspective(100rem) translateZ(-50rem);
transform: translateY(200rem) perspective(100rem) translateZ(-50rem);
}
.wrap.member-selected.date-selected.slot-selected .slots li:not(.selected):nth-child(6) {
-webkit-transition-delay: 416.66667ms;
transition-delay: 416.66667ms;
-webkit-transform: translateY(250rem) perspective(100rem) translateZ(-50rem);
transform: translateY(250rem) perspective(100rem) translateZ(-50rem);
}
.wrap.member-selected.date-selected.slot-selected .slots li:not(.selected):nth-child(7) {
-webkit-transition-delay: 500ms;
transition-delay: 500ms;
-webkit-transform: translateY(300rem) perspective(100rem) translateZ(-50rem);
transform: translateY(300rem) perspective(100rem) translateZ(-50rem);
}
.wrap.member-selected.date-selected.slot-selected .slots li.selected {
-webkit-transform: translateY(0rem) perspective(100rem) translateZ(0rem);
transform: translateY(0rem) perspective(100rem) translateZ(0rem);
-webkit-transition-delay: 0s;
transition-delay: 0s;
border-bottom: 1px solid rgba(221, 221, 221, 0.8);
}
.wrap.member-selected.date-selected.slot-selected.booking-complete .deselect-member, .wrap.member-selected.date-selected.slot-selected.booking-complete .deselect-date, .wrap.member-selected.date-selected.slot-selected.booking-complete .deselect-slot {
opacity: 0;
pointer: none;
}
.wrap.member-selected.date-selected.slot-selected.booking-complete .form {
-webkit-transition: opacity 500ms cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 800ms cubic-bezier(0.645, 0.045, 0.355, 1);
transition: opacity 500ms cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 800ms cubic-bezier(0.645, 0.045, 0.355, 1);
transition: opacity 500ms cubic-bezier(0.645, 0.045, 0.355, 1), transform 800ms cubic-bezier(0.645, 0.045, 0.355, 1);
transition: opacity 500ms cubic-bezier(0.645, 0.045, 0.355, 1), transform 800ms cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 800ms cubic-bezier(0.645, 0.045, 0.355, 1);
}
.wrap.member-selected.date-selected.slot-selected.booking-complete .form:before, .wrap.member-selected.date-selected.slot-selected.booking-complete .form:after {
-webkit-transform: scalex(0);
transform: scalex(0);
}
.wrap.member-selected.date-selected.slot-selected.booking-complete .form label {
opacity: 0;
-webkit-transition: opacity 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
transition: opacity 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
}
.wrap.member-selected.date-selected.slot-selected.booking-complete .form input {
border-bottom: 1px solid rgba(221, 221, 221, 0.8);
pointer-events: none;
}
.wrap.member-selected.date-selected.slot-selected.booking-complete .form input[name="name"] {
padding: 10rem 70rem;
-webkit-transform: translatey(-33rem);
transform: translatey(-33rem);
}
.wrap.member-selected.date-selected.slot-selected.booking-complete .form input[name="email"] {
padding: 10rem 70rem;
-webkit-transform: translatey(-60rem);
transform: translatey(-60rem);
}
.wrap.member-selected.date-selected.slot-selected.booking-complete .form input[type="submit"] {
-webkit-transform: translatey(-60rem);
transform: translatey(-60rem);
opacity: 0;
-webkit-transition: opacity 300ms cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 500ms cubic-bezier(0.645, 0.045, 0.355, 1);
transition: opacity 300ms cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 500ms cubic-bezier(0.645, 0.045, 0.355, 1);
transition: transform 500ms cubic-bezier(0.645, 0.045, 0.355, 1), opacity 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
transition: transform 500ms cubic-bezier(0.645, 0.045, 0.355, 1), opacity 300ms cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 500ms cubic-bezier(0.645, 0.045, 0.355, 1);
}
.wrap.member-selected.date-selected.slot-selected.booking-complete .confirm-message {
opacity: 1;
-webkit-transform: translatey(0%);
transform: translatey(0%);
pointer-events: auto;
}
.instructions {
margin-bottom: 25rem;
text-align: center;
height: 80vh;
font-weight: 300;
color: #312eff;
}
.instructions > * {
-webkit-transition: opacity 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
transition: opacity 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
}
.deselect-member, .deselect-date, .deselect-slot {
position: absolute;
color: #ddd;
top: 35rem;
right: 25rem;
z-index: 10;
display: inline-block;
font-size: 20rem;
cursor: pointer;
opacity: 0;
pointer-events: none;
-webkit-transition: opacity 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
transition: opacity 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
font-weight: 100;
}
.deselect-date {
top: 95rem;
}
.deselect-slot {
top: 145rem;
}
.member {
background: white;
width: 100%;
padding: 20rem;
height: 100rem;
cursor: pointer;
position: absolute;
top: 0;
-webkit-transition: opacity 800ms cubic-bezier(0.645, 0.045, 0.355, 1), height 300ms cubic-bezier(0.645, 0.045, 0.355, 1), box-shadow 800ms cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 500ms cubic-bezier(0.645, 0.045, 0.355, 1);
transition: opacity 800ms cubic-bezier(0.645, 0.045, 0.355, 1), height 300ms cubic-bezier(0.645, 0.045, 0.355, 1), box-shadow 800ms cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 500ms cubic-bezier(0.645, 0.045, 0.355, 1);
transition: opacity 800ms cubic-bezier(0.645, 0.045, 0.355, 1), transform 500ms cubic-bezier(0.645, 0.045, 0.355, 1), height 300ms cubic-bezier(0.645, 0.045, 0.355, 1), box-shadow 800ms cubic-bezier(0.645, 0.045, 0.355, 1);
transition: opacity 800ms cubic-bezier(0.645, 0.045, 0.355, 1), transform 500ms cubic-bezier(0.645, 0.045, 0.355, 1), height 300ms cubic-bezier(0.645, 0.045, 0.355, 1), box-shadow 800ms cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 500ms cubic-bezier(0.645, 0.045, 0.355, 1);
box-shadow: 5rem 5rem 20rem rgba(49, 46, 255, 0.15);
overflow: hidden;
}
.member .name {
display: inline-block;
margin-left: 85rem;
line-height: 60rem;
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
-webkit-transition: -webkit-transform 500ms cubic-bezier(0.645, 0.045, 0.355, 1);
transition: -webkit-transform 500ms cubic-bezier(0.645, 0.045, 0.355, 1);
transition: transform 500ms cubic-bezier(0.645, 0.045, 0.355, 1);
transition: transform 500ms cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 500ms cubic-bezier(0.645, 0.045, 0.355, 1);
font-weight: 100;
font-size: 40rem;
}
.member .avatar {
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
width: 70rem;
height: 70rem;
border-radius: 100rem;
display: inline-block;
position: absolute;
top: 15rem;
left: 15rem;
background-size: cover;
-webkit-filter: saturate(50%) contrast(120%);
filter: saturate(50%) contrast(120%);
-webkit-transition: -webkit-transform 500ms cubic-bezier(0.645, 0.045, 0.355, 1);
transition: -webkit-transform 500ms cubic-bezier(0.645, 0.045, 0.355, 1);
transition: transform 500ms cubic-bezier(0.645, 0.045, 0.355, 1);
transition: transform 500ms cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 500ms cubic-bezier(0.645, 0.045, 0.355, 1);
}
.member .avatar:after {
content: '';
display: block;
position: absolute;
width: 100%;
height: 100%;
border-radius: 100rem;
background-color: #312eff;
mix-blend-mode: lighten;
}
.member:nth-child(1) {
-webkit-transform: translatey(70rem) perspective(100rem) translatez(-10rem);
transform: translatey(70rem) perspective(100rem) translatez(-10rem);
}
.member:nth-child(2) {
-webkit-transform: translatey(170rem) perspective(100rem) translatez(-10rem);
transform: translatey(170rem) perspective(100rem) translatez(-10rem);
}
.member:nth-child(3) {
-webkit-transform: translatey(270rem) perspective(100rem) translatez(-10rem);
transform: translatey(270rem) perspective(100rem) translatez(-10rem);
}
.member:nth-child(4) {
-webkit-transform: translatey(370rem) perspective(100rem) translatez(-10rem);
transform: translatey(370rem) perspective(100rem) translatez(-10rem);
}
.member.selected {
-webkit-transform: translatey(0rem) perspective(100rem) translatez(0rem);
transform: translatey(0rem) perspective(100rem) translatez(0rem);
height: 450rem;
cursor: default;
z-index: 2;
box-shadow: 10rem 10rem 60rem rgba(3, 0, 199, 0.1);
-webkit-transition: opacity 300ms cubic-bezier(0.645, 0.045, 0.355, 1), height 500ms cubic-bezier(0.645, 0.045, 0.355, 1), box-shadow 800ms cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 800ms cubic-bezier(0.645, 0.045, 0.355, 1);
transition: opacity 300ms cubic-bezier(0.645, 0.045, 0.355, 1), height 500ms cubic-bezier(0.645, 0.045, 0.355, 1), box-shadow 800ms cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 800ms cubic-bezier(0.645, 0.045, 0.355, 1);
transition: opacity 300ms cubic-bezier(0.645, 0.045, 0.355, 1), transform 800ms cubic-bezier(0.645, 0.045, 0.355, 1), height 500ms cubic-bezier(0.645, 0.045, 0.355, 1), box-shadow 800ms cubic-bezier(0.645, 0.045, 0.355, 1);
transition: opacity 300ms cubic-bezier(0.645, 0.045, 0.355, 1), transform 800ms cubic-bezier(0.645, 0.045, 0.355, 1), height 500ms cubic-bezier(0.645, 0.045, 0.355, 1), box-shadow 800ms cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 800ms cubic-bezier(0.645, 0.045, 0.355, 1);
}
.member.selected .deselect-member {
opacity: 1;
pointer-events: auto;
}
.member.selected .name, .member.selected .avatar {
-webkit-transform: scale(0.7) translatex(-30rem);
transform: scale(0.7) translatex(-30rem);
}
.member.selected .calendar {
height: 340rem;
-webkit-transform: translatey(0rem);
transform: translatey(0rem);
-webkit-transition: opacity 500ms cubic-bezier(0.645, 0.045, 0.355, 1), height 800ms cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 500ms cubic-bezier(0.645, 0.045, 0.355, 1);
transition: opacity 500ms cubic-bezier(0.645, 0.045, 0.355, 1), height 800ms cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 500ms cubic-bezier(0.645, 0.045, 0.355, 1);
transition: opacity 500ms cubic-bezier(0.645, 0.045, 0.355, 1), transform 500ms cubic-bezier(0.645, 0.045, 0.355, 1), height 800ms cubic-bezier(0.645, 0.045, 0.355, 1);
transition: opacity 500ms cubic-bezier(0.645, 0.045, 0.355, 1), transform 500ms cubic-bezier(0.645, 0.045, 0.355, 1), height 800ms cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 500ms cubic-bezier(0.645, 0.045, 0.355, 1);
opacity: 1;
}
.calendar {
width: 100%;
margin-top: 0rem;
height: 0;
opacity: 0;
-webkit-transition: opacity 300ms cubic-bezier(0.645, 0.045, 0.355, 1), height 300ms cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
transition: opacity 300ms cubic-bezier(0.645, 0.045, 0.355, 1), height 300ms cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
transition: opacity 300ms cubic-bezier(0.645, 0.045, 0.355, 1), transform 300ms cubic-bezier(0.645, 0.045, 0.355, 1), height 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
transition: opacity 300ms cubic-bezier(0.645, 0.045, 0.355, 1), transform 300ms cubic-bezier(0.645, 0.045, 0.355, 1), height 300ms cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
font-size: 17rem;
border-top: 1px solid rgba(221, 221, 221, 0.8);
}
.calendar .date, .calendar .month, .calendar .year {
position: absolute;
top: 15rem;
left: 65rem;
font-size: 50rem;
display: inline-block;
font-weight: 100;
-webkit-transition: opacity 300ms cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 500ms cubic-bezier(0.645, 0.045, 0.355, 1);
transition: opacity 300ms cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 500ms cubic-bezier(0.645, 0.045, 0.355, 1);
transition: opacity 300ms cubic-bezier(0.645, 0.045, 0.355, 1), transform 500ms cubic-bezier(0.645, 0.045, 0.355, 1);
transition: opacity 300ms cubic-bezier(0.645, 0.045, 0.355, 1), transform 500ms cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 500ms cubic-bezier(0.645, 0.045, 0.355, 1);
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
-webkit-transform: translateX(0) scale(1);
transform: translateX(0) scale(1);
}
.calendar .year {
-webkit-transform: translateX(80rem) scale(1);
transform: translateX(80rem) scale(1);
}
.calendar .date {
opacity: 0;
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
-webkit-transform: translateX(-100rem) scale(1);
transform: translateX(-100rem) scale(1);
}
.calendar table {
width: 100%;
text-align: center;
-webkit-transition: -webkit-transform 500ms cubic-bezier(0.645, 0.045, 0.355, 1);
transition: -webkit-transform 500ms cubic-bezier(0.645, 0.045, 0.355, 1);
transition: transform 500ms cubic-bezier(0.645, 0.045, 0.355, 1);
transition: transform 500ms cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 500ms cubic-bezier(0.645, 0.045, 0.355, 1);
-webkit-transform: translatey(80rem);
transform: translatey(80rem);
border-top: 1px solid white;
}
.calendar table td, .calendar table th {
width: 13%;
padding: 10rem;
cursor: pointer;
font-weight: 200;
}
.calendar table td.today, .calendar table th.today {
background: #312eff;
color: white;
}
.calendar table td.disabled, .calendar table th.disabled {
color: #ddd;
pointer-events: none;
}
.calendar table td.disabled.today, .calendar table th.disabled.today {
background: #ddd;
color: white;
}
.calendar table td.selected, .calendar table th.selected {
-webkit-transform: perspective(100rem) translateZ(80rem);
transform: perspective(100rem) translateZ(80rem);
-webkit-transition: opacity 800ms cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 800ms cubic-bezier(0.645, 0.045, 0.355, 1);
transition: opacity 800ms cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 800ms cubic-bezier(0.645, 0.045, 0.355, 1);
transition: opacity 800ms cubic-bezier(0.645, 0.045, 0.355, 1), transform 800ms cubic-bezier(0.645, 0.045, 0.355, 1);
transition: opacity 800ms cubic-bezier(0.645, 0.045, 0.355, 1), transform 800ms cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 800ms cubic-bezier(0.645, 0.045, 0.355, 1);
opacity: 0;
}
.calendar table th {
padding-top: 20rem;
}
.slots {
position: absolute;
left: 15rem;
width: calc(100% - 20rem);
height: 320rem;
top: 135rem;
opacity: 0;
-webkit-transform: translatey(50%);
transform: translatey(50%);
pointer-events: none;
-webkit-transition: opacity 300ms cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 500ms cubic-bezier(0.645, 0.045, 0.355, 1);
transition: opacity 300ms cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 500ms cubic-bezier(0.645, 0.045, 0.355, 1);
transition: opacity 300ms cubic-bezier(0.645, 0.045, 0.355, 1), transform 500ms cubic-bezier(0.645, 0.045, 0.355, 1);
transition: opacity 300ms cubic-bezier(0.645, 0.045, 0.355, 1), transform 500ms cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 500ms cubic-bezier(0.645, 0.045, 0.355, 1);
font-size: 25rem;
font-weight: 100;
}
.slots li {
background: white;
display: block;
-webkit-transition: color 500ms cubic-bezier(0.645, 0.045, 0.355, 1), opacity 500ms cubic-bezier(0.645, 0.045, 0.355, 1), border 800ms cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 800ms cubic-bezier(0.645, 0.045, 0.355, 1);
transition: color 500ms cubic-bezier(0.645, 0.045, 0.355, 1), opacity 500ms cubic-bezier(0.645, 0.045, 0.355, 1), border 800ms cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 800ms cubic-bezier(0.645, 0.045, 0.355, 1);
transition: color 500ms cubic-bezier(0.645, 0.045, 0.355, 1), transform 800ms cubic-bezier(0.645, 0.045, 0.355, 1), opacity 500ms cubic-bezier(0.645, 0.045, 0.355, 1), border 800ms cubic-bezier(0.645, 0.045, 0.355, 1);
transition: color 500ms cubic-bezier(0.645, 0.045, 0.355, 1), transform 800ms cubic-bezier(0.645, 0.045, 0.355, 1), opacity 500ms cubic-bezier(0.645, 0.045, 0.355, 1), border 800ms cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 800ms cubic-bezier(0.645, 0.045, 0.355, 1);
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
color: transparent;
border-bottom: 1px solid rgba(221, 221, 221, 0);
padding: 10rem 70rem;
cursor: pointer;
position: absolute;
width: calc(100% - 20rem);
}
.slots li:nth-child(1) {
-webkit-transform: translatey(0rem) perspective(100rem) translatez(30rem);
transform: translatey(0rem) perspective(100rem) translatez(30rem);
}
.slots li:nth-child(2) {
-webkit-transform: translatey(50rem) perspective(100rem) translatez(30rem);
transform: translatey(50rem) perspective(100rem) translatez(30rem);
}
.slots li:nth-child(3) {
-webkit-transform: translatey(100rem) perspective(100rem) translatez(30rem);
transform: translatey(100rem) perspective(100rem) translatez(30rem);
}
.slots li:nth-child(4) {
-webkit-transform: translatey(150rem) perspective(100rem) translatez(30rem);
transform: translatey(150rem) perspective(100rem) translatez(30rem);
}
.slots li:nth-child(5) {
-webkit-transform: translatey(200rem) perspective(100rem) translatez(30rem);
transform: translatey(200rem) perspective(100rem) translatez(30rem);
}
.slots li:nth-child(6) {
-webkit-transform: translatey(250rem) perspective(100rem) translatez(30rem);
transform: translatey(250rem) perspective(100rem) translatez(30rem);
}
.slots li:nth-child(7) {
-webkit-transform: translatey(300rem) perspective(100rem) translatez(30rem);
transform: translatey(300rem) perspective(100rem) translatez(30rem);
}
.form {
position: absolute;
left: 15rem;
width: 460rem;
height: 320rem;
top: 200rem;
opacity: 0;
-webkit-transform: translatey(50%);
transform: translatey(50%);
pointer-events: none;
-webkit-transition: opacity 300ms cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 500ms cubic-bezier(0.645, 0.045, 0.355, 1);
transition: opacity 300ms cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 500ms cubic-bezier(0.645, 0.045, 0.355, 1);
transition: opacity 300ms cubic-bezier(0.645, 0.045, 0.355, 1), transform 500ms cubic-bezier(0.645, 0.045, 0.355, 1);
transition: opacity 300ms cubic-bezier(0.645, 0.045, 0.355, 1), transform 500ms cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 500ms cubic-bezier(0.645, 0.045, 0.355, 1);
}
.form:before, .form:after {
content: '';
position: absolute;
top: 0;
z-index: 2;
width: 70rem;
height: 100%;
background: white;
-webkit-transition: -webkit-transform 800ms cubic-bezier(0.645, 0.045, 0.355, 1);
transition: -webkit-transform 800ms cubic-bezier(0.645, 0.045, 0.355, 1);
transition: transform 800ms cubic-bezier(0.645, 0.045, 0.355, 1);
transition: transform 800ms cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 800ms cubic-bezier(0.645, 0.045, 0.355, 1);
}
.form:before {
left: 0;
-webkit-transform-origin: 0% 50%;
transform-origin: 0% 50%;
}
.form:after {
right: 0;
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
}
.form label {
display: block;
font-size: 15rem;
font-weight: 300;
color: #ddd;
margin-left: 70rem;
}
.form input[type="text"], .form input[type="email"] {
font-size: 25rem;
font-weight: 100;
margin-bottom: 15rem;
border: none;
border-bottom: 1px solid #312eff;
width: 100%;
outline: none;
padding: 0 70rem 5rem;
color: #312eff;
background: transparent;
}
.form input[type="submit"] {
background: #312eff;
border: none;
color: white;
font-weight: 100;
padding: 15rem;
font-size: 20rem;
cursor: pointer;
margin-top: 15rem;
margin-left: 70rem;
outline: none;
}
.form * {
font-family: "Alegreya Sans", sans-serif;
-webkit-transition: border 500ms cubic-bezier(0.645, 0.045, 0.355, 1), opacity 800ms cubic-bezier(0.645, 0.045, 0.355, 1), padding 500ms cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 500ms cubic-bezier(0.645, 0.045, 0.355, 1);
transition: border 500ms cubic-bezier(0.645, 0.045, 0.355, 1), opacity 800ms cubic-bezier(0.645, 0.045, 0.355, 1), padding 500ms cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 500ms cubic-bezier(0.645, 0.045, 0.355, 1);
transition: transform 500ms cubic-bezier(0.645, 0.045, 0.355, 1), border 500ms cubic-bezier(0.645, 0.045, 0.355, 1), opacity 800ms cubic-bezier(0.645, 0.045, 0.355, 1), padding 500ms cubic-bezier(0.645, 0.045, 0.355, 1);
transition: transform 500ms cubic-bezier(0.645, 0.045, 0.355, 1), border 500ms cubic-bezier(0.645, 0.045, 0.355, 1), opacity 800ms cubic-bezier(0.645, 0.045, 0.355, 1), padding 500ms cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 500ms cubic-bezier(0.645, 0.045, 0.355, 1);
-webkit-transform: translateY(100rem);
transform: translateY(100rem);
}
.confirm-message {
position: absolute;
left: 15rem;
width: 460rem;
text-align: center;
height: 320rem;
top: 320rem;
font-size: 40rem;
font-weight: 100;
opacity: 0;
-webkit-transform: translatey(35%);
transform: translatey(35%);
pointer-events: none;
-webkit-transition: opacity 300ms cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 500ms cubic-bezier(0.645, 0.045, 0.355, 1);
transition: opacity 300ms cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 500ms cubic-bezier(0.645, 0.045, 0.355, 1);
transition: opacity 300ms cubic-bezier(0.645, 0.045, 0.355, 1), transform 500ms cubic-bezier(0.645, 0.045, 0.355, 1);
transition: opacity 300ms cubic-bezier(0.645, 0.045, 0.355, 1), transform 500ms cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 500ms cubic-bezier(0.645, 0.045, 0.355, 1);
-webkit-transition-delay: 150ms;
transition-delay: 150ms;
}
.confirm-message .restart {
display: block;
text-align: center;
margin-top: 15rem;
color: #ddd;
font-size: 25rem;
cursor: pointer;
}
.sig {
position: fixed;
bottom: 8px;
right: 8px;
text-decoration: none;
font-size: 12px;
font-weight: 100;
font-family: sans-serif;
color: rgba(0, 0, 0, 0.4);
letter-spacing: 2px;
}
</style></head><body>
<div class="wrap">
<div class="instructions">
<div class="first">Choose a staff member</div>
</div>
<div class="staff">
<div class="member">
<div class="avatar" style="background-image: url(http://i.pravatar.cc/300?img=69)"></div>
<div class="name">James Hunter</div>
<div class="deselect-member">change</div>
<div class="deselect-date">change</div>
<div class="deselect-slot">change</div>
<div class="calendar"></div>
<ul class="slots"></ul>
<form class="form">
<label>Name</label>
<input type="text" name="name" required="required"/>
<label>Email</label>
<input type="email" name="email" required="required"/>
<input type="submit" value="Confirm Booking"/>
</form>
<div class="confirm-message">Booking Complete!<span class="restart">Book Again?</span></div>
</div>
<div class="member">
<div class="avatar" style="background-image: url(http://i.pravatar.cc/300?img=25)"></div>
<div class="name">Selena Yamada</div>
<div class="deselect-member">change</div>
<div class="deselect-date">change</div>
<div class="deselect-slot">change</div>
<div class="calendar"></div>
<ul class="slots"></ul>
<form class="form">
<label>Name</label>
<input type="text" name="name" required="required"/>
<label>Email</label>
<input type="email" name="email" required="required"/>
<input type="submit" value="Confirm Booking"/>
</form>
<div class="confirm-message">Booking Complete!<span class="restart">Book Again?</span></div>
</div>
<div class="member">
<div class="avatar" style="background-image: url(http://i.pravatar.cc/300?img=32)"></div>
<div class="name">Sarah Belmoris</div>
<div class="deselect-member">change</div>
<div class="deselect-date">change</div>
<div class="deselect-slot">change</div>
<div class="calendar"></div>
<ul class="slots"></ul>
<form class="form">
<label>Name</label>
<input type="text" name="name" required="required"/>
<label>Email</label>
<input type="email" name="email" required="required"/>
<input type="submit" value="Confirm Booking"/>
</form>
<div class="confirm-message">Booking Complete!<span class="restart">Book Again?</span></div>
</div>
<div class="member">
<div class="avatar" style="background-image: url(http://i.pravatar.cc/300?img=15)"></div>
<div class="name">Phillip Fry</div>
<div class="deselect-member">change</div>
<div class="deselect-date">change</div>
<div class="deselect-slot">change</div>
<div class="calendar"></div>
<ul class="slots"></ul>
<form class="form">
<label>Name</label>
<input type="text" name="name" required="required"/>
<label>Email</label>
<input type="email" name="email" required="required"/>
<input type="submit" value="Confirm Booking"/>
</form>
<div class="confirm-message">Booking Complete!<span class="restart">Book Again?</span></div>
</div>
</div>
</div><a class="sig" href="http://nathan.tokyo" target="_blank">NATHAN.TOKYO</a>
<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 >$('.member').on('click', function(){
if (!$(this).hasClass('selected')){
$(this).addClass('selected');
$('.wrap').addClass('member-selected');
addCalendar($(this).find('.calendar'));
}
e.preventDefault();
e.stopPropagation();
});
$('.deselect-member, .restart').on('click', function(e){
$('.member').removeClass('selected');
$('.wrap').removeClass('member-selected date-selected slot-selected booking-complete');
e.preventDefault();
e.stopPropagation();
});
$('.deselect-date').on('click', function(e){
$('.wrap').removeClass('date-selected slot-selected');
$('.calendar *').removeClass('selected');
e.preventDefault();
e.stopPropagation();
});
$('.deselect-slot').on('click', function(e){
$('.wrap').removeClass('slot-selected');
$('.slots *').removeClass('selected');
e.preventDefault();
e.stopPropagation();
});
$('.form').on('submit', function(e){
$('.wrap').toggleClass('booking-complete');
e.preventDefault();
e.stopPropagation();
})
function invokeCalendarListener(){
$('.calendar td:not(.disabled)').on('click', function(e){
addSlots();
var date = $(this).html();
var day = $(this).data('day');
$('.date').html(day + ', ' + date);
$(this).addClass('selected');
setTimeout(function(){
$('.wrap').addClass('date-selected');
},10);
e.preventDefault();
e.stopPropagation();
});
}
function invokeSlotsListener(){
$('.slots li').on('click', function(e){
$(this).addClass('selected');
$('.wrap').addClass('slot-selected');
setTimeout(function(){
$('.selected.member input[name="name"]').focus();
}, 700);
e.preventDefault();
e.stopPropagation();
});
}
function addSlots(container){
var number = Math.ceil(Math.random()*5 + 1);
var time = 7;
var endings = [':00', ':15', ':30', ':45'];
var timeDisplay = '';
var slots = ''
for(var i = 0; i < number; i++){if (window.CP.shouldStopExecution(1)){break;}
time += Math.ceil(Math.random()*3);
timeDisplay = time + endings[Math.floor(Math.random()*4)];
slots += '<li>'+timeDisplay+'</li>';
}
window.CP.exitedLoop(1);
$('.selected .slots').html(slots);
invokeSlotsListener();
}
function addCalendar(container){
//get dates
var today = new Date();
var day = today.getDay()
var date = today.getDate();
var month = today.getMonth();
var year = today.getFullYear();
var first = new Date();
first.setDate(1);
var startDay = first.getDay();
var dayLabels = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
var monthLengths = [31,28,31,30,31,30,31,31,30,31,30,31];
var monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
var dayNames = ['Sat', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri'];
var current = 1 - startDay;
//assemble calendar
var calendar = '<label class="date"></label><label class="month">'+monthNames[month]+'</label> <label class="year">'+year+'</label>';
calendar += '<table><tr>';
dayLabels.forEach(function(label){
calendar += '<th>'+label+'</th>';
})
calendar += '</tr><tr>';
var dayClasses = '';
while( current <= 30){if (window.CP.shouldStopExecution(2)){break;}
if (current > 0){
dayClasses = '';
today.setDate(current);
if (today.getDay() == 0 || today.getDay() == 6){
dayClasses += ' disabled';
}
if (current < date){
dayClasses += ' disabled';
}
if (current == date){
dayClasses += ' today';
}
calendar += '<td class="'+dayClasses+'" data-day="'+dayNames[(current + startDay)%7]+'">'+current+'</td>';
} else {
calendar += '<td></td>';
}
if ( (current + startDay) % 7 == 0){
calendar += '</tr><tr>';
}
current++
}
window.CP.exitedLoop(2);
calendar += '</tr></table>';
container.html(calendar);
invokeCalendarListener();
}
//# sourceURL=pen.js
</script>
</body></html>
