Restaurant Website Development -- 2
Budget: ₹400 – ₹750 INR
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Restaurant Name</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
body { font-family: Arial, sans-serif; }
.hero { background-image: url('https://via.placeholder.com/1920x600?text=Restaurant+Hero+Image'); background-size: cover; height: 60vh; display: flex; align-items: center; justify-content: center; color: white; text-shadow: 2px 2px 4px rgba(0,0,0,0.5); }
.menu-item { margin-bottom: 20px; }
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">Your Restaurant Name</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link" href="#home">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#menu">Menu</a></li>
<li class="nav-item"><a class="nav-link" href="#about">About</a></li>
<li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
<section id="home" class="hero">
<div class="container text-center">
<h1>Welcome to Your Restaurant Name</h1>
<p>Delicious food, great atmosphere. Book a table today!</p>
<a href="#contact" class="btn btn-primary btn-lg">Reserve Now</a>
</div>
</section>
<section id="menu" class="py-5">
<div class="container">
<h2 class="text-center mb-4">Our Menu</h2>
<div class="row">
<div class="col-md-4 menu-item">
<h3>Appetizers</h3>
<ul>
<li>Bruschetta - $8</li>
<li>Calamari - $12</li>
</ul>
</div>
<div class="col-md-4 menu-item">
<h3>Main Courses</h3>
<ul>
<li>Grilled Salmon - $18</li>
<li>Steak - $22</li>
</ul>
</div>
<div class="col-md-4 menu-item">
<h3>Desserts</h3>
<ul>
<li>Tiramisu - $6</li>
<li>Cheesecake - $7</li>
</ul>
</div>
</div>
</div>
</section>
<section id="about" class="bg-light py-5">
<div class="container">
<h2 class="text-center mb-4">About Us</h2>
<p class="text-center">We are a family-owned restaurant serving authentic cuisine since 2000. Our chefs use fresh, local ingredients to create memorable meals.</p>
</div>
</section>
<section id="contact" class="py-5">
<div class="container">
<h2 class="text-center mb-4">Contact Us</h2>
<div class="row">
<div class="col-md-6">
<h3>Address</h3>
<p>123 Main St, City, State 12345</p>
<h3>Phone</h3>
<p>(123) 456-7890</p>
</div>
<div class="col-md-6">
<h3>Hours</h3>
<p>Mon-Fri: 11am-10pm<br>Sat-Sun: 12pm-11pm</p>
</div>
</div>
</div>
</section>
<footer class="bg-dark text-white text-center py-3">
<p>© 2023 Your Restaurant Name. All rights reserved.</p>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Restaurant Name</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
body { font-family: Arial, sans-serif; }
.hero { background-image: url('https://via.placeholder.com/1920x600?text=Restaurant+Hero+Image'); background-size: cover; height: 60vh; display: flex; align-items: center; justify-content: center; color: white; text-shadow: 2px 2px 4px rgba(0,0,0,0.5); }
.menu-item { margin-bottom: 20px; }
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">Your Restaurant Name</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link" href="#home">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#menu">Menu</a></li>
<li class="nav-item"><a class="nav-link" href="#about">About</a></li>
<li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
<section id="home" class="hero">
<div class="container text-center">
<h1>Welcome to Your Restaurant Name</h1>
<p>Delicious food, great atmosphere. Book a table today!</p>
<a href="#contact" class="btn btn-primary btn-lg">Reserve Now</a>
</div>
</section>
<section id="menu" class="py-5">
<div class="container">
<h2 class="text-center mb-4">Our Menu</h2>
<div class="row">
<div class="col-md-4 menu-item">
<h3>Appetizers</h3>
<ul>
<li>Bruschetta - $8</li>
<li>Calamari - $12</li>
</ul>
</div>
<div class="col-md-4 menu-item">
<h3>Main Courses</h3>
<ul>
<li>Grilled Salmon - $18</li>
<li>Steak - $22</li>
</ul>
</div>
<div class="col-md-4 menu-item">
<h3>Desserts</h3>
<ul>
<li>Tiramisu - $6</li>
<li>Cheesecake - $7</li>
</ul>
</div>
</div>
</div>
</section>
<section id="about" class="bg-light py-5">
<div class="container">
<h2 class="text-center mb-4">About Us</h2>
<p class="text-center">We are a family-owned restaurant serving authentic cuisine since 2000. Our chefs use fresh, local ingredients to create memorable meals.</p>
</div>
</section>
<section id="contact" class="py-5">
<div class="container">
<h2 class="text-center mb-4">Contact Us</h2>
<div class="row">
<div class="col-md-6">
<h3>Address</h3>
<p>123 Main St, City, State 12345</p>
<h3>Phone</h3>
<p>(123) 456-7890</p>
</div>
<div class="col-md-6">
<h3>Hours</h3>
<p>Mon-Fri: 11am-10pm<br>Sat-Sun: 12pm-11pm</p>
</div>
</div>
</div>
</section>
<footer class="bg-dark text-white text-center py-3">
<p>© 2023 Your Restaurant Name. All rights reserved.</p>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>