Juice Corner Landing Page Design | QuickCoder

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Juice Corner - Futuristic Juice Bar</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 
</head>
<body>
    
    <header>
        <div class="logo">
            <i class="fas fa-glass-cheers"></i>
            <h1>Juice Corner</h1>
        </div>
        <div class="menu-toggle">
            <i class="fas fa-bars"></i>
        </div>
        <nav>
            <ul>
                <li><a href="#hero">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#menu">Menu</a></li>
                <li><a href="#features">Features</a></li>
                <li><a href="#testimonials">Testimonials</a></li>
                <li><a href="#gallery">Gallery</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>

<section id="hero">
        <div class="hero-content">
            <h2>Fresh & Healthy Juices for a Better Life</h2>
            <p>Discover our wide range of organic, cold-pressed juices made from the freshest fruits and vegetables. Boost your health with every sip!</p>
            <div class="hero-buttons">
                <a href="#menu" class="btn btn-primary">Explore Menu</a>
                <a href="#contact" class="btn btn-secondary">Order Now</a>
            </div>
        </div>
        <div class="floating-fruits">
            <div class="fruit" style="top: 20%; left: 10%; background-image: url('https://cdn-icons-png.flaticon.com/512/135/135728.png'); animation-delay: 0s;"></div>
            <div class="fruit" style="top: 70%; left: 15%; background-image: url('https://cdn-icons-png.flaticon.com/512/2909/2909808.png'); animation-delay: 1s;"></div>
            <div class="fruit" style="top: 30%; left: 80%; background-image: url('https://cdn-icons-png.flaticon.com/512/415/415682.png'); animation-delay: 2s;"></div>
            <div class="fruit" style="top: 80%; left: 75%; background-image: url('https://cdn-icons-png.flaticon.com/512/135/135761.png'); animation-delay: 3s;"></div>
        </div>
    </section>

<section id="about">
        <h2 class="section-title">About Us</h2>
        <div class="about-content">
            <div class="about-text">
                <h3>Our Story</h3>
                <p>Founded in 2020, Juice Corner started with a simple mission: to provide fresh, healthy, and delicious juices to our community. Our founders, passionate about health and wellness, wanted to create a space where people could enjoy nature's goodness in every sip.</p>
                <p>We source our ingredients from local organic farms to ensure the highest quality and freshness. Our cold-press technology preserves all the nutrients and flavors, giving you the best juice experience possible.</p>
                <p>At Juice Corner, we believe that healthy living should be delicious and accessible to everyone. That's why we're constantly innovating and expanding our menu to cater to all tastes and dietary needs.</p>
                <a href="#features" class="btn btn-primary">Our Features</a>
            </div>
            <div class="about-image">
                <img src="https://images.unsplash.com/photo-1603569283847-aa295f0d016a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Juice Corner Store">
            </div>
        </div>
    </section>

<section id="menu">
        <h2 class="section-title">Our Menu</h2>
        <div class="menu-grid">
            <div class="menu-item">
                <img src="https://images.unsplash.com/photo-1603569283847-aa295f0d016a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Green Detox">
                <div class="menu-item-content">
                    <h3>Green Detox</h3>
                    <p>A refreshing blend of kale, spinach, cucumber, green apple, lemon, and ginger for a powerful detox.</p>
                    <div class="price">$6.99</div>
                </div>
            </div>
            <div class="menu-item">
                <img src="https://images.unsplash.com/photo-1603569283847-aa295f0d016a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Tropical Sunrise">
                <div class="menu-item-content">
                    <h3>Tropical Sunrise</h3>
                    <p>A tropical paradise in a glass with pineapple, mango, orange, and a hint of coconut water.</p>
                    <div class="price">$7.49</div>
                </div>
            </div>
            <div class="menu-item">
                <img src="https://images.unsplash.com/photo-1603569283847-aa295f0d016a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Berry Blast">
                <div class="menu-item-content">
                    <h3>Berry Blast</h3>
                    <p>Antioxidant-rich blend of strawberries, blueberries, raspberries, and blackberries with apple juice.</p>
                    <div class="price">$7.99</div>
                </div>
            </div>
            <div class="menu-item">
                <img src="https://images.unsplash.com/photo-1603569283847-aa295f0d016a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Carrot Kick">
                <div class="menu-item-content">
                    <h3>Carrot Kick</h3>
                    <p>Sweet carrots blended with orange, ginger, and turmeric for a vitamin-packed energy boost.</p>
                    <div class="price">$6.49</div>
                </div>
            </div>
            <div class="menu-item">
                <img src="https://images.unsplash.com/photo-1603569283847-aa295f0d016a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Watermelon Cooler">
                <div class="menu-item-content">
                    <h3>Watermelon Cooler</h3>
                    <p>Refreshing watermelon juice with mint and lime - perfect for hot summer days.</p>
                    <div class="price">$5.99</div>
                </div>
            </div>
            <div class="menu-item">
                <img src="https://images.unsplash.com/photo-1603569283847-aa295f0d016a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Immunity Booster">
                <div class="menu-item-content">
                    <h3>Immunity Booster</h3>
                    <p>Powerful combination of orange, lemon, ginger, turmeric, and a dash of cayenne pepper.</p>
                    <div class="price">$7.29</div>
                </div>
            </div>
        </div>
    </section>

