CodePen Embed - Savoria - Fine Dining Experience

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Savoria - Fine Dining Experience</title>
    <link rel="stylesheet" href="styles.css">
    <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">
</head>
<body>
    <!-- Header & Navigation -->
    <header>
        <div class="container">
            <div class="logo">
                <h1>Savoria</h1>
            </div>
            <nav>
                <ul class="nav-links">
                    <li><a href="#home">Home</a></li>
                    <li><a href="#about">About</a></li>
                    <li><a href="#menu">Menu</a></li>
                    <li><a href="#testimonials">Testimonials</a></li>
                    <li><a href="#reservation">Reservation</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
                <div class="hamburger">
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
            </nav>
        </div>
    </header>

    <!-- Hero Section -->
    <section id="home" class="hero">
        <div class="hero-content">
            <h1>Exquisite Dining Experience</h1>
            <p>Savor the finest culinary creations in an elegant atmosphere</p>
            <div class="hero-buttons">
                <a href="#menu" class="btn btn-primary">View Menu</a>
                <a href="#reservation" class="btn btn-secondary">Book a Table</a>
            </div>
        </div>
    </section>

    <!-- About Section -->
    <section id="about" class="about">
        <div class="container">
            <div class="section-header">
                <h2>Our Story</h2>
                <div class="divider"></div>
            </div>
            <div class="about-content">
                <div class="about-image">
                    <img src="https://images.unsplash.com/photo-1414235077428-338989a2e8c0?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" alt="Restaurant interior">
                </div>
                <div class="about-text">
                    <h3>A Tradition of Excellence</h3>
                    <p>Founded in 2005, Savoria has been serving exceptional cuisine for over 15 years. Our chef-driven menu features seasonal ingredients and creative dishes that blend traditional techniques with modern innovation.</p>
                    <p>We believe that dining is more than just eating—it's an experience that engages all the senses. From our carefully curated wine list to our attentive service, every detail is designed to create memorable moments.</p>
                    <a href="#" class="btn btn-outline">Learn More</a>
                </div>
            </div>
        </div>
    </section>

    <!-- Menu Highlights -->
    <section id="menu" class="menu">
        <div class="container">
            <div class="section-header">
                <h2>Menu Highlights</h2>
                <div class="divider"></div>
                <p>Explore our signature dishes crafted with passion and precision</p>
            </div>
            <div class="menu-categories">
                <button class="menu-category active" data-category="starters">Starters</button>
                <button class="menu-category" data-category="mains">Main Courses</button>
                <button class="menu-category" data-category="desserts">Desserts</button>
                <button class="menu-category" data-category="drinks">Drinks</button>
            </div>
            <div class="menu-items">
                <!-- Starters -->
                <div class="menu-group active" id="starters">
                    <div class="menu-item">
                        <div class="menu-item-image">
                            <img src="https://images.unsplash.com/photo-1626645738196-c2a7c87a8f58?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Bruschetta">
                        </div>
                        <div class="menu-item-info">
                            <div class="menu-item-title">
                                <h4>Artisanal Bruschetta</h4>
                                <span class="price">$12</span>
                            </div>
                            <p>Toasted sourdough topped with heirloom tomatoes, fresh basil, and aged balsamic</p>
                        </div>
                    </div>
                    <div class="menu-item">
                        <div class="menu-item-image">
                            <img src="https://images.unsplash.com/photo-1547496502-affa22d38842?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Calamari">
                        </div>
                        <div class="menu-item-info">
                            <div class="menu-item-title">
                                <h4>Crispy Calamari</h4>
                                <span class="price">$16</span>
                            </div>
                            <p>Lightly fried and served with lemon aioli and marinara sauce</p>
                        </div>
                    </div>
                </div>
                
                <!-- Main Courses -->
                <div class="menu-group" id="mains">
                    <div class="menu-item">
                        <div class="menu-item-image">
                            <img src="https://images.unsplash.com/photo-1544025162-d76694265947?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Ribeye Steak">
                        </div>
                        <div class="menu-item-info">
                            <div class="menu-item-title">
                                <h4>Prime Ribeye Steak</h4>
                                <span class="price">$38</span>
                            </div>
                            <p>Grass-fed 12oz ribeye with truffle mashed potatoes and seasonal vegetables</p>
                        </div>
                    </div>
                    <div class="menu-item">
                        <div class="menu-item-image">
                            <img src="https://images.unsplash.com/photo-1551183053-bf91a1d81141?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Salmon">
                        </div>
                        <div class="menu-item-info">
                            <div class="menu-item-title">
                                <h4>Cedar Plank Salmon</h4>
                                <span class="price">$32</span>
                            </div>
                            <p>Wild-caught salmon with lemon herb butter, quinoa pilaf, and asparagus</p>
                        </div>
                    </div>
                </div>
                
                <!-- Desserts -->
                <div class="menu-group" id="desserts">
                    <div class="menu-item">
                        <div class="menu-item-image">
                            <img src="https://images.unsplash.com/photo-1551024506-0bccd828d307?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Chocolate Lava Cake">
                        </div>
                        <div class="menu-item-info">
                            <div class="menu-item-title">
                                <h4>Chocolate Lava Cake</h4>
                                <span class="price">$12</span>
                            </div>
                            <p>Warm chocolate cake with a molten center, served with vanilla bean ice cream</p>
                        </div>
                    </div>
                    <div class="menu-item">
                        <div class="menu-item-image">
                            <img src="https://images.unsplash.com/photo-1565958011703-44f9829ba187?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Crème Brûlée">
                        </div>
                        <div class="menu-item-info">
                            <div class="menu-item-title">
                                <h4>Classic Crème Brûlée</h4>
                                <span class="price">$10</span>
                            </div>
                            <p>Silky vanilla custard with a caramelized sugar crust and fresh berries</p>
                        </div>
                    </div>
                </div>
                
                <!-- Drinks -->
                <div class="menu-group" id="drinks">
                    <div class="menu-item">
                        <div class="menu-item-image">
                            <img src="https://images.unsplash.com/photo-1536935338788-846bb9981813?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Signature Cocktail">
                        </div>
                        <div class="menu-item-info">
                            <div class="menu-item-title">
                                <h4>Savoria Signature Cocktail</h4>
                                <span class="price">$14</span>
                            </div>
                            <p>Handcrafted with premium gin, elderflower liqueur, cucumber, and fresh lime</p>
                        </div>
                    </div>
                    <div class="menu-item">
                        <div class="menu-item-image">
                            <img src="https://images.unsplash.com/photo-1553361371-9b22f78e8b1d?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Wine Selection">
                        </div>
                        <div class="menu-item-info">
                            <div class="menu-item-title">
                                <h4>Curated Wine Selection</h4>
                                <span class="price">$12-$25</span>
                            </div>
                            <p>Extensive collection of wines from around the world, available by the glass or bottle</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="menu-footer">
                <a href="#" class="btn btn-primary">View Full Menu</a>
            </div>
        </div>
    </section>

    <!-- Testimonials -->
    <section id="testimonials" class="testimonials">
        <div class="container">
            <div class="section-header">
                <h2>What Our Guests Say</h2>
                <div class="divider"></div>
            </div>
            <div class="testimonial-slider">
                <div class="testimonial-container">
                    <div class="testimonial active">
                        <div class="testimonial-content">
                            <div class="stars">
                                <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>
                            <p>"An unforgettable dining experience! The food was exquisite, and the service was impeccable. The ambiance created the perfect setting for our anniversary dinner."</p>
                            <div class="testimonial-author">
                                <h4>Emily & James</h4>
                                <p>Dined last week</p>
                            </div>
                        </div>
                    </div>
                    <div class="testimonial">
                        <div class="testimonial-content">
                            <div class="stars">
                                <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>
                            <p>"The chef's tasting menu was a culinary journey I won't soon forget. Each course was more impressive than the last, and the wine pairings were perfect."</p>
                            <div class="testimonial-author">
                                <h4>Michael R.</h4>
                                <p>Food critic</p>
                            </div>
                        </div>
                    </div>
                    <div class="testimonial">
                        <div class="testimonial-content">
                            <div class="stars">
                                <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>
                            <p>"I hosted a business dinner at Savoria and was thoroughly impressed. The private dining room was elegant, the menu diverse enough for all preferences, and the staff was attentive without being intrusive."</p>
                            <div class="testimonial-author">
                                <h4>Sarah L.</h4>
                                <p>Corporate event</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="testimonial-controls">
                    <button class="prev-btn"><i class="fas fa-chevron-left"></i></button>
                    <div class="testimonial-dots">
                        <span class="dot active"></span>
                        <span class="dot"></span>
                        <span class="dot"></span>
                    </div>
                    <button class="next-btn"><i class="fas fa-chevron-right"></i></button>
                </div>
            </div>
        </div>
    </section>

    <!-- Reservation -->
    <section id="reservation" class="reservation">
        <div class="container">
            <div class="reservation-content">
                <div class="reservation-info">
                    <div class="section-header">
                        <h2>Reserve Your Table</h2>
                        <div class="divider"></div>
                    </div>
                    <p>Experience the finest dining at Savoria. Make a reservation and we'll prepare a special table for you.</p>
                    <div class="reservation-details">
                        <div class="detail">
                            <i class="fas fa-clock"></i>
                            <div>
                                <h4>Hours</h4>
                                <p>Mon-Thu: 5pm-10pm</p>
                                <p>Fri-Sun: 5pm-11pm</p>
                            </div>
                        </div>
                        <div class="detail">
                            <i class="fas fa-phone"></i>
                            <div>
                                <h4>Call Us</h4>
                                <p>(555) 123-4567</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="reservation-form-container">
                    <form id="reservation-form" class="reservation-form">
                        <div class="form-group">
                            <label for="name">Full Name</label>
                            <input type="text" id="name" name="name" required>
                        </div>
                        <div class="form-group">
                            <label for="email">Email</label>
                            <input type="email" id="email" name="email" required>
                        </div>
                        <div class="form-group">
                            <label for="phone">Phone</label>
                            <input type="tel" id="phone" name="phone" required>
                        </div>
                        <div class="form-row">
                            <div class="form-group">
                                <label for="date">Date</label>
                                <input type="date" id="date" name="date" required>
                            </div>
                            <div class="form-group">
                                <label for="time">Time</label>
                                <input type="time" id="time" name="time" required>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="guests">Number of Guests</label>
                            <select id="guests" name="guests" required>
                                <option value="">Select</option>
                                <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 class="form-group">
                            <label for="special-requests">Special Requests</label>
                            <textarea id="special-requests" name="special-requests" rows="3"></textarea>
                        </div>
                        <button type="submit" class="btn btn-primary">Reserve Now</button>
                    </form>
                </div>
            </div>
        </div>
    </section>

    <!-- Contact & Location -->
    <section id="contact" class="contact">
        <div class="container">
            <div class="section-header">
                <h2>Find Us</h2>
                <div class="divider"></div>
            </div>
            <div class="contact-content">
                <div class="map">
                    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3022.215573036935!2d-73.98784368459377!3d40.758895879326895!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zNDDCsDQ1JzMyLjAiTiA3M8KwNTknMTIuMCJX!5e0!3m2!1sen!2sus!4v1625764215583!5m2!1sen!2sus" allowfullscreen="" loading="lazy"></iframe>
                </div>
                <div class="contact-info">
                    <div class="info-item">
                        <i class="fas fa-map-marker-alt"></i>
                        <div>
                            <h4>Address</h4>
                            <p>123 Culinary Avenue</p>
                            <p>New York, NY 10019</p>
                        </div>
                    </div>
                    <div class="info-item">
                        <i class="fas fa-phone"></i>
                        <div>
                            <h4>Phone</h4>
                            <p>(555) 123-4567</p>
                        </div>
                    </div>
                    <div class="info-item">
                        <i class="fas fa-envelope"></i>
                        <div>
                            <h4>Email</h4>
                            <p>reservations@savoria.com</p>
                        </div>
                    </div>
                    <div class="social-links">
                        <a href="#" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
                        <a href="#" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
                        <a href="#" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
                        <a href="#" aria-label="TripAdvisor"><i class="fab fa-tripadvisor"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer>
        <div class="container">
            <div class="footer-content">
                <div class="footer-logo">
                    <h2>Savoria</h2>
                    <p>Fine Dining Experience</p>
                </div>
                <div class="footer-links">
                    <div class="footer-column">
                        <h4>Explore</h4>
                        <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="#reservation">Reservation</a></li>
                        </ul>
                    </div>
                    <div class="footer-column">
                        <h4>Contact</h4>
                        <ul>
                            <li><a href="tel:5551234567">(555) 123-4567</a></li>
                            <li><a href="mailto:info@savoria.com">info@savoria.com</a></li>
                            <li>123 Culinary Avenue</li>
                            <li>New York, NY 10019</li>
                        </ul>
                    </div>
                    <div class="footer-column">
                        <h4>Hours</h4>
                        <ul>
                            <li>Monday - Thursday</li>
                            <li>5:00 PM - 10:00 PM</li>
                            <li>Friday - Sunday</li>
                            <li>5:00 PM - 11:00 PM</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2025 Savoria Restaurant. All rights reserved.</p>
                <div class="footer-bottom-links">
                    <a href="#">Privacy Policy</a>
                    <a href="#">Terms of Service</a>
                </div>
            </div>
        </div>
    </footer>

    <!-- Reservation Confirmation Modal -->
    <div id="reservation-modal" class="modal">
        <div class="modal-content">
            <span class="close-modal">&times;</span>
            <div class="modal-header">
                <i class="fas fa-check-circle"></i>
                <h3>Reservation Confirmed!</h3>
            </div>
            <div class="modal-body">
                <p>Thank you for choosing Savoria. We've received your reservation request and will send a confirmation to your email shortly.</p>
                <div class="reservation-details">
                    <p><strong>Name:</strong> <span id="modal-name"></span></p>
                    <p><strong>Date:</strong> <span id="modal-date"></span></p>
                    <p><strong>Time:</strong> <span id="modal-time"></span></p>
                    <p><strong>Party Size:</strong> <span id="modal-guests"></span></p>
                </div>
                <p>If you need to make any changes, please call us at (555) 123-4567.</p>
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary" id="modal-close">Close</button>
            </div>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>

