Boutique Shop Landing Page 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>LUXE | Modern Boutique</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">LUXE<span>.</span></a>
        <div class="menu-toggle">
            <i class="fas fa-bars"></i>
        </div>
        <ul class="navigation">
            <li><a href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#services">Services</a></li>
            <li><a href="#products">Products</a></li>
            <li><a href="#testimonials">Testimonials</a></li>
            <li><a href="#team">Team</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </header>

<section class="hero" id="home">
        <div class="hero-content">
            <h2 class="animate">Elegance Redefined</h2>
            <p class="animate">Discover the perfect blend of luxury and style at LUXE Boutique. Our curated collection of high-end fashion and accessories will elevate your wardrobe to new heights.</p>
            <a href="#products" class="btn animate">Shop Now</a>
        </div>
    </section>

<section class="about" id="about">
        <div class="section-title">
            <h2 class="reveal">About Us</h2>
            <p class="reveal delay-1">LUXE Boutique is a premier destination for those who appreciate fine craftsmanship and timeless style.</p>
        </div>
        <div class="about-content">
            <div class="about-img reveal">
                <img src="https://images.unsplash.com/photo-1551232864-3f0890e580d9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1887&q=80" alt="About LUXE Boutique">
            </div>
            <div class="about-text">
                <h3 class="slide-in-left">Our Story</h3>
                <p class="slide-in-left delay-1">Founded in 2010, LUXE Boutique began as a small atelier with a passion for exquisite fashion. Today, we've grown into a global brand known for our commitment to quality and attention to detail.</p>
                <p class="slide-in-left delay-2">Each piece in our collection is carefully selected to ensure it meets our high standards of craftsmanship and design. We work with the world's most talented designers to bring you unique, limited-edition items you won't find anywhere else.</p>
                <a href="#" class="btn slide-in-left delay-3">Learn More</a>
            </div>
        </div>
    </section>

<section class="services" id="services">
        <div class="section-title">
            <h2 class="reveal">Our Services</h2>
            <p class="reveal delay-1">We offer exclusive services to enhance your shopping experience and ensure you find exactly what you're looking for.</p>
        </div>
        <div class="services-content">
            <div class="service-card scale-up">
                <div class="icon-box">
                    <i class="fas fa-tshirt"></i>
                </div>
                <h3>Personal Styling</h3>
                <p>Our expert stylists will help you create a wardrobe that reflects your personality and lifestyle.</p>
            </div>
            <div class="service-card scale-up delay-1">
                <div class="icon-box">
                    <i class="fas fa-gem"></i>
                </div>
                <h3>Custom Design</h3>
                <p>Work with our designers to create one-of-a-kind pieces tailored specifically to your preferences.</p>
            </div>
            <div class="service-card scale-up delay-2">
                <div class="icon-box">
                    <i class="fas fa-home"></i>
                </div>
                <h3>Home Delivery</h3>
                <p>Enjoy complimentary white-glove delivery service for all your purchases, with free returns.</p>
            </div>
            <div class="service-card scale-up delay-3">
                <div class="icon-box">
                    <i class="fas fa-star"></i>
                </div>
                <h3>VIP Membership</h3>
                <p>Join our exclusive membership program for early access to new collections and special events.</p>
            </div>
        </div>
    </section>