<section id="features">
        <h2 class="section-title">Why Choose Us</h2>
        <div class="features-grid">
            <div class="feature-card">
                <div class="feature-icon">
                    <i class="fas fa-leaf"></i>
                </div>
                <h3>100% Organic</h3>
                <p>All our ingredients are sourced from certified organic farms to ensure the highest quality and purity.</p>
            </div>
            <div class="feature-card">
                <div class="feature-icon">
                    <i class="fas fa-heart"></i>
                </div>
                <h3>Cold-Pressed</h3>
                <p>Our cold-press technology preserves maximum nutrients and enzymes for optimal health benefits.</p>
            </div>
            <div class="feature-card">
                <div class="feature-icon">
                    <i class="fas fa-bolt"></i>
                </div>
                <h3>Quick Service</h3>
                <p>Get your fresh juice in minutes with our efficient preparation and ordering system.</p>
            </div>
            <div class="feature-card">
                <div class="feature-icon">
                    <i class="fas fa-truck"></i>
                </div>
                <h3>Fast Delivery</h3>
                <p>Enjoy our fresh juices at your doorstep with our quick and reliable delivery service.</p>
            </div>
        </div>
    </section>

<section id="testimonials">
        <h2 class="section-title">What Our Customers Say</h2>
        <div class="testimonials-container">
            <div class="testimonial-slider">
                <div class="testimonial">
                    <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Sarah J.">
                    <p>"The Green Detox juice is my daily go-to! I've noticed such a difference in my energy levels since I started drinking it every morning. Juice Corner has changed my life!"</p>
                    <h4>Sarah J.</h4>
                    <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 class="testimonial">
                    <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Michael T.">
                    <p>"As an athlete, I need proper nutrition to perform at my best. The Immunity Booster juice gives me exactly what I need to stay healthy during intense training."</p>
                    <h4>Michael T.</h4>
                    <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 class="testimonial">
                    <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Emily R.">
                    <p>"I love how Juice Corner makes healthy eating so delicious and convenient. The Tropical Sunrise is like a vacation in a bottle - so refreshing!"</p>
                    <h4>Emily R.</h4>
                    <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 class="slider-nav">
                <div class="slider-dot active"></div>
                <div class="slider-dot"></div>
                <div class="slider-dot"></div>
            </div>
        </div>
    </section>

<section id="gallery">
        <h2 class="section-title">Juice Gallery</h2>
        <div class="gallery-grid">
            <div class="gallery-item">
                <img src="https://images.unsplash.com/photo-1603569283847-aa295f0d016a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Fresh Juice">
            </div>
            <div class="gallery-item">
                <img src="https://images.unsplash.com/photo-1603569283847-aa295f0d016a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Juice Bar">
            </div>
            <div class="gallery-item">
                <img src="https://images.unsplash.com/photo-1603569283847-aa295f0d016a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Ingredients">
            </div>
            <div class="gallery-item">
                <img src="https://images.unsplash.com/photo-1603569283847-aa295f0d016a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Juice Making">
            </div>
            <div class="gallery-item">
                <img src="https://images.unsplash.com/photo-1603569283847-aa295f0d016a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Fresh Fruits">
            </div>
            <div class="gallery-item">
                <img src="https://images.unsplash.com/photo-1603569283847-aa295f0d016a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Juice Bottles">
            </div>
        </div>
    </section>

