Sweets Corner Template | QuickCoder

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sweets Corner | Artisan Confectionery</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css">
   
</head>
<body>
    
    <header>
        <a href="#" class="logo"><i class="fas fa-candy-cane"></i> Sweets Corner</a>
        <div class="nav-links">
            <a href="#home">Home</a>
            <a href="#about">About</a>
            <a href="#products">Products</a>
            <a href="#gallery">Gallery</a>
            <a href="#testimonials">Testimonials</a>
            <a href="#contact">Contact</a>
        </div>
        <a href="#" class="cta-button">Order Now</a>
        <div class="menu-toggle">
            <i class="fas fa-bars"></i>
        </div>
    </header>

<section class="hero" id="home">
        <div class="hero-content">
            <h1>Artisan Sweets Crafted with Love</h1>
            <p>Discover our handcrafted confectionery made from the finest ingredients. Each sweet tells a story of tradition, passion, and exquisite taste.</p>
            <div class="hero-buttons">
                <a href="#products" class="cta-button slide-reveal">Explore Menu</a>
                <a href="#contact" class="cta-button slide-reveal" style="background: transparent; border: 2px solid var(--primary);">Contact Us</a>
            </div>
        </div>
        <img src="https://images.unsplash.com/photo-1587314168485-3236d6710814?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Assorted Sweets" class="hero-image">
    </section>

<section class="about" id="about">
        <div class="section-header">
            <h2 class="velvet-caption">Our Sweet Story</h2>
            <p>Founded in 2010, Sweets Corner has been delighting customers with traditional recipes and innovative flavors.</p>
        </div>
        <div class="about-content">
            <div class="about-image">
                <img src="https://images.unsplash.com/photo-1563805042-7684c019e1cb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Our Shop">
            </div>
            <div class="about-text">
                <h3 class="slide-reveal">A Tradition of Sweet Excellence</h3>
                <p>Our journey began in a small kitchen with a passion for creating sweets that bring joy. Today, we maintain that same dedication to quality and craftsmanship in every piece we create.</p>
                <p>Using only the finest ingredients sourced from trusted suppliers, our master confectioners blend traditional techniques with modern innovation to create sweets that are truly special.</p>
                <p>From our signature golden fudge to our seasonal specialties, each sweet is made with care and attention to detail that you can taste in every bite.</p>
                <a href="#" class="cta-button slide-reveal" style="display: inline-block; margin-top: 20px;">Learn More</a>
            </div>
        </div>
    </section>