<section class="products" id="products">
        <div class="section-title">
            <h2 class="reveal">Featured Products</h2>
            <p class="reveal delay-1">Discover our latest collection of luxury fashion and accessories.</p>
        </div>
        <div class="swiper mySwiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide slide-in-left">
                    <div class="product-img">
                        <img src="https://images.unsplash.com/photo-1539109136881-3be0616acf4b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Designer Dress">
                    </div>
                    <div class="product-details">
                        <h3>Ethereal Silk Gown</h3>
                        <p>Handcrafted from the finest silk with delicate embroidery details.</p>
                        <div class="price">$1,299</div>
                        <a href="#" class="btn">Add to Cart</a>
                    </div>
                </div>
                <div class="swiper-slide slide-in-left delay-1">
                    <div class="product-img">
                        <img src="https://images.unsplash.com/photo-1591047139829-d91aecb6caea?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=736&q=80" alt="Leather Handbag">
                    </div>
                    <div class="product-details">
                        <h3>Artisan Leather Tote</h3>
                        <p>Premium Italian leather with hand-stitched details and gold hardware.</p>
                        <div class="price">$899</div>
                        <a href="#" class="btn">Add to Cart</a>
                    </div>
                </div>
                <div class="swiper-slide slide-in-left delay-2">
                    <div class="product-img">
                        <img src="https://images.unsplash.com/photo-1523170335258-f5ed11844a49?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=880&q=80" alt="Designer Watch">
                    </div>
                    <div class="product-details">
                        <h3>Chronograph Timepiece</h3>
                        <p>Swiss-made automatic movement with sapphire crystal and alligator strap.</p>
                        <div class="price">$2,499</div>
                        <a href="#" class="btn">Add to Cart</a>
                    </div>
                </div>
                <div class="swiper-slide slide-in-left delay-3">
                    <div class="product-img">
                        <img src="https://images.unsplash.com/photo-1590874103328-eac38a683ce7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=738&q=80" alt="Cashmere Scarf">
                    </div>
                    <div class="product-details">
                        <h3>Cashmere Wrap</h3>
                        <p>100% Mongolian cashmere with hand-rolled edges in exclusive colors.</p>
                        <div class="price">$349</div>
                        <a href="#" class="btn">Add to Cart</a>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="product-img">
                        <img src="https://images.unsplash.com/photo-1542272604-787c3835535d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1026&q=80" alt="Leather Shoes">
                    </div>
                    <div class="product-details">
                        <h3>Oxford Leather Shoes</h3>
                        <p>Handcrafted English leather shoes with Goodyear welt construction.</p>
                        <div class="price">$599</div>
                        <a href="#" class="btn">Add to Cart</a>
                    </div>
                </div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
    </section>