/* Base Styles & Reset */
:root {
    --primary-color: #d4af37;
    --primary-light: #e9d18b;
    --primary-dark: #b39020;
    --secondary-color: #2c3e50;
    --accent-color: #e74c3c;
    --light-color: #f8f9fa;
    --dark-color: #212529;
    --gray-color: #6c757d;
    --light-gray: #e9ecef;
    --font-primary: 'Poppins', sans-serif;
    --font-display: 'Playfair Display', serif;
    --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.1), 0 1px 3px rgba(0,0,0,0.08);
    --shadow-lg: 0 10px 20px rgba(0,0,0,0.15), 0 3px 6px rgba(0,0,0,0.1);
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 16px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
}

body {
    font-family: var(--font-primary);
    line-height: 1.6;
    color: var(--dark-color);
    background-color: var(--light-color);
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

section {
    padding: 100px 0;
    position: relative;
}

.section-header {
    text-align: center;
    margin-bottom: 60px;
    position: relative;
}

.section-header h2 {
    font-family: var(--font-display);
    font-size: 2.8rem;
    color: var(--secondary-color);
    margin-bottom: 15px;
    position: relative;
    display: inline-block;
}

.section-header h2::before {
    content: '';
    position: absolute;
    width: 30px;
    height: 3px;
    background-color: var(--primary-color);
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
}

.divider {
    height: 3px;
    width: 60px;
    background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
    margin: 15px auto 25px;
}

.section-header p {
    color: var(--gray-color);
    max-width: 700px;
    margin: 0 auto;
    font-size: 1.1rem;
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 14px 32px;
    border-radius: var(--border-radius-md);
    font-weight: 500;
    text-align: center;
    cursor: pointer;
    transition: var(--transition);
    border: none;
    letter-spacing: 0.5px;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.btn::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
}

.btn::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 100%;
    transition: all 0.3s;
    z-index: -1;
}

