Jalebi Corner SweetDelights Template | QuickCoder

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Jalebi Corner - Sweet Delights</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  
</head>
<body>
    
    <header id="header">
        <div class="logo">
            <h1>Jalebi <span>Corner</span></h1>
        </div>
        <div class="menu-toggle">
            <i class="fas fa-bars"></i>
        </div>
        <nav>
            <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#menu">Menu</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>

<section class="hero" id="home">
        <div class="hero-content">
            <h1>Experience the Sweet Magic of Jalebi</h1>
            <p>Indulge in our authentic, crispy and syrupy jalebis made with love using traditional recipes passed down through generations.</p>
            <a href="#menu" class="btn">Explore Menu</a>
        </div>
    </section>

<section class="about" id="about">
        <div class="section-title">
            <h2>About Us</h2>
        </div>
        <div class="about-content">
            <div class="about-img">
                <img src="https://images.pexels.com/photos/30251968/pexels-photo-30251968.jpeg" alt="Jalebi Making">
            </div>
            <div class="about-text">
                <h3>Our Sweet Journey Since 1985</h3>
                <p>Jalebi Corner was founded with a passion for preserving the authentic taste of traditional Indian sweets. What started as a small sweet shop in the heart of the city has now become a beloved destination for jalebi lovers.</p>
                <p>We use only the finest ingredients and traditional methods to create our signature jalebis that are crispy on the outside, juicy on the inside, and bursting with flavor in every bite.</p>
                <p>Our secret family recipe has been passed down through three generations, ensuring that every jalebi we serve carries the legacy of authentic taste.</p>
                <a href="#menu" class="btn">Our Specialties</a>
            </div>
        </div>
    </section>

<section class="menu" id="menu">
        <div class="section-title">
            <h2>Our Menu</h2>
        </div>
        <div class="menu-container">
            <div class="menu-item">
                <div class="menu-item-img">
                    <img src="https://images.pexels.com/photos/5916371/pexels-photo-5916371.jpeg" alt="Classic Jalebi">
                </div>
                <div class="menu-item-content">
                    <h3>Classic Jalebi</h3>
                    <p>Our signature jalebi made with pure ghee and saffron-infused sugar syrup, crispy and juicy in every bite.</p>
                    <div class="price">
                        <span>$5.99</span>
                        <a href="#contact" class="btn">Order Now</a>
                    </div>
                </div>
            </div>
            <div class="menu-item">
                <div class="menu-item-img">
                    <img src="https://images.pexels.com/photos/7242659/pexels-photo-7242659.jpeg" alt="Jalebi with Rabri">
                </div>
                <div class="menu-item-content">
                    <h3>Jalebi with Rabri</h3>
                    <p>Hot crispy jalebis served with thick, creamy rabri - a match made in dessert heaven.</p>
                    <div class="price">
                        <span>$7.99</span>
                        <a href="#contact" class="btn">Order Now</a>
                    </div>
                </div>
            </div>
            <div class="menu-item">
                <div class="menu-item-img">
                    <img src="https://images.pexels.com/photos/7566499/pexels-photo-7566499.jpeg" alt="Kesar Jalebi">
                </div>
                <div class="menu-item-content">
                    <h3>Kesar Jalebi</h3>
                    <p>Premium jalebis infused with kesar (saffron) for a royal flavor experience.</p>
                    <div class="price">
                        <span>$6.99</span>
                        <a href="#contact" class="btn">Order Now</a>
                    </div>
                </div>
            </div>
            <div class="menu-item">
                <div class="menu-item-img">
                    <img src="https://images.pexels.com/photos/14530314/pexels-photo-14530314.jpeg" alt="Jalebi Combo">
                </div>
                <div class="menu-item-content">
                    <h3>Jalebi Combo</h3>
                    <p>A perfect combination of classic jalebi, rabri jalebi and kesar jalebi for the ultimate sweet experience.</p>
                    <div class="price">
                        <span>$12.99</span>
                        <a href="#contact" class="btn">Order Now</a>
                    </div>
                </div>
            </div>
            <div class="menu-item">
                <div class="menu-item-img">
                    <img src="https://images.pexels.com/photos/11171722/pexels-photo-11171722.jpeg" alt="Mini Jalebis">
                </div>
                <div class="menu-item-content">
                    <h3>Mini Jalebis</h3>
                    <p>Bite-sized jalebis perfect for parties and gatherings. Same great taste in a fun, pop-able size.</p>
                    <div class="price">
                        <span>$4.99</span>
                        <a href="#contact" class="btn">Order Now</a>
                    </div>
                </div>
            </div>
            <div class="menu-item">
                <div class="menu-item-img">
                    <img src="https://images.pexels.com/photos/8887065/pexels-photo-8887065.jpeg" alt="Jalebi Milkshake">
                </div>
                <div class="menu-item-content">
                    <h3>Jalebi Milkshake</h3>
                    <p>A unique blend of crushed jalebis in creamy milkshake - our innovative creation that's become a customer favorite.</p>
                    <div class="price">
                        <span>$6.49</span>
                        <a href="#contact" class="btn">Order Now</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="offers" id="offers">
        <div class="section-title">
            <h2>Special Offers</h2>
        </div>
        <p>We love to sweeten your experience with these special offers. Check back often as we update our promotions regularly!</p>
        <div class="offer-cards">
            <div class="offer-card">
                <i class="fas fa-gift"></i>
                <h3>Family Pack</h3>
                <p>Get 20% off on orders above $30. Perfect for family gatherings and celebrations.</p>
                <a href="#contact" class="btn">Grab Offer</a>
            </div>
            <div class="offer-card">
                <i class="fas fa-birthday-cake"></i>
                <h3>Birthday Special</h3>
                <p>Free jalebi milkshake with any order on your birthday. Show your ID to claim.</p>
                <a href="#contact" class="btn">Grab Offer</a>
            </div>
            <div class="offer-card">
                <i class="fas fa-calendar-alt"></i>
                <h3>Weekend Bonanza</h3>
                <p>Every weekend, buy one jalebi with rabri and get one classic jalebi free.</p>
                <a href="#contact" class="btn">Grab Offer</a>
            </div>
        </div>
    </section>