<section id="contact">
        <h2 class="section-title">Contact Us</h2>
        <div class="contact-container">
            <div class="contact-info">
                <h3>Get In Touch</h3>
                <div class="info-item">
                    <div class="info-icon">
                        <i class="fas fa-map-marker-alt"></i>
                    </div>
                    <div class="info-text">
                        <h4>Location</h4>
                        <p>123 Juice Street, Beverage City, BC 12345</p>
                    </div>
                </div>
                <div class="info-item">
                    <div class="info-icon">
                        <i class="fas fa-phone-alt"></i>
                    </div>
                    <div class="info-text">
                        <h4>Phone</h4>
                        <p>(123) 456-7890</p>
                    </div>
                </div>
                <div class="info-item">
                    <div class="info-icon">
                        <i class="fas fa-envelope"></i>
                    </div>
                    <div class="info-text">
                        <h4>Email</h4>
                        <p>info@juicecorner.com</p>
                    </div>
                </div>
                <div class="info-item">
                    <div class="info-icon">
                        <i class="fas fa-clock"></i>
                    </div>
                    <div class="info-text">
                        <h4>Opening Hours</h4>
                        <p>Monday - Friday: 8:00 AM - 8:00 PM</p>
                        <p>Saturday - Sunday: 9:00 AM - 6: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" placeholder="Enter your name" required>
                    </div>
                    <div class="form-group">
                        <label for="email">Your Email</label>
                        <input type="email" id="email" placeholder="Enter your email" required>
                    </div>
                    <div class="form-group">
                        <label for="subject">Subject</label>
                        <input type="text" id="subject" placeholder="Enter subject" required>
                    </div>
                    <div class="form-group">
                        <label for="message">Your Message</label>
                        <textarea id="message" placeholder="Enter your message" required></textarea>
                    </div>
                    <button type="submit" class="btn btn-primary">Send Message</button>
                </form>
            </div>
        </div>
    </section>

<section id="newsletter">
        <div class="newsletter-container">
            <h2 class="section-title">Subscribe to Our Newsletter</h2>
            <p>Stay updated with our latest juices, promotions, and health tips!</p>
            <form class="newsletter-form">
                <input type="email" placeholder="Enter your email address" required>
                <button type="submit">Subscribe</button>
            </form>
        </div>
    </section>

<footer>
        <div class="footer-container">
            <div class="footer-col">
                <h3>Juice Corner</h3>
                <p>Fresh, healthy, and delicious juices made from the finest organic ingredients to boost your health and vitality.</p>
                <div class="social-links">
                    <a href="#"><i class="fab fa-facebook-f"></i></a>
                    <a href="#"><i class="fab fa-twitter"></i></a>
                    <a href="#"><i class="fab fa-instagram"></i></a>
                    <a href="#"><i class="fab fa-pinterest"></i></a>
                </div>
            </div>
            <div class="footer-col">
                <h3>Quick Links</h3>
                <ul>
                    <li><a href="#hero">Home</a></li>
                    <li><a href="#about">About Us</a></li>
                    <li><a href="#menu">Menu</a></li>
                    <li><a href="#features">Features</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
            </div>
            <div class="footer-col">
                <h3>Popular Juices</h3>
                <ul>
                    <li><a href="#">Green Detox</a></li>
                    <li><a href="#">Tropical Sunrise</a></li>
                    <li><a href="#">Berry Blast</a></li>
                    <li><a href="#">Carrot Kick</a></li>
                    <li><a href="#">Immunity Booster</a></li>
                </ul>
            </div>
            <div class="footer-col">
                <h3>Contact Info</h3>
                <ul>
                    <li><i class="fas fa-map-marker-alt"></i> 123 Juice Street, Beverage City</li>
                    <li><i class="fas fa-phone-alt"></i> (123) 456-7890</li>
                    <li><i class="fas fa-envelope"></i> info@juicecorner.com</li>
                </ul>
            </div>
        </div>
        <div class="copyright">
            <p>&copy; 2023 Juice Corner. All Rights Reserved.</p>
        </div>
    </footer>

<div class="back-to-top">
        <i class="fas fa-arrow-up"></i>
    </div>

</body>
</html>

CSS