.btn-primary {
    background-color: var(--primary-color);
    color: var(--dark-color);
    box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
}

.btn-primary::before {
    background-color: var(--primary-light);
}

.btn-primary:hover::before {
    width: 100%;
}

.btn-secondary {
    background-color: transparent;
    color: var(--light-color);
    border: 2px solid var(--light-color);
    position: relative;
    overflow: hidden;
}

.btn-secondary::before {
    background-color: var(--light-color);
}

.btn-secondary:hover {
    color: var(--dark-color);
    transform: translateY(-3px);
}

.btn-secondary:hover::before {
    width: 100%;
}

.btn-outline {
    background-color: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
    position: relative;
    overflow: hidden;
}

.btn-outline::before {
    background-color: var(--primary-color);
}

.btn-outline:hover {
    color: var(--dark-color);
    transform: translateY(-3px);
}

.btn-outline:hover::before {
    width: 100%;
}

/* Header & Navigation */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: rgba(33, 37, 41, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 15px 0;
    transition: var(--transition);
}

header.scrolled {
    background-color: rgba(33, 37, 41, 0.95);
    box-shadow: var(--shadow-md);
    padding: 10px 0;
}

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

.logo h1 {
    font-family: var(--font-display);
    font-size: 2rem;
    color: var(--primary-color);
    font-weight: 700;
    letter-spacing: 1px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

nav {
    display: flex;
    align-items: center;
}

.nav-links {
    display: flex;
}

.nav-links li {
    margin-left: 35px;
}

.nav-links a {
    color: var(--light-color);
    font-weight: 500;
    font-size: 1rem;
    transition: var(--transition);
    position: relative;
    padding: 5px 0;
}

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

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--primary-color);
    transition: var(--transition);
}