<section class="testimonials" id="testimonials">
        <div class="section-title">
            <h2>What Our Customers Say</h2>
        </div>
        <div class="testimonial-container">
            <div class="testimonial">
                <p>"The best jalebis I've ever had! Perfectly crispy outside and juicy inside. The sugar syrup has just the right consistency and sweetness. I've been coming here for years and they never disappoint."</p>
                <div class="testimonial-author">
                    <img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=128&q=80" alt="Sarah Johnson">
                    <div class="author-info">
                        <h4>Sarah Johnson</h4>
                        <span>Regular Customer</span>
                        <div class="rating">
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                        </div>
                    </div>
                </div>
            </div>
            <div class="testimonial">
                <p>"I ordered the jalebi with rabri for a family function and everyone loved it! The rabri was so creamy and perfectly complemented the crispy jalebis. The delivery was on time and the packaging was excellent."</p>
                <div class="testimonial-author">
                    <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=128&q=80" alt="Michael Chen">
                    <div class="author-info">
                        <h4>Michael Chen</h4>
                        <span>First-time Customer</span>
                        <div class="rating">
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star-half-alt"></i>
                        </div>
                    </div>
                </div>
            </div>
            <div class="testimonial">
                <p>"As someone who grew up eating jalebis in India, I can say these are the most authentic I've found outside my home country. The kesar jalebi is my favorite - it takes me back to my childhood!"</p>
                <div class="testimonial-author">
                    <img src="https://images.unsplash.com/photo-1489424731084-a5d8b219a5bb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=128&q=80" alt="Priya Patel">
                    <div class="author-info">
                        <h4>Priya Patel</h4>
                        <span>Food Blogger</span>
                        <div class="rating">
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                        </div>
                    </div>
                </div>
            </div>
            <div class="testimonial">
                <p>"The jalebi milkshake is an absolute game changer! I never thought of combining jalebi with a milkshake but it works perfectly. The staff is always friendly and the shop has a lovely traditional vibe."</p>
                <div class="testimonial-author">
                    <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=128&q=80" alt="Emily Rodriguez">
                    <div class="author-info">
                        <h4>Emily Rodriguez</h4>
                        <span>Local Foodie</span>
                        <div class="rating">
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="far fa-star"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="gallery">
        <div class="section-title">
            <h2>Sweet Moments</h2>
        </div>
        <div class="gallery-container">
            <div class="gallery-item">
                <img src="https://images.pexels.com/photos/7242659/pexels-photo-7242659.jpeg" alt="Jalebi Making">
                <div class="gallery-overlay">
                    <i class="fas fa-search-plus"></i>
                </div>
            </div>
            <div class="gallery-item">
                <img src="https://images.pexels.com/photos/5916371/pexels-photo-5916371.jpeg" alt="Jalebi Closeup">
                <div class="gallery-overlay">
                    <i class="fas fa-search-plus"></i>
                </div>
            </div>
            <div class="gallery-item">
                <img src="https://images.pexels.com/photos/7566499/pexels-photo-7566499.jpeg" alt="Jalebi Serving">
                <div class="gallery-overlay">
                    <i class="fas fa-search-plus"></i>
                </div>
            </div>
            <div class="gallery-item">
                <img src="https://images.pexels.com/photos/14530314/pexels-photo-14530314.jpeg" alt="Jalebi Platter">
                <div class="gallery-overlay">
                    <i class="fas fa-search-plus"></i>
                </div>
            </div>
            <div class="gallery-item">
                <img src="https://images.pexels.com/photos/11171722/pexels-photo-11171722.jpeg" alt="Jalebi Preparation">
                <div class="gallery-overlay">
                    <i class="fas fa-search-plus"></i>
                </div>
            </div>
            <div class="gallery-item">
                <img src="https://images.pexels.com/photos/8887065/pexels-photo-8887065.jpeg" alt="Jalebi Shop">
                <div class="gallery-overlay">
                    <i class="fas fa-search-plus"></i>
                </div>
            </div>
        </div>
    </section>