:root {
            --primary: #FFD700;
            --primary-dark: #FFC000;
            --primary-light: #FFF200;
            --dark: #222;
            --light: #f9f9f9;
            --accent: #FF6B6B;
        }

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

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

/* Header Section */
        header {
            background: linear-gradient(135deg, var(--primary), var(--primary-light));
            padding: 1rem 5%;
            position: fixed;
            width: 100%;
            z-index: 1000;
            box-shadow: 0 5px 20px rgba(0,0,0,0.1);
            display: flex;
            justify-content: space-between;
            align-items: center;
            animation: slideDown 0.5s ease-out;
        }

@keyframes slideDown {
            from { transform: translateY(-100%); }
            to { transform: translateY(0); }
        }

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

.logo i {
            font-size: 2rem;
            color: var(--dark);
            margin-right: 10px;
            animation: pulse 2s infinite;
        }

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

.logo h1 {
            font-size: 1.8rem;
            font-weight: 700;
            color: var(--dark);
            text-transform: uppercase;
            letter-spacing: 2px;
        }

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

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

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

nav ul li a::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            background: var(--dark);
            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(255, 215, 0, 0.8), rgba(255, 215, 0, 0.6)), url('https://images.unsplash.com/photo-1550258987-190a2d41a8ba?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80') no-repeat center center/cover;
            display: flex;
            align-items: center;
            padding: 0 5%;
            position: relative;
            overflow: hidden;
        }

.hero-content {
            max-width: 600px;
            z-index: 10;
            animation: fadeIn 1s ease-out;
        }

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

.hero-content h2 {
            font-size: 3.5rem;
            font-weight: 800;
            margin-bottom: 1rem;
            color: var(--dark);
            line-height: 1.2;
        }

.hero-content p {
            font-size: 1.2rem;
            margin-bottom: 2rem;
            color: var(--dark);
        }

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

.btn:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.2);
        }

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

.btn-secondary {
            background: transparent;
            color: var(--dark);
            border: 2px solid var(--dark);
            margin-left: 1rem;
        }

.btn-secondary:hover {
            background: var(--dark);
            color: var(--primary);
        }

.floating-fruits {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: 1;
        }

.fruit {
            position: absolute;
            width: 80px;
            height: 80px;
            background-size: contain;
            background-repeat: no-repeat;
            opacity: 0.7;
            animation: float 6s infinite ease-in-out;
        }

@keyframes float {
            0%, 100% { transform: translateY(0) rotate(0deg); }
            50% { transform: translateY(-20px) rotate(5deg); }
        }

/* About Section */
        #about {
            padding: 5rem 5%;
            background: var(--light);
            position: relative;
            overflow: hidden;
        }

.section-title {
            text-align: center;
            font-size: 2.5rem;
            margin-bottom: 3rem;
            color: var(--dark);
            position: relative;
            display: inline-block;
            left: 50%;
            transform: translateX(-50%);
        }

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

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

.about-text {
            flex: 1;
            min-width: 300px;
            padding-right: 2rem;
            animation: fadeInLeft 1s ease-out;
        }

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

.about-text h3 {
            font-size: 2rem;
            margin-bottom: 1.5rem;
            color: var(--dark);
        }

.about-text p {
            font-size: 1.1rem;
            line-height: 1.6;
            margin-bottom: 1.5rem;
            color: #555;
        }

.about-image {
            flex: 1;
            min-width: 300px;
            position: relative;
            animation: fadeInRight 1s ease-out;
        }

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

.about-image img {
            width: 100%;
            border-radius: 10px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            transition: transform 0.5s ease;
        }

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

/* Menu Section */
        #menu {
            padding: 5rem 5%;
            background: linear-gradient(rgba(255, 215, 0, 0.1), rgba(255, 215, 0, 0.05));
        }

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

.menu-item {
            background: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            transition: all 0.3s ease;
            animation: fadeInUp 0.5s ease-out;
            animation-fill-mode: both;
        }

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

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

.menu-item:nth-child(1) { animation-delay: 0.1s; }
        .menu-item:nth-child(2) { animation-delay: 0.2s; }
        .menu-item:nth-child(3) { animation-delay: 0.3s; }
        .menu-item:nth-child(4) { animation-delay: 0.4s; }
        .menu-item:nth-child(5) { animation-delay: 0.5s; }
        .menu-item:nth-child(6) { animation-delay: 0.6s; }

