Skip to content

Commit b7adada

Browse files
solygambassolygambas
committed
add movie seat booking styling
1 parent 9e1fcd8 commit b7adada

File tree

4 files changed

+223
-3
lines changed

4 files changed

+223
-3
lines changed

Diff for: ‎60-movie seat booking/index.html

+104
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<link rel="stylesheet" href="style.css" />
7+
<title>Movie Seat Booking</title>
8+
</head>
9+
<body>
10+
<div class="movie-container">
11+
<label for="movie">Pick a movie:</label>
12+
<select name="movie" id="movie">
13+
<option value="10">The Big Lebowski ($10)</option>
14+
<option value="12">Fargo ($12)</option>
15+
<option value="8">O Brother ($8)</option>
16+
<option value="9">No Country for Old Men ($9)</option>
17+
</select>
18+
</div>
19+
<ul class="showcase">
20+
<li>
21+
<div class="seat"></div>
22+
<small>N/A</small>
23+
</li>
24+
<li>
25+
<div class="seat selected"></div>
26+
<small>Selected</small>
27+
</li>
28+
<li>
29+
<div class="seat occupied"></div>
30+
<small>Occupied</small>
31+
</li>
32+
</ul>
33+
<div class="container">
34+
<div class="screen"></div>
35+
<div class="row">
36+
<div class="seat"></div>
37+
<div class="seat"></div>
38+
<div class="seat"></div>
39+
<div class="seat"></div>
40+
<div class="seat"></div>
41+
<div class="seat"></div>
42+
<div class="seat"></div>
43+
<div class="seat"></div>
44+
</div>
45+
<div class="row">
46+
<div class="seat"></div>
47+
<div class="seat"></div>
48+
<div class="seat"></div>
49+
<div class="seat occupied"></div>
50+
<div class="seat occupied"></div>
51+
<div class="seat"></div>
52+
<div class="seat"></div>
53+
<div class="seat"></div>
54+
</div>
55+
<div class="row">
56+
<div class="seat"></div>
57+
<div class="seat"></div>
58+
<div class="seat"></div>
59+
<div class="seat"></div>
60+
<div class="seat"></div>
61+
<div class="seat"></div>
62+
<div class="seat occupied"></div>
63+
<div class="seat occupied"></div>
64+
</div>
65+
<div class="row">
66+
<div class="seat"></div>
67+
<div class="seat"></div>
68+
<div class="seat"></div>
69+
<div class="seat"></div>
70+
<div class="seat"></div>
71+
<div class="seat"></div>
72+
<div class="seat"></div>
73+
<div class="seat"></div>
74+
</div>
75+
<div class="row">
76+
<div class="seat"></div>
77+
<div class="seat"></div>
78+
<div class="seat"></div>
79+
<div class="seat occupied"></div>
80+
<div class="seat occupied"></div>
81+
<div class="seat"></div>
82+
<div class="seat"></div>
83+
<div class="seat"></div>
84+
</div>
85+
<div class="row">
86+
<div class="seat"></div>
87+
<div class="seat"></div>
88+
<div class="seat"></div>
89+
<div class="seat"></div>
90+
<div class="seat occupied"></div>
91+
<div class="seat occupied"></div>
92+
<div class="seat occupied"></div>
93+
<div class="seat"></div>
94+
</div>
95+
</div>
96+
<p class="text">
97+
You have selected <span id="count">0</span> seats for a price of $<span
98+
id="total"
99+
>0</span
100+
>
101+
</p>
102+
<script src="script.js"></script>
103+
</body>
104+
</html>

Diff for: ‎60-movie seat booking/script.js

Whitespace-only changes.

Diff for: ‎60-movie seat booking/style.css