<section class="testimonials" id="testimonials">
        <div class="section-title">
            <h2 class="reveal">Client Testimonials</h2>
            <p class="reveal delay-1">Hear what our valued clients have to say about their LUXE experience.</p>
        </div>
        <div class="testimonials-content">
            <div class="testimonial-card scale-up">
                <div class="quote">"</div>
                <div class="content">
                    <p>The personal styling service completely transformed my wardrobe. I've never received so many compliments!</p>
                    <div class="user">
                        <div class="user-img">
                            <img src="https://randomuser.me/api/portraits/women/43.jpg" alt="Sarah J.">
                        </div>
                        <div class="user-info">
                            <h4>Sarah J.</h4>
                            <span>Fashion Influencer</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="testimonial-card scale-up delay-1">
                <div class="quote">"</div>
                <div class="content">
                    <p>I've been shopping at LUXE for years. Their attention to detail and customer service is unmatched.</p>
                    <div class="user">
                        <div class="user-img">
                            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Michael T.">
                        </div>
                        <div class="user-info">
                            <h4>Michael T.</h4>
                            <span>Corporate Executive</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="testimonial-card scale-up delay-2">
                <div class="quote">"</div>
                <div class="content">
                    <p>The custom design service created my dream wedding dress. It was worth every penny for this once-in-a-lifetime piece.</p>
                    <div class="user">
                        <div class="user-img">
                            <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Emily R.">
                        </div>
                        <div class="user-info">
                            <h4>Emily R.</h4>
                            <span>Bride</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="team" id="team">
        <div class="section-title">
            <h2 class="reveal">Our Team</h2>
            <p class="reveal delay-1">Meet the talented individuals who make LUXE Boutique truly special.</p>
        </div>
        <div class="team-content">
            <div class="team-card slide-in-left">
                <div class="team-img">
                    <img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=688&q=80" alt="Olivia Parker">
                </div>
                <div class="team-details">
                    <h3>Olivia Parker</h3>
                    <span>Creative Director</span>
                    <div class="social-links">
                        <a href="#"><i class="fab fa-instagram"></i></a>
                        <a href="#"><i class="fab fa-linkedin-in"></i></a>
                        <a href="#"><i class="fab fa-twitter"></i></a>
                    </div>
                </div>
            </div>
            <div class="team-card slide-in-left delay-1">
                <div class="team-img">
                    <img src="https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="James Wilson">
                </div>
                <div class="team-details">
                    <h3>James Wilson</h3>
                    <span>Head Stylist</span>
                    <div class="social-links">
                        <a href="#"><i class="fab fa-instagram"></i></a>
                        <a href="#"><i class="fab fa-linkedin-in"></i></a>
                        <a href="#"><i class="fab fa-twitter"></i></a>
                    </div>
                </div>
            </div>
            <div class="team-card slide-in-left delay-2">
                <div class="team-img">
                    <img src="https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Sophia Chen">
                </div>
                <div class="team-details">
                    <h3>Sophia Chen</h3>
                    <span>Fashion Designer</span>
                    <div class="social-links">
                        <a href="#"><i class="fab fa-instagram"></i></a>
                        <a href="#"><i class="fab fa-linkedin-in"></i></a>
                        <a href="#"><i class="fab fa-twitter"></i></a>
                    </div>
                </div>
            </div>
            <div class="team-card slide-in-left delay-3">
                <div class="team-img">
                    <img src="https://images.unsplash.com/photo-1562788869-4ed32648eb72?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=764&q=80" alt="David Miller">
                </div>
                <div class="team-details">
                    <h3>David Miller</h3>
                    <span>Customer Experience</span>
                    <div class="social-links">
                        <a href="#"><i class="fab fa-instagram"></i></a>
                        <a href="#"><i class="fab fa-linkedin-in"></i></a>
                        <a href="#"><i class="fab fa-twitter"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="contact" id="contact">
        <div class="section-title">
            <h2 class="reveal">Contact Us</h2>
            <p class="reveal delay-1">We'd love to hear from you. Reach out for inquiries, styling appointments, or just to say hello.</p>
        </div>
        <div class="contact-content">
            <div class="contact-info slide-in-left">
                <h3>Get In Touch</h3>
                <div class="info-box">
                    <div class="icon">
                        <i class="fas fa-map-marker-alt"></i>
                    </div>
                    <div class="text">
                        <h4>Location</h4>
                        <p>123 Fashion Avenue, New York, NY 10001</p>
                    </div>
                </div>
                <div class="info-box">
                    <div class="icon">
                        <i class="fas fa-phone-alt"></i>
                    </div>
                    <div class="text">
                        <h4>Phone</h4>
                        <p>+1 (212) 555-1234</p>
                    </div>
                </div>
                <div class="info-box">
                    <div class="icon">
                        <i class="fas fa-envelope"></i>
                    </div>
                    <div class="text">
                        <h4>Email</h4>
                        <p>info@luxeboutique.com</p>
                    </div>
                </div>
                <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 slide-in-right">
                <h3>Send Us a Message</h3>
                <form>
                    <div class="input-box">
                        <input type="text" placeholder="Your Name" required>
                    </div>
                    <div class="input-box">
                        <input type="email" placeholder="Your Email" required>
                    </div>
                    <div class="input-box">
                        <input type="text" placeholder="Subject">
                    </div>
                    <div class="input-box">
                        <textarea placeholder="Your Message" required></textarea>
                    </div>
                    <button type="submit" class="btn">Send Message</button>
                </form>
            </div>
        </div>
    </section>

<footer>
        <div class="footer-content">
            <div class="footer-column">
                <h3>About LUXE</h3>
                <p>LUXE Boutique is a premier destination for luxury fashion and accessories, offering curated collections from the world's most talented designers.</p>
            </div>
            <div class="footer-column">
                <h3>Quick Links</h3>
                <ul class="footer-links">
                    <li><a href="#home">Home</a></li>
                    <li><a href="#about">About Us</a></li>
                    <li><a href="#services">Services</a></li>
                    <li><a href="#products">Products</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
            </div>
            <div class="footer-column">
                <h3>Customer Service</h3>
                <ul class="footer-links">
                    <li><a href="#">FAQs</a></li>
                    <li><a href="#">Shipping Policy</a></li>
                    <li><a href="#">Return Policy</a></li>
                    <li><a href="#">Privacy Policy</a></li>
                    <li><a href="#">Terms & Conditions</a></li>
                </ul>
            </div>
            <div class="footer-column">
                <h3>Contact Info</h3>
                <ul class="footer-contact-info">
                    <li>
                        <span><i class="fas fa-map-marker-alt"></i></span>
                        <p>123 Fashion Avenue, New York, NY 10001</p>
                    </li>
                    <li>
                        <span><i class="fas fa-phone-alt"></i></span>
                        <p>+1 (212) 555-1234</p>
                    </li>
                    <li>
                        <span><i class="fas fa-envelope"></i></span>
                        <p>info@luxeboutique.com</p>
                    </li>
                </ul>
            </div>
        </div>
        <div class="footer-bottom">
            <p>&copy; 2023 LUXE Boutique. All Rights Reserved. Designed by <a href="#">YourName</a></p>
        </div>
    </footer>