<section class="team">
        <div class="section-title">
            <h2>Our Sweet Team</h2>
        </div>
        <div class="team-container">
            <div class="team-member">
                <div class="team-img">
                    <img src="https://images.unsplash.com/photo-1551836022-d5d88e9218df?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=256&q=80" alt="Rajiv Sharma">
                </div>
                <h3>Rajiv Sharma</h3>
                <p>Master Chef</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>
                </div>
            </div>
            <div class="team-member">
                <div class="team-img">
                    <img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=256&q=80" alt="Priya Malhotra">
                </div>
                <h3>Priya Malhotra</h3>
                <p>Head Pastry Chef</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>
                </div>
            </div>
            <div class="team-member">
                <div class="team-img">
                    <img src="https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=256&q=80" alt="Amit Patel">
                </div>
                <h3>Amit Patel</h3>
                <p>Customer Service</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>
                </div>
            </div>
            <div class="team-member">
                <div class="team-img">
                    <img src="https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=256&q=80" alt="Neha Gupta">
                </div>
                <h3>Neha Gupta</h3>
                <p>Marketing Manager</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>
                </div>
            </div>
        </div>
    </section>

<section class="contact" id="contact">
        <div class="section-title">
            <h2>Contact Us</h2>
        </div>
        <div class="contact-container">
            <div class="contact-info">
                <h3>Get in Touch</h3>
                <div class="info-item">
                    <i class="fas fa-map-marker-alt"></i>
                    <div class="info-text">
                        <h4>Location</h4>
                        <p>123 Sweet Street, Dessert Valley, DV 12345</p>
                    </div>
                </div>
                <div class="info-item">
                    <i class="fas fa-envelope"></i>
                    <div class="info-text">
                        <h4>Email</h4>
                        <p>info@jalebicorner.com</p>
                    </div>
                </div>
                <div class="info-item">
                    <i class="fas fa-phone-alt"></i>
                    <div class="info-text">
                        <h4>Call Us</h4>
                        <p>+1 (555) 123-4567</p>
                    </div>
                </div>
                <div class="info-item">
                    <i class="fas fa-clock"></i>
                    <div class="info-text">
                        <h4>Opening Hours</h4>
                        <p>Monday - Saturday: 9:00 AM - 10:00 PM<br>Sunday: 10:00 AM - 8:00 PM</p>
                    </div>
                </div>
            </div>
            <div class="contact-form">
                <form>
                    <div class="form-group">
                        <label for="name">Your Name</label>
                        <input type="text" id="name" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <label for="email">Your Email</label>
                        <input type="email" id="email" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <label for="subject">Subject</label>
                        <input type="text" id="subject" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <label for="message">Message</label>
                        <textarea id="message" class="form-control" required></textarea>
                    </div>
                    <button type="submit" class="btn">Send Message</button>
                </form>
            </div>
        </div>
    </section>

