Gift Shop Template | QuickCoder | The frontend studio

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Giftopia - Thoughtful Gifts for Every Occasion</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
   
</head>
<body>

<header id="main-header">
        <div class="container">
            <a href="#" class="logo">Gift<span>opia</span></a>
            <nav>
                <ul class="nav-links">
                    <li><a href="#about">About</a></li>
                    <li><a href="#categories">Categories</a></li>
                    <li><a href="#testimonials">Testimonials</a></li>
                    <li><a href="#blog">Blog</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
            </nav>
            <div class="hamburger">
                <i class="fas fa-bars"></i>
            </div>
        </div>
    </header>

<section class="hero" id="home">
        <div class="hero-content">
            <h1>Thoughtfully Curated Gifts, Delivered with Care</h1>
            <p>Your one-stop destination for finding the perfect gift for any special moment.</p>
            <a href="#featured" class="cta-button">Shop Now</a>
        </div>
    </section>

<section id="about">
        <div class="container">
            <h2 class="section-title animate-on-scroll">Our Story</h2>
            <div class="about-content">
                <div class="about-image animate-on-scroll">
                    <img src="https://images.pexels.com/photos/5709063/pexels-photo-5709063.jpeg" alt="A person receiving a gift, symbolizing our mission.">
                </div>
                <div class="about-text animate-on-scroll">
                    <h3>The Art of Giving Made Simple</h3>
                    <p>At Giftopia, we're passionate about making every gift-giving experience memorable. We believe a thoughtful present is a powerful way to show you care. Our mission is to take the stress out of finding the perfect item, offering a hand-picked selection of unique and high-quality gifts for every occasion and personality.</p>
                    <p>We work with independent artists and ethical brands to ensure that every gift not only looks beautiful but also tells a story. From the moment you browse our collection to the joy of seeing your loved one's face, we're with you every step of the way.</p>
                </div>
            </div>
        </div>
    </section>

<section id="categories">
        <div class="container">
            <h2 class="section-title animate-on-scroll">Shop by Category</h2>
            <div class="categories-grid">
                <div class="category-card animate-on-scroll delay-1">
                    <img src="https://images.pexels.com/photos/17796/christmas-xmas-gifts-presents.jpg" alt="Birthday gifts category">
                    <h4>Birthday Gifts</h4>
                </div>
                <div class="category-card animate-on-scroll delay-2">
                    <img src="https://images.pexels.com/photos/3309878/pexels-photo-3309878.jpeg" alt="Anniversary gifts category">
                    <h4>Anniversary Gifts</h4>
                </div>
                <div class="category-card animate-on-scroll delay-3">
                    <img src="https://images.pexels.com/photos/6087540/pexels-photo-6087540.jpeg" alt="Wedding gifts category">
                    <h4>Wedding & Housewarming</h4>
                </div>
            
            </div>
        </div>
    </section>