<div class="scroll-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-color: #FFD700;
            --primary-dark: #FFC000;
            --primary-light: #FFF5CC;
            --dark-color: #1A1A1A;
            --light-color: #FFFFFF;
            --gray-color: #F5F5F5;
            --transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
        }

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

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

/* Glassmorphism Effect */
        .glass-card {
            background: rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border-radius: 16px;
            border: 1px solid rgba(255, 255, 255, 0.3);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
        }

/* Header Section */
        header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            padding: 20px 100px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 1000;
            transition: var(--transition);
        }

header.scrolled {
            background: rgba(255, 255, 255, 0.9);
            padding: 15px 100px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
        }

header .logo {
            position: relative;
            font-size: 2rem;
            color: var(--dark-color);
            text-decoration: none;
            font-weight: 700;
            transition: var(--transition);
        }

header.scrolled .logo {
            color: var(--dark-color);
        }

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

header .navigation {
            position: relative;
            display: flex;
        }

header .navigation li {
            list-style: none;
            margin-left: 30px;
        }

header .navigation li a {
            text-decoration: none;
            color: var(--dark-color);
            font-weight: 500;
            transition: var(--transition);
            position: relative;
        }

header.scrolled .navigation li a {
            color: var(--dark-color);
        }

header .navigation li a:before {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 0;
            height: 2px;
            background: var(--primary-color);
            transition: var(--transition);
        }

header .navigation li a:hover:before {
            width: 100%;
        }

.menu-toggle {
            display: none;
            position: relative;
            width: 30px;
            height: 30px;
            cursor: pointer;
            z-index: 1001;
        }

.menu-toggle:before {
            content: '';
            position: absolute;
            top: 7px;
            width: 100%;
            height: 3px;
            background: var(--dark-color);
            transition: var(--transition);
        }

.menu-toggle:after {
            content: '';
            position: absolute;
            bottom: 7px;
            width: 100%;
            height: 3px;
            background: var(--dark-color);
            transition: var(--transition);
        }

header.scrolled .menu-toggle:before,
        header.scrolled .menu-toggle:after {
            background: var(--dark-color);
        }

.menu-toggle.active:before {
            transform: rotate(45deg);
            top: 14px;
        }

.menu-toggle.active:after {
            transform: rotate(-45deg);
            bottom: 13px;
        }

/* Hero Section */
        .hero {
            position: relative;
            width: 100%;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background: url('https://images.unsplash.com/photo-1551232864-3f0890e580d9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1887&q=80') no-repeat;
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
            padding: 100px;
        }

.hero:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.2);
        }

.hero-content {
            position: relative;
            max-width: 800px;
            text-align: center;
            z-index: 1;
        }

.hero-content h2 {
            font-size: 4rem;
            font-weight: 700;
            color: var(--light-color);
            margin-bottom: 20px;
            opacity: 0;
            transform: translateY(50px);
            transition: var(--transition);
        }

.hero-content h2.animate {
            opacity: 1;
            transform: translateY(0);
        }

.hero-content p {
            font-size: 1.2rem;
            color: var(--light-color);
            margin-bottom: 30px;
            opacity: 0;
            transform: translateY(50px);
            transition: var(--transition) 0.3s;
        }

.hero-content p.animate {
            opacity: 1;
            transform: translateY(0);
        }

.hero-content .btn {
            display: inline-block;
            padding: 15px 30px;
            background: var(--primary-color);
            color: var(--dark-color);
            font-size: 1.1rem;
            font-weight: 600;
            text-decoration: none;
            border-radius: 50px;
            transition: var(--transition);
            opacity: 0;
            transform: translateY(50px);
            transition: var(--transition) 0.6s;
        }