.menu-item img {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }

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

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

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

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

/* Features Section */
        #features {
            padding: 5rem 5%;
            background: var(--primary-light);
        }

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

.feature-card {
            background: white;
            padding: 2rem;
            border-radius: 10px;
            text-align: center;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
            transition: all 0.3s ease;
        }

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

.feature-icon {
            font-size: 3rem;
            color: var(--primary-dark);
            margin-bottom: 1.5rem;
        }

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

.feature-card p {
            color: #666;
            line-height: 1.6;
        }

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

.testimonials-container {
            max-width: 1200px;
            margin: 0 auto;
            position: relative;
        }

.testimonial-slider {
            display: flex;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            scroll-behavior: smooth;
            -webkit-overflow-scrolling: touch;
            margin-top: 3rem;
            scrollbar-width: none;
        }

.testimonial-slider::-webkit-scrollbar {
            display: none;
        }

.testimonial {
            min-width: 100%;
            padding: 2rem;
            scroll-snap-align: start;
            background: white;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
            margin-right: 1rem;
            text-align: center;
            transition: all 0.3s ease;
        }

.testimonial:last-child {
            margin-right: 0;
        }

.testimonial:hover {
            transform: scale(1.02);
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
        }

.testimonial img {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            object-fit: cover;
            margin: 0 auto 1rem;
            border: 3px solid var(--primary);
        }

.testimonial p {
            font-size: 1.1rem;
            line-height: 1.6;
            color: #555;
            margin-bottom: 1.5rem;
            font-style: italic;
        }

.testimonial h4 {
            font-size: 1.2rem;
            color: var(--dark);
            margin-bottom: 0.5rem;
        }

.testimonial .rating {
            color: var(--primary-dark);
            font-size: 1rem;
        }

.slider-nav {
            display: flex;
            justify-content: center;
            margin-top: 2rem;
        }

.slider-dot {
            width: 12px;
            height: 12px;
            background: #ddd;
            border-radius: 50%;
            margin: 0 5px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

.slider-dot.active {
            background: var(--primary-dark);
            transform: scale(1.2);
        }

/* Gallery Section */
        #gallery {
            padding: 5rem 5%;
            background: linear-gradient(rgba(255, 215, 0, 0.1), rgba(255, 215, 0, 0.05));
        }

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

.gallery-item {
            position: relative;
            overflow: hidden;
            border-radius: 10px;
            height: 250px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            transition: all 0.5s ease;
        }

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

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

.gallery-item::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.3);
            opacity: 0;
            transition: opacity 0.3s ease;
        }

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

/* Contact Section */
        #contact {
            padding: 5rem 5%;
            background: var(--primary-light);
        }

.contact-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            margin-top: 3rem;
        }

.contact-info {
            flex: 1;
            min-width: 300px;
            padding-right: 2rem;
        }

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

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

.info-icon {
            width: 50px;
            height: 50px;
            background: var(--primary-dark);
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            margin-right: 1rem;
        }

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

.info-text p {
            color: #555;
        }

.contact-form {
            flex: 1;
            min-width: 300px;
            background: white;
            padding: 2rem;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }

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

.form-group label {
            display: block;
            font-size: 1rem;
            margin-bottom: 0.5rem;
            color: var(--dark);
            font-weight: 500;
        }

.form-group input,
        .form-group textarea {
            width: 100%;
            padding: 0.8rem;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 1rem;
            transition: all 0.3s ease;
        }

.form-group input:focus,
        .form-group textarea:focus {
            border-color: var(--primary-dark);
            outline: none;
            box-shadow: 0 0 0 3px rgba(255, 200, 0, 0.2);
        }

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

/* Newsletter Section */
        #newsletter {
            padding: 3rem 5%;
            background: var(--dark);
            color: white;
            text-align: center;
        }

.newsletter-container {
            max-width: 600px;
            margin: 0 auto;
        }

#newsletter .section-title {
            color: white;
        }

#newsletter .section-title::after {
            background: var(--primary);
        }

.newsletter-form {
            display: flex;
            margin-top: 2rem;
        }

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

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

.newsletter-form button {
            padding: 0 2rem;
            background: var(--primary);
            color: var(--dark);
            border: none;
            border-radius: 0 50px 50px 0;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
        }