<section class="products" id="products">
        <div class="section-header">
            <h2 class="velvet-caption">Our Sweet Selection</h2>
            <p>Explore our range of handcrafted confectionery, each made with premium ingredients and artisan techniques.</p>
        </div>
        <div class="products-container">
            
            <div class="product-card">
                <div class="product-image">
                    <img src="https://images.unsplash.com/photo-1558326567-98ae2405596b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Golden Fudge">
                    <span class="product-badge">Bestseller</span>
                </div>
                <div class="product-content">
                    <h3>Golden Fudge</h3>
                    <p>Our signature creamy fudge made with pure vanilla and golden syrup for a rich, buttery flavor.</p>
                    <div class="product-price">
                        <span class="price">$12.99</span>
                        <button class="add-to-cart"><i class="fas fa-shopping-cart"></i> Add to Cart</button>
                    </div>
                </div>
            </div>
            
            
            <div class="product-card">
                <div class="product-image">
                    <img src="https://images.unsplash.com/photo-1578985545062-69928b1d9587?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Chocolate Truffles">
                </div>
                <div class="product-content">
                    <h3>Chocolate Truffles</h3>
                    <p>Luxurious dark chocolate ganache coated in premium cocoa powder for an intense chocolate experience.</p>
                    <div class="product-price">
                        <span class="price">$15.99</span>
                        <button class="add-to-cart"><i class="fas fa-shopping-cart"></i> Add to Cart</button>
                    </div>
                </div>
            </div>
            
            
            <div class="product-card">
                <div class="product-image">
                    <img src="https://images.unsplash.com/photo-1603532648955-039310d9ed75?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Fruit Gummies">
                    <span class="product-badge">New</span>
                </div>
                <div class="product-content">
                    <h3>Fruit Gummies</h3>
                    <p>Chewy, fruity gummies made with real fruit juice and natural colors for a burst of flavor.</p>
                    <div class="product-price">
                        <span class="price">$9.99</span>
                        <button class="add-to-cart"><i class="fas fa-shopping-cart"></i> Add to Cart</button>
                    </div>
                </div>
            </div>
            
            
            <div class="product-card">
                <div class="product-image">
                    <img src="https://images.unsplash.com/photo-1587049352851-8d4e89133924?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Caramel Collection">
                </div>
                <div class="product-content">
                    <h3>Caramel Collection</h3>
                    <p>An assortment of soft, buttery caramels in classic, sea salt, and chocolate-dipped varieties.</p>
                    <div class="product-price">
                        <span class="price">$14.99</span>
                        <button class="add-to-cart"><i class="fas fa-shopping-cart"></i> Add to Cart</button>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="carousel-section">
        <div class="section-header">
            <h2 class="velvet-caption">Sweet Moments</h2>
            <p>Discover the craftsmanship behind our confectionery through these sweet moments.</p>
        </div>
        <div class="swiper">
            <div class="swiper-wrapper">
                
                <div class="swiper-slide">
                    <img src="https://images.unsplash.com/photo-1606787366850-de6330128bfc?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1200&q=80" alt="Candy Making">
                    <div class="slide-content">
                        <h3>Artisan Craftsmanship</h3>
                        <p>Each sweet is handcrafted by our skilled confectioners using traditional techniques.</p>
                        <a href="#" class="cta-button">Learn More</a>
                    </div>
                </div>
                
                
                <div class="swiper-slide">
                    <img src="https://images.unsplash.com/photo-1514517521153-1be72277b32f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1200&q=80" alt="Ingredients">
                    <div class="slide-content">
                        <h3>Premium Ingredients</h3>
                        <p>We source only the finest ingredients for exceptional flavor and quality.</p>
                        <a href="#" class="cta-button">Our Suppliers</a>
                    </div>
                </div>
                
                
                <div class="swiper-slide">
                    <img src="https://images.unsplash.com/photo-1542843137-8791a6904d14?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1200&q=80" alt="Packaging">
                    <div class="slide-content">
                        <h3>Beautiful Packaging</h3>
                        <p>Our sweets are presented in elegant packaging perfect for gifts or special occasions.</p>
                        <a href="#" class="cta-button">View Options</a>
                    </div>
                </div>
            </div>
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
            <div class="swiper-pagination"></div>
        </div>
    </section>

<section class="testimonials" id="testimonials">
        <div class="section-header">
            <h2 class="velvet-caption">Sweet Words</h2>
            <p>Hear what our customers say about our delicious confections.</p>
        </div>
        <div class="testimonial-container">
            
            <div class="testimonial-card">
                <div class="testimonial-header">
                    <div class="testimonial-avatar">
                        <img src="https://randomuser.me/api/portraits/women/43.jpg" alt="Sarah J.">
                    </div>
                    <div class="testimonial-author">
                        <h4>Sarah J.</h4>
                        <p>Regular Customer</p>
                    </div>
                </div>
                <div class="testimonial-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>
                <p class="testimonial-text">"The golden fudge is absolutely divine! I order it every month for my book club and it's always the first thing to disappear. The quality is consistently excellent."</p>
            </div>
            
            
            <div class="testimonial-card">
                <div class="testimonial-header">
                    <div class="testimonial-avatar">
                        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Michael T.">
                    </div>
                    <div class="testimonial-author">
                        <h4>Michael T.</h4>
                        <p>First-time Buyer</p>
                    </div>
                </div>
                <div class="testimonial-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>
                <p class="testimonial-text">"I bought the caramel collection as a gift and ended up keeping it for myself! The sea salt caramels are perfectly balanced - sweet with just the right amount of salt."</p>
            </div>
            
            
            <div class="testimonial-card">
                <div class="testimonial-header">
                    <div class="testimonial-avatar">
                        <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Emily R.">
                    </div>
                    <div class="testimonial-author">
                        <h4>Emily R.</h4>
                        <p>Corporate Client</p>
                    </div>
                </div>
                <div class="testimonial-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>
                <p class="testimonial-text">"We've been using Sweets Corner for our corporate gifts for two years now. The presentation is beautiful and the quality is unmatched. Our clients always comment on how special the treats are."</p>
            </div>
            
            
            <div class="testimonial-card">
                <div class="testimonial-header">
                    <div class="testimonial-avatar">
                        <img src="https://randomuser.me/api/portraits/men/54.jpg" alt="David L.">
                    </div>
                    <div class="testimonial-author">
                        <h4>David L.</h4>
                        <p>Seasonal Customer</p>
                    </div>
                </div>
                <div class="testimonial-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>
                <p class="testimonial-text">"The holiday specials are worth waiting for all year! The peppermint bark is my family's favorite. We stock up every December to last us through the winter."</p>
            </div>
        </div>
    </section>