<section id="featured">
        <div class="container">
            <h2 class="section-title animate-on-scroll">Featured Products</h2>
            <div class="featured-grid">
                <div class="product-card animate-on-scroll delay-1">
                    <img src="https://images.pexels.com/photos/1474264/pexels-photo-1474264.jpeg" alt="Product 1: Artisan Chocolate Box">
                    <div class="product-info">
                        <h4>Artisan Chocolate Box</h4>
                        <p>$45.00</p>
                    </div>
                </div>
                <div class="product-card animate-on-scroll delay-2">
                    <img src="https://images.pexels.com/photos/1832562/pexels-photo-1832562.jpeg" alt="Product 2: Scented Candle Set">
                    <div class="product-info">
                        <h4>Lavender Scented Candle</h4>
                        <p>$35.00</p>
                    </div>
                </div>
           
                <div class="product-card animate-on-scroll delay-4">
                    <img src="https://images.pexels.com/photos/27902293/pexels-photo-27902293.jpeg" alt="Product 4: Gourmet Coffee and Mug">
                    <div class="product-info">
                        <h4>Gourmet Coffee Kit</h4>
                        <p>$50.00</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section id="why-us">
        <div class="container">
            <h2 class="section-title animate-on-scroll">Why Choose Us?</h2>
            <div class="why-us-grid">
                <div class="why-us-card animate-on-scroll delay-1">
                    <i class="fas fa-box-open"></i>
                    <h4>Thoughtful Curation</h4>
                    <p>We hand-select every item to ensure it's high-quality and unique, perfect for special moments.</p>
                </div>
                <div class="why-us-card animate-on-scroll delay-2">
                    <i class="fas fa-heart"></i>
                    <h4>Exceptional Service</h4>
                    <p>Our team is dedicated to providing a seamless shopping experience from start to finish.</p>
                </div>
                <div class="why-us-card animate-on-scroll delay-3">
                    <i class="fas fa-gift"></i>
                    <h4>Beautifully Packaged</h4>
                    <p>Each gift arrives beautifully wrapped, ready to be presented to your loved one.</p>
                </div>
                <div class="why-us-card animate-on-scroll delay-4">
                    <i class="fas fa-shipping-fast"></i>
                    <h4>Fast & Reliable Shipping</h4>
                    <p>We partner with trusted carriers to ensure your gifts arrive safely and on time.</p>
                </div>
            </div>
        </div>
    </section>

<section id="testimonials">
        <div class="container">
            <h2 class="section-title animate-on-scroll">What Our Customers Say</h2>
            <div class="testimonials-slider animate-on-scroll">
                <div class="testimonial-card">
                    <p>"The gift basket I ordered was beyond my expectations. The quality and presentation were superb. Will definitely be a returning customer!"</p>
                    <h5>- Jessica M.</h5>
                    <small>Happy Gifter</small>
                </div>
                <div class="testimonial-card">
                    <p>"I found the perfect personalized gift here. The customer service was amazing and the shipping was incredibly fast. Thank you Giftopia!"</p>
                    <h5>- Alex T.</h5>
                    <small>Satisfied Customer</small>
                </div>
                <div class="testimonial-card">
                    <p>"I highly recommend Giftopia. The variety of unique gifts and the beautiful packaging make it my go-to for all occasions."</p>
                    <h5>- Emily C.</h5>
                    <small>Repeat Shopper</small>
                </div>
                <div class="testimonial-card">
                    <p>"I was so impressed with the attention to detail. Every product felt special and carefully chosen. Fantastic experience."</p>
                    <h5>- Michael P.</h5>
                    <small>New Customer</small>
                </div>
            </div>
        </div>
    </section>

<section id="blog">
        <div class="container">
            <h2 class="section-title animate-on-scroll">From Our Blog</h2>
            <div class="blog-grid">
                <div class="blog-card animate-on-scroll delay-1">
                    <img src="https://images.pexels.com/photos/1050256/pexels-photo-1050256.jpeg" alt="Tips for gift wrapping">
                    <div class="blog-info">
                        <h4>Mastering the Art of Gift Wrapping</h4>
                        <small>July 25, 2025</small>
                        <p>Elevate your presents with simple yet stunning wrapping techniques and eco-friendly ideas.</p>
                    </div>
                </div>
                <div class="blog-card animate-on-scroll delay-2">
                    <img src="https://images.pexels.com/photos/5486833/pexels-photo-5486833.jpeg" alt="DIY gift ideas">
                    <div class="blog-info">
                        <h4>5 DIY Gifts Your Friends Will Love</h4>
                        <small>July 20, 2025</small>
                        <p>Discover creative and heartfelt handmade gift ideas for birthdays and special occasions.</p>
                    </div>
                </div>
                <div class="blog-card animate-on-scroll delay-3">
                    <img src="https://images.pexels.com/photos/5037267/pexels-photo-5037267.jpeg" alt="Sustainable gift guide">
                    <div class="blog-info">
                        <h4>A Guide to Sustainable Gifting</h4>
                        <small>July 15, 2025</small>
                        <p>Learn how to choose thoughtful gifts that are also kind to the planet with our sustainable guide.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section id="cta-section" class="animate-on-scroll">
        <div class="container">
            <h2>Ready to Find the Perfect Gift?</h2>
            <p>Browse our curated collection and find something truly special for your loved ones today.</p>
            <a href="#featured" class="cta-button">Start Shopping Now</a>
        </div>
    </section>