.nav-links a:hover::after {
    width: 100%;
}

.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
}

.hamburger span {
    display: block;
    width: 25px;
    height: 3px;
    background-color: var(--light-color);
    margin-bottom: 5px;
    border-radius: 3px;
    transition: var(--transition);
}

/* Hero Section */
.hero {
    height: 100vh;
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7)), url('https://images.unsplash.com/photo-1514933651103-005eec06c04b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--light-color);
    padding: 0 20px;
    position: relative;
}

.hero::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 150px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    z-index: 1;
}

.hero-content {
    max-width: 800px;
    position: relative;
    z-index: 2;
    animation: fadeIn 1.5s ease-out;
}

.hero-content h1 {
    font-family: var(--font-display);
    font-size: 4rem;
    margin-bottom: 20px;
    line-height: 1.2;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.hero-content p {
    font-size: 1.3rem;
    margin-bottom: 35px;
    opacity: 0.95;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.hero-buttons {
    display: flex;
    justify-content: center;
    gap: 25px;
}

/* About Section */
.about {
    background-color: #f9f9f9;
    position: relative;
    overflow: hidden;
}

.about::before {
    content: '';
    position: absolute;
    top: -100px;
    right: -100px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background-color: rgba(212, 175, 55, 0.1);
    z-index: 0;
}

.about-content {
    display: flex;
    align-items: center;
    gap: 60px;
    position: relative;
    z-index: 1;
}

.about-image {
    flex: 1;
    border-radius: var(--border-radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    position: relative;
    transform: perspective(1000px) rotateY(-5deg);
    transition: var(--transition);
}

.about-image:hover {
    transform: perspective(1000px) rotateY(0deg);
}

.about-image::after {
    content: '';
    position: absolute;
    top: 20px;
    left: 20px;
    right: -20px;
    bottom: -20px;
    border: 3px solid var(--primary-color);
    border-radius: var(--border-radius-md);
    z-index: -1;
}

.about-text {
    flex: 1;
}

.about-text h3 {
    font-family: var(--font-display);
    font-size: 2.2rem;
    color: var(--secondary-color);
    margin-bottom: 20px;
    position: relative;
}

.about-text h3::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 50px;
    height: 3px;
    background-color: var(--primary-color);
}

.about-text p {
    margin-bottom: 25px;
    font-size: 1.05rem;
    color: #555;
    line-height: 1.8;
}

/* Menu Section */
.menu {
    background-color: #fff;
    position: relative;
}

.menu::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 200px;
    background: linear-gradient(to bottom, transparent, rgba(249, 249, 249, 0.5));
    z-index: 0;
}

.menu-categories {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 40px;
}

.menu-category {
    padding: 12px 25px;
    background-color: transparent;
    border: none;
    border-radius: var(--border-radius-md);
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
    color: var(--gray-color);
    position: relative;
    overflow: hidden;
}

.menu-category::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--primary-color);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.3s ease;
}