<section class="gallery" id="gallery">
        <div class="section-header">
            <h2 class="velvet-caption">Sweet Gallery</h2>
            <p>A visual feast of our confectionery creations.</p>
        </div>
        <div class="gallery-container">
            
            <div class="gallery-item">
                <img src="https://images.unsplash.com/photo-1563805042-7684c019e1cb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Assorted Sweets">
                <div class="gallery-caption">
                    <h3>Assorted Collection</h3>
                    <p>Our signature selection of artisan sweets</p>
                </div>
            </div>
            
            
            <div class="gallery-item">
                <img src="https://images.unsplash.com/photo-1558326567-98ae2405596b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Fudge Making">
                <div class="gallery-caption">
                    <h3>Fudge Making</h3>
                    <p>Our artisan process for perfect fudge</p>
                </div>
            </div>
            
            
            <div class="gallery-item">
                <img src="https://images.unsplash.com/photo-1578985545062-69928b1d9587?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Chocolate Truffles">
                <div class="gallery-caption">
                    <h3>Chocolate Truffles</h3>
                    <p>Hand-rolled in premium cocoa</p>
                </div>
            </div>
            
            
            <div class="gallery-item">
                <img src="https://images.unsplash.com/photo-1603532648955-039310d9ed75?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Fruit Gummies">
                <div class="gallery-caption">
                    <h3>Fruit Gummies</h3>
                    <p>Made with real fruit juice</p>
                </div>
            </div>
            
            
            <div class="gallery-item">
                <img src="https://images.unsplash.com/photo-1587049352851-8d4e89133924?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Caramels">
                <div class="gallery-caption">
                    <h3>Buttery Caramels</h3>
                    <p>Slow-cooked to perfection</p>
                </div>
            </div>
            
            
            <div class="gallery-item">
                <img src="https://images.unsplash.com/photo-1514517521153-1be72277b32f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Ingredients">
                <div class="gallery-caption">
                    <h3>Premium Ingredients</h3>
                    <p>Only the finest for our sweets</p>
                </div>
            </div>
            
            
            <div class="gallery-item">
                <img src="https://images.unsplash.com/photo-1542843137-8791a6904d14?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Packaging">
                <div class="gallery-caption">
                    <h3>Gift Packaging</h3>
                    <p>Beautiful presentation for any occasion</p>
                </div>
            </div>
            
            
            <div class="gallery-item">
                <img src="https://images.unsplash.com/photo-1606787366850-de6330128bfc?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Making Sweets">
                <div class="gallery-caption">
                    <h3>Artisan Process</h3>
                    <p>Handcrafted with care</p>
                </div>
            </div>
        </div>
    </section>