<section class="newsletter">
        <div class="section-title">
            <h2>Sweet Newsletter</h2>
        </div>
        <p>Subscribe to our newsletter to receive updates on new menu items, special offers, and sweet events!</p>
        <form class="newsletter-form">
            <input type="email" placeholder="Your Email Address" required>
            <button type="submit" class="btn">Subscribe</button>
        </form>
    </section>

<footer>
        <div class="footer-container">
            <div class="footer-col">
                <h3>Jalebi Corner</h3>
                <p>Bringing authentic, traditional Indian sweets to your table since 1985. Our passion for quality and taste keeps our customers coming back for more.</p>
                <div class="footer-social">
                    <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-youtube"></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="#menu">Our Menu</a></li>
                    <li><a href="#offers">Special Offers</a></li>
                    <li><a href="#testimonials">Testimonials</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
            </div>
            <div class="footer-col">
                <h3>Contact Info</h3>
                <ul class="footer-links">
                    <li><i class="fas fa-map-marker-alt"></i> 123 Sweet Street, Dessert Valley</li>
                    <li><i class="fas fa-phone-alt"></i> +1 (555) 123-4567</li>
                    <li><i class="fas fa-envelope"></i> info@jalebicorner.com</li>
                    <li><i class="fas fa-clock"></i> Mon-Sat: 9AM-10PM, Sun: 10AM-8PM</li>
                </ul>
            </div>
        </div>
        <div class="copyright">
            <p>&copy; 2023 Jalebi Corner. All Rights Reserved.</p>
        </div>
    </footer>

<a href="#home" class="back-to-top"><i class="fas fa-arrow-up"></i></a>

</body>
</html>

CSS

:root {
            --primary-color: #FFD700;
            --secondary-color: #FFA500;
            --dark-color: #333;
            --light-color: #fff;
            --shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Poppins', sans-serif;
        }

html {
            scroll-behavior: smooth;
        }

body {
            background-color: #fff9e6;
            color: var(--dark-color);
            overflow-x: hidden;
        }

/* Header Styles */
        header {
            background-color: var(--light-color);
            box-shadow: var(--shadow);
            position: fixed;
            width: 100%;
            z-index: 1000;
            padding: 1rem 5%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: all 0.3s ease;
        }

header.scrolled {
            padding: 0.5rem 5%;
            background-color: rgba(255, 255, 255, 0.95);
        }

.logo {
            display: flex;
            align-items: center;
        }

.logo img {
            height: 50px;
            margin-right: 10px;
            animation: spin 8s linear infinite;
        }

@keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

.logo h1 {
            color: var(--secondary-color);
            font-weight: 700;
            font-size: 1.8rem;
        }

.logo span {
            color: var(--primary-color);
        }

nav ul {
            display: flex;
            list-style: none;
        }

nav ul li {
            margin-left: 2rem;
        }

nav ul li a {
            text-decoration: none;
            color: var(--dark-color);
            font-weight: 500;
            font-size: 1.1rem;
            transition: color 0.3s ease;
            position: relative;
        }