.hero-content .btn:hover {
            background: var(--primary-dark);
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
        }

.hero-content .btn.animate {
            opacity: 1;
            transform: translateY(0);
        }

/* About Section */
        .about {
            position: relative;
            width: 100%;
            padding: 100px;
            background: var(--light-color);
        }

.section-title {
            position: relative;
            width: 100%;
            text-align: center;
            margin-bottom: 60px;
        }

.section-title h2 {
            font-size: 2.5rem;
            font-weight: 700;
            color: var(--dark-color);
            margin-bottom: 20px;
        }

.section-title p {
            font-size: 1.1rem;
            color: #666;
            max-width: 700px;
            margin: 0 auto;
        }

.about-content {
            position: relative;
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
        }

.about-img {
            position: relative;
            width: 45%;
            min-height: 500px;
            overflow: hidden;
            border-radius: 20px;
        }

.about-img img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

.about-text {
            position: relative;
            width: 50%;
        }

.about-text h3 {
            font-size: 1.8rem;
            font-weight: 600;
            color: var(--dark-color);
            margin-bottom: 20px;
        }

.about-text p {
            font-size: 1.1rem;
            color: #666;
            margin-bottom: 20px;
            line-height: 1.8;
        }

.about-text .btn {
            display: inline-block;
            padding: 12px 30px;
            background: var(--primary-color);
            color: var(--dark-color);
            font-size: 1rem;
            font-weight: 600;
            text-decoration: none;
            border-radius: 50px;
            transition: var(--transition);
        }

.about-text .btn:hover {
            background: var(--primary-dark);
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        }

/* Services Section */
        .services {
            position: relative;
            width: 100%;
            padding: 100px;
            background: var(--gray-color);
        }

.services-content {
            position: relative;
            width: 100%;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            grid-gap: 30px;
            margin-top: 40px;
        }

.service-card {
            position: relative;
            padding: 40px 30px;
            text-align: center;
            background: var(--light-color);
            border-radius: 20px;
            transition: var(--transition);
            overflow: hidden;
            z-index: 1;
        }

.service-card:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
            z-index: -1;
            opacity: 0;
            transition: var(--transition);
        }

.service-card:hover:before {
            opacity: 1;
        }

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

.service-card:hover .icon-box,
        .service-card:hover h3,
        .service-card:hover p {
            color: var(--light-color);
        }

.service-card .icon-box {
            width: 80px;
            height: 80px;
            margin: 0 auto 30px;
            background: var(--primary-light);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 2rem;
            color: var(--primary-color);
            transition: var(--transition);
        }

.service-card h3 {
            font-size: 1.5rem;
            font-weight: 600;
            color: var(--dark-color);
            margin-bottom: 15px;
            transition: var(--transition);
        }

.service-card p {
            font-size: 1rem;
            color: #666;
            transition: var(--transition);
        }

/* Products Section - Smart Showcase Carousel */
        .products {
            position: relative;
            width: 100%;
            padding: 100px;
            background: var(--light-color);
        }

.swiper {
            width: 100%;
            padding: 50px 0;
        }

.swiper-slide {
            width: 300px;
            height: 500px;
            background: var(--light-color);
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
            transition: var(--transition);
        }

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

.swiper-slide .product-img {
            width: 100%;
            height: 60%;
            overflow: hidden;
        }

.swiper-slide .product-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: var(--transition);
        }

.swiper-slide:hover .product-img img {
            transform: scale(1.1);
        }

.swiper-slide .product-details {
            padding: 20px;
        }

.swiper-slide .product-details h3 {
            font-size: 1.3rem;
            font-weight: 600;
            color: var(--dark-color);
            margin-bottom: 10px;
        }

.swiper-slide .product-details p {
            font-size: 0.9rem;
            color: #666;
            margin-bottom: 15px;
            line-height: 1.5;
        }

.swiper-slide .product-details .price {
            font-size: 1.3rem;
            font-weight: 700;
            color: var(--primary-color);
            margin-bottom: 15px;
        }