<section class="contact" id="contact">
        <div class="section-header">
            <h2 class="velvet-caption" style="color: white;">Get In Touch</h2>
            <p style="color: rgba(255, 255, 255, 0.8);">We'd love to hear from you! Reach out for orders, questions, or just to say hello.</p>
        </div>
        <div class="contact-container">
            <div class="contact-info">
                <h3>Contact Information</h3>
                <div class="contact-details">
                    <div class="contact-item">
                        <i class="fas fa-map-marker-alt"></i>
                        <p>123 Sweet Street, Confection District<br>New York, NY 10001</p>
                    </div>
                    <div class="contact-item">
                        <i class="fas fa-phone"></i>
                        <p>+1 (555) 123-4567</p>
                    </div>
                    <div class="contact-item">
                        <i class="fas fa-envelope"></i>
                        <p>hello@sweetscorner.com</p>
                    </div>
                    <div class="contact-item">
                        <i class="fas fa-clock"></i>
                        <p>Monday - Friday: 9am - 8pm<br>Saturday - Sunday: 10am - 6pm</p>
                    </div>
                </div>
                <h3 style="margin-top: 40px;">Follow Us</h3>
                <div class="social-links">
                    <a href="#"><i class="fab fa-facebook-f"></i></a>
                    <a href="#"><i class="fab fa-instagram"></i></a>
                    <a href="#"><i class="fab fa-twitter"></i></a>
                    <a href="#"><i class="fab fa-pinterest"></i></a>
                </div>
            </div>
            <div class="contact-form">
                <h3>Send Us a Message</h3>
                <form>
                    <div class="form-group">
                        <label for="name">Your Name</label>
                        <input type="text" id="name" required>
                    </div>
                    <div class="form-group">
                        <label for="email">Email Address</label>
                        <input type="email" id="email" required>
                    </div>
                    <div class="form-group">
                        <label for="subject">Subject</label>
                        <input type="text" id="subject" required>
                    </div>
                    <div class="form-group">
                        <label for="message">Your Message</label>
                        <textarea id="message" required></textarea>
                    </div>
                    <button type="submit" class="submit-btn">Send Message</button>
                </form>
            </div>
        </div>
    </section>

<footer>
        <div class="footer-container">
            <div class="footer-col">
                <h4>Sweets Corner</h4>
                <p>Artisan confectionery crafted with love and the finest ingredients since 2010.</p>
                <div class="social-links">
                    <a href="#"><i class="fab fa-facebook-f"></i></a>
                    <a href="#"><i class="fab fa-instagram"></i></a>
                    <a href="#"><i class="fab fa-twitter"></i></a>
                    <a href="#"><i class="fab fa-pinterest"></i></a>
                </div>
            </div>
            <div class="footer-col">
                <h4>Quick Links</h4>
                <ul class="footer-links">
                    <li><a href="#home">Home</a></li>
                    <li><a href="#about">About Us</a></li>
                    <li><a href="#products">Our Products</a></li>
                    <li><a href="#gallery">Gallery</a></li>
                    <li><a href="#testimonials">Testimonials</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
            </div>
            <div class="footer-col">
                <h4>Products</h4>
                <ul class="footer-links">
                    <li><a href="#">Golden Fudge</a></li>
                    <li><a href="#">Chocolate Truffles</a></li>
                    <li><a href="#">Fruit Gummies</a></li>
                    <li><a href="#">Caramel Collection</a></li>
                    <li><a href="#">Seasonal Specials</a></li>
                    <li><a href="#">Gift Boxes</a></li>
                </ul>
            </div>
            <div class="footer-col">
                <h4>Newsletter</h4>
                <p>Subscribe to our newsletter for sweet updates and special offers.</p>
                <form>
                    <div class="form-group">
                        <input type="email" placeholder="Your Email Address" required>
                    </div>
                    <button type="submit" class="submit-btn" style="width: 100%;">Subscribe</button>
                </form>
            </div>
        </div>
        <div class="copyright">
            <p>&copy; 2023 Sweets Corner. All Rights Reserved.</p>
        </div>
    </footer>

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

<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>

</body>
</html>

CSS

