Learn to make a movie booking dashboard using HTML and CSS. no frameworks, and no libraries. This tutorial is best suitable for Rapid web development. No complex parts are there in this tutorial. I designed it with the very basics of HTML and CSS.
I hope you will enjoy it.
Complete source codes and images at the end 🠋🠋🠋
You may also like
Check the video tutorial
Don't forget to Subscribe to our Youtube Channel for more.
Recommended Videos
HTML CODES
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="assets/css/styles.css">
<title>Movie booking</title>
</head>
<body>
<section class="top-bar">
<div class="left-content">
<h2 class="title">M4You</h2>
<ul class="navigation">
<li><a href="#">Home</a></li>
<li><a class="active" href="#">Movies</a></li>
<li><a href="#">Theaters</a></li>
<li><a href="#">News</a></li>
</ul>
</div>
<div class="right-content">
<img src="./assets/images/filter.png" alt="" class="filter">
<img src="./assets/images/cart.png" alt="" class="cart">
<img src="./assets/images/help.png" alt="" class="help">
<div class="profile-img-box">
<img src="./assets/images/profile.jpg" alt="">
</div>
<img src="./assets/images/menu.png" alt="" class="menu">
</div>
</section>
<section class="main-container">
<div class="sidebar">
<form action="#">
<div class="sidebar-groups">
<h3 class="sg-title">Categories</h3>
<input type="checkbox" id="adventure" name="adventure" value="adventure">
<label for="adventure">Adventure</label><br>
<input type="checkbox" id="action" name="action" value="action">
<label for="action">Action</label><br>
<input type="checkbox" id="animation" name="animation" value="animation">
<label for="animation">Animation</label><br>
<input type="checkbox" id="comedy" name="comedy" value="comedy">
<label for="comedy">Comedy</label><br>
<input type="checkbox" id="science" name="science" value="science">
<label for="science">Science Fiction</label><br>
<input type="checkbox" id="thriller" name="thriller" value="thriller">
<label for="thriller">Thriller</label><br>
<input type="checkbox" id="history" name="history" value="history">
<label for="history">History</label><br>
<input type="checkbox" id="documentary" name="documentary" value="documentary">
<label for="documentary">Documentary</label><br>
<input type="checkbox" id="fantasy" name="fantasy" value="fantasy">
<label for="fantasy">Fantasy</label><br>
</div>
<div class="sidebar-groups">
<h3 class="sg-title">Language</h3>
<input type="checkbox" id="english" name="english" value="english">
<label for="english">English</label><br>
<input type="checkbox" id="spanish" name="spanish" value="spanish">
<label for="spanish">Spanish</label><br>
<input type="checkbox" id="hindi" name="hindi" value="hindi">
<label for="hindi">Hindi</label><br>
</div>
<div class="sidebar-groups">
<h3 class="sg-title">Time</h3>
<input type="radio" id="morning" name="time" value="morning">
<label for="morning">Morning</label><br>
<input type="radio" id="night" name="time" value="night">
<label for="night">Night</label><br>
</div>
<div class="sidebar-groups">
<a href="#" class="btn-l btn">Apply Filters</a>
</div>
</form>
</div>
<div class="movies-container">
<div class="upcoming-img-box">
<img src="assets/images/upcoming.webp" alt="">
<p class="upcoming-title">Upcoming Movie</p>
<div class="buttons">
<a href="#" class="btn">Book Now</a>
<a href="#" class="btn-alt btn">Play Trailer</a>
</div>
</div>
<div class="current-movies">
<div class="current-movie">
<div class="cm-img-box">
<img src="assets/images/movie1.jpg" alt="">
</div>
<h3 class="movie-title">Jurassic World</h3>
<p class="screen-name">Screen : Platinum</p>
<div class="booking">
<h2 class="price">15$</h2>
<a href="#" class="btn">Buy Tickets</a>
</div>
</div>
<div class="current-movie">
<div class="cm-img-box">
<img src="assets/images/movie2.jpg" alt="">
</div>
<h3 class="movie-title">Vikram</h3>
<p class="screen-name">Screen : Gold</p>
<div class="booking">
<h2 class="price">10$</h2>
<a href="#" class="btn">Buy Tickets</a>
</div>
</div>
<div class="current-movie">
<div class="cm-img-box">
<img src="assets/images/movie3.jpg" alt="">
</div>
<h3 class="movie-title">Firestarter</h3>
<p class="screen-name">Screen : Silver</p>
<div class="booking">
<h2 class="price">5$</h2>
<a href="#" class="btn">Buy Tickets</a>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
CSS CODES
@import url('https://fonts.googleapis.com/css2?family=Joan&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Joan', serif;
}
a {
text-decoration: none;
color: #adadad;
}
.btn {
display: inline-block;
padding: .5rem 1rem;
background-color: #cd8c38;
border-radius: 2rem;
color: #1e1f26;
transition: .3s;
}
.btn:hover {
background-color: #92601f;
}
.btn-l {
width: 100%;
text-align: center;
}
body {
background-color: #1e1f26;
display: grid;
grid-template-columns: 1000px;
justify-content: space-evenly;
}
/* top bar */
.top-bar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.5rem 1rem;
}
.left-content,
.right-content {
display: flex;
align-items: center;
}
.title {
margin-right: 3rem;
color: #cd8c38;
}
.navigation {
display: flex;
list-style: none;
}
.navigation li {
margin-right: 1rem;
}
.navigation li a:hover {
color: #cd8c38;
}
.active {
color: #cd8c38;
}
.filter,
.cart,
.help,
.menu {
position: relative;
width: 20px;
height: 20px;
}
.filter,
.cart,
.help {
margin-right: 1rem;
}
.menu {
margin-left: .8rem;
}
.filter,
.menu {
display: none;
}
.profile-img-box {
position: relative;
height: 30px;
width: 30px;
border-radius: 50%;
overflow: hidden;
}
img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
/* main container */
.main-container {
color: #adadad;
display: grid;
grid-template-columns: 1fr 3fr;
gap: 2rem;
}
/* sidebar */
.sidebar {
background: linear-gradient(45deg, rgba(255, 255, 255, .05), rgba(205, 140, 56, .15));
backdrop-filter: blur(5px);
height: fit-content;
border-radius: 1rem;
padding: 2rem 2.5rem;
}
.sidebar-groups {
margin-bottom: 1rem;
}
.sg-title {
margin-bottom: .5rem;
color: #fff;
}
input {
margin-bottom: .6rem;
}
input[type=checkbox]:checked {
accent-color: #cd8c38;
}
input[type=radio]:checked {
accent-color: #cd8c38;
}
label {
margin-left: .5rem;
}
/* movies container */
.upcoming-img-box {
position: relative;
height: 300px;
width: 100%;
border-radius: 1rem;
overflow: hidden;
margin-bottom: 1.5rem;
}
.upcoming-title {
position: absolute;
top: 2rem;
left: 2rem;
color: #cd8c38;
background-color: #1e1f26;
padding: .5rem 1rem;
border-radius: 2rem;
border: 1px solid #cd8c38;
font-weight: 500;
}
.buttons {
position: absolute;
bottom: 2rem;
left: 2rem;
}
.btn-alt {
background-color: #1e1f26;
color: #cd8c38;
border: 1px solid #cd8c38;
margin-left: 1rem;
}
.btn-alt:hover {
color: #1e1f26;
background-color: #cd8c38;
}
/* current movies */
.movies-container {
padding-bottom: 2rem;
}
.current-movies {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
.current-movie {
background: linear-gradient(45deg, rgba(255, 255, 255, .05), rgba(205, 140, 56, .15));
padding: 1rem;
border-radius: .5rem;
}
.cm-img-box {
position: relative;
height: 150px;
width: auto;
margin-bottom: 1rem;
border-radius: .5rem;
overflow: hidden;
}
.movie-title {
color: #fff;
margin-bottom: .2rem;
}
.booking {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 1rem;
}
.price {
color: #cd8c38;
}
.jpg)
0 Comments