<section id="contact">
        <div class="container">
            <h2 class="section-title animate-on-scroll">Get in Touch</h2>
            <div class="contact-content">
                <div class="contact-info animate-on-scroll">
                    <h3>Contact Information</h3>
                    <p><strong>Address:</strong> 123 Giftopia Lane, Sunshine City, 12345</p>
                    <p><strong>Email:</strong> info@giftopia.com</p>
                    <p><strong>Phone:</strong> +1 (555) 123-4567</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-p"></i></a>
                    </div>
                </div>
                <div class="contact-form animate-on-scroll">
                    <h3>Send Us a Message</h3>
                    <form>
                        <input type="text" name="name" placeholder="Your Name" required>
                        <input type="email" name="email" placeholder="Your Email" required>
                        <textarea name="message" rows="6" placeholder="Your Message" required></textarea>
                        <button type="submit">Send Message</button>
                    </form>
                </div>
            </div>
        </div>
    </section>

<footer>
        <div class="container">
            <div class="footer-content">
                <div class="footer-column animate-on-scroll">
                    <h4>Giftopia</h4>
                    <p>Your destination for unique and thoughtful gifts. We believe in spreading happiness one gift at a time.</p>
                </div>
                <div class="footer-column animate-on-scroll">
                    <h4>Quick Links</h4>
                    <ul>
                        <li><a href="#about">About Us</a></li>
                        <li><a href="#featured">Shop</a></li>
                        <li><a href="#blog">Blog</a></li>
                        <li><a href="#contact">Contact</a></li>
                    </ul>
                </div>
                <div class="footer-column animate-on-scroll">
                    <h4>Support</h4>
                    <ul>
                        <li><a href="#">FAQs</a></li>
                        <li><a href="#">Shipping & Returns</a></li>
                        <li><a href="#">Privacy Policy</a></li>
                        <li><a href="#">Terms of Service</a></li>
                    </ul>
                </div>
                <div class="footer-column animate-on-scroll">
                    <h4>Stay Connected</h4>
                    <p>Subscribe to our newsletter for exclusive deals and updates.</p>
                    <div class="newsletter-form">
                        <input type="email" placeholder="Your email address">
                        <button type="submit">Subscribe</button>
                    </div>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2025 Giftopia. All rights reserved. </p>
            </div>
        </div>
    </footer>
    
  
</body>
</html>

CSS

:root {
            --primary-color: #FFD700; /* Yellow */
            --secondary-color: #2c3e50; /* Dark Blue */
            --text-color: #555;
            --light-color: #f4f7f9;
            --white: #fff;
            --poppins: 'Poppins', sans-serif;
        }

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

html {
            scroll-behavior: smooth;
        }

body {
            font-family: var(--poppins);
            color: var(--text-color);
            background-color: var(--white);
            line-height: 1.6;
            overflow-x: hidden;
        }

.container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 2rem;
        }