:root {
            --primary: #FFD700;
            --primary-dark: #FFC000;
            --primary-light: #FFF2CC;
            --text: #333333;
            --text-light: #666666;
            --bg: #FFF9E6;
            --glass: rgba(255, 255, 255, 0.25);
            --glass-border: rgba(255, 255, 255, 0.4);
            --shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
        }

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

body {
            background-color: var(--bg);
            color: var(--text);
            overflow-x: hidden;
        }

/* Header Section */
        header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            padding: 20px 5%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 1000;
            backdrop-filter: blur(10px);
            background: var(--glass);
            border-bottom: 1px solid var(--glass-border);
        }

.logo {
            font-size: 28px;
            font-weight: 700;
            color: var(--primary-dark);
            text-decoration: none;
            display: flex;
            align-items: center;
        }

.logo i {
            margin-right: 10px;
            font-size: 32px;
        }

.nav-links {
            display: flex;
            gap: 30px;
        }

.nav-links a {
            color: var(--text);
            text-decoration: none;
            font-weight: 500;
            position: relative;
            transition: color 0.3s;
        }

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

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

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

.cta-button {
            background: var(--primary);
            color: var(--text);
            padding: 10px 25px;
            border-radius: 50px;
            font-weight: 600;
            text-decoration: none;
            transition: all 0.3s;
            box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
        }

.cta-button:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(255, 215, 0, 0.4);
        }

.menu-toggle {
            display: none;
            font-size: 24px;
            cursor: pointer;
        }

/* Hero Section */
        .hero {
            height: 100vh;
            display: flex;
            align-items: center;
            padding: 0 5%;
            position: relative;
            overflow: hidden;
        }

.hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(45deg, rgba(255, 215, 0, 0.1), rgba(255, 255, 255, 0.1));
            z-index: -1;
        }

.hero-content {
            max-width: 600px;
        }

.hero h1 {
            font-size: 64px;
            margin-bottom: 20px;
            line-height: 1.2;
            color: var(--text);
            opacity: 0;
            transform: translateY(30px);
            animation: slideUp 1s 0.5s forwards;
        }

.hero p {
            font-size: 18px;
            margin-bottom: 30px;
            color: var(--text-light);
            opacity: 0;
            transform: translateY(30px);
            animation: slideUp 1s 0.7s forwards;
        }

.hero-buttons {
            display: flex;
            gap: 20px;
            opacity: 0;
            transform: translateY(30px);
            animation: slideUp 1s 0.9s forwards;
        }

.hero-image {
            position: absolute;
            right: 5%;
            bottom: 0;
            height: 90%;
            opacity: 0;
            transform: translateX(100px);
            animation: slideIn 1s 1.1s forwards;
        }

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

@keyframes slideIn {
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

/* About Section */
        .about {
            padding: 100px 5%;
            background: var(--glass);
            backdrop-filter: blur(10px);
            border-radius: 30px;
            margin: 50px 5%;
            border: 1px solid var(--glass-border);
            box-shadow: var(--shadow);
            position: relative;
            overflow: hidden;
        }

.about::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(255, 215, 0, 0.05), transparent 70%);
            z-index: -1;
        }

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

.section-header h2 {
            font-size: 42px;
            margin-bottom: 15px;
            position: relative;
            display: inline-block;
        }

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

.section-header p {
            color: var(--text-light);
            max-width: 700px;
            margin: 0 auto;
        }

.about-content {
            display: flex;
            align-items: center;
            gap: 50px;
        }

.about-image {
            flex: 1;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
        }

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

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

.about-text {
            flex: 1;
        }

.about-text h3 {
            font-size: 32px;
            margin-bottom: 20px;
            color: var(--primary-dark);
        }

.about-text p {
            margin-bottom: 20px;
            line-height: 1.8;
            color: var(--text-light);
        }

/* Products Section */
        .products {
            padding: 100px 5%;
        }

.products-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 30px;
            margin-top: 50px;
        }

.product-card {
            background: var(--glass);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            overflow: hidden;
            border: 1px solid var(--glass-border);
            box-shadow: var(--shadow);
            transition: all 0.3s;
            position: relative;
        }

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