.swiper-slide .product-details .btn {
            display: inline-block;
            padding: 10px 20px;
            background: var(--primary-color);
            color: var(--dark-color);
            font-size: 0.9rem;
            font-weight: 600;
            text-decoration: none;
            border-radius: 50px;
            transition: var(--transition);
        }

.swiper-slide .product-details .btn:hover {
            background: var(--primary-dark);
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

.swiper-pagination-bullet {
            width: 12px;
            height: 12px;
            background: #ccc;
            opacity: 1;
        }

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

/* Testimonials Section - Velvet Caption Reveal */
        .testimonials {
            position: relative;
            width: 100%;
            padding: 100px;
            background: var(--gray-color);
        }

.testimonials-content {
            position: relative;
            width: 100%;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            grid-gap: 30px;
            margin-top: 40px;
        }

.testimonial-card {
            position: relative;
            padding: 30px;
            background: var(--light-color);
            border-radius: 20px;
            transition: var(--transition);
            overflow: hidden;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
        }

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

.testimonial-card .quote {
            position: absolute;
            top: 20px;
            right: 30px;
            font-size: 3rem;
            color: var(--primary-light);
            opacity: 0.3;
            z-index: 0;
        }

.testimonial-card .content {
            position: relative;
            z-index: 1;
        }

.testimonial-card .content p {
            font-size: 1rem;
            color: #666;
            margin-bottom: 20px;
            line-height: 1.8;
        }

.testimonial-card .content .user {
            display: flex;
            align-items: center;
        }

.testimonial-card .content .user-img {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            overflow: hidden;
            margin-right: 15px;
        }

.testimonial-card .content .user-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

.testimonial-card .content .user-info h4 {
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--dark-color);
            margin-bottom: 5px;
        }

.testimonial-card .content .user-info span {
            font-size: 0.9rem;
            color: #999;
        }

/* Team Section - Card Luxe UI */
        .team {
            position: relative;
            width: 100%;
            padding: 100px;
            background: var(--light-color);
        }

.team-content {
            position: relative;
            width: 100%;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            grid-gap: 30px;
            margin-top: 40px;
        }

.team-card {
            position: relative;
            border-radius: 20px;
            overflow: hidden;
            transition: var(--transition);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        }

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

.team-card .team-img {
            position: relative;
            width: 100%;
            height: 300px;
            overflow: hidden;
        }

.team-card .team-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: var(--transition);
        }

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

.team-card .team-details {
            position: relative;
            padding: 20px;
            background: var(--light-color);
            text-align: center;
        }

.team-card .team-details h3 {
            font-size: 1.3rem;
            font-weight: 600;
            color: var(--dark-color);
            margin-bottom: 5px;
        }

.team-card .team-details span {
            font-size: 0.9rem;
            color: var(--primary-color);
            margin-bottom: 15px;
            display: block;
        }

.team-card .team-details .social-links {
            display: flex;
            justify-content: center;
            gap: 15px;
        }

.team-card .team-details .social-links a {
            width: 35px;
            height: 35px;
            background: var(--primary-light);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            color: var(--primary-color);
            transition: var(--transition);
        }

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

/* Contact Section - Elegant Slide Reveal */
        .contact {
            position: relative;
            width: 100%;
            padding: 100px;
            background: var(--gray-color);
        }

.contact-content {
            position: relative;
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            margin-top: 40px;
        }

.contact-info {
            position: relative;
            width: 45%;
            padding: 40px;
            background: var(--light-color);
            border-radius: 20px;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
        }

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

.contact-info .info-box {
            position: relative;
            display: flex;
            margin-bottom: 30px;
        }

.contact-info .info-box .icon {
            width: 60px;
            height: 60px;
            background: var(--primary-light);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 1.5rem;
            color: var(--primary-color);
            margin-right: 20px;
        }

.contact-info .info-box .text h4 {
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--dark-color);
            margin-bottom: 5px;
        }

.contact-info .info-box .text p {
            font-size: 1rem;
            color: #666;
        }

.contact-info .social-links {
            display: flex;
            gap: 15px;
            margin-top: 30px;
        }

.contact-info .social-links a {
            width: 45px;
            height: 45px;
            background: var(--primary-light);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 1.2rem;
            color: var(--primary-color);
            transition: var(--transition);
        }

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

