Dhaba Restaurant Template
Preview
Edit
Download
Run
Download Options
HTML File
Download as .html file
CSS File
Download as .css file
JavaScript File
Download as .js file
Combined HTML
All code in one HTML file
Project ZIP
All files in a ZIP archive
Cancel
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Dhaba Restaurant - Authentic Indian Cuisine</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap" rel="stylesheet"> <link rel="stylesheet" href=""> </head> <body> <!-- Header Section --> <header id="home"> <nav id="navbar"> <div class="logo">Dhaba<span>Restaurant</span></div> <ul class="nav-links"> <li><a href="#home">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#special-dishes">Special Dishes</a></li> <li><a href="#menu">Menu</a></li> <li><a href="#testimonials">Testimonials</a></li> <li><a href="#gallery">Gallery</a></li> <li><a href="#reservation">Reservation</a></li> </ul> <div class="menu-toggle"> <i class="fas fa-bars"></i> </div> </nav> <div class="hero-content"> <h1>Authentic Indian Dhaba Experience</h1> <p>Experience the rich flavors of traditional Indian cuisine in a warm and inviting atmosphere that transports you to the roadside dhabas of India.</p> <a href="#reservation" class="btn">Book a Table</a> </div> <a href="#about" class="scroll-down"><i class="fas fa-chevron-down"></i></a> </header> <!-- About Section --> <section class="about" id="about"> <div class="about-img"> <img src="https://images.unsplash.com/photo-1601050690117-5b690f89a6b2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Dhaba Restaurant Interior"> <p style="text-align: center; margin-top: 10px; font-size: 0.8rem;">Image from <a href="https://unsplash.com/photos/a-person-standing-in-front-of-a-counter-next-to-a-stove-top-5IHz5WhosQE" target="_blank">Unsplash</a></p> </div> <div class="about-content"> <h2>Our <span>Story</span></h2> <p>Founded in 1995, Dhaba Restaurant brings the authentic taste of Indian roadside eateries to the heart of the city. Our founder, Rajesh Sharma, grew up in Punjab and wanted to share the genuine dhaba experience with food lovers everywhere.</p> <p>We use traditional cooking methods and family recipes passed down through generations. All our dishes are prepared with the freshest ingredients and aromatic spices that will transport your senses to the vibrant streets of India.</p> <p>At Dhaba, we believe in the philosophy of "Atithi Devo Bhava" (Guest is God), ensuring every visitor feels welcomed and leaves satisfied with a memorable dining experience.</p> <a href="#menu" class="btn">Explore Menu</a> </div> </section> <!-- Special Dishes Section --> <section class="special-dishes" id="special-dishes"> <div class="section-title"> <h2>Our <span>Specialties</span></h2> </div> <div class="dishes-container"> <div class="dish-card" style="--order: 1;"> <div class="dish-img"> <img src="https://images.unsplash.com/photo-1631515243349-e0cb75fb8d3a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1488&q=80" alt="Butter Chicken"> <p style="text-align: center; margin-top: 10px; font-size: 0.8rem;">Image from <a href="https://unsplash.com/photos/a-plate-of-food-with-sauce-and-naan-bread-8eHmmqW-mQ4" target="_blank">Unsplash</a></p> </div> <div class="dish-info"> <h3>Butter Chicken</h3> <p>Tender chicken pieces cooked in a rich, creamy tomato gravy with aromatic spices and butter.</p> <div class="price">$14.99</div> </div> </div> <div class="dish-card" style="--order: 2;"> <div class="dish-img"> <img src="https://images.unsplash.com/photo-1601050690597-df0568f70950?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Dal Makhani"> <p style="text-align: center; margin-top: 10px; font-size: 0.8rem;">Image from <a href="https://unsplash.com/photos/a-bowl-of-food-on-a-table-next-to-a-bowl-of-rice-5IHz5WhosQE" target="_blank">Unsplash</a></p> </div> <div class="dish-info"> <h3>Dal Makhani</h3> <p>Creamy black lentils slow-cooked with butter and spices, a signature dish of Punjab.</p> <div class="price">$12.99</div> </div> </div> <div class="dish-card" style="--order: 3;"> <div class="dish-img"> <img src="https://images.unsplash.com/photo-1603894584373-5ac82b2ae398?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Tandoori Platter"> <p style="text-align: center; margin-top: 10px; font-size: 0.8rem;">Image from <a href="https://unsplash.com/photos/a-plate-of-food-with-meat-and-vegetables-on-it-9jpVH6_h9U8" target="_blank">Unsplash</a></p> </div> <div class="dish-info"> <h3>Tandoori Platter</h3> <p>Assortment of tandoori chicken, seekh kebab, and paneer tikka served with mint chutney.</p> <div class="price">$18.99</div> </div> </div> </div> </section> <!-- Menu Section --> <section class="menu" id="menu"> <div class="section-title"> <h2>Our <span>Menu</span></h2> </div> <div class="menu-container"> <div class="menu-category" style="--order: 1;"> <h3>Starters</h3> <div class="menu-item"> <div class="item-header"> <h4>Paneer Tikka</h4> <div class="price">$8.99</div> </div> <div class="item-desc">Cubes of paneer marinated in spices and grilled in tandoor</div> </div> <div class="menu-item"> <div class="item-header"> <h4>Chicken 65</h4> <div class="price">$9.99</div> </div> <div class="item-desc">Spicy, deep-fried chicken appetizer with curry leaves</div> </div> <div class="menu-item"> <div class="item-header"> <h4>Aloo Tikki</h4> <div class="price">$7.99</div> </div> <div class="item-desc">Crispy potato patties served with chutneys</div> </div> <div class="menu-item"> <div class="item-header"> <h4>Samosa</h4> <div class="price">$6.99</div> </div> <div class="item-desc">Spiced potato and peas stuffed in crispy pastry</div> </div> </div> <div class="menu-category" style="--order: 2;"> <h3>Main Course</h3> <div class="menu-item"> <div class="item-header"> <h4>Chicken Curry</h4> <div class="price">$13.99</div> </div> <div class="item-desc">Chicken cooked in onion-tomato gravy with aromatic spices</div> </div> <div class="menu-item"> <div class="item-header"> <h4>Palak Paneer</h4> <div class="price">$12.99</div> </div> <div class="item-desc">Paneer cubes in creamy spinach gravy</div> </div> <div class="menu-item"> <div class="item-header"> <h4>Rogan Josh</h4> <div class="price">$14.99</div> </div> <div class="item-desc">Aromatic lamb curry from Kashmir</div> </div> <div class="menu-item"> <div class="item-header"> <h4>Vegetable Biryani</h4> <div class="price">$11.99</div> </div> <div class="item-desc">Fragrant basmati rice cooked with mixed vegetables</div> </div> </div> <div class="menu-category" style="--order: 3;"> <h3>Breads & Rice</h3> <div class="menu-item"> <div class="item-header"> <h4>Garlic Naan</h4> <div class="price">$3.99</div> </div> <div class="item-desc">Leavened bread topped with garlic and butter</div> </div> <div class="menu-item"> <div class="item-header"> <h4>Roti</h4> <div class="price">$2.99</div> </div> <div class="item-desc">Whole wheat unleavened flatbread</div> </div> <div class="menu-item"> <div class="item-header"> <h4>Jeera Rice</h4> <div class="price">$4.99</div> </div> <div class="item-desc">Basmati rice tempered with cumin seeds</div> </div> <div class="menu-item"> <div class="item-header"> <h4>Pulao</h4> <div class="price">$5.99</div> </div> <div class="item-desc">Fragrant rice cooked with vegetables and mild spices</div> </div> </div> </div> </section> <!-- Testimonials Section --> <section class="testimonials" id="testimonials"> <div class="section-title"> <h2>What <span>People Say</span></h2> </div> <div class="testimonials-container"> <div class="testimonial-card" style="--order: 1;"> <div class="testimonial-text"> "The best Indian food I've had outside of India! The butter chicken is to die for, and the naan bread is perfectly fluffy. The ambiance really makes you feel like you're at a roadside dhaba in Punjab." </div> <div class="testimonial-author"> <div class="author-img"> <img src="https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Sarah Johnson"> <p style="text-align: center; margin-top: 10px; font-size: 0.8rem;">Image from <a href="https://unsplash.com/photos/a-man-in-a-white-shirt-standing-in-front-of-a-wall-7i5HMCGupVw" target="_blank">Unsplash</a></p> </div> <div class="author-info"> <h4>Sarah Johnson</h4> <p>Food Blogger</p> </div> </div> </div> <div class="testimonial-card" style="--order: 2;"> <div class="testimonial-text"> "As someone from Delhi, I'm very particular about my Indian food. Dhaba Restaurant exceeded all my expectations. The flavors are authentic, and the service makes you feel like family. Their dal makhani reminds me of home." </div> <div class="testimonial-author"> <div class="author-img"> <img src="https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Raj Patel"> <p style="text-align: center; margin-top: 10px; font-size: 0.8rem;">Image from <a href="https://unsplash.com/photos/a-man-in-a-suit-and-tie-standing-in-front-of-a-building-5fNmWej4tAA" target="_blank">Unsplash</a></p> </div> <div class="author-info"> <h4>Raj Patel</h4> <p>Regular Customer</p> </div> </div> </div> <div class="testimonial-card" style="--order: 3;"> <div class="testimonial-text"> "We hosted our company dinner at Dhaba Restaurant, and it was a fantastic experience. The staff went above and beyond to accommodate our large group. The tandoori platter and biryanis were the highlights of the evening!" </div> <div class="testimonial-author"> <div class="author-img"> <img src="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=761&q=80" alt="Michael Chen"> <p style="text-align: center; margin-top: 10px; font-size: 0.8rem;">Image from <a href="https://unsplash.com/photos/a-woman-in-a-white-shirt-standing-in-front-of-a-wall-8x9HZQjCJ1U" target="_blank">Unsplash</a></p> </div> <div class="author-info"> <h4>Michael Chen</h4> <p>Corporate Client</p> </div> </div> </div> </div> </section> <!-- Gallery Section --> <section class="gallery" id="gallery"> <div class="section-title"> <h2>Food <span>Gallery</span></h2> </div> <div class="gallery-container"> <div class="gallery-item" style="--order: 1;"> <img src="https://images.unsplash.com/photo-1559847844-5315695dadae?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1398&q=80" alt="Indian Thali"> <p style="text-align: center; margin-top: 10px; font-size: 0.8rem;">Image from <a href="https://unsplash.com/photos/a-table-topped-with-plates-of-food-and-bowls-of-food-IXUM4sE5P7Q" target="_blank">Unsplash</a></p> <div class="gallery-overlay"> <i class="fas fa-search-plus"></i> </div> </div> <div class="gallery-item" style="--order: 2;"> <img src="https://images.unsplash.com/photo-1546069901-ba9599a7e63c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=880&q=80" alt="Healthy Food"> <p style="text-align: center; margin-top: 10px; font-size: 0.8rem;">Image from <a href="https://unsplash.com/photos/a-table-topped-with-plates-of-food-and-bowls-of-food-8Nc_oQsc2qQ" target="_blank">Unsplash</a></p> <div class="gallery-overlay"> <i class="fas fa-search-plus"></i> </div> </div> <div class="gallery-item" style="--order: 3;"> <img src="https://images.unsplash.com/photo-1565557623262-b51c2513a641?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1371&q=80" alt="Indian Street Food"> <p style="text-align: center; margin-top: 10px; font-size: 0.8rem;">Image from <a href="https://unsplash.com/photos/a-table-topped-with-plates-of-food-and-bowls-of-food-71u2fOofI-U" target="_blank">Unsplash</a></p> <div class="gallery-overlay"> <i class="fas fa-search-plus"></i> </div> </div> <div class="gallery-item" style="--order: 4;"> <img src="https://images.unsplash.com/photo-1544025162-d76694265947?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1469&q=80" alt="Tandoori Chicken"> <p style="text-align: center; margin-top: 10px; font-size: 0.8rem;">Image from <a href="https://unsplash.com/photos/a-table-topped-with-plates-of-food-and-bowls-of-food-azsk_6IMT3c" target="_blank">Unsplash</a></p> <div class="gallery-overlay"> <i class="fas fa-search-plus"></i> </div> </div> <div class="gallery-item" style="--order: 5;"> <img src="https://images.unsplash.com/photo-1563245372-f21724e3856d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Indian Sweets"> <p style="text-align: center; margin-top: 10px; font-size: 0.8rem;">Image from <a href="https://unsplash.com/photos/a-table-topped-with-plates-of-food-and-bowls-of-food-5sF6NrB1MEg" target="_blank">Unsplash</a></p> <div class="gallery-overlay"> <i class="fas fa-search-plus"></i> </div> </div> <div class="gallery-item" style="--order: 6;"> <img src="https://images.unsplash.com/photo-1601050690597-df0568f70950?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Indian Breakfast"> <p style="text-align: center; margin-top: 10px; font-size: 0.8rem;">Image from <a href="https://unsplash.com/photos/a-table-topped-with-plates-of-food-and-bowls-of-food-5IHz5WhosQE" target="_blank">Unsplash</a></p> <div class="gallery-overlay"> <i class="fas fa-search-plus"></i> </div> </div> </div> </section> <!-- Reservation Section --> <section class="reservation" id="reservation"> <h2>Make a <span>Reservation</span></h2> <p>Book your table in advance to ensure you don't miss out on our authentic dhaba experience. We look forward to serving you!</p> <form class="reservation-form"> <div class="form-row"> <div class="form-group"> <label for="name">Full Name</label> <input type="text" id="name" required> </div> <div class="form-group"> <label for="email">Email</label> <input type="email" id="email" required> </div> </div> <div class="form-row"> <div class="form-group"> <label for="phone">Phone</label> <input type="tel" id="phone" required> </div> <div class="form-group"> <label for="guests">Number of Guests</label> <select id="guests" required> <option value="1">1 Person</option> <option value="2">2 People</option> <option value="3">3 People</option> <option value="4">4 People</option> <option value="5">5 People</option> <option value="6">6 People</option> <option value="7">7+ People</option> </select> </div> </div> <div class="form-row"> <div class="form-group"> <label for="date">Date</label> <input type="date" id="date" required> </div> <div class="form-group"> <label for="time">Time</label> <input type="time" id="time" required> </div> </div> <div class="form-group"> <label for="special-requests">Special Requests</label> <textarea id="special-requests"></textarea> </div> <button type="submit" class="btn">Book Now</button> </form> </section> <!-- Footer Section --> <footer> <div class="footer-container"> <div class="footer-col"> <h3>Dhaba Restaurant</h3> <p>Bringing authentic Indian dhaba flavors to your table since 1995. Our mission is to provide a genuine taste of India's roadside culinary treasures.</p> <div class="social-links"> <a href="#"><i class="fab fa-facebook-f"></i></a> <a href="#"><i class="fab fa-twitter"></i></a> <a href="#"><i class="fab fa-instagram"></i></a> <a href="#"><i class="fab fa-yelp"></i></a> </div> </div> <div class="footer-col"> <h3>Quick Links</h3> <ul class="footer-links"> <li><a href="#home">Home</a></li> <li><a href="#about">About Us</a></li> <li><a href="#special-dishes">Special Dishes</a></li> <li><a href="#menu">Menu</a></li> <li><a href="#testimonials">Testimonials</a></li> <li><a href="#reservation">Reservation</a></li> </ul> </div> <div class="footer-col"> <h3>Opening Hours</h3> <ul class="footer-links"> <li>Monday - Thursday: 11am - 10pm</li> <li>Friday - Saturday: 11am - 11pm</li> <li>Sunday: 12pm - 9pm</li> <li>Holidays: Special hours apply</li> </ul> </div> <div class="footer-col"> <h3>Contact Us</h3> <ul class="contact-info"> <li> <i class="fas fa-map-marker-alt"></i> <span>123 Spice Street, Food District, Cityville 12345</span> </li> <li> <i class="fas fa-phone"></i> <span>(123) 456-7890</span> </li> <li> <i class="fas fa-envelope"></i> <span>info@dhabarestaurant.com</span> </li> </ul> </div> </div> <div class="copyright"> <p>© 2023 Dhaba Restaurant. All Rights Reserved. | Designed with ❤️ for food lovers</p> </div> </footer> <script src="script.js"></script> </body> </html>
CSS
:root { --primary: #e67e22; --secondary: #d35400; --dark: #333; --light: #f9f9f9; --accent: #f39c12; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Poppins', sans-serif; color: var(--dark); overflow-x: hidden; } h1, h2, h3, h4 { font-family: 'Playfair Display', serif; font-weight: 600; } /* Header Section */ header { background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://images.unsplash.com/photo-1601050690597-df0568f70950?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80'); background-size: cover; background-position: center; height: 100vh; color: white; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 0 20px; position: relative; animation: fadeIn 1.5s ease-in-out; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } nav { position: fixed; top: 0; left: 0; width: 100%; padding: 20px 5%; display: flex; justify-content: space-between; align-items: center; z-index: 1000; background: rgba(0, 0, 0, 0.8); transition: all 0.5s ease; } nav.scrolled { padding: 15px 5%; background: rgba(51, 51, 51, 0.95); box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); } .logo { font-size: 28px; font-weight: 700; color: var(--primary); font-family: 'Playfair Display', serif; } .logo span { color: white; } .nav-links { display: flex; list-style: none; } .nav-links li { margin-left: 30px; } .nav-links a { color: white; text-decoration: none; font-weight: 500; transition: color 0.3s; position: relative; } .nav-links a:hover { color: var(--primary); } .nav-links a::after { content: ''; position: absolute; width: 0; height: 2px; background: var(--primary); bottom: -5px; left: 0; transition: width 0.3s; } .nav-links a:hover::after { width: 100%; } .menu-toggle { display: none; cursor: pointer; font-size: 24px; } .hero-content { max-width: 800px; transform: translateY(50px); opacity: 0; animation: slideUp 1s ease forwards 0.5s; } @keyframes slideUp { to { transform: translateY(0); opacity: 1; } } .hero-content h1 { font-size: 4rem; margin-bottom: 20px; text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); } .hero-content p { font-size: 1.2rem; margin-bottom: 30px; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); } .btn { display: inline-block; background: var(--primary); color: white; padding: 12px 30px; border-radius: 30px; text-decoration: none; font-weight: 600; transition: all 0.3s; border: none; cursor: pointer; font-size: 1rem; text-transform: uppercase; letter-spacing: 1px; } .btn:hover { background: var(--secondary); transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); } .btn:active { transform: translateY(-1px); } .scroll-down { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); color: white; font-size: 24px; animation: bounce 2s infinite; } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0) translateX(-50%); } 40% { transform: translateY(-20px) translateX(-50%); } 60% { transform: translateY(-10px) translateX(-50%); } } /* About Section */ .about { padding: 100px 5%; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; background-color: var(--light); } .about-img { flex: 1; min-width: 300px; padding: 20px; position: relative; animation: fadeInLeft 1s ease forwards; } @keyframes fadeInLeft { from { opacity: 0; transform: translateX(-50px); } to { opacity: 1; transform: translateX(0); } } .about-img img { width: 100%; border-radius: 10px; box-shadow: 0 20px 30px rgba(0, 0, 0, 0.1); } .about-img::before { content: ''; position: absolute; width: 80%; height: 80%; border: 5px solid var(--primary); border-radius: 10px; top: -20px; left: -20px; z-index: -1; } .about-content { flex: 1; min-width: 300px; padding: 20px; animation: fadeInRight 1s ease forwards; } @keyframes fadeInRight { from { opacity: 0; transform: translateX(50px); } to { opacity: 1; transform: translateX(0); } } .about-content h2 { font-size: 2.5rem; margin-bottom: 20px; color: var(--dark); } .about-content h2 span { color: var(--primary); } .about-content p { margin-bottom: 20px; line-height: 1.8; color: #555; } /* Special Dishes Section */ .special-dishes { padding: 100px 5%; background: white; text-align: center; } .section-title { margin-bottom: 60px; position: relative; display: inline-block; } .section-title h2 { font-size: 2.5rem; color: var(--dark); } .section-title::after { content: ''; position: absolute; width: 50%; height: 3px; background: var(--primary); bottom: -10px; left: 25%; } .dishes-container { display: flex; flex-wrap: wrap; justify-content: center; gap: 30px; } .dish-card { background: white; border-radius: 10px; overflow: hidden; width: 300px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); transition: all 0.3s; opacity: 0; transform: translateY(50px); animation: fadeInUp 1s ease forwards; animation-delay: calc(var(--order) * 0.2s); } @keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } } .dish-card:hover { transform: translateY(-10px); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2); } .dish-img { height: 200px; overflow: hidden; } .dish-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; } .dish-card:hover .dish-img img { transform: scale(1.1); } .dish-info { padding: 20px; } .dish-info h3 { font-size: 1.5rem; margin-bottom: 10px; color: var(--dark); } .dish-info p { color: #777; margin-bottom: 15px; line-height: 1.6; } .price { font-size: 1.2rem; font-weight: 700; color: var(--primary); } /* Menu Section */ .menu { padding: 100px 5%; background: var(--light); } .menu-container { display: flex; flex-wrap: wrap; justify-content: center; gap: 30px; } .menu-category { flex: 1; min-width: 300px; background: white; border-radius: 10px; padding: 30px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); opacity: 0; transform: translateY(50px); animation: fadeInUp 1s ease forwards; animation-delay: calc(var(--order) * 0.2s); } .menu-category h3 { font-size: 1.8rem; margin-bottom: 20px; color: var(--primary); text-align: center; position: relative; padding-bottom: 10px; } .menu-category h3::after { content: ''; position: absolute; width: 50px; height: 3px; background: var(--primary); bottom: 0; left: 50%; transform: translateX(-50%); } .menu-item { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px dashed #ddd; } .menu-item:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; } .item-header { display: flex; justify-content: space-between; margin-bottom: 5px; } .item-header h4 { font-size: 1.2rem; color: var(--dark); } .item-header .price { font-size: 1.1rem; } .item-desc { color: #777; font-size: 0.9rem; line-height: 1.6; } /* Testimonials Section */ .testimonials { padding: 100px 5%; background: white; text-align: center; } .testimonials-container { max-width: 1200px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 30px; } .testimonial-card { background: var(--light); border-radius: 10px; padding: 30px; width: 350px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); position: relative; opacity: 0; transform: translateY(50px); animation: fadeInUp 1s ease forwards; animation-delay: calc(var(--order) * 0.2s); } .testimonial-card::before { content: '"'; position: absolute; top: 20px; left: 20px; font-size: 60px; color: rgba(230, 126, 34, 0.1); font-family: 'Playfair Display', serif; } .testimonial-text { font-style: italic; color: #555; line-height: 1.8; margin-bottom: 20px; position: relative; z-index: 1; } .testimonial-author { display: flex; align-items: center; justify-content: center; } .author-img { width: 60px; height: 60px; border-radius: 50%; overflow: hidden; margin-right: 15px; border: 3px solid var(--primary); } .author-img img { width: 100%; height: 100%; object-fit: cover; } .author-info h4 { color: var(--dark); margin-bottom: 5px; } .author-info p { color: #777; font-size: 0.9rem; } /* Gallery Section */ .gallery { padding: 100px 5%; background: var(--light); text-align: center; } .gallery-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; margin-top: 50px; } .gallery-item { position: relative; overflow: hidden; border-radius: 10px; height: 250px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); opacity: 0; transform: scale(0.8); animation: zoomIn 1s ease forwards; animation-delay: calc(var(--order) * 0.1s); } @keyframes zoomIn { to { opacity: 1; transform: scale(1); } } .gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; } .gallery-item:hover img { transform: scale(1.1); } .gallery-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(230, 126, 34, 0.8); display: flex; justify-content: center; align-items: center; opacity: 0; transition: opacity 0.3s; } .gallery-item:hover .gallery-overlay { opacity: 1; } .gallery-overlay i { color: white; font-size: 30px; } /* Reservation Section */ .reservation { padding: 100px 5%; background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80'); background-size: cover; background-position: center; background-attachment: fixed; color: white; text-align: center; } .reservation h2 { margin-bottom: 30px; } .reservation p { max-width: 700px; margin: 0 auto 40px; line-height: 1.8; } .reservation-form { max-width: 600px; margin: 0 auto; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); padding: 40px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.2); opacity: 0; transform: translateY(50px); animation: fadeInUp 1s ease forwards 0.5s; } .form-group { margin-bottom: 20px; text-align: left; } .form-group label { display: block; margin-bottom: 8px; font-weight: 500; } .form-group input, .form-group select, .form-group textarea { width: 100%; padding: 12px 15px; border: none; border-radius: 5px; background: rgba(255, 255, 255, 0.9); font-family: 'Poppins', sans-serif; } .form-group textarea { height: 100px; resize: none; } .form-row { display: flex; gap: 20px; } .form-row .form-group { flex: 1; } /* Footer Section */ footer { background: var(--dark); color: white; padding: 80px 5% 30px; } .footer-container { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 40px; max-width: 1200px; margin: 0 auto; } .footer-col { flex: 1; min-width: 250px; } .footer-col h3 { font-size: 1.5rem; margin-bottom: 20px; color: var(--primary); position: relative; padding-bottom: 10px; } .footer-col h3::after { content: ''; position: absolute; width: 50px; height: 3px; background: var(--primary); bottom: 0; left: 0; } .footer-col p { line-height: 1.8; color: #bbb; margin-bottom: 20px; } .social-links { display: flex; gap: 15px; } .social-links a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: rgba(255, 255, 255, 0.1); border-radius: 50%; color: white; transition: all 0.3s; } .social-links a:hover { background: var(--primary); transform: translateY(-3px); } .footer-links { list-style: none; } .footer-links li { margin-bottom: 10px; } .footer-links a { color: #bbb; text-decoration: none; transition: color 0.3s; position: relative; padding-left: 15px; } .footer-links a:hover { color: var(--primary); } .footer-links a::before { content: '→'; position: absolute; left: 0; color: var(--primary); opacity: 0; transition: all 0.3s; } .footer-links a:hover::before { opacity: 1; left: -5px; } .contact-info { list-style: none; } .contact-info li { margin-bottom: 15px; display: flex; align-items: flex-start; color: #bbb; } .contact-info i { margin-right: 10px; color: var(--primary); font-size: 18px; } .copyright { text-align: center; padding-top: 30px; margin-top: 50px; border-top: 1px solid rgba(255, 255, 255, 0.1); color: #bbb; font-size: 0.9rem; } /* Responsive Styles */ @media (max-width: 992px) { .hero-content h1 { font-size: 3rem; } } @media (max-width: 768px) { .menu-toggle { display: block; } .nav-links { position: fixed; top: 80px; left: -100%; width: 100%; height: calc(100vh - 80px); background: rgba(51, 51, 51, 0.95); flex-direction: column; align-items: center; padding: 40px 0; transition: all 0.5s ease; } .nav-links.active { left: 0; } .nav-links li { margin: 15px 0; } .hero-content h1 { font-size: 2.5rem; } .about-img::before { display: none; } .form-row { flex-direction: column; gap: 0; } } @media (max-width: 576px) { .hero-content h1 { font-size: 2rem; } .hero-content p { font-size: 1rem; } .btn { padding: 10px 20px; } .section-title h2 { font-size: 2rem; } }
JavaScript
// Navbar scroll effect window.addEventListener('scroll', function() { const navbar = document.getElementById('navbar'); if (window.scrollY > 50) { navbar.classList.add('scrolled'); } else { navbar.classList.remove('scrolled'); } }); // Mobile menu toggle const menuToggle = document.querySelector('.menu-toggle'); const navLinks = document.querySelector('.nav-links'); menuToggle.addEventListener('click', function() { navLinks.classList.toggle('active'); }); // Close mobile menu when clicking a link document.querySelectorAll('.nav-links a').forEach(link => { link.addEventListener('click', () => { navLinks.classList.remove('active'); }); }); // Smooth scrolling for anchor links document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function(e) { e.preventDefault(); const targetId = this.getAttribute('href'); const targetElement = document.querySelector(targetId); if (targetElement) { window.scrollTo({ top: targetElement.offsetTop - 80, behavior: 'smooth' }); } }); }); // Animation on scroll function animateOnScroll() { const elements = document.querySelectorAll('.dish-card, .menu-category, .testimonial-card, .gallery-item'); elements.forEach(element => { const elementPosition = element.getBoundingClientRect().top; const screenPosition = window.innerHeight / 1.3; if (elementPosition < screenPosition) { element.style.animationPlayState = 'running'; } }); } window.addEventListener('scroll', animateOnScroll); window.addEventListener('load', animateOnScroll);
Output Preview
Desktop
Mobile
Fullscreen