.product-image {
            height: 250px;
            overflow: hidden;
            position: relative;
        }

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

.product-card:hover .product-image img {
            transform: scale(1.1);
        }

.product-badge {
            position: absolute;
            top: 20px;
            right: 20px;
            background: var(--primary);
            color: var(--text);
            padding: 5px 15px;
            border-radius: 50px;
            font-weight: 600;
            font-size: 14px;
        }

.product-content {
            padding: 20px;
        }

.product-content h3 {
            font-size: 22px;
            margin-bottom: 10px;
        }

.product-content p {
            color: var(--text-light);
            margin-bottom: 15px;
            line-height: 1.6;
        }

.product-price {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 20px;
        }

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

.add-to-cart {
            background: var(--primary);
            color: var(--text);
            border: none;
            padding: 8px 20px;
            border-radius: 50px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            gap: 8px;
        }

.add-to-cart:hover {
            background: var(--primary-dark);
            transform: translateY(-2px);
        }

/* Carousel Section */
        .carousel-section {
            padding: 100px 5%;
            background: linear-gradient(135deg, var(--primary-light), white);
        }

.swiper {
            width: 100%;
            height: 500px;
            border-radius: 30px;
            overflow: hidden;
            box-shadow: 0 30px 50px rgba(0, 0, 0, 0.1);
        }

.swiper-slide {
            position: relative;
        }

.swiper-slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

.slide-content {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            padding: 50px;
            background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
            color: white;
            transform: translateY(100%);
            transition: transform 0.5s;
        }

.swiper-slide-active .slide-content {
            transform: translateY(0);
        }

.slide-content h3 {
            font-size: 32px;
            margin-bottom: 10px;
        }

.slide-content p {
            margin-bottom: 20px;
            opacity: 0.9;
        }

.swiper-button-next, .swiper-button-prev {
            color: var(--primary);
            background: rgba(255, 255, 255, 0.3);
            width: 50px;
            height: 50px;
            border-radius: 50%;
            backdrop-filter: blur(5px);
        }

.swiper-button-next::after, .swiper-button-prev::after {
            font-size: 20px;
        }

.swiper-pagination-bullet-active {
            background: var(--primary);
        }

/* Testimonials Section */
        .testimonials {
            padding: 100px 5%;
            position: relative;
        }

.testimonials::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('https://images.unsplash.com/photo-1551024506-0bccd828d307?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80') center/cover;
            opacity: 0.1;
            z-index: -1;
        }

.testimonial-container {
            display: flex;
            gap: 30px;
            margin-top: 50px;
            overflow-x: auto;
            padding-bottom: 30px;
            scroll-snap-type: x mandatory;
        }

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

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

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

.testimonial-card {
            min-width: 350px;
            background: var(--glass);
            backdrop-filter: blur(10px);
            padding: 30px;
            border-radius: 20px;
            border: 1px solid var(--glass-border);
            box-shadow: var(--shadow);
            scroll-snap-align: start;
        }

.testimonial-header {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }

.testimonial-avatar {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            overflow: hidden;
            margin-right: 20px;
        }

.testimonial-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

.testimonial-author h4 {
            font-size: 18px;
            margin-bottom: 5px;
        }

.testimonial-author p {
            color: var(--text-light);
            font-size: 14px;
        }

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

.testimonial-text {
            line-height: 1.8;
            color: var(--text-light);
            font-style: italic;
        }

/* Gallery Section */
        .gallery {
            padding: 100px 5%;
            background: var(--primary-light);
        }

.gallery-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 20px;
            margin-top: 50px;
        }

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

.gallery-item:hover {
            transform: scale(1.03);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
        }

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

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

.gallery-caption {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            padding: 20px;
            background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
            color: white;
            transform: translateY(100%);
            transition: transform 0.3s;
        }

.gallery-item:hover .gallery-caption {
            transform: translateY(0);
        }

.gallery-caption h3 {
            font-size: 18px;
            margin-bottom: 5px;
        }