.newsletter-form button:hover {
            background: var(--primary-light);
        }

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

.footer-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            margin-bottom: 2rem;
        }

.footer-col {
            flex: 1;
            min-width: 200px;
            margin-bottom: 2rem;
        }

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

.footer-col ul {
            list-style: none;
        }

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

.footer-col ul li a {
            color: #ccc;
            text-decoration: none;
            transition: all 0.3s ease;
        }

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

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

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

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

.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: var(--primary);
            color: var(--dark);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            cursor: pointer;
            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: var(--primary-light);
            transform: translateY(-5px);
        }

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

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

nav {
                position: fixed;
                top: 80px;
                left: -100%;
                width: 80%;
                height: calc(100vh - 80px);
                background: white;
                flex-direction: column;
                align-items: center;
                padding: 2rem 0;
                transition: all 0.3s ease;
                box-shadow: 5px 0 15px rgba(0,0,0,0.1);
                z-index: 999;
            }

nav.active {
                left: 0;
            }

nav ul {
                flex-direction: column;
                width: 100%;
            }

nav ul li {
                margin: 0;
                width: 100%;
                text-align: center;
            }

nav ul li a {
                display: block;
                padding: 1rem;
                border-bottom: 1px solid #eee;
            }

.hero-content h2 {
                font-size: 2.5rem;
            }

.hero-buttons {
                display: flex;
                flex-direction: column;
            }

.btn-secondary {
                margin-left: 0;
                margin-top: 1rem;
            }

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

.about-text {
                padding-right: 0;
                margin-bottom: 2rem;
            }

.contact-container {
                flex-direction: column;
            }

.contact-info {
                padding-right: 0;
                margin-bottom: 2rem;
            }
        }

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

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

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

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

.newsletter-form input {
                border-radius: 50px;
                margin-bottom: 1rem;
            }

.newsletter-form button {
                border-radius: 50px;
                padding: 0.8rem;
            }
        }

JavaScript

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

menuToggle.addEventListener('click', () => {
            nav.classList.toggle('active');
            menuToggle.innerHTML = nav.classList.contains('active') ? '<i class="fas fa-times"></i>' : '<i class="fas fa-bars"></i>';
        });

// Close mobile menu when clicking on a link
        document.querySelectorAll('nav ul li a').forEach(link => {
            link.addEventListener('click', () => {
                nav.classList.remove('active');
                menuToggle.innerHTML = '<i class="fas fa-bars"></i>';
            });
        });

// Testimonial Slider
        const slider = document.querySelector('.testimonial-slider');
        const dots = document.querySelectorAll('.slider-dot');
        let currentSlide = 0;

function goToSlide(index) {
            slider.scrollTo({
                left: slider.offsetWidth * index,
                behavior: 'smooth'
            });
            
            dots.forEach(dot => dot.classList.remove('active'));
            dots[index].classList.add('active');
            currentSlide = index;
        }

dots.forEach((dot, index) => {
            dot.addEventListener('click', () => goToSlide(index));
        });

// Auto slide
        setInterval(() => {
            currentSlide = (currentSlide + 1) % dots.length;
            goToSlide(currentSlide);
        }, 5000);

// Back to Top Button
        const backToTopBtn = document.querySelector('.back-to-top');

backToTopBtn.addEventListener('click', () => {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        });

// Smooth scrolling for anchor links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function(e) {
                e.preventDefault();
                
                const targetId = this.getAttribute('href');
                if (targetId === '#') return;
                
                const targetElement = document.querySelector(targetId);
                if (targetElement) {
                    window.scrollTo({
                        top: targetElement.offsetTop - 80,
                        behavior: 'smooth'
                    });
                }
            });
        });

// Animation on scroll
        function animateOnScroll() {
            const elements = document.querySelectorAll('.about-text, .about-image, .menu-item, .feature-card, .gallery-item');
            
            elements.forEach(element => {
                const elementPosition = element.getBoundingClientRect().top;
                const screenPosition = window.innerHeight / 1.3;
                
                if (elementPosition < screenPosition) {
                    element.style.animationPlayState = 'running';
                }
            });
        }

window.addEventListener('scroll', animateOnScroll);
        window.addEventListener('load', animateOnScroll);

Juice Corner Landing Page Design Preview

Download Options