.contact-form {
            position: relative;
            width: 50%;
            padding: 40px;
            background: var(--light-color);
            border-radius: 20px;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
        }

.contact-form h3 {
            font-size: 1.8rem;
            font-weight: 600;
            color: var(--dark-color);
            margin-bottom: 30px;
        }

.contact-form .input-box {
            position: relative;
            width: 100%;
            margin-bottom: 20px;
        }

.contact-form .input-box input,
        .contact-form .input-box textarea {
            width: 100%;
            padding: 15px;
            font-size: 1rem;
            color: #333;
            background: #f9f9f9;
            border: none;
            border-radius: 10px;
            outline: none;
            resize: none;
        }

.contact-form .input-box textarea {
            min-height: 150px;
        }

.contact-form .btn {
            display: inline-block;
            padding: 12px 30px;
            background: var(--primary-color);
            color: var(--dark-color);
            font-size: 1rem;
            font-weight: 600;
            text-decoration: none;
            border: none;
            border-radius: 50px;
            cursor: pointer;
            transition: var(--transition);
        }

.contact-form .btn:hover {
            background: var(--primary-dark);
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        }

/* Footer Section */
        footer {
            position: relative;
            width: 100%;
            padding: 80px 100px 40px;
            background: var(--dark-color);
            color: var(--light-color);
        }

.footer-content {
            position: relative;
            width: 100%;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            grid-gap: 40px;
            margin-bottom: 60px;
        }

.footer-column h3 {
            font-size: 1.5rem;
            font-weight: 600;
            margin-bottom: 20px;
            position: relative;
        }

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

.footer-column p {
            font-size: 1rem;
            color: #ccc;
            margin-bottom: 20px;
            line-height: 1.8;
        }

.footer-column .footer-links {
            position: relative;
        }

.footer-column .footer-links li {
            list-style: none;
            margin-bottom: 15px;
        }

.footer-column .footer-links li a {
            text-decoration: none;
            color: #ccc;
            font-size: 1rem;
            transition: var(--transition);
        }

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

.footer-column .footer-contact-info {
            position: relative;
        }

.footer-column .footer-contact-info li {
            list-style: none;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
        }

.footer-column .footer-contact-info li span {
            width: 30px;
            height: 30px;
            background: var(--primary-light);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 10px;
            color: var(--primary-color);
        }

.footer-column .footer-contact-info li p {
            margin-bottom: 0;
        }

.footer-bottom {
            position: relative;
            width: 100%;
            padding-top: 20px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            text-align: center;
        }

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

.footer-bottom p a {
            color: var(--primary-color);
            text-decoration: none;
        }

/* Scroll To Top Button */
        .scroll-top {
            position: fixed;
            bottom: 30px;
            right: 30px;
            width: 50px;
            height: 50px;
            background: var(--primary-color);
            color: var(--dark-color);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 1.2rem;
            cursor: pointer;
            z-index: 999;
            opacity: 0;
            visibility: hidden;
            transition: var(--transition);
        }

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

.scroll-top:hover {
            background: var(--primary-dark);
            transform: translateY(-5px);
        }

/* Responsive Styles */
        @media (max-width: 1200px) {
            header,
            header.scrolled {
                padding: 20px 50px;
            }

.hero,
            .about,
            .services,
            .products,
            .testimonials,
            .team,
            .contact,
            footer {
                padding: 100px 50px;
            }
        }