nav ul li a:hover {
            color: var(--primary-color);
        }

nav ul li a::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            background: var(--primary-color);
            bottom: -5px;
            left: 0;
            transition: width 0.3s ease;
        }

nav ul li a:hover::after {
            width: 100%;
        }

.menu-toggle {
            display: none;
            cursor: pointer;
            font-size: 1.5rem;
        }

/* Hero Section */
        .hero {
            height: 100vh;
            background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.pexels.com/photos/5916371/pexels-photo-5916371.jpeg');
            background-size: cover;
            background-position: center;
            display: flex;
            align-items: center;
            padding: 0 5%;
            color: var(--light-color);
            position: relative;
            overflow: hidden;
        }

.hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to right, rgba(255, 217, 0, 0.209), rgba(255, 165, 0, 0.3));
            z-index: 1;
        }

.hero-content {
            position: relative;
            z-index: 2;
            margin-top: 200px;
            /* max-width: 600px; */
            animation: fadeInUp 1s ease;
        }

@keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(50px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

.hero h1 {
            font-size: 3.5rem;
            margin-bottom: 1rem;
            text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
        }

.hero p {
            font-size: 1.2rem;
            margin-bottom: 2rem;
            line-height: 1.6;
        }

.btn {
            display: inline-block;
            background-color: var(--primary-color);
            color: var(--dark-color);
            padding: 0.8rem 2rem;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 600;
            transition: all 0.3s ease;
            border: none;
            cursor: pointer;
            box-shadow: 0 5px 15px rgba(255, 215, 0, 0.4);
        }

.btn:hover {
            background-color: var(--secondary-color);
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(255, 165, 0, 0.6);
        }

/* About Section */
        .about {
            padding: 5rem 5%;
            background-color: var(--light-color);
        }

.section-title {
            text-align: center;
            margin-bottom: 3rem;
            position: relative;
        }

.section-title h2 {
            font-size: 2.5rem;
            color: var(--secondary-color);
            display: inline-block;
        }

.section-title h2::after {
            content: '';
            position: absolute;
            width: 80px;
            height: 4px;
            background-color: var(--primary-color);
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            border-radius: 2px;
        }

.about-content {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 3rem;
        }

.about-img {
            flex: 1 1 300px;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: var(--shadow);
            animation: fadeInLeft 1s ease;
        }

.about-img img {
            width: 100%;
            height: auto;
            transition: transform 0.5s ease;
        }

.about-img:hover img {
            transform: scale(1.05);
        }

.about-text {
            flex: 1 1 300px;
            animation: fadeInRight 1s ease;
        }

.about-text h3 {
            font-size: 1.8rem;
            margin-bottom: 1rem;
            color: var(--secondary-color);
        }

.about-text p {
            margin-bottom: 1.5rem;
            line-height: 1.8;
        }

@keyframes fadeInLeft {
            from {
                opacity: 0;
                transform: translateX(-50px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

@keyframes fadeInRight {
            from {
                opacity: 0;
                transform: translateX(50px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

/* Menu Section */
        .menu {
            padding: 5rem 5%;
            background-color: #fff9e6;
        }

.menu-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
        }

.menu-item {
            background-color: var(--light-color);
            border-radius: 10px;
            overflow: hidden;
            box-shadow: var(--shadow);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            animation: fadeIn 0.5s ease;
        }

@keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }

.menu-item:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
        }

.menu-item-img {
            height: 200px;
            overflow: hidden;
        }

.menu-item-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }

.menu-item:hover .menu-item-img img {
            transform: scale(1.1);
        }

.menu-item-content {
            padding: 1.5rem;
        }

.menu-item-content h3 {
            font-size: 1.4rem;
            margin-bottom: 0.5rem;
            color: var(--secondary-color);
        }

.menu-item-content p {
            margin-bottom: 1rem;
            color: #666;
            line-height: 1.6;
        }

.price {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

.price span {
            font-weight: 700;
            color: var(--primary-color);
            font-size: 1.2rem;
        }

.price .btn {
            padding: 0.5rem 1.5rem;
            font-size: 0.9rem;
        }

/* Special Offers */
        .offers {
            padding: 5rem 5%;
            background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://images.pexels.com/photos/8887065/pexels-photo-8887065.jpeg');
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
            color: var(--light-color);
            text-align: center;
        }

.offers h2 {
            margin-bottom: 2rem;
            animation: fadeIn 1s ease;
        }

.offers p {
            max-width: 800px;
            margin: 0 auto 3rem;
            line-height: 1.8;
            animation: fadeIn 1s ease 0.3s forwards;
            opacity: 0;
        }

.offer-cards {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 2rem;
            margin-top: 3rem;
        }

.offer-card {
            background-color: rgba(255, 255, 255, 0.9);
            padding: 2rem;
            border-radius: 10px;
            color: var(--dark-color);
            box-shadow: var(--shadow);
            transition: transform 0.3s ease;
            animation: fadeInUp 0.5s ease;
        }

.offer-card:nth-child(1) {
            animation-delay: 0.2s;
        }

.offer-card:nth-child(2) {
            animation-delay: 0.4s;
        }

.offer-card:nth-child(3) {
            animation-delay: 0.6s;
        }

.offer-card:hover {
            transform: translateY(-10px);
        }

.offer-card i {
            font-size: 3rem;
            color: var(--primary-color);
            margin-bottom: 1rem;
        }

.offer-card h3 {
            font-size: 1.5rem;
            margin-bottom: 1rem;
            color: var(--secondary-color);
        }

.offer-card p {
            margin-bottom: 1.5rem;
            opacity: 1;
            animation: none;
        }

/* Testimonials */
        .testimonials {
            padding: 5rem 5%;
            background-color: var(--light-color);
        }

.testimonial-container {
            display: flex;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            gap: 2rem;
            padding: 1rem 0;
            -webkit-overflow-scrolling: touch;
        }

.testimonial-container::-webkit-scrollbar {
            height: 8px;
        }

.testimonial-container::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 10px;
        }

.testimonial-container::-webkit-scrollbar-thumb {
            background: var(--primary-color);
            border-radius: 10px;
        }

.testimonial {
            flex: 0 0 350px;
            scroll-snap-align: start;
            background-color: #fff9e6;
            padding: 2rem;
            border-radius: 10px;
            box-shadow: var(--shadow);
            position: relative;
        }

.testimonial::before {
            content: '\201C';
            font-size: 5rem;
            color: rgba(255, 215, 0, 0.2);
            position: absolute;
            top: 10px;
            left: 20px;
            font-family: serif;
        }

.testimonial p {
            margin-bottom: 1.5rem;
            line-height: 1.8;
            position: relative;
            z-index: 1;
        }

.testimonial-author {
            display: flex;
            align-items: center;
        }

.testimonial-author img {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            object-fit: cover;
            margin-right: 1rem;
            border: 3px solid var(--primary-color);
        }

.author-info h4 {
            font-size: 1.2rem;
            margin-bottom: 0.3rem;
            color: var(--secondary-color);
        }

.author-info span {
            color: #777;
            font-size: 0.9rem;
        }

.rating {
            color: var(--primary-color);
            margin-top: 0.3rem;
        }

/* Gallery */
        .gallery {
            padding: 5rem 5%;
            background-color: #fff9e6;
        }

.gallery-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 1rem;
        }

.gallery-item {
            position: relative;
            overflow: hidden;
            border-radius: 10px;
            height: 250px;
            box-shadow: var(--shadow);
        }

.gallery-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }

.gallery-item:hover img {
            transform: scale(1.1);
        }

.gallery-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 215, 0, 0.7);
            display: flex;
            justify-content: center;
            align-items: center;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