.menu-category:hover::before,
.menu-category.active::before {
    transform: scaleX(1);
    transform-origin: left;
}

.menu-category:hover,
.menu-category.active {
    color: var(--dark-color);
}

.menu-category.active {
    font-weight: 600;
    color: var(--primary-color);
}

.menu-items {
    position: relative;
    z-index: 1;
}

.menu-group {
    display: none;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.menu-group.active {
    display: grid;
    animation: fadeIn 0.5s ease-out;
}

.menu-item {
    background-color: #fff;
    border-radius: var(--border-radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    position: relative;
}

.menu-item:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-lg);
}

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

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

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

.menu-item-info {
    padding: 20px;
}

.menu-item-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.menu-item-title h4 {
    font-family: var(--font-display);
    font-size: 1.2rem;
    color: var(--secondary-color);
}

.price {
    font-weight: 600;
    color: var(--primary-color);
    font-size: 1.1rem;
}

.menu-item-info p {
    color: var(--gray-color);
    font-size: 0.95rem;
}

.menu-footer {
    text-align: center;
    margin-top: 50px;
}

/* Testimonials Section */
.testimonials {
    background-color: #f9f9f9;
    position: relative;
    overflow: hidden;
}

.testimonials::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80') center/cover no-repeat;
    opacity: 0.05;
    z-index: 0;
}