@media (max-width: 992px) {
            .about-content,
            .contact-content {
                flex-direction: column;
            }

.about-img,
            .about-text,
            .contact-info,
            .contact-form {
                width: 100%;
            }

.about-img {
                margin-bottom: 40px;
                min-height: 400px;
            }

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

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

@media (max-width: 768px) {
            header .navigation {
                position: fixed;
                top: 0;
                left: -100%;
                width: 100%;
                height: 100vh;
                background: var(--light-color);
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                transition: var(--transition);
                z-index: 1000;
            }

header .navigation.active {
                left: 0;
            }

header .navigation li {
                margin: 15px 0;
            }

header .navigation li a {
                font-size: 1.5rem;
            }

.menu-toggle {
                display: block;
            }

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

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

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

.hero,
            .about,
            .services,
            .products,
            .testimonials,
            .team,
            .contact,
            footer {
                padding: 80px 30px;
            }

footer {
                padding: 60px 30px 30px;
            }
        }

@media (max-width: 576px) {
            header,
            header.scrolled {
                padding: 15px 20px;
            }

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

.hero-content .btn {
                padding: 12px 25px;
                font-size: 1rem;
            }

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

.section-title p {
                font-size: 1rem;
            }

.hero,
            .about,
            .services,
            .products,
            .testimonials,
            .team,
            .contact,
            footer {
                padding: 60px 20px;
            }

.swiper-slide {
                height: 450px;
            }

.scroll-top {
                width: 40px;
                height: 40px;
                font-size: 1rem;
                bottom: 20px;
                right: 20px;
            }
        }

/* Animation Classes */
        .reveal {
            position: relative;
            transform: translateY(50px);
            opacity: 0;
            transition: var(--transition);
        }

.reveal.active {
            transform: translateY(0);
            opacity: 1;
        }

.slide-in-left {
            position: relative;
            transform: translateX(-50px);
            opacity: 0;
            transition: var(--transition);
        }

.slide-in-left.active {
            transform: translateX(0);
            opacity: 1;
        }

.slide-in-right {
            position: relative;
            transform: translateX(50px);
            opacity: 0;
            transition: var(--transition);
        }

.slide-in-right.active {
            transform: translateX(0);
            opacity: 1;
        }

.scale-up {
            position: relative;
            transform: scale(0.9);
            opacity: 0;
            transition: var(--transition);
        }

.scale-up.active {
            transform: scale(1);
            opacity: 1;
        }

.delay-1 {
            transition-delay: 0.2s;
        }

.delay-2 {
            transition-delay: 0.4s;
        }

.delay-3 {
            transition-delay: 0.6s;
        }

.delay-4 {
            transition-delay: 0.8s;
        }

JavaScript

// Header Scroll Effect
        window.addEventListener('scroll', function() {
            const header = document.querySelector('header');
            header.classList.toggle('scrolled', window.scrollY > 0);
        });

// Mobile Menu Toggle
        const menuToggle = document.querySelector('.menu-toggle');
        const navigation = document.querySelector('.navigation');
        
        menuToggle.addEventListener('click', function() {
            menuToggle.classList.toggle('active');
            navigation.classList.toggle('active');
        });

// Close Mobile Menu When Clicking on a Link
        const navLinks = document.querySelectorAll('.navigation li a');
        navLinks.forEach(link => {
            link.addEventListener('click', function() {
                menuToggle.classList.remove('active');
                navigation.classList.remove('active');
            });
        });

// Hero Text Animation
        window.addEventListener('load', function() {
            const heroTitle = document.querySelector('.hero-content h2');
            const heroText = document.querySelector('.hero-content p');
            const heroBtn = document.querySelector('.hero-content .btn');
            
            setTimeout(() => {
                heroTitle.classList.add('animate');
            }, 500);
            
            setTimeout(() => {
                heroText.classList.add('animate');
            }, 800);
            
            setTimeout(() => {
                heroBtn.classList.add('animate');
            }, 1100);
        });

// Scroll Reveal Animation
        window.addEventListener('scroll', reveal);

// Initialize Swiper
        const swiper = new Swiper('.mySwiper', {
            slidesPerView: 1,
            spaceBetween: 20,
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
            breakpoints: {
                640: {
                    slidesPerView: 2,
                    spaceBetween: 20,
                },
                992: {
                    slidesPerView: 3,
                    spaceBetween: 30,
                },
                1200: {
                    slidesPerView: 4,
                    spaceBetween: 30,
                },
            }
        });

// Scroll To Top
        const scrollTopBtn = document.querySelector('.scroll-top');
        scrollTopBtn.addEventListener('click', function() {
            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');
                const targetElement = document.querySelector(targetId);
                
                if (targetElement) {
                    window.scrollTo({
                        top: targetElement.offsetTop - 80,
                        behavior: 'smooth'
                    });
                }
            });
        });

Boutique Shop Landing Page Template Preview

Download Options