/* Animations */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        @keyframes slideInUp {
            from { opacity: 0; transform: translateY(50px); }
            to { opacity: 1; transform: translateY(0); }
        }
        @keyframes scaleIn {
            from { opacity: 0; transform: scale(0.8); }
            to { opacity: 1; transform: scale(1); }
        }
        @keyframes gradientShift {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

.animate-on-scroll {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 1s ease-out, transform 1s ease-out;
        }
        .animate-on-scroll.in-view {
            opacity: 1;
            transform: translateY(0);
        }
        .delay-1 { transition-delay: 0.1s; }
        .delay-2 { transition-delay: 0.2s; }
        .delay-3 { transition-delay: 0.3s; }
        .delay-4 { transition-delay: 0.4s; }

/* Header */
        header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            background: var(--white);
            box-shadow: 0 4px 20px rgba(0,0,0,0.08);
            z-index: 1000;
            padding: 1rem 0;
            transition: all 0.3s ease;
        }
        header .container {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .logo {
            font-size: 1.8rem;
            font-weight: 700;
            color: var(--secondary-color);
            text-decoration: none;
            letter-spacing: -1px;
        }
        .logo span {
            color: var(--primary-color);
        }
        .nav-links {
            list-style: none;
            display: flex;
        }
        .nav-links li {
            margin-left: 2.5rem;
        }
        .nav-links a {
            color: var(--secondary-color);
            text-decoration: none;
            font-weight: 600;
            position: relative;
            transition: color 0.3s ease;
        }
        .nav-links a::after {
            content: '';
            position: absolute;
            width: 0;
            height: 3px;
            background: var(--primary-color);
            bottom: -8px;
            left: 0;
            transition: width 0.3s ease-in-out;
        }
        .nav-links a:hover::after, .nav-links a.active::after {
            width: 100%;
        }
        .hamburger {
            display: none;
            cursor: pointer;
            font-size: 1.8rem;
            color: var(--secondary-color);
        }

/* Hero Section */
        .hero {
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            background: url('https://images.pexels.com/photos/6063706/pexels-photo-6063706.jpeg') no-repeat center center/cover;
            color: var(--white);
            position: relative;
            padding-top: 6rem;
        }
        .hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.6);
        }
        .hero-content {
            z-index: 1;
            animation: fadeIn 1s forwards;
        }
        .hero h1 {
            font-size: 4.5rem;
            margin-bottom: 1rem;
            font-weight: 700;
            text-shadow: 0 4px 10px rgba(0,0,0,0.3);
            animation: slideInUp 1s forwards;
        }
        .hero p {
            font-size: 1.5rem;
            margin-bottom: 2rem;
            font-weight: 400;
            animation: slideInUp 1s 0.2s forwards;
            opacity: 0;
        }
        .cta-button {
            background: var(--primary-color);
            color: var(--secondary-color);
            padding: 1rem 3rem;
            text-decoration: none;
            font-weight: 700;
            border-radius: 50px;
            transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
            box-shadow: 0 8px 25px rgba(255, 215, 0, 0.3);
            animation: slideInUp 1s 0.4s forwards;
            opacity: 0;
            position: relative;
            overflow: hidden;
        }
        .cta-button::after {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.2);
            transition: all 0.4s ease;
        }
        .cta-button:hover::after {
            left: 100%;
        }
        .cta-button:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 30px rgba(255, 215, 0, 0.5);
        }

/* Sections */
        section {
            padding: 100px 0;
            transition: background-color 0.3s ease;
        }
        section:nth-of-type(even) {
            background-color: var(--light-color);
        }
        .section-title {
            text-align: center;
            font-size: 3rem;
            margin-bottom: 4rem;
            font-weight: 700;
            color: var(--secondary-color);
            position: relative;
        }
        .section-title::after {
            content: '';
            display: block;
            width: 100px;
            height: 5px;
            background: var(--primary-color);
            margin: 15px auto 0;
            border-radius: 5px;
        }

