Creating a hotel booking website is an excellent project for anyone learning front-end web development. It combines HTML, CSS, and JavaScript to build a modern, interactive, and responsive website that looks professional on desktops, tablets, and smartphones.
In this project, you'll learn how to design a beautiful homepage with a navigation bar, a full-screen hero section, and a hotel reservation form where visitors can enter their booking details. You'll also create attractive room cards, a services section, a photo gallery, customer reviews, a contact form, and a responsive footer.
JavaScript adds interactivity by handling booking form validation, displaying booking confirmation popups, enabling smooth scrolling, creating a back-to-top button, and adding a dark mode option for a better user experience.
Project Features
- Responsive layout for all screen sizes
- Modern navigation menu
- Hero section with call-to-action button
- Hotel room listings
- Online booking form
- Services section
- Image gallery
- Customer testimonials
- Contact form
- Booking confirmation popup
- Smooth scrolling
- Back-to-top button
- Dark mode toggle
- Scroll animations
Technologies Used
- HTML5
- CSS3
- JavaScript (ES6)
Who Should Build This Project?
This project is ideal for beginners and intermediate web developers who want to improve their front-end development skills. It also serves as a great portfolio project, demonstrating your ability to create responsive layouts, interactive user interfaces, and modern website designs.
By completing this tutorial, you'll gain practical experience with real-world web development concepts while creating a website that can later be expanded with PHP, MySQL, and payment gateway integration to become a fully functional hotel reservation system.
If you're looking to strengthen your HTML, CSS, and JavaScript skills, this hotel booking website is a practical project that will help you understand responsive design, user interaction, and modern web development best practices.
Below is the code.. Remember drop a comment.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Koda Luxury Hotel Booking</title>
<link rel="stylesheet" href="style.css">
<link
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
rel="stylesheet">
</head>
<body>
<header>
<nav>
<div class="logo">
<i class="fa-solid fa-hotel"></i>
Luxury Hotel
</div>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Rooms</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<div class="hero">
<h1>Find Your Perfect Stay</h1>
<p>Book luxury hotels at the best prices.</p>
<button>Book Now</button>
</div>
</header>
<section class="booking">
<h2>Book a Room</h2>
<form id="bookingForm">
<input type="text"
placeholder="Full Name"
required>
<input type="email"
placeholder="Email"
required>
<input type="date"
required>
<input type="date"
required>
<select required>
<option>Single Room</option>
<option>Double Room</option>
<option>Executive Room</option>
<option>Presidential Suite</option>
</select>
<button type="submit">
Reserve
</button>
</form>
</section>
<section class="rooms">
<h2>Popular Rooms</h2>
<div class="room-container">
<div class="card">
<img src="https://picsum.photos/400/250?1">
<h3>Single Room</h3>
<p>$90/Night</p>
<button onclick="showRoom('Single Room','$90')">
Book
</button>
</div>
<div class="card">
<img src="https://picsum.photos/400/250?2">
<h3>Executive Room</h3>
<p>$180/Night</p>
<button onclick="showRoom('Executive Room','$180')">
Book
</button>
</div>
<div class="card">
<img src="https://picsum.photos/400/250?3">
<h3>Luxury Suite</h3>
<p>$300/Night</p>
<button onclick="showRoom('Luxury Suite','$300')">
Book
</button>
</div>
</div>
</section>
<section class="services">
<h2>Our Services</h2>
<div class="service-box">
<div>
<i class="fa-solid fa-wifi"></i>
<h3>Free WiFi</h3>
</div>
<div>
<i class="fa-solid fa-utensils"></i>
<h3>Restaurant</h3>
</div>
<div>
<i class="fa-solid fa-car"></i>
<h3>Parking</h3>
</div>
<div>
<i class="fa-solid fa-dumbbell"></i>
<h3>Gym</h3>
</div>
</div>
</section>
<section class="gallery">
<h2>Gallery</h2>
<div class="gallery-grid">
<img src="https://picsum.photos/300/200?4">
<img src="https://picsum.photos/300/200?5">
<img src="https://picsum.photos/300/200?6">
<img src="https://picsum.photos/300/200?7">
</div>
</section>
<section class="reviews">
<h2>Customer Reviews</h2>
<div class="review">
★★★★★
<p>
Amazing experience and excellent staff.
</p>
<h4>- John</h4>
</div>
<div class="review">
★★★★★
<p>
Best luxury hotel in town.
</p>
<h4>- Sarah</h4>
</div>
</section>
<section class="contact">
<h2>Contact Us</h2>
<form>
<input type="text"
placeholder="Name">
<input type="email"
placeholder="Email">
<textarea
placeholder="Message">
</textarea>
<button>
Send Message
</button>
</form>
</section>
<footer>
<p>
© 2026 Koda Luxury Hotel. All Rights Reserved.
</p>
</footer>
<div id="popup">
<div class="popup-content">
<span onclick="closePopup()">
×
</span>
<h2 id="roomName"></h2>
<p id="roomPrice"></p>
<button>
Confirm Booking
</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
style.css
/* ==========================
GOOGLE FONT
========================== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}
html{
scroll-behavior:smooth;
}
body{
background:#f5f7fa;
color:#333;
line-height:1.6;
}
/* ==========================
NAVIGATION
========================== */
header{
width:100%;
min-height:100vh;
background:linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.55)),
url("https://images.unsplash.com/photo-1566073771259-6a8506099945?auto=format&fit=crop&w=1600&q=80");
background-size:cover;
background-position:center;
}
nav{
width:100%;
display:flex;
justify-content:space-between;
align-items:center;
padding:20px 8%;
position:fixed;
top:0;
left:0;
background:rgba(0,0,0,.55);
backdrop-filter:blur(10px);
z-index:999;
}
.logo{
color:#fff;
font-size:28px;
font-weight:700;
}
.logo i{
color:gold;
}
nav ul{
display:flex;
list-style:none;
}
nav ul li{
margin-left:30px;
}
nav ul li a{
color:#fff;
text-decoration:none;
font-weight:500;
transition:.3s;
}
nav ul li a:hover{
color:gold;
}
/* ==========================
HERO SECTION
========================== */
.hero{
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
min-height:100vh;
color:#fff;
padding:20px;
}
.hero h1{
font-size:60px;
margin-bottom:20px;
}
.hero p{
font-size:22px;
margin-bottom:35px;
}
.hero button{
padding:15px 40px;
border:none;
background:gold;
color:#111;
border-radius:40px;
cursor:pointer;
font-size:18px;
transition:.4s;
font-weight:bold;
}
.hero button:hover{
background:#fff;
transform:scale(1.08);
}
/* ==========================
BOOKING
========================== */
.booking{
width:90%;
max-width:1200px;
margin:70px auto;
background:#fff;
padding:40px;
border-radius:15px;
box-shadow:0 10px 30px rgba(0,0,0,.1);
}
.booking h2{
text-align:center;
margin-bottom:30px;
font-size:35px;
}
.booking form{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:20px;
}
.booking input,
.booking select{
padding:15px;
border:1px solid #ddd;
border-radius:8px;
outline:none;
}
.booking button{
background:#0066ff;
color:#fff;
border:none;
border-radius:8px;
cursor:pointer;
font-size:18px;
transition:.3s;
}
.booking button:hover{
background:#004fd8;
}
/* ==========================
ROOMS
========================== */
.rooms{
padding:70px 8%;
}
.rooms h2{
text-align:center;
margin-bottom:50px;
font-size:40px;
}
.room-container{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
gap:35px;
}
.card{
background:#fff;
border-radius:15px;
overflow:hidden;
transition:.4s;
box-shadow:0 5px 15px rgba(0,0,0,.12);
}
.card:hover{
transform:translateY(-12px);
}
.card img{
width:100%;
height:240px;
object-fit:cover;
}
.card h3{
margin:15px;
}
.card p{
margin:0 15px 15px;
color:#777;
}
.card button{
margin:15px;
padding:12px 30px;
border:none;
background:#0d6efd;
color:#fff;
border-radius:30px;
cursor:pointer;
transition:.3s;
}
.card button:hover{
background:#004fd8;
}
/* ==========================
SERVICES
========================== */
.services{
background:#fff;
padding:80px 8%;
}
.services h2{
text-align:center;
margin-bottom:50px;
font-size:40px;
}
.service-box{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:30px;
}
.service-box div{
background:#f8f9fa;
text-align:center;
padding:40px;
border-radius:12px;
transition:.4s;
}
.service-box div:hover{
background:#0d6efd;
color:#fff;
}
.service-box i{
font-size:45px;
margin-bottom:20px;
color:gold;
}
/* ==========================
GALLERY
========================== */
.gallery{
padding:80px 8%;
}
.gallery h2{
text-align:center;
margin-bottom:40px;
font-size:40px;
}
.gallery-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:20px;
}
.gallery-grid img{
width:100%;
border-radius:12px;
transition:.4s;
}
.gallery-grid img:hover{
transform:scale(1.05);
}
/* ==========================
REVIEWS
========================== */
.reviews{
background:#eef3ff;
padding:80px 8%;
}
.reviews h2{
text-align:center;
margin-bottom:40px;
font-size:40px;
}
.review{
background:#fff;
padding:30px;
margin:20px auto;
max-width:700px;
border-radius:12px;
text-align:center;
box-shadow:0 5px 20px rgba(0,0,0,.08);
}
/* ==========================
CONTACT
========================== */
.contact{
padding:80px 8%;
}
.contact h2{
text-align:center;
margin-bottom:40px;
font-size:40px;
}
.contact form{
max-width:700px;
margin:auto;
}
.contact input,
.contact textarea{
width:100%;
padding:15px;
margin-bottom:20px;
border:1px solid #ddd;
border-radius:8px;
}
.contact textarea{
height:180px;
resize:none;
}
.contact button{
background:#0d6efd;
color:#fff;
border:none;
padding:15px 35px;
border-radius:8px;
cursor:pointer;
transition:.3s;
}
.contact button:hover{
background:#004fd8;
}
/* ==========================
FOOTER
========================== */
footer{
background:#111;
color:#fff;
text-align:center;
padding:25px;
}
/* ==========================
POPUP
========================== */
#popup{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,.65);
display:none;
justify-content:center;
align-items:center;
z-index:1000;
}
.popup-content{
width:90%;
max-width:420px;
background:#fff;
padding:35px;
border-radius:15px;
text-align:center;
position:relative;
}
.popup-content span{
position:absolute;
right:20px;
top:10px;
font-size:30px;
cursor:pointer;
}
.popup-content button{
margin-top:20px;
padding:12px 30px;
border:none;
border-radius:30px;
background:#0d6efd;
color:#fff;
cursor:pointer;
}
/* ==========================
RESPONSIVE
========================== */
@media(max-width:900px){
nav{
flex-direction:column;
padding:15px;
}
nav ul{
margin-top:15px;
flex-wrap:wrap;
justify-content:center;
}
nav ul li{
margin:10px;
}
.hero h1{
font-size:42px;
}
.hero p{
font-size:18px;
}
.booking{
padding:25px;
}
.rooms h2,
.services h2,
.gallery h2,
.contact h2,
.reviews h2{
font-size:30px;
}
}
@media(max-width:600px){
.hero h1{
font-size:34px;
}
.hero p{
font-size:16px;
}
.hero button{
padding:12px 25px;
}
.booking h2{
font-size:28px;
}
.logo{
font-size:22px;
}
}
script.js
// ===============================
// HOTEL BOOKING WEBSITE
// JavaScript
// ===============================
// Room Booking Popup
function showRoom(room, price) {
document.getElementById("popup").style.display = "flex";
document.getElementById("roomName").innerHTML =
room;
document.getElementById("roomPrice").innerHTML =
"Price: " + price + " / Night";
}
// Close Popup
function closePopup() {
document.getElementById("popup").style.display = "none";
}
// Close popup by clicking outside
window.onclick = function(event){
let popup = document.getElementById("popup");
if(event.target == popup){
popup.style.display = "none";
}
}
// ===============================
// Booking Form Validation
// ===============================
const bookingForm =
document.getElementById("bookingForm");
bookingForm.addEventListener("submit",function(e){
e.preventDefault();
alert(
"🎉 Congratulations!\n\nYour hotel reservation has been received successfully.\n\nOur customer service team will contact you shortly."
);
bookingForm.reset();
});
// ===============================
// Contact Form
// ===============================
const contactForm =
document.querySelector(".contact form");
contactForm.addEventListener("submit",function(e){
e.preventDefault();
alert(
"Thank you for contacting us.\nWe will reply to your message soon."
);
contactForm.reset();
});
// ===============================
// Hero Button Scroll
// ===============================
document.querySelector(".hero button")
.addEventListener("click",()=>{
document.querySelector(".booking")
.scrollIntoView({
behavior:"smooth"
});
});
// ===============================
// Navigation Smooth Scroll
// ===============================
document.querySelectorAll("nav a")
.forEach(anchor=>{
anchor.addEventListener("click",
function(e){
e.preventDefault();
let target =
document.querySelector(
this.getAttribute("href")
);
if(target){
target.scrollIntoView({
behavior:"smooth"
});
}
});
});
// ===============================
// Sticky Navbar Effect
// ===============================
window.addEventListener("scroll",()=>{
let nav = document.querySelector("nav");
if(window.scrollY > 100){
nav.style.background="#111";
nav.style.padding="15px 8%";
}
else{
nav.style.background="rgba(0,0,0,.55)";
nav.style.padding="20px 8%";
}
});
// ===============================
// Fade In Animation
// ===============================
const observer =
new IntersectionObserver(entries=>{
entries.forEach(entry=>{
if(entry.isIntersecting){
entry.target.classList.add("show");
}
});
});
document.querySelectorAll(
".card,.service-box div,.review"
).forEach(el=>{
observer.observe(el);
});
// ===============================
// Back To Top Button
// ===============================
const topBtn =
document.createElement("button");
topBtn.innerHTML="↑";
topBtn.id="topBtn";
document.body.appendChild(topBtn);
topBtn.style.position="fixed";
topBtn.style.bottom="30px";
topBtn.style.right="30px";
topBtn.style.padding="12px 18px";
topBtn.style.border="none";
topBtn.style.borderRadius="50%";
topBtn.style.cursor="pointer";
topBtn.style.display="none";
topBtn.style.background="#0d6efd";
topBtn.style.color="#fff";
topBtn.style.fontSize="20px";
window.addEventListener("scroll",()=>{
if(window.scrollY > 300){
topBtn.style.display="block";
}
else{
topBtn.style.display="none";
}
});
topBtn.onclick=function(){
window.scrollTo({
top:0,
behavior:"smooth"
});
};
// ===============================
// Dark Mode
// ===============================
const darkBtn =
document.createElement("button");
darkBtn.innerHTML="🌙";
darkBtn.id="darkMode";
document.body.appendChild(darkBtn);
darkBtn.style.position="fixed";
darkBtn.style.bottom="95px";
darkBtn.style.right="30px";
darkBtn.style.padding="12px";
darkBtn.style.border="none";
darkBtn.style.borderRadius="50%";
darkBtn.style.cursor="pointer";
darkBtn.style.fontSize="20px";
darkBtn.style.background="#111";
darkBtn.style.color="#fff";
darkBtn.onclick=function(){
document.body.classList.toggle("dark");
};
// ===============================
// Auto Image Slider
// ===============================
let gallery =
document.querySelectorAll(
".gallery-grid img"
);
let current = 0;
setInterval(()=>{
gallery.forEach(img=>{
img.style.opacity=".5";
});
gallery[current].style.opacity="1";
current++;
if(current>=gallery.length){
current=0;
}
},2000);
// ===============================
// Current Year
// ===============================
document.querySelector("footer p").innerHTML =
"© " +
new Date().getFullYear() +
" Luxury Hotel. All Rights Reserved.";
Tags
coding-tutorials