Luxury Fashion Style Boutique
Preview
Edit
Download
Run
Download Options
HTML File
Download as .html file
CSS File
Download as .css file
JavaScript File
Download as .js file
Combined HTML
All code in one HTML file
Project ZIP
All files in a ZIP archive
Cancel
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Ălite Boutique - Luxury Fashion & Style</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&family=Playfair+Display:wght@400;500;600;700;800&family=Dancing+Script:wght@400;500;600;700&display=swap" rel="stylesheet"> </head> <body> <!-- Header Banner --> <div class="header-banner" id="headerBanner"> <div class="container"> ⨠Welcome to Ălite Boutique! | New Collection Available | Free Shipping on Orders $150+ | Call: +1-555-STYLE ⨠</div> </div> <!-- Navigation --> <nav class="navbar navbar-expand-lg navbar-light fixed-top navbar-custom"> <div class="container"> <a class="navbar-brand display-font" href="#home"> <i class="fas fa-crown"></i> Ălite Boutique </a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav ms-auto"> <li class="nav-item"> <a class="nav-link" href="#home">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#collections">Collections</a> </li> <li class="nav-item"> <a class="nav-link" href="#about">About</a> </li> <li class="nav-item"> <a class="nav-link" href="#contact">Contact</a> </li> <li class="nav-item"> <button class="btn btn-shop" onclick="shopNow()"> <i class="fas fa-shopping-bag me-2"></i>Shop Now </button> </li> </ul> </div> </div> </nav> <!-- Hero Section --> <section id="home" class="hero-section"> <div class="container"> <div class="row"> <div class="col-lg-8"> <div class="hero-content"> <h1 class="hero-title display-font">Luxury Fashion Redefined</h1> <p class="hero-subtitle script-font">Discover curated collections of premium fashion, timeless elegance, and contemporary style. From designer dresses to luxury accessories, find your perfect look at Ălite Boutique!</p> <div class="hero-features"> <div class="feature-item"> <i class="fas fa-gem feature-icon"></i> <span>Luxury Brands</span> </div> <div class="feature-item"> <i class="fas fa-shipping-fast feature-icon"></i> <span>Free Shipping</span> </div> <div class="feature-item"> <i class="fas fa-user-tie feature-icon"></i> <span>Personal Styling</span> </div> </div> <div class="hero-buttons"> <a href="#collections" class="btn btn-custom btn-primary-custom">Shop Collections</a> <a href="#featured" class="btn btn-custom btn-secondary-custom">View Lookbook</a> </div> </div> </div> </div> </div> </section> <!-- Collections Section --> <section id="collections" class="collections-section section-padding"> <div class="container"> <div class="row"> <div class="col-lg-8 mx-auto text-center mb-5"> <h2 class="section-title animate-on-scroll display-font">Fashion Collections</h2> <p class="section-subtitle animate-on-scroll script-font">Curated collections for every style and occasion</p> </div> </div> <div class="row"> <div class="col-lg-4 col-md-6 mb-4"> <div class="collection-card animate-on-scroll"> <div class="collection-image" style="background-image: url('https://images.unsplash.com/photo-1515372039744-b8f02a3ae446?ixlib=rb-4.0.3&auto=format&fit=crop&w=1288&q=80')"> <div class="collection-badge">New Arrival</div> <div class="collection-overlay"> <h5 style="color: white; margin: 0;">Evening Elegance</h5> </div> </div> <div class="collection-content"> <h4 class="collection-title">Evening Elegance</h4> <p class="collection-description">Sophisticated evening wear and formal dresses for special occasions. Featuring luxury fabrics and timeless designs.</p> <div class="collection-price">Starting from $299</div> <button class="btn-view-collection" onclick="viewCollection('evening')"> <i class="fas fa-eye me-2"></i>View Collection </button> </div> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="collection-card animate-on-scroll"> <div class="collection-image" style="background-image: url('https://images.unsplash.com/photo-1469334031218-e382a71b716b?ixlib=rb-4.0.3&auto=format&fit=crop&w=1170&q=80')"> <div class="collection-badge">Trending</div> <div class="collection-overlay"> <h5 style="color: white; margin: 0;">Casual Chic</h5> </div> </div> <div class="collection-content"> <h4 class="collection-title">Casual Chic</h4> <p class="collection-description">Effortlessly stylish everyday wear that combines comfort with contemporary fashion trends.</p> <div class="collection-price">Starting from $89</div> <button class="btn-view-collection" onclick="viewCollection('casual')"> <i class="fas fa-eye me-2"></i>View Collection </button> </div> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="collection-card animate-on-scroll"> <div class="collection-image" style="background-image: url('https://images.unsplash.com/photo-1441986300917-64674bd600d8?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80')"> <div class="collection-badge">Exclusive</div> <div class="collection-overlay"> <h5 style="color: white; margin: 0;">Business Professional</h5> </div> </div> <div class="collection-content"> <h4 class="collection-title">Business Professional</h4> <p class="collection-description">Power dressing essentials for the modern professional woman. Tailored suits and elegant workwear.</p> <div class="collection-price">Starting from $199</div> <button class="btn-view-collection" onclick="viewCollection('business')"> <i class="fas fa-eye me-2"></i>View Collection </button> </div> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="collection-card animate-on-scroll"> <div class="collection-image" style="background-image: url('https://images.unsplash.com/photo-1490481651871-ab68de25d43d?ixlib=rb-4.0.3&auto=format&fit=crop&w=1170&q=80')"> <div class="collection-badge">Limited</div> <div class="collection-overlay"> <h5 style="color: white; margin: 0;">Luxury Accessories</h5> </div> </div> <div class="collection-content"> <h4 class="collection-title">Luxury Accessories</h4> <p class="collection-description">Premium handbags, jewelry, and accessories from renowned designers to complete your perfect look.</p> <div class="collection-price">Starting from $149</div> <button class="btn-view-collection" onclick="viewCollection('accessories')"> <i class="fas fa-eye me-2"></i>View Collection </button> </div> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="collection-card animate-on-scroll"> <div class="collection-image" style="background-image: url('https://images.unsplash.com/photo-1483985988355-763728e1935b?ixlib=rb-4.0.3&auto=format&fit=crop&w=1170&q=80')"> <div class="collection-badge">Seasonal</div> <div class="collection-overlay"> <h5 style="color: white; margin: 0;">Summer Breeze</h5> </div> </div> <div class="collection-content"> <h4 class="collection-title">Summer Breeze</h4> <p class="collection-description">Light, airy, and vibrant pieces perfect for warm weather. Flowing dresses and comfortable summer styles.</p> <div class="collection-price">Starting from $79</div> <button class="btn-view-collection" onclick="viewCollection('summer')"> <i class="fas fa-eye me-2"></i>View Collection </button> </div> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="collection-card animate-on-scroll"> <div class="collection-image" style="background-image: url('https://images.unsplash.com/photo-1434389677669-e08b4cac3105?ixlib=rb-4.0.3&auto=format&fit=crop&w=1205&q=80')"> <div class="collection-badge">Designer</div> <div class="collection-overlay"> <h5 style="color: white; margin: 0;">Bridal Collection</h5> </div> </div> <div class="collection-content"> <h4 class="collection-title">Bridal Collection</h4> <p class="collection-description">Exquisite wedding dresses and bridal accessories for your special day. Custom fittings available.</p> <div class="collection-price">Starting from $899</div> <button class="btn-view-collection" onclick="viewCollection('bridal')"> <i class="fas fa-eye me-2"></i>View Collection </button> </div> </div> </div> </div> </div> </section> <!-- Featured Products Section --> <section id="featured" class="featured-section section-padding"> <div class="container"> <div class="row"> <div class="col-lg-8 mx-auto text-center mb-5"> <h2 class="section-title animate-on-scroll display-font">Featured Products</h2> <p class="section-subtitle animate-on-scroll script-font">Handpicked favorites from our latest collections</p> </div> </div> <div class="product-grid"> <div class="product-card animate-on-scroll"> <div class="product-image" style="background-image: url('https://images.unsplash.com/photo-1515372039744-b8f02a3ae446?ixlib=rb-4.0.3&auto=format&fit=crop&w=1288&q=80')"> <div class="product-badge new">New</div> <div class="product-actions"> <button class="action-btn" onclick="quickView('elegant-dress')"> <i class="fas fa-eye"></i> </button> <button class="action-btn" onclick="addToWishlist('elegant-dress')"> <i class="fas fa-heart"></i> </button> </div> </div> <div class="product-info"> <div class="product-category">Evening Wear</div> <h4 class="product-name">Elegant Black Dress</h4> <div class="product-price"> <span class="current-price">$299</span> <span class="original-price">$399</span> </div> <div class="product-rating"> <div class="stars"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> </div> <span class="rating-text">(24 reviews)</span> </div> <button class="btn-add-cart" onclick="addToCart('elegant-dress')"> <i class="fas fa-shopping-cart me-2"></i>Add to Cart </button> </div> </div> <div class="product-card animate-on-scroll"> <div class="product-image" style="background-image: url('https://images.unsplash.com/photo-1469334031218-e382a71b716b?ixlib=rb-4.0.3&auto=format&fit=crop&w=1170&q=80')"> <div class="product-badge sale">Sale</div> <div class="product-actions"> <button class="action-btn" onclick="quickView('casual-top')"> <i class="fas fa-eye"></i> </button> <button class="action-btn" onclick="addToWishlist('casual-top')"> <i class="fas fa-heart"></i> </button> </div> </div> <div class="product-info"> <div class="product-category">Casual Wear</div> <h4 class="product-name">Stylish Casual Top</h4> <div class="product-price"> <span class="current-price">$89</span> <span class="original-price">$129</span> </div> <div class="product-rating"> <div class="stars"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="far fa-star"></i> </div> <span class="rating-text">(18 reviews)</span> </div> <button class="btn-add-cart" onclick="addToCart('casual-top')"> <i class="fas fa-shopping-cart me-2"></i>Add to Cart </button> </div> </div> <div class="product-card animate-on-scroll"> <div class="product-image" style="background-image: url('https://images.unsplash.com/photo-1441986300917-64674bd600d8?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80')"> <div class="product-badge">Trending</div> <div class="product-actions"> <button class="action-btn" onclick="quickView('business-suit')"> <i class="fas fa-eye"></i> </button> <button class="action-btn" onclick="addToWishlist('business-suit')"> <i class="fas fa-heart"></i> </button> </div> </div> <div class="product-info"> <div class="product-category">Business Wear</div> <h4 class="product-name">Professional Blazer</h4> <div class="product-price"> <span class="current-price">$249</span> </div> <div class="product-rating"> <div class="stars"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> </div> <span class="rating-text">(31 reviews)</span> </div> <button class="btn-add-cart" onclick="addToCart('business-suit')"> <i class="fas fa-shopping-cart me-2"></i>Add to Cart </button> </div> </div> <div class="product-card animate-on-scroll"> <div class="product-image" style="background-image: url('https://images.unsplash.com/photo-1490481651871-ab68de25d43d?ixlib=rb-4.0.3&auto=format&fit=crop&w=1170&q=80')"> <div class="product-badge new">New</div> <div class="product-actions"> <button class="action-btn" onclick="quickView('luxury-bag')"> <i class="fas fa-eye"></i> </button> <button class="action-btn" onclick="addToWishlist('luxury-bag')"> <i class="fas fa-heart"></i> </button> </div> </div> <div class="product-info"> <div class="product-category">Accessories</div> <h4 class="product-name">Designer Handbag</h4> <div class="product-price"> <span class="current-price">$399</span> </div> <div class="product-rating"> <div class="stars"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> </div> <span class="rating-text">(15 reviews)</span> </div> <button class="btn-add-cart" onclick="addToCart('luxury-bag')"> <i class="fas fa-shopping-cart me-2"></i>Add to Cart </button> </div> </div> <div class="product-card animate-on-scroll"> <div class="product-image" style="background-image: url('https://images.unsplash.com/photo-1483985988355-763728e1935b?ixlib=rb-4.0.3&auto=format&fit=crop&w=1170&q=80')"> <div class="product-badge">Limited</div> <div class="product-actions"> <button class="action-btn" onclick="quickView('summer-dress')"> <i class="fas fa-eye"></i> </button> <button class="action-btn" onclick="addToWishlist('summer-dress')"> <i class="fas fa-heart"></i> </button> </div> </div> <div class="product-info"> <div class="product-category">Summer Collection</div> <h4 class="product-name">Floral Summer Dress</h4> <div class="product-price"> <span class="current-price">$149</span> <span class="original-price">$199</span> </div> <div class="product-rating"> <div class="stars"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="far fa-star"></i> </div> <span class="rating-text">(22 reviews)</span> </div> <button class="btn-add-cart" onclick="addToCart('summer-dress')"> <i class="fas fa-shopping-cart me-2"></i>Add to Cart </button> </div> </div> <div class="product-card animate-on-scroll"> <div class="product-image" style="background-image: url('https://images.unsplash.com/photo-1434389677669-e08b4cac3105?ixlib=rb-4.0.3&auto=format&fit=crop&w=1205&q=80')"> <div class="product-badge">Exclusive</div> <div class="product-actions"> <button class="action-btn" onclick="quickView('bridal-gown')"> <i class="fas fa-eye"></i> </button> <button class="action-btn" onclick="addToWishlist('bridal-gown')"> <i class="fas fa-heart"></i> </button> </div> </div> <div class="product-info"> <div class="product-category">Bridal Collection</div> <h4 class="product-name">Luxury Wedding Gown</h4> <div class="product-price"> <span class="current-price">$1,299</span> </div> <div class="product-rating"> <div class="stars"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> </div> <span class="rating-text">(8 reviews)</span> </div> <button class="btn-add-cart" onclick="addToCart('bridal-gown')"> <i class="fas fa-shopping-cart me-2"></i>Add to Cart </button> </div> </div> </div> </div> </section> <!-- About Section --> <section id="about" class="about-section section-padding"> <div class="container"> <div class="row"> <div class="col-lg-8 mx-auto text-center mb-5"> <h2 class="section-title animate-on-scroll display-font">About Ălite Boutique</h2> <p class="section-subtitle animate-on-scroll script-font">Your destination for luxury fashion since 2015</p> </div> </div> <div class="about-content animate-on-scroll"> <div class="about-text"> <h3 class="mb-4 display-font">Welcome to Ălite Boutique</h3> <p class="mb-4"> Founded in 2015, Ălite Boutique has established itself as the premier destination for luxury fashion and contemporary style. Our carefully curated collections feature the finest designers and emerging talents from around the world, ensuring that every piece in our boutique meets the highest standards of quality and elegance. </p> <p class="mb-4"> We believe that fashion is more than just clothing â it's a form of self-expression, confidence, and artistry. Our expert stylists work closely with each client to create personalized looks that reflect their unique personality and lifestyle. From timeless classics to cutting-edge trends, we offer an exclusive selection that caters to the discerning tastes of modern women. </p> <p class="mb-4"> At Ălite Boutique, we pride ourselves on providing an exceptional shopping experience. Our intimate boutique setting allows for personalized attention, private styling sessions, and exclusive access to limited-edition pieces. Whether you're searching for the perfect evening gown, professional attire, or casual luxury, our team is dedicated to helping you discover pieces that make you feel extraordinary. </p> <div class="row mt-4"> <div class="col-md-6"> <div class="d-flex align-items-center mb-3"> <i class="fas fa-award text-warning me-3" style="font-size: 1.8rem;"></i> <div> <h6 class="mb-0">Luxury Fashion Award 2023</h6> <small class="text-muted">Best Boutique Experience</small> </div> </div> </div> <div class="col-md-6"> <div class="d-flex align-items-center mb-3"> <i class="fas fa-users text-warning me-3" style="font-size: 1.8rem;"></i> <div> <h6 class="mb-0">2,500+ Satisfied Clients</h6> <small class="text-muted">Trusted by fashion enthusiasts</small> </div> </div> </div> </div> </div> <div class="about-image"> <img src="https://images.unsplash.com/photo-1441986300917-64674bd600d8?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80" alt="Ălite Boutique Interior" class="about-img"> <div class="experience-badge"> <span class="experience-years">9+</span> <span class="experience-text">Years</span> </div> </div> </div> </div> </section> <!-- Services Section --> <section id="services" class="services-section section-padding"> <div class="container"> <div class="row"> <div class="col-lg-8 mx-auto text-center mb-5"> <h2 class="section-title animate-on-scroll display-font">Boutique Services</h2> <p class="section-subtitle animate-on-scroll script-font">Personalized fashion services for the modern woman</p> </div> </div> <div class="row"> <div class="col-lg-4 col-md-6 mb-4"> <div class="service-card animate-on-scroll"> <div class="service-icon"> <i class="fas fa-user-tie"></i> </div> <h4 class="service-title">Personal Styling</h4> <p class="service-description">One-on-one styling consultations with our expert fashion stylists. Discover your personal style and build a wardrobe that reflects your unique personality and lifestyle.</p> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="service-card animate-on-scroll"> <div class="service-icon"> <i class="fas fa-scissors"></i> </div> <h4 class="service-title">Custom Alterations</h4> <p class="service-description">Professional tailoring and alteration services to ensure the perfect fit. Our skilled seamstresses can modify any garment to your exact measurements.</p> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="service-card animate-on-scroll"> <div class="service-icon"> <i class="fas fa-calendar-alt"></i> </div> <h4 class="service-title">Private Appointments</h4> <p class="service-description">Exclusive private shopping sessions in our boutique. Enjoy personalized attention and access to our complete collection in a comfortable, private setting.</p> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="service-card animate-on-scroll"> <div class="service-icon"> <i class="fas fa-shipping-fast"></i> </div> <h4 class="service-title">Luxury Delivery</h4> <p class="service-description">White-glove delivery service for your purchases. We offer same-day delivery in the city and carefully packaged shipping worldwide.</p> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="service-card animate-on-scroll"> <div class="service-icon"> <i class="fas fa-ring"></i> </div> <h4 class="service-title">Special Occasions</h4> <p class="service-description">Complete styling for weddings, galas, and special events. From dress selection to accessories, we'll ensure you look perfect for your important moments.</p> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="service-card animate-on-scroll"> <div class="service-icon"> <i class="fas fa-gem"></i> </div> <h4 class="service-title">VIP Membership</h4> <p class="service-description">Exclusive membership program with early access to new collections, special discounts, and invitations to private fashion events and trunk shows.</p> </div> </div> </div> </div> </section> <!-- Testimonials Section --> <section class="testimonials-section section-padding"> <div class="container"> <div class="row"> <div class="col-lg-8 mx-auto text-center mb-5"> <h2 class="section-title animate-on-scroll text-white display-font">Client Testimonials</h2> <p class="section-subtitle animate-on-scroll text-white-50 script-font">What our fashion-forward clients say about us</p> </div> </div> <div class="row"> <div class="col-lg-4 mb-4"> <div class="testimonial-card animate-on-scroll"> <div class="testimonial-avatar"> <i class="fas fa-user"></i> </div> <p class="testimonial-text">"Ălite Boutique transformed my wardrobe completely! The personal styling service helped me discover my true style. Every piece I bought here makes me feel confident and elegant."</p> <h5 class="testimonial-author">Sarah Mitchell</h5> <p class="testimonial-role">Fashion Executive</p> </div> </div> <div class="col-lg-4 mb-4"> <div class="testimonial-card animate-on-scroll"> <div class="testimonial-avatar"> <i class="fas fa-user"></i> </div> <p class="testimonial-text">"The quality and attention to detail at Ălite Boutique is unmatched. I found my perfect wedding dress here, and the custom alterations were flawless. Highly recommended!"</p> <h5 class="testimonial-author">Emma Rodriguez</h5> <p class="testimonial-role">Bride & Entrepreneur</p> </div> </div> <div class="col-lg-4 mb-4"> <div class="testimonial-card animate-on-scroll"> <div class="testimonial-avatar"> <i class="fas fa-user"></i> </div> <p class="testimonial-text">"I love the exclusive collections and personalized service. The staff truly understands fashion and helps me find pieces that are both trendy and timeless. My go-to boutique!"</p> <h5 class="testimonial-author">Jessica Chen</h5> <p class="testimonial-role">Fashion Blogger</p> </div> </div> </div> </div> </section> <!-- Contact Section --> <section id="contact" class="contact-section section-padding"> <div class="container"> <div class="row"> <div class="col-lg-8 mx-auto text-center mb-5"> <h2 class="section-title animate-on-scroll display-font">Visit Our Boutique</h2> <p class="section-subtitle animate-on-scroll script-font">Experience luxury fashion in our elegant showroom</p> </div> </div> <div class="row"> <div class="col-lg-6 mb-4"> <div class="contact-info animate-on-scroll"> <div class="contact-item"> <div class="contact-icon"> <i class="fas fa-map-marker-alt"></i> </div> <div class="contact-details"> <h5>Boutique Location</h5> <p>789 Fashion Avenue, Suite 150<br>Luxury District, Downtown<br>New York, NY 10022, USA</p> </div> </div> <div class="contact-item"> <div class="contact-icon"> <i class="fas fa-phone"></i> </div> <div class="contact-details"> <h5>Phone & Appointments</h5> <p>+1-555-STYLE<br>+1-555-789-5353<br>Landline: (212) 555-0789</p> </div> </div> <div class="contact-item"> <div class="contact-icon"> <i class="fas fa-envelope"></i> </div> <div class="contact-details"> <h5>Email</h5> <p>info@eliteboutique.com<br>styling@eliteboutique.com<br>vip@eliteboutique.com</p> </div> </div> <div class="contact-item"> <div class="contact-icon"> <i class="fas fa-clock"></i> </div> <div class="contact-details"> <h5>Boutique Hours</h5> <p>Monday - Friday: 10:00 AM - 8:00 PM<br> Saturday: 10:00 AM - 7:00 PM<br> Sunday: 12:00 PM - 6:00 PM<br> Private appointments available</p> </div> </div> </div> </div> <div class="col-lg-6"> <div class="newsletter-form animate-on-scroll"> <h4 class="mb-4 display-font">Join Our Fashion Newsletter</h4> <p class="mb-4">Stay updated with the latest collections, exclusive offers, and fashion trends. Be the first to know about new arrivals and private sales.</p> <form id="newsletterForm"> <div class="form-group"> <label class="form-label">Your Name</label> <input type="text" class="form-control" placeholder="Enter your name" required> </div> <div class="form-group"> <label class="form-label">Email Address</label> <input type="email" class="form-control" placeholder="Enter your email" required> </div> <div class="form-group"> <label class="form-label">Fashion Interests</label> <select class="form-control" required> <option value="">Select your interests</option> <option value="evening">Evening Wear</option> <option value="casual">Casual Fashion</option> <option value="business">Business Attire</option> <option value="accessories">Luxury Accessories</option> <option value="bridal">Bridal Collection</option> <option value="all">All Collections</option> </select> </div> <div class="form-group"> <label class="form-label">Special Requests</label> <textarea class="form-control" rows="3" placeholder="Tell us about your style preferences or any special requests..."></textarea> </div> <button type="submit" class="btn-subscribe"> <i class="fas fa-envelope me-2"></i>Subscribe to Newsletter </button> </form> </div> </div> </div> </div> </section> <!-- Footer --> <footer class="footer-section"> <div class="container"> <div class="row"> <div class="col-lg-4 mb-4"> <div class="footer-brand display-font">⨠Ălite Boutique</div> <p class="text-white-50 mb-4">Your premier destination for luxury fashion and contemporary style since 2015. Discover curated collections, personalized styling, and exceptional service at our elegant boutique. Experience fashion that makes you feel extraordinary!</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-youtube"></i></a> </div> </div> <div class="col-lg-2 col-md-6 mb-4"> <h5 class="fw-bold mb-3 text-white">Quick Links</h5> <div class="footer-links"> <a href="#home">Home</a> <a href="#collections">Collections</a> <a href="#featured">Featured</a> <a href="#about">About Us</a> <a href="#services">Services</a> <a href="#contact">Contact</a> </div> </div> <div class="col-lg-3 col-md-6 mb-4"> <h5 class="fw-bold mb-3 text-white">Collections</h5> <div class="footer-links"> <a href="#" onclick="viewCollection('evening')">Evening Elegance</a> <a href="#" onclick="viewCollection('casual')">Casual Chic</a> <a href="#" onclick="viewCollection('business')">Business Professional</a> <a href="#" onclick="viewCollection('accessories')">Luxury Accessories</a> <a href="#" onclick="viewCollection('bridal')">Bridal Collection</a> <a href="#" onclick="viewCollection('summer')">Summer Breeze</a> </div> </div> <div class="col-lg-3 col-md-6 mb-4"> <h5 class="fw-bold mb-3 text-white">Contact Info</h5> <div class="footer-links"> <a href="tel:+15557895353">? +1-555-STYLE</a> <a href="mailto:info@eliteboutique.com">? info@eliteboutique.com</a> <a href="#">? 789 Fashion Avenue, NYC</a> <a href="#" onclick="showHours()">? Boutique Hours</a> <a href="#" onclick="shopNow()">?ď¸ Shop Online</a> </div> </div> </div> <hr class="my-4"> <div class="row align-items-center"> <div class="col-md-6"> <p class="text-white-50 mb-0">© 2024 Ălite Boutique. All rights reserved.</p> </div> <div class="col-md-6 text-md-end"> <a href="#" class="text-white-50 me-3">Privacy Policy</a> <a href="#" class="text-white-50 me-3">Terms of Service</a> <a href="#" class="text-white-50">Size Guide</a> </div> </div> </div> </footer> <!-- Success Message --> <div class="success-message" id="successMessage"> <i class="fas fa-check-circle me-2"></i> <span id="successText">Success!</span> </div> <!-- Bootstrap JS --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> <script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'976b71316641a75f',t:'MTc1NjQ2NDE1MS4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></body> </html>
CSS
:root { --primary-black: #1a1a1a; --luxury-gold: #D4AF37; --soft-pink: #F8BBD9; --cream-white: #FFF8F5; --elegant-gray: #6B7280; --deep-burgundy: #800020; --rose-gold: #E8B4B8; --charcoal: #36454F; --pearl-white: #F8F6F0; --gradient-luxury: linear-gradient(135deg, #D4AF37 0%, #800020 100%); --gradient-soft: linear-gradient(135deg, #F8BBD9 0%, #E8B4B8 100%); --gradient-elegant: linear-gradient(135deg, #1a1a1a 0%, #36454F 100%); --shadow-soft: 0 4px 6px -1px rgba(212, 175, 55, 0.1); --shadow-medium: 0 10px 15px -3px rgba(212, 175, 55, 0.2); --shadow-heavy: 0 25px 50px -12px rgba(212, 175, 55, 0.3); --border-radius: 15px; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Poppins', sans-serif; line-height: 1.6; color: var(--primary-black); overflow-x: hidden; } .display-font { font-family: 'Playfair Display', serif; } .script-font { font-family: 'Dancing Script', cursive; } /* Header Banner */ .header-banner { background: var(--gradient-luxury); color: white; padding: 12px 0; text-align: center; font-weight: 500; animation: slideDown 0.5s ease-out; } @keyframes slideDown { from { transform: translateY(-100%); } to { transform: translateY(0); } } /* Navigation */ .navbar-custom { background: rgba(248, 246, 240, 0.98); backdrop-filter: blur(20px); box-shadow: var(--shadow-soft); transition: all 0.3s ease; padding: 1rem 0; } .navbar-brand { font-weight: 700; font-size: 2.5rem; color: var(--primary-black) !important; display: flex; align-items: center; } .navbar-brand i { margin-right: 12px; font-size: 2.8rem; color: var(--luxury-gold); } .nav-link { font-weight: 500; color: var(--elegant-gray) !important; margin: 0 0.5rem; transition: all 0.3s ease; position: relative; } .nav-link:hover { color: var(--luxury-gold) !important; } .nav-link::after { content: ''; position: absolute; width: 0; height: 2px; bottom: -5px; left: 50%; background: var(--gradient-luxury); transition: all 0.3s ease; transform: translateX(-50%); } .nav-link:hover::after { width: 100%; } .btn-shop { background: var(--gradient-luxury); color: white; border: none; padding: 12px 25px; border-radius: 25px; font-weight: 600; margin-left: 15px; transition: all 0.3s ease; } .btn-shop:hover { transform: translateY(-2px); box-shadow: var(--shadow-medium); color: white; } /* Hero Section */ .hero-section { height: 100vh; background: linear-gradient(rgba(26, 26, 26, 0.405), rgba(128, 0, 32, 0.397)), url('https://images.unsplash.com/photo-1441986300917-64674bd600d8?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80') center/cover; display: flex; align-items: center; position: relative; overflow: hidden; } .hero-content { position: relative; z-index: 2; } .hero-title { font-size: 3.5rem; font-weight: 700; color: white; /* margin-bottom: 1.5rem; */ text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4); animation: fadeInUp 1s ease-out; } .hero-subtitle { font-size: 1.8rem; color: rgba(255, 255, 255, 0.95); /* margin-bottom: 2rem; */ animation: fadeInUp 1s ease-out 0.3s both; } .hero-features { display: flex; gap: 2rem; margin-bottom: 3rem; animation: fadeInUp 1s ease-out 0.6s both; flex-wrap: wrap; } .feature-item { display: flex; align-items: center; color: white; background: rgba(212, 175, 55, 0.2); padding: 18px 25px; border-radius: 30px; backdrop-filter: blur(10px); border: 1px solid rgba(212, 175, 55, 0.3); } .feature-icon { font-size: 1.8rem; margin-right: 12px; color: var(--luxury-gold); } .hero-buttons { animation: fadeInUp 1s ease-out 0.9s both; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: translateY(0); } } .btn-custom { padding: 18px 40px; font-weight: 600; border-radius: 50px; text-transform: uppercase; letter-spacing: 1px; transition: all 0.3s ease; border: none; margin: 0 10px; text-decoration: none; display: inline-block; } .btn-primary-custom { background: var(--gradient-luxury); color: white; } .btn-primary-custom:hover { transform: translateY(-3px); box-shadow: var(--shadow-heavy); color: white; } .btn-secondary-custom { background: transparent; color: white; border: 2px solid white; } .btn-secondary-custom:hover { background: white; color: var(--luxury-gold); transform: translateY(-3px); } /* Section Styling */ .section-padding { padding: 100px 0; } .section-title { font-size: 4rem; font-weight: 700; margin-bottom: 1rem; color: var(--primary-black); text-align: center; } .section-subtitle { font-size: 1.4rem; color: var(--elegant-gray); margin-bottom: 4rem; text-align: center; opacity: 0.9; } /* Collections Section */ .collections-section { background: var(--cream-white); } .collection-card { background: white; border-radius: var(--border-radius); overflow: hidden; box-shadow: var(--shadow-soft); transition: all 0.4s ease; height: 100%; position: relative; border: 3px solid transparent; } .collection-card:hover { transform: translateY(-15px); box-shadow: var(--shadow-heavy); border-color: var(--luxury-gold); } .collection-image { height: 300px; background-size: cover; background-position: center; position: relative; overflow: hidden; } .collection-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(to bottom, transparent, rgba(26, 26, 26, 0.8)); display: flex; align-items: flex-end; padding: 2rem; opacity: 0; transition: opacity 0.3s ease; } .collection-card:hover .collection-overlay { opacity: 1; } .collection-badge { position: absolute; top: 20px; right: 20px; background: var(--luxury-gold); color: white; padding: 8px 15px; border-radius: 20px; font-weight: 600; font-size: 0.9rem; } .collection-content { padding: 2.5rem; } .collection-title { font-size: 1.8rem; font-weight: 700; margin-bottom: 1rem; color: var(--primary-black); } .collection-description { color: var(--elegant-gray); margin-bottom: 1.5rem; line-height: 1.6; } .collection-price { font-size: 1.4rem; font-weight: 700; color: var(--luxury-gold); margin-bottom: 1.5rem; } .btn-view-collection { background: var(--gradient-luxury); color: white; border: none; padding: 12px 25px; border-radius: 25px; font-weight: 600; transition: all 0.3s ease; width: 100%; } .btn-view-collection:hover { transform: translateY(-2px); box-shadow: var(--shadow-medium); color: white; } /* Featured Products */ .featured-section { background: white; } .product-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 3rem; margin-top: 3rem; } .product-card { background: white; border-radius: var(--border-radius); overflow: hidden; box-shadow: var(--shadow-soft); transition: all 0.4s ease; position: relative; border: 3px solid transparent; } .product-card:hover { transform: translateY(-12px); box-shadow: var(--shadow-heavy); border-color: var(--soft-pink); } .product-image { height: 350px; background-size: cover; background-position: center; position: relative; overflow: hidden; } .product-badge { position: absolute; top: 15px; left: 15px; background: var(--deep-burgundy); color: white; padding: 6px 12px; border-radius: 15px; font-size: 0.8rem; font-weight: 600; } .product-badge.new { background: var(--luxury-gold); } .product-badge.sale { background: #e74c3c; } .product-actions { position: absolute; top: 15px; right: 15px; display: flex; flex-direction: column; gap: 10px; opacity: 0; transition: opacity 0.3s ease; } .product-card:hover .product-actions { opacity: 1; } .action-btn { width: 45px; height: 45px; background: white; border: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-soft); transition: all 0.3s ease; color: var(--primary-black); } .action-btn:hover { background: var(--luxury-gold); color: white; transform: scale(1.1); } .product-info { padding: 2rem; } .product-category { color: var(--elegant-gray); font-size: 0.9rem; margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 1px; } .product-name { font-size: 1.4rem; font-weight: 600; margin-bottom: 1rem; color: var(--primary-black); } .product-price { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; } .current-price { font-size: 1.6rem; font-weight: 700; color: var(--luxury-gold); } .original-price { font-size: 1.2rem; color: var(--elegant-gray); text-decoration: line-through; } .product-rating { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1.5rem; } .stars { color: var(--luxury-gold); } .rating-text { color: var(--elegant-gray); font-size: 0.9rem; } .btn-add-cart { background: var(--gradient-luxury); color: white; border: none; padding: 12px 25px; border-radius: 25px; font-weight: 600; width: 100%; transition: all 0.3s ease; } .btn-add-cart:hover { transform: translateY(-2px); box-shadow: var(--shadow-medium); color: white; } /* About Section */ .about-section { background: var(--pearl-white); } .about-content { display: flex; align-items: center; gap: 5rem; } .about-text { flex: 1; } .about-image { flex: 1; position: relative; } .about-img { width: 100%; border-radius: var(--border-radius); box-shadow: var(--shadow-medium); } .experience-badge { position: absolute; top: -40px; right: -40px; background: var(--gradient-luxury); color: white; padding: 30px; border-radius: 50%; text-align: center; box-shadow: var(--shadow-medium); } .experience-years { font-size: 3rem; font-weight: 800; display: block; } .experience-text { font-size: 1rem; margin-top: 8px; } /* Services Section */ .services-section { background: white; } .service-card { text-align: center; padding: 3rem 2rem; background: var(--cream-white); border-radius: var(--border-radius); transition: all 0.3s ease; height: 100%; border: 3px solid transparent; } .service-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-heavy); border-color: var(--luxury-gold); } .service-icon { width: 80px; height: 80px; background: var(--gradient-luxury); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 2rem; font-size: 2.5rem; color: white; transition: transform 0.3s ease; } .service-card:hover .service-icon { transform: scale(1.1); } .service-title { font-size: 1.6rem; font-weight: 700; margin-bottom: 1rem; color: var(--primary-black); } .service-description { color: var(--elegant-gray); line-height: 1.6; } /* Testimonials Section */ .testimonials-section { background: var(--gradient-elegant); color: white; } .testimonial-card { background: rgba(212, 175, 55, 0.1); border-radius: var(--border-radius); padding: 3rem; text-align: center; backdrop-filter: blur(10px); border: 1px solid rgba(212, 175, 55, 0.2); height: 100%; } .testimonial-avatar { width: 80px; height: 80px; background: var(--luxury-gold); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 2rem; font-size: 2rem; color: var(--primary-black); } .testimonial-text { font-size: 1.2rem; font-style: italic; margin-bottom: 2rem; line-height: 1.6; } .testimonial-author { font-weight: 600; color: var(--luxury-gold); } .testimonial-role { color: rgba(255, 255, 255, 0.8); font-size: 0.9rem; } /* Contact Section */ .contact-section { background: var(--cream-white); } .contact-info { background: white; border-radius: var(--border-radius); padding: 4rem; box-shadow: var(--shadow-soft); } .contact-item { display: flex; align-items: center; margin-bottom: 3rem; } .contact-icon { width: 70px; height: 70px; background: var(--gradient-luxury); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 2rem; font-size: 1.8rem; color: white; } .contact-details h5 { margin-bottom: 0.5rem; font-weight: 700; color: var(--primary-black); } .contact-details p { margin: 0; color: var(--elegant-gray); } /* Newsletter Section */ .newsletter-form { background: white; border-radius: var(--border-radius); padding: 4rem; box-shadow: var(--shadow-soft); } .form-group { margin-bottom: 2rem; } .form-label { font-weight: 600; color: var(--primary-black); margin-bottom: 0.5rem; } .form-control { border: 2px solid var(--soft-pink); border-radius: 10px; padding: 15px 20px; font-size: 1.1rem; transition: all 0.3s ease; } .form-control:focus { border-color: var(--luxury-gold); box-shadow: 0 0 0 0.2rem rgba(212, 175, 55, 0.25); } .btn-subscribe { background: var(--gradient-luxury); color: white; border: none; padding: 15px 35px; border-radius: 25px; font-weight: 700; width: 100%; transition: all 0.3s ease; } .btn-subscribe:hover { transform: translateY(-2px); box-shadow: var(--shadow-medium); } /* Footer */ .footer-section { background: var(--primary-black); color: white; padding: 80px 0 40px; } .footer-brand { font-size: 2.5rem; font-weight: 700; margin-bottom: 2rem; color: var(--luxury-gold); } .footer-links a { color: rgba(255, 255, 255, 0.8); text-decoration: none; transition: color 0.3s ease; display: block; margin-bottom: 0.8rem; } .footer-links a:hover { color: var(--luxury-gold); } .social-links a { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; background: var(--gradient-luxury); color: white; border-radius: 50%; margin: 0 10px; transition: all 0.3s ease; text-decoration: none; } .social-links a:hover { transform: translateY(-3px); box-shadow: var(--shadow-medium); } /* Animations */ .animate-on-scroll { opacity: 0; transform: translateY(50px); transition: all 0.8s ease; } .animate-on-scroll.animated { opacity: 1; transform: translateY(0); } /* Success Messages */ .success-message { position: fixed; top: 120px; right: 30px; background: var(--luxury-gold); color: white; padding: 20px 30px; border-radius: 15px; box-shadow: var(--shadow-medium); z-index: 1060; transform: translateX(400px); transition: transform 0.3s ease; } .success-message.show { transform: translateX(0); } /* Loading Animation */ .loading-spinner { display: inline-block; width: 20px; height: 20px; border: 3px solid rgba(255, 255, 255, 0.3); border-radius: 50%; border-top-color: white; animation: spin 1s ease-in-out infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* Responsive Design */ @media (max-width: 768px) { .hero-title { font-size: 3.5rem; } .section-title { font-size: 2.5rem; } .hero-features { flex-direction: column; gap: 1rem; } .about-content { flex-direction: column; gap: 3rem; } .experience-badge { position: relative; top: 0; right: 0; margin-top: 2rem; align-self: center; } .product-grid { grid-template-columns: 1fr; } }
JavaScript
// Smooth scrolling for navigation links document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function (e) { e.preventDefault(); const target = document.querySelector(this.getAttribute('href')); if (target) { target.scrollIntoView({ behavior: 'smooth', block: 'start' }); } }); }); // Animate elements on scroll function animateOnScroll() { const elements = document.querySelectorAll('.animate-on-scroll'); elements.forEach(element => { const elementTop = element.getBoundingClientRect().top; const elementVisible = 150; if (elementTop < window.innerHeight - elementVisible) { element.classList.add('animated'); } }); } // Navbar background on scroll window.addEventListener('scroll', function() { const navbar = document.querySelector('.navbar-custom'); if (window.scrollY > 50) { navbar.style.background = 'rgba(248, 246, 240, 0.98)'; navbar.style.boxShadow = '0 4px 20px rgba(212, 175, 55, 0.2)'; } else { navbar.style.background = 'rgba(248, 246, 240, 0.98)'; navbar.style.boxShadow = '0 4px 6px -1px rgba(212, 175, 55, 0.1)'; } animateOnScroll(); }); // Shop now function function shopNow() { showSuccessMessage('Redirecting to online store...'); setTimeout(() => { alert('⨠ĂLITE BOUTIQUE - ONLINE SHOPPING â¨\n\n?ď¸ Shopping Options:\n⢠Visit our boutique: 789 Fashion Avenue, NYC\n⢠Online store: eliteboutique.com\n⢠Personal shopping: Call +1-555-STYLE\n⢠Virtual styling: Book online consultation\n⢠Mobile app: "Ălite Boutique Official"\n\n? Featured Collections:\n⢠Evening Elegance: Starting from $299\n⢠Casual Chic: Starting from $89\n⢠Business Professional: Starting from $199\n⢠Luxury Accessories: Starting from $149\n⢠Bridal Collection: Starting from $899\n⢠Summer Breeze: Starting from $79\n\n? Boutique Hours:\n⢠Monday-Friday: 10 AM - 8 PM\n⢠Saturday: 10 AM - 7 PM\n⢠Sunday: 12 PM - 6 PM\n⢠Private appointments available\n\n? Payment & Services:\n⢠All major credit cards accepted\n⢠PayPal and Apple Pay available\n⢠Free shipping on orders $150+\n⢠Personal styling consultations\n⢠Custom alterations available\n⢠VIP membership program\n\n? New Customer Benefits:\n⢠15% off first purchase\n⢠Complimentary styling consultation\n⢠Free alterations on first order\n⢠Exclusive access to private sales\n\n? Questions? Call +1-555-STYLE'); }, 1000); } // View collection function function viewCollection(collectionType) { const collections = { 'evening': { title: 'Evening Elegance Collection', details: '⨠EVENING ELEGANCE COLLECTION â¨\n\n? Sophisticated Evening Wear:\n⢠Elegant Black Dress: $299-399\n⢠Cocktail Dresses: $249-349\n⢠Formal Gowns: $399-799\n⢠Designer Evening Wear: $599-1,299\n⢠Luxury Ball Gowns: $899-1,899\n⢠Vintage-Inspired Pieces: $349-549\n\n? Collection Highlights:\n⢠Premium silk and satin fabrics\n⢠Hand-beaded and embroidered details\n⢠Classic and contemporary silhouettes\n⢠Available in sizes XS-3XL\n⢠Custom color options available\n⢠Professional styling included\n\n? Perfect For:\n⢠Galas and charity events\n⢠Wedding receptions\n⢠Theater and opera nights\n⢠Corporate formal events\n⢠Anniversary celebrations\n⢠Red carpet occasions\n\n?â? Styling Services:\n⢠Personal consultation included\n⢠Accessory coordination\n⢠Shoe and jewelry pairing\n⢠Hair and makeup recommendations\n⢠Photography styling available\n\n? Book your evening wear consultation:\n⢠Call: +1-555-STYLE\n⢠Visit: 789 Fashion Avenue, NYC\n⢠Private appointments available' }, 'casual': { title: 'Casual Chic Collection', details: '? CASUAL CHIC COLLECTION ?\n\n? Effortless Everyday Style:\n⢠Stylish Casual Tops: $89-129\n⢠Designer Jeans: $149-249\n⢠Comfortable Dresses: $99-179\n⢠Casual Blazers: $179-279\n⢠Weekend Wear: $69-149\n⢠Athleisure Pieces: $79-159\n\n⨠Collection Features:\n⢠Premium cotton and modal blends\n⢠Sustainable and eco-friendly options\n⢠Versatile pieces for mix-and-match\n⢠Comfortable yet stylish designs\n⢠Easy-care fabrics\n⢠Trend-forward colors and patterns\n\n? Perfect For:\n⢠Weekend outings\n⢠Casual office environments\n⢠Brunch and lunch dates\n⢠Shopping and errands\n⢠Travel and vacation\n⢠Everyday comfort\n\n?ď¸ Styling Tips:\n⢠Layer pieces for versatility\n⢠Mix textures and patterns\n⢠Add accessories for instant elevation\n⢠Choose quality basics as foundation\n⢠Invest in comfortable footwear\n\n? Shop casual chic:\n⢠Visit our boutique for try-ons\n⢠Personal styling available\n⢠Mix-and-match consultations' }, 'business': { title: 'Business Professional Collection', details: '? BUSINESS PROFESSIONAL COLLECTION ?\n\n? Power Dressing Essentials:\n⢠Professional Blazers: $249-399\n⢠Tailored Suits: $399-699\n⢠Business Dresses: $199-349\n⢠Executive Blouses: $129-199\n⢠Professional Skirts: $149-229\n⢠Work-appropriate Accessories: $49-199\n\n? Collection Excellence:\n⢠Premium wool and silk blends\n⢠Wrinkle-resistant fabrics\n⢠Classic and modern cuts\n⢠Professional color palette\n⢠Custom tailoring available\n⢠Investment-quality pieces\n\n? Perfect For:\n⢠Board meetings and presentations\n⢠Client meetings and networking\n⢠Professional conferences\n⢠Job interviews\n⢠Executive positions\n⢠Business travel\n\n?â? Professional Styling:\n⢠Wardrobe consultation for executives\n⢠Mix-and-match coordination\n⢠Seasonal wardrobe planning\n⢠Professional image consulting\n⢠Custom fitting services\n\n? Book your professional styling:\n⢠Executive styling packages available\n⢠Corporate group consultations\n⢠Wardrobe investment planning' }, 'accessories': { title: 'Luxury Accessories Collection', details: '? LUXURY ACCESSORIES COLLECTION ?\n\n? Premium Accessories:\n⢠Designer Handbags: $399-899\n⢠Luxury Jewelry: $149-599\n⢠Silk Scarves: $89-199\n⢠Designer Sunglasses: $199-399\n⢠Premium Belts: $129-249\n⢠Evening Clutches: $179-349\n\n⨠Collection Features:\n⢠Authentic designer pieces\n⢠Limited edition items\n⢠Handcrafted quality\n⢠Timeless and trendy styles\n⢠Investment accessories\n⢠Exclusive boutique pieces\n\n? Perfect For:\n⢠Completing any outfit\n⢠Special occasion gifts\n⢠Professional accessories\n⢠Travel essentials\n⢠Investment pieces\n⢠Personal collection building\n\n? Accessory Styling:\n⢠Personal accessory consultation\n⢠Outfit coordination services\n⢠Investment piece guidance\n⢠Seasonal accessory updates\n⢠Gift selection assistance\n\n? Explore luxury accessories:\n⢠Private viewing appointments\n⢠Exclusive piece previews\n⢠Authentication guarantee' }, 'summer': { title: 'Summer Breeze Collection', details: 'âď¸ SUMMER BREEZE COLLECTION âď¸\n\n? Light & Airy Summer Styles:\n⢠Floral Summer Dresses: $149-199\n⢠Lightweight Tops: $79-129\n⢠Flowing Maxi Dresses: $129-229\n⢠Summer Blazers: $149-199\n⢠Beach Cover-ups: $89-149\n⢠Resort Wear: $99-179\n\n? Collection Highlights:\n⢠Breathable natural fabrics\n⢠Vibrant summer colors\n⢠Comfortable and stylish cuts\n⢠UV-protective options\n⢠Easy-care materials\n⢠Vacation-ready pieces\n\n?ď¸ Perfect For:\n⢠Summer vacations\n⢠Beach and resort wear\n⢠Outdoor events\n⢠Garden parties\n⢠Casual summer outings\n⢠Warm weather comfort\n\n? Summer Styling:\n⢠Vacation wardrobe planning\n⢠Climate-appropriate selections\n⢠Layering for air conditioning\n⢠Sun protection styling\n⢠Travel-friendly pieces\n\n? Shop summer collection:\n⢠Seasonal styling consultations\n⢠Vacation wardrobe packages\n⢠Resort wear specialists' }, 'bridal': { title: 'Bridal Collection', details: '? BRIDAL COLLECTION ?\n\n? Exquisite Wedding Attire:\n⢠Luxury Wedding Gowns: $1,299-3,999\n⢠Bridesmaid Dresses: $199-399\n⢠Mother of Bride Dresses: $299-599\n⢠Bridal Accessories: $49-299\n⢠Wedding Shoes: $149-399\n⢠Bridal Jewelry: $99-599\n\n⨠Bridal Excellence:\n⢠Designer and custom gowns\n⢠Premium silk, lace, and tulle\n⢠Hand-beaded and embroidered details\n⢠Custom sizing and alterations\n⢠Exclusive bridal designers\n⢠Heirloom-quality pieces\n\n? Perfect For:\n⢠Wedding ceremonies\n⢠Engagement parties\n⢠Bridal showers\n⢠Rehearsal dinners\n⢠Honeymoon occasions\n⢠Anniversary celebrations\n\n?ââď¸ Bridal Services:\n⢠Private bridal appointments\n⢠Custom gown design\n⢠Professional alterations\n⢠Bridal party coordination\n⢠Accessory styling\n⢠Wedding day preparation\n\n? Book your bridal consultation:\n⢠Exclusive bridal suite appointments\n⢠Custom design consultations\n⢠Bridal party group sessions\n⢠Wedding timeline planning' } }; const collection = collections[collectionType]; if (collection) { alert(collection.details); } } // Product functions function quickView(productId) { showSuccessMessage('Opening product details...'); setTimeout(() => { alert('? PRODUCT QUICK VIEW ?\n\nProduct details, size guide, and styling suggestions would be displayed here in a full e-commerce implementation.\n\n? For detailed product information:\n⢠Call: +1-555-STYLE\n⢠Visit: 789 Fashion Avenue, NYC\n⢠Email: info@eliteboutique.com\n\n?ď¸ Available Services:\n⢠Try before you buy\n⢠Personal styling consultation\n⢠Custom alterations\n⢠Size and fit guidance'); }, 800); } function addToWishlist(productId) { showSuccessMessage('Added to wishlist!'); } function addToCart(productId) { showSuccessMessage('Added to shopping cart!'); setTimeout(() => { alert('? ADDED TO CART ?\n\nâ Item successfully added to your shopping cart!\n\n?ď¸ Next Steps:\n⢠Continue shopping\n⢠View cart and checkout\n⢠Schedule fitting appointment\n⢠Add matching accessories\n\n? Need assistance?\n⢠Call: +1-555-STYLE\n⢠Live chat available\n⢠Personal shopper assistance\n\n? Benefits:\n⢠Free shipping on orders $150+\n⢠Easy returns within 30 days\n⢠Professional styling advice\n⢠Alteration services available'); }, 1000); } // Show opening hours function showHours() { alert('? ĂLITE BOUTIQUE - OPENING HOURS ?\n\n? Weekly Schedule:\n⢠Monday - Friday: 10:00 AM - 8:00 PM\n⢠Saturday: 10:00 AM - 7:00 PM\n⢠Sunday: 12:00 PM - 6:00 PM\n\n? Service Availability:\n⢠Personal styling: All operating hours\n⢠Private appointments: By arrangement\n⢠Alterations: Monday-Friday 10 AM - 6 PM\n⢠VIP services: Extended hours available\n\n? Special Hours:\n⢠Holiday extended hours\n⢠Private shopping events\n⢠Trunk show appointments\n⢠Bridal consultations: Extended availability\n\n? Schedule your visit:\nCall: +1-555-STYLE\nEmail: info@eliteboutique.com\n? 789 Fashion Avenue, NYC'); } // Newsletter form submission document.getElementById('newsletterForm').addEventListener('submit', function(e) { e.preventDefault(); const submitBtn = this.querySelector('.btn-subscribe'); const originalText = submitBtn.innerHTML; submitBtn.innerHTML = '<span class="loading-spinner"></span> Subscribing...'; submitBtn.disabled = true; setTimeout(() => { submitBtn.innerHTML = originalText; submitBtn.disabled = false; this.reset(); showSuccessMessage('Successfully subscribed to our newsletter!'); setTimeout(() => { alert('⨠NEWSLETTER SUBSCRIPTION CONFIRMED â¨\n\nâ Welcome to the Ălite Boutique family!\n? You\'ll receive our fashion newsletter with:\n\n? What to Expect:\n⢠New collection previews\n⢠Exclusive member discounts\n⢠Private sale invitations\n⢠Fashion trend updates\n⢠Styling tips and advice\n⢠VIP event invitations\n\n? Welcome Benefits:\n⢠15% off your next purchase\n⢠Early access to sales\n⢠Complimentary styling consultation\n⢠Birthday month special offers\n⢠Exclusive member-only events\n\n? Stay Connected:\n⢠Follow us on Instagram @eliteboutique\n⢠Join our VIP Facebook group\n⢠Download our mobile app\n⢠Enable push notifications for flash sales\n\n? Questions about your subscription?\nCall: +1-555-STYLE\nEmail: info@eliteboutique.com\n\n? Thank you for joining our fashion community!\nGet ready for exclusive access to luxury fashion! â¨'); }, 1000); }, 2000); }); // Show success message function showSuccessMessage(message) { const successMessage = document.getElementById('successMessage'); const successText = document.getElementById('successText'); successText.textContent = message; successMessage.classList.add('show'); setTimeout(() => { successMessage.classList.remove('show'); }, 3000); } // Initialize animations on page load document.addEventListener('DOMContentLoaded', function() { animateOnScroll(); });
Output Preview
Desktop
Mobile
Fullscreen