<!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>