Note: This code is for practice and educational purposes only.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Restaurant - Home Page</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- Header Top -->
<div class="header-top py-2">
<div class="container d-flex justify-content-between">
<div>
<i class="bi bi-envelope-fill"></i> info@techsoft.com | <i class="bi bi-telephone-fill"></i>
+880123456789
</div>
<div>
<a href="#">Reservation</a>
<a href="#">Login</a>
<a href="#">Register</a>
</div>
</div>
</div>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a href="index.html" class="navbar-brand fw-bold">FoodHouse</a>
<button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navMenu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navMenu">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a href="index.html" class="nav-link active">Home</a></li>
<li class="nav-item"><a href="menu.html" class="nav-link">Menu</a></li>
<li class="nav-item"><a href="dish-detail.html" class="nav-link">Dish Details</a></li>
<li class="nav-item"><a href="reservation.html" class="nav-link">Reservation</a></li>
<li class="nav-item"><a href="signup.html" class="nav-link">Signup</a></li>
<li class="nav-item"><a href="login.html" class="nav-link">Login</a></li>
</ul>
</div>
</div>
</nav>
<!-- Banner Section -->
<div id="bannerSlider" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://picsum.photos/1920/600?food1" class="d-block w-100">
<div class="carousel-caption">
<h2>Delicious Food Experience</h2>
<button class="btn btn-danger">Book a Table</button>
</div>
</div>
<div class="carousel-item">
<img src="https://picsum.photos/1920/600?food2" class="d-block w-100">
<div class="carousel-caption">
<h2>Fresh & Tasty Dishes</h2>
<button class="btn btn-warning">Explore Menu</button>
</div>
</div>
<div class="carousel-item">
<img src="https://picsum.photos/1920/600?food3" class="d-block w-100">
<div class="carousel-caption">
<h2>Best Restaurant in Town</h2>
<button class="btn btn-success">Reserve Now</button>
</div>
</div>
</div>
<button class="carousel-control-prev" data-bs-target="#bannerSlider" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
</button>
<button class="carousel-control-next" data-bs-target="#bannerSlider" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
</button>
</div>
<!-- Special Dishes Section -->
<section class="py-5">
<div class="container">
<h3 class="text-center mb-4">Special Dishes</h3>
<div class="row g-4">
<div class="col-md-4">
<div class="card">
<img src="https://picsum.photos/300?food4" class="img-fluid h250">
<div class="card-body">
<h5>Grilled Steak</h5>
<p>Delicious grilled steak with special sauce.</p>
<h6>$25</h6>
<button class="btn btn-primary">Order Now</button>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img src="https://picsum.photos/300?food5" class="img-fluid h250">
<div class="card-body">
<h5>Seafood Pasta</h5>
<p>Fresh seafood pasta with creamy sauce.</p>
<h6>$20</h6>
<button class="btn btn-primary">Order Now</button>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img src="https://picsum.photos/300?food6" class="img-fluid h250">
<div class="card-body">
<h5>Chicken Burger</h5>
<p>Crispy chicken burger with fresh salad.</p>
<h6>$12</h6>
<button class="btn btn-primary">Order Now</button>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Chef Recommendation -->
<section class="py-5 bg-light">
<div class="container">
<h3 class="text-center mb-4">Chef's Recommendation</h3>
<div class="row g-4">
<div class="col-md-6">
<div class="card">
<img src="https://picsum.photos/500?food7" class="img-fluid">
<div class="card-body">
<h5 class="text-center">Special Italian Pizza</h5>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card">
<img src="https://picsum.photos/500?food8" class="img-fluid">
<div class="card-body">
<h5 class="text-center">Premium Steak Meal</h5>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Testimonials -->
<section class="py-5">
<div class="container">
<h3 class="text-center mb-4">Customer Reviews</h3>
<div class="row g-4">
<div class="col-md-6">
<div class="card">
<div class="card-body">
<p>"Amazing food and great service."</p>
<strong>- John</strong>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card">
<div class="card-body">
<p>"Best restaurant experience ever."</p>
<strong>- Sarah</strong>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Newsletter -->
<section class="newsletter text-center">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-6">
<h4 class="mb-4">Subscribe Our Newsletter</h4>
<div class="input-group">
<input type="email" class="form-control w-25" placeholder="Enter email">
<button class="btn btn-danger">Subscribe</button>
</div>
</div>
</div>
</div>
</section>
<!-- Big Footer -->
<section class="big-footer py-5">
<div class="container">
<div class="row">
<div class="col-md-3">
<h5>Restaurant Info</h5>
<p>Best dining experience with delicious dishes.</p>
</div>
<div class="col-md-3">
<h5>Quick Links</h5>
<ul class="list-unstyled">
<li><a href="#">Home</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Reservation</a></li>
</ul>
</div>
<div class="col-md-3">
<h5>Opening Hours</h5>
<p>Mon-Fri: 10AM - 10PM</p>
<p>Sat-Sun: 12PM - 12AM</p>
</div>
<div class="col-md-3">
<h5>Social Media</h5>
<p>Facebook</p>
<p>Instagram</p>
<p>YouTube</p>
</div>
</div>
</div>
</section>
<!-- Footer -->
<div class="footer-bottom text-center py-3">
© 2026 FoodHouse Restaurant
<p id="current-datetime"></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js">
</script>
<script src="js/main.js">
</script>
</body>
</html>
dish-detail.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Restaurant - Dish Details</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- Header Top -->
<div class="header-top py-2">
<div class="container d-flex justify-content-between">
<div>
<i class="bi bi-envelope-fill"></i> info@techsoft.com | <i class="bi bi-telephone-fill"></i>
+880123456789
</div>
<div>
<a href="#">Reservation</a>
<a href="#">Login</a>
<a href="#">Register</a>
</div>
</div>
</div>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a href="index.html" class="navbar-brand fw-bold">FoodHouse</a>
<button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navMenu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navMenu">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a href="index.html" class="nav-link active">Home</a></li>
<li class="nav-item"><a href="menu.html" class="nav-link">Menu</a></li>
<li class="nav-item"><a href="dish-detail.html" class="nav-link">Dish Details</a></li>
<li class="nav-item"><a href="reservation.html" class="nav-link">Reservation</a></li>
<li class="nav-item"><a href="signup.html" class="nav-link">Signup</a></li>
<li class="nav-item"><a href="login.html" class="nav-link">Login</a></li>
</ul>
</div>
</div>
</nav>
<!-- Breadcrumb Section -->
<section class="bg-light py-3">
<div class="container">
<nav>
<ol class="breadcrumb mb-0">
<li class="breadcrumb-item">
<a href="#">Home</a>
</li>
<li class="breadcrumb-item">
<a href="#">Menu</a>
</li>
<li class="breadcrumb-item active">
Dish Details
</li>
</ol>
</nav>
</div>
</section>
<!-- Dish Information Section -->
<section class="py-5">
<div class="container">
<div class="row g-4">
<!-- Left Panel Image -->
<div class="col-lg-6">
<div class="overflow-hidden">
<img src="https://picsum.photos/600?food1" class="img-fluid image-zoom">
</div>
</div>
<!-- Right Panel Info -->
<div class="col-lg-6">
<h3>Italian Pizza</h3>
<h4 class="text-danger">$15</h4>
<p><strong>Ingredients:</strong> Cheese, Tomato, Olive Oil,Mushroom, Chicken</p>
<!-- Quantity -->
<div class="mb-3">
<label class="form-label">Quantity</label>
<input type="number" class="form-control" value="1" style="width:120px">
</div>
<!-- Size Selector -->
<div class="mb-3">
<label class="form-label">Select Size</label>
<select class="form-select" style="width:200px">
<option>Small</option>
<option>Medium</option>
<option>Large</option>
</select>
</div>
<button class="btn btn-success">
Order Now
</button>
</div>
</div>
</div>
</section>
<!-- Dish Details Section -->
<section class="py-5 bg-light">
<div class="container">
<h4 class="mb-3">Dish Details</h4>
<p>
Our Italian pizza is made with fresh ingredients,
premium mozzarella cheese and authentic Italian
recipe. Baked in a wood-fired oven to give the
perfect crispy crust and delicious flavor.
</p>
<h5 class="mt-4">Nutrition Information</h5>
<ul>
<li>Calories: 450 kcal</li>
<li>Protein: 20g</li>
<li>Carbohydrates: 50g</li>
<li>Fat: 18g</li>
</ul>
</div>
</section>
<!-- Related Dishes -->
<section class="py-5">
<div class="container">
<h4 class="mb-4">Related Dishes</h4>
<div class="row g-4">
<div class="col-md-4">
<div class="card related-card">
<img src="https://picsum.photos/300?food2" class="img-fluid h250">
<div class="card-body">
<h6>Grilled Steak</h6>
<p>$25</p>
<a href="#" class="btn btn-primary btn-sm">
View Dish
</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card related-card">
<img src="https://picsum.photos/300?food3" class="img-fluid h250">
<div class="card-body">
<h6>Seafood Pasta</h6>
<p>$20</p>
<a href="#" class="btn btn-primary btn-sm">
View Dish
</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card related-card">
<img src="https://picsum.photos/300?food4" class="img-fluid h250">
<div class="card-body">
<h6>Chicken Burger</h6>
<p>$12</p>
<a href="#" class="btn btn-primary btn-sm">
View Dish
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Big Footer -->
<section class="big-footer py-5">
<div class="container">
<div class="row">
<div class="col-md-3">
<h5>Restaurant Info</h5>
<p>Best dining experience with delicious dishes.</p>
</div>
<div class="col-md-3">
<h5>Quick Links</h5>
<ul class="list-unstyled">
<li><a href="#">Home</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Reservation</a></li>
</ul>
</div>
<div class="col-md-3">
<h5>Opening Hours</h5>
<p>Mon-Fri: 10AM - 10PM</p>
<p>Sat-Sun: 12PM - 12AM</p>
</div>
<div class="col-md-3">
<h5>Social Media</h5>
<p>Facebook</p>
<p>Instagram</p>
<p>YouTube</p>
</div>
</div>
</div>
</section>
<!-- Footer -->
<div class="footer-bottom text-center py-3">
© 2026 FoodHouse Restaurant
<p id="current-datetime"></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Restaurant - login</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- Header Top -->
<div class="header-top py-2">
<div class="container d-flex justify-content-between">
<div>
<i class="bi bi-envelope-fill"></i> info@techsoft.com | <i class="bi bi-telephone-fill"></i>
+880123456789
</div>
<div>
<a href="#">Reservation</a>
<a href="#">Login</a>
<a href="#">Register</a>
</div>
</div>
</div>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a href="index.html" class="navbar-brand fw-bold">FoodHouse</a>
<button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navMenu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navMenu">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a href="index.html" class="nav-link active">Home</a></li>
<li class="nav-item"><a href="menu.html" class="nav-link">Menu</a></li>
<li class="nav-item"><a href="dish-detail.html" class="nav-link">Dish Details</a></li>
<li class="nav-item"><a href="reservation.html" class="nav-link">Reservation</a></li>
<li class="nav-item"><a href="signup.html" class="nav-link">Signup</a></li>
<li class="nav-item"><a href="login.html" class="nav-link">Login</a></li>
</ul>
</div>
</div>
</nav>
<!-- Breadcrumb Section -->
<section class="bg-light py-3">
<div class="container">
<nav>
<ol class="breadcrumb mb-0">
<li class="breadcrumb-item">
<a href="#">Home</a>
</li>
<li class="breadcrumb-item active">
Login
</li>
</ol>
</nav>
</div>
</section>
<!-- Signup Form Section -->
<section class="py-5">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-6">
<div class="signup-box">
<h4 class="text-center mb-4"> Login an Account</h4>
<form>
<div class="row g-3">
<!-- Username -->
<div class="col-md-12">
<label class="form-label"> Username </label>
<input type="text" class="form-control" placeholder="Choose username" required>
</div>
<!-- Password -->
<div class="col-md-12">
<label class="form-label"> Password</label>
<input type="password" class="form-control" placeholder="Enter password" required>
</div>
<div class="col-md-12 text-center">
<button class="btn btn-danger w-100">Login</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</section>
<!-- Big Footer -->
<section class="big-footer py-5">
<div class="container">
<div class="row">
<div class="col-md-3">
<h5>Restaurant Info</h5>
<p>Best dining experience with delicious dishes.</p>
</div>
<div class="col-md-3">
<h5>Quick Links</h5>
<ul class="list-unstyled">
<li><a href="#">Home</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Reservation</a></li>
</ul>
</div>
<div class="col-md-3">
<h5>Opening Hours</h5>
<p>Mon-Fri: 10AM - 10PM</p>
<p>Sat-Sun: 12PM - 12AM</p>
</div>
<div class="col-md-3">
<h5>Social Media</h5>
<p>Facebook</p>
<p>Instagram</p>
<p>YouTube</p>
</div>
</div>
</div>
</section>
<!-- Footer -->
<div class="footer-bottom text-center py-3">
© 2026 FoodHouse Restaurant
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
singup.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Restaurant - Sing up</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- Header Top -->
<div class="header-top py-2">
<div class="container d-flex justify-content-between">
<div>
<i class="bi bi-envelope-fill"></i> info@techsoft.com | <i class="bi bi-telephone-fill"></i>
+880123456789
</div>
<div>
<a href="#">Reservation</a>
<a href="#">Login</a>
<a href="#">Register</a>
</div>
</div>
</div>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a href="index.html" class="navbar-brand fw-bold">FoodHouse</a>
<button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navMenu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navMenu">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a href="index.html" class="nav-link active">Home</a></li>
<li class="nav-item"><a href="menu.html" class="nav-link">Menu</a></li>
<li class="nav-item"><a href="dish-detail.html" class="nav-link">Dish Details</a></li>
<li class="nav-item"><a href="reservation.html" class="nav-link">Reservation</a></li>
<li class="nav-item"><a href="signup.html" class="nav-link">Signup</a></li>
<li class="nav-item"><a href="login.html" class="nav-link">Login</a></li>
</ul>
</div>
</div>
</nav>
<!-- Breadcrumb Section -->
<section class="bg-light py-3">
<div class="container">
<nav>
<ol class="breadcrumb mb-0">
<li class="breadcrumb-item">
<a href="#">Home</a>
</li>
<li class="breadcrumb-item active">
Signup
</li>
</ol>
</nav>
</div>
</section>
<!-- Signup Form Section -->
<section class="py-5">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-6">
<div class="signup-box">
<h4 class="text-center mb-4"> Create an Account</h4>
<form>
<div class="row g-3">
<!-- First Name -->
<div class="col-md-6">
<label class="form-label"> First Name</label>
<input type="text" class="form-control" placeholder="Enter first name" required>
</div>
<!-- Last Name -->
<div class="col-md-6">
<label class="form-label">Last Name</label>
<input type="text" class="form-control" placeholder="Enter last name" required>
</div>
<!-- Phone -->
<div class="col-md-6">
<label class="form-label">Phone</label>
<input type="tel" class="form-control" placeholder="Enter phone number" required>
</div>
<!-- Email -->
<div class="col-md-6">
<label class="form-label"> Email </label>
<input type="email" class="form-control" placeholder="Enter email" required>
</div>
<!-- Username -->
<div class="col-md-12">
<label class="form-label"> Username </label>
<input type="text" class="form-control" placeholder="Choose username" required>
</div>
<!-- Password -->
<div class="col-md-12">
<label class="form-label"> Password</label>
<input type="password" class="form-control" placeholder="Enter password" required>
</div>
<div class="col-md-12 text-center">
<button class="btn btn-danger w-100"> Sign Up</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</section>
<!-- Big Footer -->
<section class="big-footer py-5">
<div class="container">
<div class="row">
<div class="col-md-3">
<h5>Restaurant Info</h5>
<p>Best dining experience with delicious dishes.</p>
</div>
<div class="col-md-3">
<h5>Quick Links</h5>
<ul class="list-unstyled">
<li><a href="#">Home</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Reservation</a></li>
</ul>
</div>
<div class="col-md-3">
<h5>Opening Hours</h5>
<p>Mon-Fri: 10AM - 10PM</p>
<p>Sat-Sun: 12PM - 12AM</p>
</div>
<div class="col-md-3">
<h5>Social Media</h5>
<p>Facebook</p>
<p>Instagram</p>
<p>YouTube</p>
</div>
</div>
</div>
</section>
<!-- Footer -->
<div class="footer-bottom text-center py-3">
© 2026 FoodHouse Restaurant
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
menu.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Restaurant - Menu </title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- Header Top -->
<div class="header-top py-2">
<div class="container d-flex justify-content-between">
<div>
<i class="bi bi-envelope-fill"></i> info@techsoft.com | <i class="bi bi-telephone-fill"></i>
+880123456789
</div>
<div>
<a href="#">Reservation</a>
<a href="#">Login</a>
<a href="#">Register</a>
</div>
</div>
</div>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a href="index.html" class="navbar-brand fw-bold">FoodHouse</a>
<button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navMenu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navMenu">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a href="index.html" class="nav-link active">Home</a></li>
<li class="nav-item"><a href="menu.html" class="nav-link">Menu</a></li>
<li class="nav-item"><a href="dish-detail.html" class="nav-link">Dish Details</a></li>
<li class="nav-item"><a href="reservation.html" class="nav-link">Reservation</a></li>
<li class="nav-item"><a href="signup.html" class="nav-link">Signup</a></li>
<li class="nav-item"><a href="login.html" class="nav-link">Login</a></li>
</ul>
</div>
</div>
</nav>
<!-- Breadcrumb Section -->
<section class="bg-light py-3">
<div class="container">
<nav>
<ol class="breadcrumb mb-0">
<li class="breadcrumb-item">
<a href="#">Home</a>
</li>
<li class="breadcrumb-item active">
Menu
</li>
</ol>
</nav>
</div>
</section>
<!-- Menu Section -->
<section class="py-5">
<div class="container">
<div class="row">
<!-- Left Panel Categories -->
<div class="col-lg-3">
<h5 class="mb-3">Food Categories</h5>
<div class="accordion" id="menuAccordion">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" data-bs-toggle="collapse" data-bs-target="#starters">
Starters
</button>
</h2>
<div id="starters" class="accordion-collapse collapse show" data-bs-parent="#menuAccordion">
<div class="accordion-body">
<ul class="list-group list-group-flush">
<li class="list-group-item"><a class="text-decoration-none" href="#">Soup</a>
</li>
<li class="list-group-item"><a class="text-decoration-none" href="#">Salad</a>
</li>
<li class="list-group-item"><a class="text-decoration-none" href="#">Garlic
Bread</a></li>
</ul>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" data-bs-toggle="collapse"
data-bs-target="#maincourse">
Main Course
</button>
</h2>
<div id="maincourse" class="accordion-collapse collapse" data-bs-parent="#menuAccordion">
<div class="accordion-body">
<ul class="list-group list-group-flush">
<li class="list-group-item"><a class="text-decoration-none" href="#">Steak</a>
</li>
<li class="list-group-item"><a class="text-decoration-none" href="#">Pizza</a>
</li>
<li class="list-group-item"><a class="text-decoration-none" href="#">Pasta</a>
</li>
</ul>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" data-bs-toggle="collapse"
data-bs-target="#desserts">
Desserts
</button>
</h2>
<div id="desserts" class="accordion-collapse collapse" data-bs-parent="#menuAccordion">
<div class="accordion-body">
<ul class="list-group list-group-flush">
<li class="list-group-item"><a class="text-decoration-none" href="#">Ice
Cream</a></li>
<li class="list-group-item"><a class="text-decoration-none" href="#">Cake</a>
</li>
<li class="list-group-item"><a class="text-decoration-none" href="#">Pudding</a>
</li>
</ul>
</div>
</div>
</div>
<!-- Drinks -->
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" data-bs-toggle="collapse"
data-bs-target="#drinks">
Drinks
</button>
</h2>
<div id="drinks" class="accordion-collapse collapse" data-bs-parent="#menuAccordion">
<div class="accordion-body">
<ul class="list-group list-group-flush">
<li class="list-group-item"><a class="text-decoration-none" href="#">Coffee</a>
</li>
<li class="list-group-item"><a class="text-decoration-none" href="#">Juice</a>
</li>
<li class="list-group-item"><a class="text-decoration-none" href="#">Soft
Drinks</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- Right Panel Menu Items -->
<div class="col-lg-9">
<div class="row g-4">
<div class="col-md-4">
<div class="card menu-card">
<img src="https://picsum.photos/300?food1" class="img-fluid h250">
<div class="card-body text-center">
<h5>Italian Pizza</h5>
<p>$15</p>
<button class="btn btn-primary w-100">
Add Cart
</button>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card menu-card">
<img src="https://picsum.photos/300?food2" class="img-fluid h250">
<div class="card-body text-center">
<h5>Grilled Chicken</h5>
<p>$18</p>
<button class="btn btn-primary w-100">
Add Cart
</button>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card menu-card">
<img src="https://picsum.photos/300?food3" class="img-fluid h250">
<div class="card-body text-center">
<h5>Seafood Pasta</h5>
<p>$20</p>
<button class="btn btn-primary w-100">
Add Cart
</button>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card menu-card">
<img src="https://picsum.photos/300?food4" class="img-fluid h250">
<div class="card-body text-center">
<h5>Italian Pizza</h5>
<p>$15</p>
<button class="btn btn-primary w-100">
Add Cart
</button>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card menu-card">
<img src="https://picsum.photos/300?food5" class="img-fluid h250">
<div class="card-body text-center">
<h5>Grilled Chicken</h5>
<p>$18</p>
<button class="btn btn-primary w-100">
Add Cart
</button>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card menu-card">
<img src="https://picsum.photos/300?food6" class="img-fluid h250">
<div class="card-body text-center">
<h5>Seafood Pasta</h5>
<p>$20</p>
<button class="btn btn-primary w-100">
Add Cart
</button>
</div>
</div>
</div>
</div>
<!-- Pagination -->
<div class="mt-5">
<nav>
<ul class="pagination justify-content-center">
<li class="page-item disabled">
<a class="page-link">Previous</a>
</li>
<li class="page-item active">
<a class="page-link">1</a>
</li>
<li class="page-item">
<a class="page-link">2</a>
</li>
<li class="page-item">
<a class="page-link">3</a>
</li>
<li class="page-item">
<a class="page-link">Next</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</section>
<!-- Big Footer -->
<section class="big-footer py-5">
<div class="container">
<div class="row">
<div class="col-md-3">
<h5>Restaurant Info</h5>
<p>Best dining experience with delicious dishes.</p>
</div>
<div class="col-md-3">
<h5>Quick Links</h5>
<ul class="list-unstyled">
<li><a href="#">Home</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Reservation</a></li>
</ul>
</div>
<div class="col-md-3">
<h5>Opening Hours</h5>
<p>Mon-Fri: 10AM - 10PM</p>
<p>Sat-Sun: 12PM - 12AM</p>
</div>
<div class="col-md-3">
<h5>Social Media</h5>
<p>Facebook</p>
<p>Instagram</p>
<p>YouTube</p>
</div>
</div>
</div>
</section>
<!-- Footer -->
<div class="footer-bottom text-center py-3">
© 2026 FoodHouse Restaurant
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
reservation.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Restaurant - Reservation</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- Header Top -->
<div class="header-top py-2">
<div class="container d-flex justify-content-between">
<div>
<i class="bi bi-envelope-fill"></i> info@techsoft.com | <i class="bi bi-telephone-fill"></i>
+880123456789
</div>
<div>
<a href="#">Reservation</a>
<a href="#">Login</a>
<a href="#">Register</a>
</div>
</div>
</div>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a href="index.html" class="navbar-brand fw-bold">FoodHouse</a>
<button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navMenu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navMenu">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a href="index.html" class="nav-link active">Home</a></li>
<li class="nav-item"><a href="menu.html" class="nav-link">Menu</a></li>
<li class="nav-item"><a href="dish-detail.html" class="nav-link">Dish Details</a></li>
<li class="nav-item"><a href="reservation.html" class="nav-link">Reservation</a></li>
<li class="nav-item"><a href="signup.html" class="nav-link">Signup</a></li>
<li class="nav-item"><a href="login.html" class="nav-link">Login</a></li>
</ul>
</div>
</div>
</nav>
<!-- Breadcrumb Section -->
<section class="bg-light py-3">
<div class="container">
<nav>
<ol class="breadcrumb mb-0">
<li class="breadcrumb-item">
<a href="#">Home</a>
</li>
<li class="breadcrumb-item active">
Reservation
</li>
</ol>
</nav>
</div>
</section>
<!-- Reservation Form Section -->
<section class="py-5">
<div class="container">
<h3 class="text-center mb-4">
Book a Table
</h3>
<div class="row justify-content-center">
<div class="col-md-8">
<div class="reservation-box">
<form id="reservationForm">
<div class="row g-3">
<!-- Name -->
<div class="col-md-6">
<label class="form-label">Name</label>
<input type="text" class="form-control" required>
</div>
<!-- Email -->
<div class="col-md-6">
<label class="form-label">Email</label>
<input type="email" class="form-control" required>
</div>
<!-- Phone -->
<div class="col-md-6">
<label class="form-label">Phone</label>
<input type="tel" class="form-control" required>
</div>
<!-- Guests -->
<div class="col-md-6">
<label class="form-label">Number of Guests</label>
<input type="number" class="form-control" required>
</div>
<!-- Date -->
<div class="col-md-6">
<label class="form-label">Date</label>
<input type="date" class="form-control" required>
</div>
<!-- Time -->
<div class="col-md-6">
<label class="form-label">Time</label>
<input type="time" class="form-control" required>
</div>
<!-- Special Request -->
<div class="col-md-12">
<label class="form-label">Special Request</label>
<textarea class="form-control" rows="3"></textarea>
</div>
<div class="col-md-12 text-center">
<button type="submit" class="btn btn-danger px-4">
Reserve Table
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</section>
<!-- Reservation Confirmation Modal -->
<div class="modal fade" id="reservationModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">
Reservation Confirmed
</h5>
<button class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body text-center">
<p>Your table reservation has been successfully submitted.</p>
<p>Our team will contact you shortly.</p>
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-bs-dismiss="modal"> OK </button>
</div>
</div>
</div>
</div>
<!-- Big Footer -->
<section class="big-footer py-5">
<div class="container">
<div class="row">
<div class="col-md-3">
<h5>Restaurant Info</h5>
<p>Best dining experience with delicious dishes.</p>
</div>
<div class="col-md-3">
<h5>Quick Links</h5>
<ul class="list-unstyled">
<li><a href="#">Home</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Reservation</a></li>
</ul>
</div>
<div class="col-md-3">
<h5>Opening Hours</h5>
<p>Mon-Fri: 10AM - 10PM</p>
<p>Sat-Sun: 12PM - 12AM</p>
</div>
<div class="col-md-3">
<h5>Social Media</h5>
<p>Facebook</p>
<p>Instagram</p>
<p>YouTube</p>
</div>
</div>
</div>
</section>
<!-- Footer -->
<div class="footer-bottom text-center py-3">
© 2026 FoodHouse Restaurant
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="js/main.js"></script>
<script>
/* Reservation confirmation popup */
document.getElementById("reservationForm")
.addEventListener("submit", function (e) {
e.preventDefault();
let modal = new bootstrap.Modal(
document.getElementById("reservationModal")
);
modal.show();
this.reset();
});
</script>
</body>
</html>
main.js
function displayCurrentDateTime() {
// Create a new Date object to get the current date and time
const now = new Date();
// Format the date and time string
// Using toLocaleString() formats it according to the user's browser locale
const formattedDateTime = now.toLocaleString();
// Get the HTML element by its ID and update its content
document.getElementById('current-datetime').textContent = formattedDateTime;
}
// Call the function once to display immediately
displayCurrentDateTime();
// Update the time every second using setInterval to create a "running clock"
setInterval(displayCurrentDateTime, 1000);
style.css
/* Header Top */
.header-top {
background: #111;
color: #fff;
font-size: 14px;
}
.header-top a {
color: #fff;
text-decoration: none;
margin-left: 15px;
}
/* Banner */
.carousel-item img {
height: 500px;
object-fit: cover;
}
.h250 {
height: 250px;
object-fit: cover;
}
.image-zoom {
transition: .3s ease;
}
.image-zoom:hover {
transform: scale(1.2);
}
/* Newsletter */
.newsletter {
background: #f8f9fa;
padding: 40px;
}
/* Footer */
.big-footer {
background: #212529;
color: #ccc;
}
.big-footer a {
color: #ccc;
text-decoration: none;
}
.footer-bottom {
background: #000;
color: #aaa;
}