+116
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
@import url("https://fonts.googleapis.com/css?family=Poppins&display=swap");
2+
3+
* {
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
background-color: #242333;
9+
color: #fff;
10+
font-family: "Poppins", sans-serif;
11+
display: flex;
12+
flex-direction: column;
13+
align-items: center;
14+
justify-content: center;
15+
height: 100vh;
16+
margin: 0;
17+
}
18+
19+
.movie-container {
20+
margin: 20px 0;
21+
}
22+
23+
.movie-container select {
24+
background-color: #fff;
25+
border: 0;
26+
border-radius: 5px;
27+
font-size: 14px;
28+
font-family: inherit;
29+
margin-left: 10px;
30+
padding: 5px 15px;
31+
-moz-appearance: none;
32+
-webkit-appearance: none;
33+
appearance: none;
34+
}
35+
36+
.container {
37+
perspective: 1000px;
38+
margin-bottom: 30px;
39+
}
40+
41+
.seat {
42+
background-color: #444451;
43+
height: 12px;
44+
width: 15px;
45+
margin: 3px;
46+
border-top-left-radius: 10px;
47+
border-top-right-radius: 10px;
48+
}
49+
50+
.seat.selected {
51+
background-color: #6feaf6;
52+
}
53+
54+
.seat.occupied {
55+
background-color: #fff;
56+
}
57+
58+
.seat:nth-of-type(2) {
59+
margin-right: 18px;
60+
}
61+
62+
.seat:nth-last-of-type(2) {
63+
margin-left: 18px;
64+
}
65+
66+
.seat:not(.occupied):hover {
67+
cursor: pointer;
68+
transform: scale(1.2);
69+
}
70+
71+
.showcase .seat:not(.occupied):hover {
72+
cursor: default;
73+
transform: scale(1);
74+
}
75+
76+
.showcase {
77+
background: rgba(0, 0, 0, 0.1);
78+
padding: 5px 10px;
79+
border-radius: 5px;
80+
color: #777;
81+
list-style-type: none;
82+
display: flex;
83+
justify-content: space-between;
84+
}
85+
86+
.showcase li {
87+
display: flex;
88+
align-items: center;
89+
justify-content: center;
90+
margin: 0 10px;
91+
}
92+
93+
.showcase li small {
94+
margin-left: 2px;
95+
}
96+
97+
.row {
98+
display: flex;
99+
}
100+
101+
.screen {
102+
background-color: #fff;
103+
height: 70px;
104+
width: 100%;
105+
margin: 15px 0;
106+
transform: rotateX(-45deg);
107+
box-shadow: 0 3px 10px rgba(255, 255, 255, 0.7);
108+
}
109+
110+
p.text {
111+
margin: 5px 0;
112+
}
113+
114+
p.text span {
115+
color: #6feaf6;
116+
}

Diff for: ‎README.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
# 50 Projects In 50 Days - HTML, CSS & JavaScript
1+
# 60 Projects In 60 Days - HTML, CSS & JavaScript
22

3-
50+ mini web projects using HTML, CSS and JavaScript.
3+
60+ mini web projects using HTML, CSS and JavaScript.
44

55
[See all projects on CodePen](https://codepen.io/collection/DKLgmm?grid_type=grid&sort_by=item_created_at)
66

@@ -64,7 +64,7 @@
6464
| 56 | [Image Comparison Slider](https://github.com/solygambas/html-css-fifty-projects/tree/master/56-image%20comparison%20slider) | [Live Demo](https://codepen.io/solygambas/full/RwoMLYW) |
6565
| 57 | [Parallax Background with SVG](https://github.com/solygambas/html-css-fifty-projects/tree/master/57-parallax%20background%20svg) | [Live Demo](https://codepen.io/solygambas/full/vYyjjbz) |
6666
| 58 | [3D Product Card](https://github.com/solygambas/html-css-fifty-projects/tree/master/58-3D%20product%20card) | [Live Demo](https://codepen.io/solygambas/full/wvoXWPq) |
67-
| 59 | [Form Validator](https://github.com/solygambas/html-css-fifty-projects/tree/master/59-form%20validator) | [Live Demo](https://codepen.io/solygambas/full/MWbPJjb) |
67+
| 59 | [Movie Seat Booking](https://github.com/solygambas/html-css-fifty-projects/tree/master/60-movie%20seat%20booking) | [Live Demo]() |
6868

6969
Mainly based on 2 courses by Brad Traversy (2020):
7070

0 commit comments

Comments
 (0)