.gallery-item:hover .gallery-overlay {
            opacity: 1;
        }

.gallery-overlay i {
            font-size: 2rem;
            color: var(--light-color);
        }

/* Team Section */
        .team {
            padding: 5rem 5%;
            background-color: var(--light-color);
        }

.team-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 2rem;
        }

.team-member {
            text-align: center;
            padding: 2rem;
            background-color: #fff9e6;
            border-radius: 10px;
            box-shadow: var(--shadow);
            transition: transform 0.3s ease;
        }

.team-member:hover {
            transform: translateY(-10px);
        }

.team-img {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            margin: 0 auto 1.5rem;
            overflow: hidden;
            border: 5px solid var(--primary-color);
        }

.team-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }

.team-member:hover .team-img img {
            transform: scale(1.1);
        }

.team-member h3 {
            font-size: 1.4rem;
            margin-bottom: 0.5rem;
            color: var(--secondary-color);
        }

.team-member p {
            color: #777;
            margin-bottom: 1.5rem;
        }

.social-links {
            display: flex;
            justify-content: center;
            gap: 1rem;
        }

.social-links a {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 35px;
            height: 35px;
            background-color: var(--primary-color);
            border-radius: 50%;
            color: var(--dark-color);
            transition: all 0.3s ease;
            text-decoration: none;
        }