.gallery-caption p {
            font-size: 14px;
            opacity: 0.8;
        }

/* Contact Section */
        .contact {
            padding: 100px 5%;
            background: url('https://images.unsplash.com/photo-1606787366850-de6330128bfc?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80') center/cover;
            position: relative;
        }

.contact::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            z-index: 0;
        }

.contact-container {
            position: relative;
            z-index: 1;
            display: flex;
            gap: 50px;
        }

.contact-info {
            flex: 1;
            background: var(--glass);
            backdrop-filter: blur(10px);
            padding: 50px;
            border-radius: 30px;
            border: 1px solid var(--glass-border);
            box-shadow: var(--shadow);
        }

.contact-info h3 {
            font-size: 32px;
            margin-bottom: 30px;
            color: white;
        }

.contact-details {
            margin-bottom: 40px;
        }

.contact-item {
            display: flex;
            align-items: flex-start;
            margin-bottom: 20px;
            color: white;
        }

.contact-item i {
            font-size: 20px;
            margin-right: 15px;
            color: var(--primary);
        }

.contact-item p {
            line-height: 1.6;
        }

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

.social-links a {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: var(--glass);
            border: 1px solid var(--glass-border);
            color: white;
            transition: all 0.3s;
        }

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

.contact-form {
            flex: 1;
            background: var(--glass);
            backdrop-filter: blur(10px);
            padding: 50px;
            border-radius: 30px;
            border: 1px solid var(--glass-border);
            box-shadow: var(--shadow);
        }

.contact-form h3 {
            font-size: 32px;
            margin-bottom: 30px;
            color: white;
        }

.form-group {
            margin-bottom: 20px;
        }

.form-group label {
            display: block;
            margin-bottom: 8px;
            color: white;
        }

.form-group input,
        .form-group textarea {
            width: 100%;
            padding: 12px 15px;
            border-radius: 10px;
            border: 1px solid var(--glass-border);
            background: rgba(255, 255, 255, 0.1);
            color: white;
            font-size: 16px;
            transition: all 0.3s;
        }

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

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

.submit-btn {
            background: var(--primary);
            color: var(--text);
            border: none;
            padding: 12px 30px;
            border-radius: 50px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            font-size: 16px;
        }

.submit-btn:hover {
            background: var(--primary-dark);
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(255, 215, 0, 0.3);
        }

/* Footer */
        footer {
            background: var(--text);
            color: white;
            padding: 70px 5% 30px;
        }

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

.footer-col h4 {
            font-size: 20px;
            margin-bottom: 25px;
            position: relative;
            color: var(--primary);
        }

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

.footer-col p {
            margin-bottom: 20px;
            line-height: 1.8;
            opacity: 0.8;
        }

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

.footer-links li {
            margin-bottom: 15px;
        }

.footer-links a {
            color: white;
            text-decoration: none;
            opacity: 0.8;
            transition: all 0.3s;
            display: inline-block;
        }

.footer-links a:hover {
            opacity: 1;
            color: var(--primary);
            transform: translateX(5px);
        }

.footer-col .social-links {
            margin-top: 20px;
        }

.copyright {
            text-align: center;
            padding-top: 30px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            opacity: 0.8;
        }

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

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

.back-to-top:hover {
            background: var(--primary-dark);
            transform: translateY(-3px);
        }

/* Responsive Styles */
        @media (max-width: 1200px) {
            .hero h1 {
                font-size: 54px;
            }
            
            .hero-image {
                height: 80%;
            }
        }

@media (max-width: 992px) {
            .hero {
                flex-direction: column;
                text-align: center;
                justify-content: center;
                padding-top: 100px;
            }
            
            .hero-content {
                max-width: 100%;
                margin-bottom: 50px;
            }
            
            .hero-buttons {
                justify-content: center;
            }
            
            .hero-image {
                position: relative;
                right: auto;
                height: auto;
                max-width: 100%;
            }
            
            .about-content {
                flex-direction: column;
            }
            
            .contact-container {
                flex-direction: column;
            }
        }

