Family Dhaba 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>Family Dhaba - Authentic Indian Cuisine</title> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> <!-- Font Awesome --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <!-- Google Fonts --> <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"> </head> <body> <!-- Hero Section --> <section class="hero"> <div class="container"> <div class="row align-items-center"> <div class="col-lg-8 mx-auto text-center"> <h1 class="mb-4">Welcome to <span class="typed-text"></span><span class="cursor"> </span></h1> <p class="lead mb-5">Experience the authentic flavors of India in a warm and welcoming atmosphere that feels just like home.</p> <a href="#menu" class="btn btn-primary btn-lg px-4 me-2">Our Menu</a> <a href="#contact" class="btn btn-outline-light btn-lg px-4">Reservations</a> </div> </div> </div> </section> <!-- About Section --> <section id="about" class="about-section"> <div class="container"> <div class="row align-items-center"> <div class="col-lg-6 mb-5 mb-lg-0"> <img src="https://images.unsplash.com/photo-1555396273-367ea4eb4db5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Family Dhaba" class="img-fluid rounded shadow"> </div> <div class="col-lg-6"> <h2 class="tagline mb-4">Traditional Recipes, Modern Comfort</h2> <p class="lead">At Family Dhaba, we bring generations of culinary expertise to your table.</p> <p>Founded in 1995 by the Sharma family, our dhaba has been serving authentic Indian cuisine with love and care for over two decades. What started as a small roadside eatery has now blossomed into a beloved culinary destination, while still maintaining the warmth and authenticity of a family kitchen.</p> <p>Every dish at Family Dhaba is prepared with the freshest ingredients, traditional spices, and the same care that goes into a home-cooked meal. Our chefs bring decades of experience and family recipes passed down through generations.</p> <a href="#" class="btn btn-outline-dark mt-3">Our Story</a> </div> </div> </div> </section> <!-- Menu Section --> <section id="menu" class="menu-section"> <div class="container position-relative"> <div class="row mb-5"> <div class="col-12 text-center"> <h2 class="text-white">Our Specialties</h2> <p class="text-white-50">Explore our delicious menu featuring authentic Indian flavors</p> </div> </div> <div class="row g-4"> <!-- Card 1 --> <div class="col-md-6 col-lg-4"> <div class="menu-card"> <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"> <div class="menu-card-body"> <h3 class="menu-card-title">Butter Chicken</h3> <p class="menu-card-text">Tender chicken cooked in a rich, creamy tomato sauce with aromatic spices.</p> <div class="d-flex justify-content-between align-items-center"> <span class="price">$14.99</span> <button class="btn btn-sm btn-outline-primary">Order Now</button> </div> </div> </div> </div> <!-- Card 2 --> <div class="col-md-6 col-lg-4"> <div class="menu-card"> <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="Biryani"> <div class="menu-card-body"> <h3 class="menu-card-title">Hyderabadi Biryani</h3> <p class="menu-card-text">Fragrant basmati rice layered with marinated meat and aromatic spices.</p> <div class="d-flex justify-content-between align-items-center"> <span class="price">$12.99</span> <button class="btn btn-sm btn-outline-primary">Order Now</button> </div> </div> </div> </div> <!-- Card 3 --> <div class="col-md-6 col-lg-4"> <div class="menu-card"> <img src="https://images.unsplash.com/photo-1603893662172-99ed0cea2a08?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Paneer Tikka"> <div class="menu-card-body"> <h3 class="menu-card-title">Paneer Tikka</h3> <p class="menu-card-text">Cubes of cottage cheese marinated in spices and grilled to perfection.</p> <div class="d-flex justify-content-between align-items-center"> <span class="price">$10.99</span> <button class="btn btn-sm btn-outline-primary">Order Now</button> </div> </div> </div> </div> <!-- Card 4 --> <div class="col-md-6 col-lg-4"> <div class="menu-card"> <img src="https://images.unsplash.com/photo-1606491956689-2ea866880c84?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1521&q=80" alt="Dal Makhani"> <div class="menu-card-body"> <h3 class="menu-card-title">Dal Makhani</h3> <p class="menu-card-text">Creamy black lentils slow-cooked with butter and aromatic spices.</p> <div class="d-flex justify-content-between align-items-center"> <span class="price">$9.99</span> <button class="btn btn-sm btn-outline-primary">Order Now</button> </div> </div> </div> </div> <!-- Card 5 --> <div class="col-md-6 col-lg-4"> <div class="menu-card"> <img src="https://images.unsplash.com/photo-1632818924360-68d4994cfdb2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1471&q=80" alt="Naan"> <div class="menu-card-body"> <h3 class="menu-card-title">Garlic Naan</h3> <p class="menu-card-text">Traditional tandoor-baked flatbread with fresh garlic and herbs.</p> <div class="d-flex justify-content-between align-items-center"> <span class="price">$3.99</span> <button class="btn btn-sm btn-outline-primary">Order Now</button> </div> </div> </div> </div> <!-- Card 6 --> <div class="col-md-6 col-lg-4"> <div class="menu-card"> <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="Gulab Jamun"> <div class="menu-card-body"> <h3 class="menu-card-title">Gulab Jamun</h3> <p class="menu-card-text">Soft, melt-in-your-mouth milk balls soaked in rose-scented syrup.</p> <div class="d-flex justify-content-between align-items-center"> <span class="price">$5.99</span> <button class="btn btn-sm btn-outline-primary">Order Now</button> </div> </div> </div> </div> </div> <div class="text-center mt-5"> <a href="#" class="btn btn-primary">View Full Menu</a> </div> </div> </section> <!-- Mission Section --> <section class="mission-section"> <div class="container"> <div class="row justify-content-center"> <div class="col-lg-8 text-center"> <h2 class="mission-heading">Our Mission</h2> <p class="lead mb-4">To preserve and share the authentic flavors of Indian home cooking while creating a welcoming space where every guest feels like family.</p> <p>At Family Dhaba, we believe that food is more than just nourishment - it's a way to connect, celebrate, and create memories. Our mission is to bring people together through the universal language of delicious, home-style Indian cuisine. We're committed to using traditional cooking methods, high-quality ingredients, and recipes passed down through generations to deliver an authentic dining experience.</p> </div> </div> </div> </section> <!-- Vision Section --> <section class="vision-section"> <div class="container"> <div class="row align-items-center"> <div class="col-lg-6 order-lg-2 mb-5 mb-lg-0"> <h2 class="vision-heading">Our Vision</h2> <p class="lead">To become the most beloved Indian eatery in the region, known for our authentic flavors and warm hospitality.</p> <p>We envision Family Dhaba as more than just a restaurant - we want to be a cultural hub where people from all backgrounds can experience the rich culinary traditions of India. Our goal is to expand our reach while maintaining the intimate, family-oriented atmosphere that has been our hallmark since the beginning. We're constantly innovating while staying true to our roots, ensuring that every dish tells a story of tradition, passion, and love for food.</p> </div> <div class="col-lg-6 order-lg-1"> <img src="https://images.unsplash.com/photo-1547592180-85f173990554?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Family Dhaba Vision" class="img-fluid rounded shadow vision-img"> </div> </div> </div> </section> <!-- Counter Section --> <section class="counter-section"> <div class="container"> <div class="row text-center"> <div class="col-6 col-md-3 mb-5 mb-md-0"> <div class="counter-item"> <div class="counter-number" data-count="25">0</div> <div class="counter-text">Years Experience</div> </div> </div> <div class="col-6 col-md-3 mb-5 mb-md-0"> <div class="counter-item"> <div class="counter-number" data-count="150">0</div> <div class="counter-text">Menu Items</div> </div> </div> <div class="col-6 col-md-3"> <div class="counter-item"> <div class="counter-number" data-count="10000">0</div> <div class="counter-text">Happy Customers</div> </div> </div> <div class="col-6 col-md-3"> <div class="counter-item"> <div class="counter-number" data-count="50">0</div> <div class="counter-text">Awards Won</div> </div> </div> </div> </div> </section> <!-- Contact Section --> <section id="contact" class="contact-section"> <div class="container"> <div class="row justify-content-center"> <div class="col-lg-8 text-center mb-5"> <h2 class="text-white">Reserve Your Table</h2> <p class="text-white-50">Book in advance to ensure we can give you the best Family Dhaba experience</p> </div> </div> <div class="row justify-content-center"> <div class="col-lg-8"> <form class="contact-form"> <div class="row"> <div class="col-md-6"> <input type="text" class="form-control" placeholder="Your Name" required> </div> <div class="col-md-6"> <input type="email" class="form-control" placeholder="Your Email" required> </div> </div> <div class="row"> <div class="col-md-6"> <input type="tel" class="form-control" placeholder="Phone Number" required> </div> <div class="col-md-6"> <input type="number" class="form-control" placeholder="Number of Guests" min="1" required> </div> </div> <div class="row"> <div class="col-md-6"> <input type="date" class="form-control" required> </div> <div class="col-md-6"> <input type="time" class="form-control" required> </div> </div> <textarea class="form-control" placeholder="Special Requests (Optional)"></textarea> <div class="text-center"> <button type="submit" class="btn btn-primary">Book Table</button> </div> </form> </div> </div> </div> </section> <!-- Footer --> <footer class="footer"> <div class="container"> <div class="row footer-content"> <div class="col-lg-4 mb-5 mb-lg-0"> <div class="footer-logo">Family Dhaba</div> <p>Bringing authentic Indian flavors to your table since 1995. Our family welcomes you to experience the warmth of traditional Indian hospitality.</p> <div class="social-icons mt-4"> <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="col-lg-2 col-md-4 mb-5 mb-md-0"> <div class="footer-links"> <h4>Quick Links</h4> <ul> <li><a href="#">Home</a></li> <li><a href="#about">About Us</a></li> <li><a href="#menu">Menu</a></li> <li><a href="#contact">Reservations</a></li> <li><a href="#">Gallery</a></li> </ul> </div> </div> <div class="col-lg-2 col-md-4 mb-5 mb-md-0"> <div class="footer-links"> <h4>Information</h4> <ul> <li><a href="#">Our Story</a></li> <li><a href="#">Testimonials</a></li> <li><a href="#">Events</a></li> <li><a href="#">Careers</a></li> <li><a href="#">Privacy Policy</a></li> </ul> </div> </div> <div class="col-lg-4 col-md-4"> <div class="footer-links"> <h4>Contact Us</h4> <ul> <li><i class="fas fa-map-marker-alt me-2"></i> 123 Spice Street, Foodville</li> <li><i class="fas fa-phone me-2"></i> (123) 456-7890</li> <li><i class="fas fa-envelope me-2"></i> info@familydhaba.com</li> <li><i class="fas fa-clock me-2"></i> Mon-Sun: 11AM - 10PM</li> </ul> </div> </div> </div> <div class="copyright"> <p>© 2023 Family Dhaba. All Rights Reserved.</p> </div> </div> </footer> <!-- Bootstrap JS --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> <!-- Typing Effect Script --> </body> </html>
CSS
:root { --primary-color: #e67e22; --secondary-color: #d35400; --dark-color: #333; --light-color: #f9f9f9; } body { font-family: 'Poppins', sans-serif; overflow-x: hidden; } h1, h2, h3, h4, h5, h6 { font-family: 'Playfair Display', serif; } /* Hero Section */ .hero { 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; min-height: 100vh; display: flex; align-items: center; color: white; position: relative; } .typed-text { font-size: 3.5rem; font-weight: 700; color: var(--primary-color); } .cursor { display: inline-block; width: 3px; background-color: white; margin-left: 5px; animation: blink 1s infinite; } @keyframes blink { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } } /* About Section */ .about-section { padding: 100px 0; background-color: var(--light-color); } .tagline { font-size: 2.5rem; font-weight: 700; color: var(--primary-color); position: relative; display: inline-block; } .tagline::after { content: ''; position: absolute; width: 100%; height: 4px; background-color: var(--secondary-color); bottom: -10px; left: 0; } /* Menu Cards */ .menu-section { padding: 100px 0; background: url('https://images.unsplash.com/photo-1555396273-367ea4eb4db5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80') no-repeat center center/cover; position: relative; } .menu-section::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); } .menu-card { background-color: white; border-radius: 10px; overflow: hidden; margin-bottom: 30px; transition: transform 0.5s ease; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); opacity: 0; transform: translateY(50px); } .menu-card.animate { opacity: 1; transform: translateY(0); } .menu-card:hover { transform: translateY(-10px); } .menu-card img { width: 100%; height: 200px; object-fit: cover; } .menu-card-body { padding: 20px; } .menu-card-title { font-size: 1.5rem; font-weight: 600; color: var(--dark-color); margin-bottom: 10px; } .menu-card-text { color: #666; margin-bottom: 15px; } .price { font-size: 1.2rem; font-weight: 700; color: var(--primary-color); } /* Mission Section */ .mission-section { padding: 100px 0; background-color: white; } .mission-heading { font-size: 2.5rem; font-weight: 700; color: var(--dark-color); position: relative; margin-bottom: 40px; } .mission-heading::after { content: ''; position: absolute; width: 100px; height: 4px; background-color: var(--primary-color); bottom: -15px; left: 0; } /* Vision Section */ .vision-section { padding: 100px 0; background-color: var(--light-color); } .vision-heading { font-size: 2.5rem; font-weight: 700; color: var(--dark-color); position: relative; margin-bottom: 40px; opacity: 0; transform: translateX(-50px); transition: all 0.5s ease; } .vision-heading.animate { opacity: 1; transform: translateX(0); } .vision-img { border-radius: 10px; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); opacity: 0; transform: translateX(50px); transition: all 0.5s ease 0.2s; } .vision-img.animate { opacity: 1; transform: translateX(0); } /* Counter Section */ .counter-section { padding: 80px 0; background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), 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; color: white; } .counter-item { text-align: center; padding: 30px; transition: all 0.3s ease; } .counter-item:hover { transform: translateY(-10px); } .counter-number { font-size: 3rem; font-weight: 700; color: var(--primary-color); margin-bottom: 10px; } .counter-text { font-size: 1.2rem; font-weight: 500; } /* Contact Form */ .contact-section { padding: 100px 0; 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; color: white; } .contact-form { background-color: rgba(255, 255, 255, 0.9); padding: 40px; border-radius: 10px; color: var(--dark-color); } .form-control { height: 50px; margin-bottom: 20px; border-radius: 5px; border: 1px solid #ddd; } textarea.form-control { height: 150px; } .btn-primary { background-color: var(--primary-color); border-color: var(--primary-color); padding: 12px 30px; font-weight: 600; transition: all 0.3s ease; } .btn-primary:hover { background-color: var(--secondary-color); border-color: var(--secondary-color); transform: translateY(-3px); } /* Footer */ .footer { background: url('https://images.unsplash.com/photo-1606787366850-de6330128bfc?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80') no-repeat center center/cover; padding: 80px 0 30px; color: white; position: relative; } .footer::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); } .footer-content { position: relative; z-index: 1; } .footer-logo { font-size: 2rem; font-weight: 700; color: white; margin-bottom: 20px; } .footer-links h4 { font-size: 1.3rem; font-weight: 600; margin-bottom: 20px; color: var(--primary-color); } .footer-links ul { list-style: none; padding: 0; } .footer-links li { margin-bottom: 10px; } .footer-links a { color: #ddd; text-decoration: none; transition: all 0.3s ease; } .footer-links a:hover { color: var(--primary-color); padding-left: 5px; } .social-icons a { display: inline-block; width: 40px; height: 40px; background-color: rgba(255, 255, 255, 0.1); color: white; border-radius: 50%; text-align: center; line-height: 40px; margin-right: 10px; transition: all 0.3s ease; } .social-icons a:hover { background-color: var(--primary-color); transform: translateY(-5px); } .copyright { border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 20px; margin-top: 40px; text-align: center; color: #aaa; } /* Responsive Adjustments */ @media (max-width: 992px) { .typed-text { font-size: 2.5rem; } .tagline { font-size: 2rem; } } @media (max-width: 768px) { .typed-text { font-size: 2rem; } .tagline { font-size: 1.8rem; } .mission-heading, .vision-heading { font-size: 2rem; } } @media (max-width: 576px) { .typed-text { font-size: 1.8rem; } .tagline { font-size: 1.5rem; } .menu-card-title { font-size: 1.3rem; } }
JavaScript
// Typing Effect const typedTextSpan = document.querySelector(".typed-text"); const cursorSpan = document.querySelector(".cursor"); const textArray = ["Family Dhaba", "Authentic Flavors", "Home-style Cooking", "Love in Every Bite"]; const typingDelay = 200; const erasingDelay = 100; const newTextDelay = 2000; // Delay between current and next text let textArrayIndex = 0; let charIndex = 0; function type() { if (charIndex < textArray[textArrayIndex].length) { if(!cursorSpan.classList.contains("typing")) cursorSpan.classList.add("typing"); typedTextSpan.textContent += textArray[textArrayIndex].charAt(charIndex); charIndex++; setTimeout(type, typingDelay); } else { cursorSpan.classList.remove("typing"); setTimeout(erase, newTextDelay); } } function erase() { if (charIndex > 0) { if(!cursorSpan.classList.contains("typing")) cursorSpan.classList.add("typing"); typedTextSpan.textContent = textArray[textArrayIndex].substring(0, charIndex-1); charIndex--; setTimeout(erase, erasingDelay); } else { cursorSpan.classList.remove("typing"); textArrayIndex++; if(textArrayIndex>=textArray.length) textArrayIndex=0; setTimeout(type, typingDelay + 1100); } } document.addEventListener("DOMContentLoaded", function() { // On DOM Load initiate the effect if(textArray.length) setTimeout(type, newTextDelay + 250); }); // Animate cards on scroll const menuCards = document.querySelectorAll('.menu-card'); function animateCards() { menuCards.forEach((card, index) => { const cardPosition = card.getBoundingClientRect().top; const screenPosition = window.innerHeight / 1.3; if(cardPosition < screenPosition) { setTimeout(() => { card.classList.add('animate'); }, index * 200); } }); } window.addEventListener('scroll', animateCards); window.addEventListener('load', animateCards); // Animate vision section on scroll const visionHeading = document.querySelector('.vision-heading'); const visionImg = document.querySelector('.vision-img'); function animateVision() { const visionHeadingPosition = visionHeading.getBoundingClientRect().top; const screenPosition = window.innerHeight / 1.3; if(visionHeadingPosition < screenPosition) { visionHeading.classList.add('animate'); visionImg.classList.add('animate'); } } window.addEventListener('scroll', animateVision); window.addEventListener('load', animateVision); // Counter animation const counters = document.querySelectorAll('.counter-number'); const speed = 200; function animateCounters() { counters.forEach(counter => { const target = +counter.getAttribute('data-count'); const count = +counter.innerText; const increment = target / speed; if(count < target) { counter.innerText = Math.ceil(count + increment); setTimeout(animateCounters, 1); } else { counter.innerText = target; } }); } // Start counter animation when counter section is in view const counterSection = document.querySelector('.counter-section'); const counterSectionPosition = counterSection.getBoundingClientRect().top; const windowHeight = window.innerHeight; function checkCounterSection() { const counterSectionTop = counterSection.getBoundingClientRect().top; if(counterSectionTop < windowHeight - 100) { animateCounters(); window.removeEventListener('scroll', checkCounterSection); } } window.addEventListener('scroll', checkCounterSection); window.addEventListener('load', checkCounterSection);
Output Preview
Desktop
Mobile
Fullscreen