.testimonial-slider {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    z-index: 1;
}

.testimonial-container {
    position: relative;
    overflow: hidden;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
    background-color: #fff;
    height: 300px;
}

.testimonial {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transform: translateX(50px);
    transition: all 0.5s ease;
    display: flex;
    align-items: center;
    padding: 30px;
}

.testimonial.active {
    opacity: 1;
    transform: translateX(0);
}

.testimonial-content {
    text-align: center;
}

.stars {
    color: var(--primary-color);
    margin-bottom: 15px;
}

.testimonial-content p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--secondary-color);
    font-style: italic;
    margin-bottom: 20px;
    position: relative;
}

.testimonial-content p::before,
.testimonial-content p::after {
    content: '"';
    font-family: var(--font-display);
    font-size: 2rem;
    color: var(--primary-light);
    position: absolute;
}

.testimonial-content p::before {
    top: -10px;
    left: -15px;
}

.testimonial-content p::after {
    bottom: -30px;
    right: -15px;
}

.testimonial-author h4 {
    font-family: var(--font-display);
    font-size: 1.2rem;
    color: var(--dark-color);
    margin-bottom: 5px;
}

.testimonial-author p {
    color: var(--gray-color);
    font-size: 0.9rem;
}

.testimonial-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
}

.prev-btn, .next-btn {
    background-color: transparent;
    border: none;
    color: var(--primary-color);
    font-size: 1.5rem;
    cursor: pointer;
    transition: var(--transition);
    padding: 5px 10px;
}

.prev-btn:hover, .next-btn:hover {
    color: var(--primary-dark);
    transform: scale(1.2);
}

.testimonial-dots {
    display: flex;
    gap: 8px;
    margin: 0 20px;
}

.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--light-gray);
    cursor: pointer;
    transition: var(--transition);
}

.dot.active {
    background-color: var(--primary-color);
    transform: scale(1.3);
}

/* Reservation Section */
.reservation {
    background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url('https://images.unsplash.com/photo-1550966871-3ed3cdb5ed0c?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80') center/cover no-repeat;
    color: var(--light-color);
    position: relative;
}

.reservation-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

.reservation-info .section-header {
    text-align: left;
}

.reservation-info .section-header h2 {
    color: var(--light-color);
}

.reservation-info .divider {
    margin: 15px 0 25px;
    background: linear-gradient(90deg, var(--primary-color), transparent);
}

.reservation-info p {
    color: #ddd;
    margin-bottom: 30px;
    font-size: 1.1rem;
}

