Day 85 - Cinema Application
How do I make an day 85 - cinema application?
Implementation of Day 85 design from @npaulflavius' 100 Days UI Challenge. What is a day 85 - cinema application? How do you make a day 85 - cinema application? This script and codes were developed by Arnelle Balane on 14 October 2022, Friday.
Day 85 - Cinema Application Previews
Day 85 - Cinema Application - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Day 85 - Cinema Application</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<section class="card"> <div class="info"> <ul class="info-list"> <li class="current"><img src="http://i1067.photobucket.com/albums/u422/arnellebalane/artwork-1_zpswnvhgwjz.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="http://i1067.photobucket.com/albums/u422/arnellebalane/artwork-2_zpsvdwakbjr.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="http://i1067.photobucket.com/albums/u422/arnellebalane/artwork-3_zpsp3mwnezb.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='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Day 85 - Cinema Application - Script Codes CSS Codes
/** 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("http://i1067.photobucket.com/albums/u422/arnellebalane/background_zpskaf0gl72.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);
}
Day 85 - Cinema Application - Script Codes JS Codes
'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++) { seats.eq(Math.floor(Math.random() * seatsCount)).addClass('taken'); }
}
| Developer | Arnelle Balane |
| Username | arnellebalane |
| Uploaded | October 14, 2022 |
| Rating | 4.5 |
| Size | 11,023 Kb |
| Views | 8,096 |
Do you need developer help for Day 85 - Cinema Application?
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Arnelle Balane (arnellebalane) Script Codes
| Name | Size |
| Pixel mario | 1,906 Kb |
| Virtual Filesystem | 12,706 Kb |
| Day 60 - Knob | 6,525 Kb |
| Day 48 - Speedometer | 6,078 Kb |
| Yummy Food App | 4,607 Kb |
| Day 41 - File Upload Widget | 6,912 Kb |
| Day 11 - Calendar Card | 6,984 Kb |
| Day 77 - Choose Category | 7,442 Kb |
| Running pixel mario | 4,473 Kb |
| Day 78 - TV UI - Player Card | 3,004 Kb |
Create amazing marketing copy with AI!
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Similar Scripts & Codes
| Name | Username | Size |
| A bit of elegance | Hackthevoid | 9,095 Kb |
| React JS Movie Info App | MTushar | 4,870 Kb |
| CSS3 Latte Art Logo | Esambino | 2,036 Kb |
| A Pen by Huan Nghiem | Nightshade | 10,646 Kb |
| Week7 replicate | Hwcasis | 1,620 Kb |
| A Pen by Kenny Mark | Kennymark | 5,574 Kb |
| Flat design iframe | Damienpm | 1,819 Kb |
| Learning FlexBox | Alex_rodrigues | 2,821 Kb |
| Canvas Fireworks | Jackrugile | 6,200 Kb |
| Webkit decolorize | Fivera | 1,675 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!