.social-links a:hover {
            background-color: var(--secondary-color);
            color: var(--light-color);
            transform: translateY(-3px);
        }

/* Contact Section */
        .contact {
            padding: 5rem 5%;
            background-color: #fff9e6;
        }

.contact-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 3rem;
        }

.contact-info {
            animation: fadeInLeft 1s ease;
        }

.contact-info h3 {
            font-size: 1.8rem;
            margin-bottom: 1.5rem;
            color: var(--secondary-color);
        }

.info-item {
            display: flex;
            align-items: flex-start;
            margin-bottom: 1.5rem;
        }

.info-item i {
            font-size: 1.5rem;
            color: var(--primary-color);
            margin-right: 1rem;
            margin-top: 5px;
        }

.info-text h4 {
            font-size: 1.2rem;
            margin-bottom: 0.5rem;
        }

.info-text p {
            color: #666;
            line-height: 1.6;
        }

.contact-form {
            animation: fadeInRight 1s ease;
        }

.form-group {
            margin-bottom: 1.5rem;
        }

.form-group label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: 500;
        }

.form-control {
            width: 100%;
            padding: 0.8rem 1rem;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 1rem;
            transition: border-color 0.3s ease;
        }

.form-control:focus {
            outline: none;
            border-color: var(--primary-color);
        }

textarea.form-control {
            min-height: 150px;
            resize: vertical;
        }

/* Newsletter */
        .newsletter {
            padding: 5rem 5%;
            background: linear-gradient(rgba(255, 217, 0, 0.409), rgba(255, 217, 0, 0.385)), url('https://images.pexels.com/photos/11171722/pexels-photo-11171722.jpeg');
            background-size: cover;
            background-position: center;
            text-align: center;
            color: var(--dark-color);
        }

.newsletter h2 {
            margin-bottom: 1rem;
        }

.newsletter p {
            max-width: 600px;
            margin: 0 auto 2rem;
            line-height: 1.6;
        }

.newsletter-form {
            max-width: 500px;
            margin: 0 auto;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 1rem;
        }

.newsletter-form input {
            flex: 1 1 300px;
            padding: 0.8rem 1rem;
            border: none;
            border-radius: 50px;
            font-size: 1rem;
        }

.newsletter-form input:focus {
            outline: none;
        }

.newsletter-form .btn {
            flex: 0 0 auto;
        }

/* Footer */
        footer {
            background-color: var(--dark-color);
            color: var(--light-color);
            padding: 3rem 5% 1rem;
        }

.footer-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 2rem;
            margin-bottom: 2rem;
        }

.footer-col h3 {
            font-size: 1.5rem;
            margin-bottom: 1.5rem;
            color: var(--primary-color);
        }

.footer-col p {
            margin-bottom: 1rem;
            line-height: 1.6;
        }

.footer-links {
            list-style: none;
        }

.footer-links li {
            margin-bottom: 0.8rem;
        }

.footer-links a {
            color: #ddd;
            text-decoration: none;
            transition: color 0.3s ease;
        }