/* About Section */
        .about-content {
            display: flex;
            align-items: center;
            gap: 4rem;
        }
        .about-image {
            flex: 1;
            position: relative;
        }
        .about-image img {
            width: 100%;
            height: auto;
            border-radius: 15px;
            box-shadow: 0 15px 40px rgba(0,0,0,0.1);
        }
        .about-text {
            flex: 1;
        }
        .about-text h3 {
            font-size: 2.5rem;
            margin-bottom: 1rem;
            color: var(--secondary-color);
        }
        
        /* Categories Section */
        .categories-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 2rem;
        }
        .category-card {
            text-align: center;
            background: var(--white);
            padding: 2.5rem;
            border-radius: 15px;
            box-shadow: 0 5px 25px rgba(0,0,0,0.08);
            transition: transform 0.4s ease, box-shadow 0.4s ease;
        }
        .category-card:hover {
            transform: translateY(-15px) scale(1.02);
            box-shadow: 0 20px 50px rgba(0,0,0,0.15);
        }
        .category-card img {
            width: 100%;
            height: 220px;
            object-fit: cover;
            border-radius: 10px;
            margin-bottom: 1.5rem;
        }
        .category-card h4 {
            font-size: 1.4rem;
            color: var(--secondary-color);
            margin-bottom: 0.5rem;
        }
        .category-card a {
            text-decoration: none;
            color: var(--primary-color);
            font-weight: 600;
        }

/* Featured Section */
        .featured-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
        }
        .product-card {
            background: var(--white);
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 8px 25px rgba(0,0,0,0.08);
            transition: transform 0.4s ease, box-shadow 0.4s ease;
        }
        .product-card:hover {
            transform: translateY(-15px);
            box-shadow: 0 20px 50px rgba(0,0,0,0.15);
        }
        .product-card img {
            width: 100%;
            height: 280px;
            object-fit: cover;
        }
        .product-info {
            padding: 1.5rem;
            text-align: center;
        }
        .product-info h4 {
            font-size: 1.4rem;
            color: var(--secondary-color);
            margin-bottom: 0.5rem;
        }
        .product-info p {
            font-weight: 700;
            color: var(--primary-color);
            font-size: 1.2rem;
        }
        
        /* Why Choose Us Section */
        .why-us-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 2rem;
            text-align: center;
        }
        .why-us-card {
            background: var(--white);
            padding: 2.5rem;
            border-radius: 15px;
            box-shadow: 0 5px 25px rgba(0,0,0,0.08);
            transition: transform 0.4s ease, box-shadow 0.4s ease;
        }
        .why-us-card:hover {
            transform: translateY(-15px);
            box-shadow: 0 20px 50px rgba(0,0,0,0.15);
        }
        .why-us-card i {
            font-size: 4rem;
            color: var(--primary-color);
            margin-bottom: 1.5rem;
        }
        .why-us-card h4 {
            font-size: 1.5rem;
            color: var(--secondary-color);
            margin-bottom: 0.5rem;
        }

/* Testimonials Section */
        .testimonials-slider {
            display: flex;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            gap: 2rem;
            padding-bottom: 1rem;
            -webkit-overflow-scrolling: touch;
        }
        .testimonial-card {
            flex: 0 0 calc(50% - 1rem);
            scroll-snap-align: start;
            background: var(--white);
            padding: 2.5rem;
            border-radius: 15px;
            box-shadow: 0 5px 25px rgba(0,0,0,0.08);
            text-align: center;
            transition: transform 0.4s ease, box-shadow 0.4s ease;
        }
        .testimonial-card:hover {
            transform: translateY(-10px);
        }
        .testimonial-card p {
            font-style: italic;
            margin-bottom: 1.5rem;
            font-size: 1.1rem;
        }
        .testimonial-card h5 {
            font-weight: 700;
            color: var(--secondary-color);
            font-size: 1.2rem;
        }
        .testimonial-card small {
            color: #888;
        }