@media (max-width: 768px) {
            .nav-links {
                position: fixed;
                top: 80px;
                left: -100%;
                width: 100%;
                height: calc(100vh - 80px);
                background: var(--glass);
                backdrop-filter: blur(10px);
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 40px;
                transition: left 0.3s;
            }
            
            .nav-links.active {
                left: 0;
            }
            
            .menu-toggle {
                display: block;
            }
            
            .hero h1 {
                font-size: 42px;
            }
            
            .section-header h2 {
                font-size: 36px;
            }
            
            .swiper {
                height: 400px;
            }
            
            .slide-content {
                padding: 30px;
            }
            
            .slide-content h3 {
                font-size: 24px;
            }
        }

@media (max-width: 576px) {
            .hero h1 {
                font-size: 36px;
            }
            
            .hero p {
                font-size: 16px;
            }
            
            .hero-buttons {
                flex-direction: column;
                gap: 15px;
            }
            
            .section-header h2 {
                font-size: 30px;
            }
            
            .swiper {
                height: 300px;
            }
            
            .slide-content {
                padding: 20px;
            }
            
            .slide-content h3 {
                font-size: 20px;
            }
            
            .testimonial-card {
                min-width: 280px;
            }
        }

/* Velvet Caption Reveal Effect */
        .velvet-caption {
            position: relative;
            overflow: hidden;
        }

.velvet-caption::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(45deg, var(--primary), var(--primary-dark));
            opacity: 0;
            transition: opacity 0.5s;
            z-index: -1;
        }

.velvet-caption:hover::before {
            opacity: 0.1;
        }

/* Elegant Slide Reveal */
        .slide-reveal {
            position: relative;
            overflow: hidden;
        }

.slide-reveal::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--primary);
            transform: translateX(-100%);
            transition: transform 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
            z-index: -1;
        }

.slide-reveal:hover::after {
            transform: translateX(0);
        }

.slide-reveal:hover {
            color: var(--text);
        }

JavaScript

// Mobile Menu Toggle
        const menuToggle = document.querySelector('.menu-toggle');
        const navLinks = document.querySelector('.nav-links');
        
        menuToggle.addEventListener('click', () => {
            navLinks.classList.toggle('active');
            menuToggle.innerHTML = navLinks.classList.contains('active') ? 
                '<i class="fas fa-times"></i>' : '<i class="fas fa-bars"></i>';
        });
        
        // Close mobile menu when clicking a link
        document.querySelectorAll('.nav-links a').forEach(link => {
            link.addEventListener('click', () => {
                navLinks.classList.remove('active');
                menuToggle.innerHTML = '<i class="fas fa-bars"></i>';
            });
        });
        
        // Initialize Swiper
        const swiper = new Swiper('.swiper', {
            loop: true,
            autoplay: {
                delay: 5000,
                disableOnInteraction: false,
            },
            effect: 'fade',
            fadeEffect: {
                crossFade: true
            },
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
        });
        
        // Back to Top Button
        const backToTop = document.querySelector('.back-to-top');
        
        window.addEventListener('scroll', () => {
            if (window.pageYOffset > 300) {
                backToTop.classList.add('active');
            } else {
                backToTop.classList.remove('active');
            }
        });
        
        backToTop.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('.velvet-caption, .slide-reveal, .product-card, .gallery-item, .testimonial-card');
            
            elements.forEach(element => {
                const elementPosition = element.getBoundingClientRect().top;
                const screenPosition = window.innerHeight / 1.2;
                
                if (elementPosition < screenPosition) {
                    element.style.opacity = '1';
                    element.style.transform = 'translateY(0)';
                }
            });
        }
        
        // Set initial state for animated elements
        document.querySelectorAll('.velvet-caption, .slide-reveal, .product-card, .gallery-item, .testimonial-card').forEach(element => {
            element.style.opacity = '0';
            element.style.transform = 'translateY(30px)';
            element.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
        });
        
        window.addEventListener('scroll', animateOnScroll);
        window.addEventListener('load', animateOnScroll);

Sweets Corner Template Preview

Download Options