.reservation-details {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.detail {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.detail i {
    font-size: 1.5rem;
    color: var(--primary-color);
}

.detail h4 {
    font-family: var(--font-display);
    font-size: 1.2rem;
    margin-bottom: 5px;
}

.detail p {
    color: #bbb;
    margin-bottom: 0;
    font-size: 1rem;
}

.reservation-form-container {
    background-color: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 40px;
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-lg);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.reservation-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-group {
    position: relative;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    font-size: 0.9rem;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--border-radius-sm);
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--light-color);
    font-family: var(--font-primary);
    font-size: 1rem;
    transition: var(--transition);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    background-color: rgba(255, 255, 255, 0.15);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.reservation-form .btn-primary {
    margin-top: 10px;
    width: 100%;
}

/* Contact Section */
.contact {
    background-color: #fff;
}

.contact-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.map {
    border-radius: var(--border-radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    height: 400px;
}

.map iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.contact-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 30px;
}

.info-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.info-item i {
    font-size: 1.8rem;
    color: var(--primary-color);
}

.info-item h4 {
    font-family: var(--font-display);
    font-size: 1.3rem;
    margin-bottom: 8px;
    color: var(--secondary-color);
}

.info-item p {
    color: var(--gray-color);
    margin-bottom: 5px;
}

.social-links {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

.social-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #f5f5f5;
    color: var(--secondary-color);
    transition: var(--transition);
}

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

/* Footer */
footer {
    background-color: var(--secondary-color);
    color: var(--light-color);
    padding: 70px 0 20px;
}

.footer-content {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 50px;
}

.footer-logo h2 {
    font-family: var(--font-display);
    font-size: 2rem;
    color: var(--primary-color);
    margin-bottom: 10px;
}

.footer-logo p {
    color: #bbb;
    margin-bottom: 20px;
}

.footer-column h4 {
    font-size: 1.2rem;
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 10px;
}

.footer-column h4::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 30px;
    height: 2px;
    background-color: var(--primary-color);
}

.footer-column ul li {
    margin-bottom: 10px;
}

.footer-column ul li a {
    color: #bbb;
    transition: var(--transition);
}

.footer-column ul li a:hover {
    color: var(--primary-color);
    padding-left: 5px;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-bottom p {
    color: #999;
    font-size: 0.9rem;
}

.footer-bottom-links {
    display: flex;
    gap: 20px;
}

.footer-bottom-links a {
    color: #999;
    font-size: 0.9rem;
    transition: var(--transition);
}

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

/* Modal */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 2000;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.modal.show {
    display: flex;
    animation: fadeIn 0.3s ease-out;
}

.modal-content {
    background-color: #fff;
    border-radius: var(--border-radius-md);
    width: 90%;
    max-width: 500px;
    box-shadow: var(--shadow-lg);
    position: relative;
    overflow: hidden;
    animation: slideUp 0.4s ease-out;
}

.close-modal {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 1.5rem;
    color: var(--gray-color);
    cursor: pointer;
    transition: var(--transition);
}

.close-modal:hover {
    color: var(--accent-color);
    transform: rotate(90deg);
}

.modal-header {
    background-color: var(--primary-color);
    color: var(--dark-color);
    padding: 20px;
    text-align: center;
}

.modal-header i {
    font-size: 3rem;
    margin-bottom: 10px;
}

.modal-header h3 {
    font-family: var(--font-display);
    font-size: 1.5rem;
}

.modal-body {
    padding: 30px;
}

.modal-body p {
    margin-bottom: 20px;
}

.reservation-details {
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: var(--border-radius-sm);
    margin-bottom: 20px;
}

.modal-footer {
    padding: 0 30px 30px;
    text-align: center;
}

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

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

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

/* Responsive Design */
@media (max-width: 1024px) {
    .hero-content h1 {
        font-size: 3.5rem;
    }
    
    .about-content {
        flex-direction: column;
    }
    
    .about-image::after {
        display: none;
    }
    
    .footer-content {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }
}

@media (max-width: 768px) {
    .nav-links {
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        height: 100vh;
        background-color: rgba(33, 37, 41, 0.98);
        flex-direction: column;
        align-items: center;
        padding: 50px 0;
        transition: right 0.5s ease;
        z-index: 1000;
    }

    .nav-links.active {
        right: 0;
    }

    .nav-links li {
        margin: 20px 0;
    }

    .hamburger {
        display: flex;
        position: absolute;
        top: 20px;
        right: 20px;
        z-index: 1001;
    }

    .hero-content h1 {
        font-size: 2.8rem;
    }

    .hero-buttons {
        flex-direction: column;
        gap: 15px;
    }

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

    .about-image::after {
        display: none;
    }

    .menu-categories {
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }

    .testimonial-container {
        height: auto;
        padding: 20px;
    }

    .reservation-content {
        grid-template-columns: 1fr;
    }

    .contact-content {
        grid-template-columns: 1fr;
    }

    footer {
        padding: 40px 0;
    }

    .footer-content {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

@media (max-width: 480px) {
    .hero-content h1 {
        font-size: 2.5rem;
    }

    .hero-buttons {
        flex-direction: column;
        gap: 15px;
    }

    .menu-item-image {
        height: 180px;
    }

    .testimonial-slider {
        padding: 0 15px;
    }

    .reservation-form-container {
        padding: 20px;
    }

    .footer-bottom-links {
        flex-direction: column;
        gap: 10px;
    }
}

/* JavaScript functionality */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

// Mobile Menu Toggle
const hamburger = document.querySelector('.hamburger');
const navLinks = document.querySelector('.nav-links');
const body = document.body;

hamburger.addEventListener('click', () => {
    navLinks.classList.toggle('active');
    hamburger.classList.toggle('active');
});

// Smooth Scroll
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        e.preventDefault();
        document.querySelector(this.getAttribute('href')).scrollIntoView({
            behavior: 'smooth'
        });
    });
});