/* Newsletter Section */
        .newsletter-content {
            text-align: center;
            max-width: 800px;
            margin: 0 auto;
        }
        .newsletter-content h3 {
            font-size: 2.5rem;
            margin-bottom: 1rem;
            color: var(--secondary-color);
        }
        .newsletter-content p {
            font-size: 1.2rem;
            margin-bottom: 2.5rem;
        }
        .newsletter-form {
            display: flex;
            justify-content: center;
            max-width: 600px;
            margin: 0 auto;
        }
        .newsletter-form input {
            padding: 1rem 1.5rem;
            border: 2px solid #ddd;
            border-radius: 50px;
            flex: 1;
            margin-right: 1rem;
            font-family: var(--poppins);
            font-size: 1rem;
            transition: border-color 0.3s ease, box-shadow 0.3s ease;
        }
        .newsletter-form input:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 4px rgba(255, 215, 0, 0.2);
        }
        .newsletter-form button {
            background: var(--primary-color);
            color: var(--secondary-color);
            padding: 1rem 2.5rem;
            border: none;
            border-radius: 50px;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
            font-family: var(--poppins);
        }
        .newsletter-form button:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 15px rgba(255, 215, 0, 0.4);
        }

/* Blog Section */
        .blog-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 2rem;
        }
        .blog-card {
            background: var(--white);
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 5px 25px rgba(0,0,0,0.08);
            transition: transform 0.4s ease, box-shadow 0.4s ease;
        }
        .blog-card:hover {
            transform: translateY(-15px);
            box-shadow: 0 20px 50px rgba(0,0,0,0.15);
        }
        .blog-card img {
            width: 100%;
            height: 220px;
            object-fit: cover;
        }
        .blog-info {
            padding: 1.5rem;
        }
        .blog-info h4 {
            font-size: 1.5rem;
            color: var(--secondary-color);
            margin-bottom: 0.5rem;
        }
        .blog-info small {
            color: #888;
            display: block;
            margin-bottom: 1rem;
        }
        .blog-info a {
            color: var(--primary-color);
            text-decoration: none;
            font-weight: 600;
            transition: color 0.3s ease;
        }
        .blog-info a:hover {
            color: var(--secondary-color);
        }

/* Call to Action Section */
        .cta-section {
            text-align: center;
            color: var(--secondary-color);
            background: linear-gradient(135deg, #FFD700, #ffec8b);
            padding: 100px 0;
            box-shadow: 0 -10px 30px rgba(0,0,0,0.05);
        }
        .cta-section h2 {
            font-size: 3.5rem;
            margin-bottom: 1.5rem;
            text-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        .cta-section p {
            font-size: 1.5rem;
            margin-bottom: 3rem;
        }
        .cta-section .cta-button {
            background: var(--white);
            color: var(--secondary-color);
            box-shadow: 0 8px 25px rgba(0,0,0,0.15);
        }
        .cta-section .cta-button:hover {
            background: var(--secondary-color);
            color: var(--white);
            box-shadow: 0 12px 30px rgba(0,0,0,0.3);
        }

/* Contact Section */
        .contact-content {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 4rem;
            align-items: center;
        }
        .contact-info, .contact-form {
            background: var(--white);
            padding: 3rem;
            border-radius: 15px;
            box-shadow: 0 5px 25px rgba(0,0,0,0.08);
        }
        .contact-info h3, .contact-form h3 {
            font-size: 2rem;
            color: var(--secondary-color);
            margin-bottom: 1rem;
        }
        .contact-info p {
            margin-bottom: 1.5rem;
        }
        .contact-info .social-links a {
            font-size: 1.8rem;
            color: var(--secondary-color);
            margin-right: 1.5rem;
            transition: color 0.3s ease, transform 0.3s ease;
        }
        .contact-info .social-links a:hover {
            color: var(--primary-color);
            transform: translateY(-5px);
        }
        .contact-form form {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }
        .contact-form input, .contact-form textarea {
            width: 100%;
            padding: 1rem 1.2rem;
            border: 2px solid #ddd;
            border-radius: 8px;
            font-family: var(--poppins);
            font-size: 1rem;
            transition: border-color 0.3s ease, box-shadow 0.3s ease;
        }
        .contact-form input:focus, .contact-form textarea:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 4px rgba(255, 215, 0, 0.2);
        }
        .contact-form textarea {
            resize: vertical;
        }
        .contact-form button {
            background: var(--primary-color);
            color: var(--secondary-color);
            padding: 1rem 2rem;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-weight: 700;
            font-size: 1rem;
            transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
            font-family: var(--poppins);
        }
        .contact-form button:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 15px rgba(255, 215, 0, 0.4);
        }