.footer-links a:hover {
            color: var(--primary-color);
        }

.footer-social {
            display: flex;
            gap: 1rem;
        }

.footer-social a {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            background-color: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            color: var(--light-color);
            transition: all 0.3s ease;
            text-decoration: none;
        }

.footer-social a:hover {
            background-color: var(--primary-color);
            color: var(--dark-color);
            transform: translateY(-3px);
        }

.copyright {
            text-align: center;
            padding-top: 2rem;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            color: #aaa;
            font-size: 0.9rem;
        }

/* Back to Top Button */
        .back-to-top {
            position: fixed;
            bottom: 30px;
            right: 30px;
            width: 50px;
            height: 50px;
            background-color: var(--primary-color);
            color: var(--dark-color);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            text-decoration: none;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
            z-index: 999;
        }

.back-to-top.active {
            opacity: 1;
            visibility: visible;
        }

.back-to-top:hover {
            background-color: var(--secondary-color);
            transform: translateY(-5px);
        }

/* Responsive Styles */
        @media (max-width: 992px) {
            .hero h1 {
                font-size: 3rem;
            }
        }

@media (max-width: 768px) {
            .menu-toggle {
                display: block;
            }

nav {
                position: absolute;
                top: 100%;
                left: 0;
                width: 100%;
                background-color: var(--light-color);
                box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
                padding: 1rem 5%;
                clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
                transition: clip-path 0.4s ease;
            }

nav.active {
                clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
            }

nav ul {
                flex-direction: column;
            }

nav ul li {
                margin: 0;
                margin-bottom: 1rem;
            }

.hero h1 {
                font-size: 2.5rem;
            }

.hero p {
                font-size: 1rem;
            }

.section-title h2 {
                font-size: 2rem;
            }

.about-content {
                flex-direction: column;
            }

.about-img, .about-text {
                flex: 1 1 100%;
            }
        }

@media (max-width: 576px) {
            .hero h1 {
                font-size: 2rem;
            }

.btn {
                padding: 0.6rem 1.5rem;
            }

.offer-cards {
                grid-template-columns: 1fr;
            }

.testimonial {
                flex: 0 0 280px;
            }

.newsletter-form {
                flex-direction: column;
            }

.newsletter-form input, .newsletter-form .btn {
                width: 100%;
            }
        }

JavaScript

// Mobile Menu Toggle
        const menuToggle = document.querySelector('.menu-toggle');
        const nav = document.querySelector('nav');

menuToggle.addEventListener('click', () => {
            nav.classList.toggle('active');
        });

// Close mobile menu when clicking on a link
        const navLinks = document.querySelectorAll('nav ul li a');
        navLinks.forEach(link => {
            link.addEventListener('click', () => {
                nav.classList.remove('active');
            });
        });

// Header scroll effect
        const header = document.getElementById('header');
        window.addEventListener('scroll', () => {
            if (window.scrollY > 100) {
                header.classList.add('scrolled');
            } else {
                header.classList.remove('scrolled');
            }
        });

// Back to top button
        const backToTop = document.querySelector('.back-to-top');
        window.addEventListener('scroll', () => {
            if (window.scrollY > 300) {
                backToTop.classList.add('active');
            } else {
                backToTop.classList.remove('active');
            }
        });

// Smooth scrolling for all 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
        const animateOnScroll = () => {
            const elements = document.querySelectorAll('.about-img, .about-text, .menu-item, .offer-card, .testimonial, .gallery-item, .team-member, .contact-info, .contact-form');
            
            elements.forEach(element => {
                const elementPosition = element.getBoundingClientRect().top;
                const screenPosition = window.innerHeight / 1.3;
                
                if (elementPosition < screenPosition) {
                    element.style.opacity = '1';
                    element.style.transform = 'translateY(0)';
                }
            });
        };

// Initialize animations
        window.addEventListener('load', animateOnScroll);
        window.addEventListener('scroll', animateOnScroll);

Jalebi Corner SweetDelights Template Preview

Download Options