// Menu Category Filter
const menuCategories = document.querySelectorAll('.menu-category');
const menuGroups = document.querySelectorAll('.menu-group');

menuCategories.forEach(category => {
    category.addEventListener('click', () => {
        const targetCategory = category.dataset.category;
        menuCategories.forEach(cat => cat.classList.remove('active'));
        category.classList.add('active');
        menuGroups.forEach(group => {
            if (group.id === targetCategory) {
                group.classList.add('active');
            } else {
                group.classList.remove('active');
            }
        });
    });
});

// Testimonial Slider
let currentTestimonial = 0;
const testimonials = document.querySelectorAll('.testimonial');
const dots = document.querySelectorAll('.dot');
const prevBtn = document.querySelector('.prev-btn');
const nextBtn = document.querySelector('.next-btn');

function updateTestimonials() {
    testimonials.forEach(testimonial => testimonial.classList.remove('active'));
    dots.forEach(dot => dot.classList.remove('active'));
    testimonials[currentTestimonial].classList.add('active');
    dots[currentTestimonial].classList.add('active');
}

prevBtn.addEventListener('click', () => {
    currentTestimonial = (currentTestimonial - 1 + testimonials.length) % testimonials.length;
    updateTestimonials();
});

nextBtn.addEventListener('click', () => {
    currentTestimonial = (currentTestimonial + 1) % testimonials.length;
    updateTestimonials();
});

// Reservation Form
const reservationForm = document.getElementById('reservation-form');
const modal = document.getElementById('reservation-modal');
const closeModal = document.querySelector('.close-modal');
const modalClose = document.getElementById('modal-close');

reservationForm.addEventListener('submit', (e) => {
    e.preventDefault();
    const formData = new FormData(reservationForm);
    const data = Object.fromEntries(formData.entries());
    
    // Here you would typically send the form data to a server
    // For this example, we'll just show the modal
    modal.classList.add('show');
    
    // Populate modal with form data
    document.getElementById('modal-name').textContent = data.name;
    document.getElementById('modal-date').textContent = data.date;
    document.getElementById('modal-time').textContent = data.time;
    document.getElementById('modal-guests').textContent = data.guests || '1 Person';
});

closeModal.addEventListener('click', () => modal.classList.remove('show'));
modalClose.addEventListener('click', () => modal.classList.remove('show'));

// Scroll Animation
window.addEventListener('scroll', () => {
    const scrollPosition = window.scrollY;
    if (scrollPosition > 200) {
        document.querySelector('header').classList.add('scrolled');
    } else {
        document.querySelector('header').classList.remove('scrolled');
    }
});

// Initialize Testimonials
updateTestimonials();

// Initialize Menu Category
menuCategories[0].click();

// Add animation to menu items on scroll
const observerOptions = {
    threshold: 0.1
};

const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            entry.target.style.opacity = '1';
            entry.target.style.transform = 'translateY(0)';
        }
    });
}, observerOptions);

document.querySelectorAll('.menu-item').forEach(item => {
    item.style.opacity = '0';
    item.style.transform = 'translateY(20px)';
    item.style.transition = 'all 0.5s ease-out';
    observer.observe(item);
});

This Pen is owned by Sindhuja Sunkari on CodePen.

See more by @sindhu2829 on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.