/* Footer */
        footer {
            background: var(--secondary-color);
            color: var(--light-color);
            padding: 5rem 0 2rem;
            text-align: center;
        }
        .footer-content {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            flex-wrap: wrap;
            gap: 3rem;
            text-align: left;
        }
        .footer-column {
            flex: 1;
            min-width: 250px;
        }
        .footer-column h4 {
            font-size: 1.5rem;
            margin-bottom: 1.5rem;
            color: var(--primary-color);
        }
        .footer-column p {
            margin-bottom: 1rem;
        }
        .footer-column ul {
            list-style: none;
        }
        .footer-column a {
            color: var(--light-color);
            text-decoration: none;
            transition: color 0.3s ease;
        }
        .footer-column a:hover {
            color: var(--primary-color);
        }
        .footer-bottom {
            margin-top: 3rem;
            border-top: 1px solid #444;
            padding-top: 2rem;
            text-align: center;
        }

/* Responsive Design */
        @media (max-width: 992px) {
            .nav-links {
                display: none;
                flex-direction: column;
                width: 100%;
                text-align: center;
                margin-top: 1rem;
                padding-bottom: 1rem;
                border-top: 1px solid #eee;
            }
            .nav-links.active {
                display: flex;
            }
            .nav-links li {
                margin: 0.8rem 0;
            }
            .nav-links a::after { display: none; }
            .hamburger {
                display: block;
                position: absolute;
                right: 2rem;
                top: 1.2rem;
            }
            header .container {
                flex-wrap: wrap;
                justify-content: space-between;
            }

.hero { padding-top: 8rem; }
            .hero h1 { font-size: 3rem; }
            .hero p { font-size: 1.2rem; }
            
            .section-title { font-size: 2.5rem; }
            .about-content { flex-direction: column; text-align: center; }
            .about-image { margin-bottom: 2rem; }
            .testimonial-card { flex: 0 0 calc(100% - 1rem); }
            .newsletter-form { flex-direction: column; align-items: center; }
            .newsletter-form input { margin: 0 0 1rem 0; }
            .footer-content { flex-direction: column; text-align: center; }
            .footer-column { min-width: 100%; }
        }

@media (max-width: 768px) {
            body { font-size: 1rem; }
            .container { padding: 0 1.5rem; }
            .hero h1 { font-size: 2.5rem; }
            .hero p { font-size: 1rem; }
            .cta-button { padding: 0.8rem 2rem; }
            .section-title { font-size: 2rem; }
            .about-text h3 { font-size: 1.8rem; }
            .contact-content { gap: 2rem; }
        }

JavaScript

document.addEventListener('DOMContentLoaded', () => {
            const hamburger = document.querySelector('.hamburger');
            const navLinks = document.querySelector('.nav-links');
            const animateElements = document.querySelectorAll('.animate-on-scroll');

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

navLinks.querySelectorAll('a').forEach(link => {
                link.addEventListener('click', () => {
                    navLinks.classList.remove('active');
                    hamburger.classList.remove('fa-times');
                    hamburger.classList.add('fa-bars');
                });
            });

// Intersection Observer for scroll-based animations
            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        entry.target.classList.add('in-view');
                        // Optional: observer.unobserve(entry.target);
                    }
                });
            }, {
                threshold: 0.1,
            });

animateElements.forEach(el => {
                observer.observe(el);
            });
        });

Gift Shop Template Preview

Download Options