Bella Cosmetics Premium Beauty Skincare
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>Bella Cosmetics - Premium Beauty & Skincare</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=Playfair+Display:wght@400;500;600;700;800;900&family=Poppins:wght@300;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"> ? FREE SHIPPING ON ORDERS OVER $50 | NEW ARRIVALS WEEKLY | CRUELTY-FREE & VEGAN OPTIONS ? </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-gem"></i> Bella Cosmetics </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="#products">Products</a> </li> <li class="nav-item"> <a class="nav-link" href="#categories">Categories</a> </li> <li class="nav-item"> <a class="nav-link" href="#features">About</a> </li> <li class="nav-item"> <a class="nav-link" href="#newsletter">Contact</a> </li> <li class="nav-item"> <button class="btn btn-shop" onclick="openCart()"> <i class="fas fa-shopping-bag me-2"></i>Cart <span class="cart-badge" id="cartBadge">0</span> </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">Beauty That Inspires</h1> <p class="hero-subtitle">Discover premium cosmetics and skincare products that enhance your natural beauty. From luxury makeup to innovative skincare, find everything you need to look and feel your absolute best.</p> <div class="hero-features"> <div class="feature-item"> <i class="fas fa-leaf feature-icon"></i> <span><strong>Cruelty-Free</strong></span> </div> <div class="feature-item"> <i class="fas fa-award feature-icon"></i> <span><strong>Premium Quality</strong></span> </div> <div class="feature-item"> <i class="fas fa-shipping-fast feature-icon"></i> <span><strong>Free Shipping</strong></span> </div> </div> <div class="hero-buttons"> <a href="#products" class="btn btn-custom btn-primary-custom">Shop Now</a> <a href="#categories" class="btn btn-custom btn-secondary-custom">Browse Categories</a> </div> </div> </div> </div> </div> </section> <!-- Products Section --> <section id="products" class="products-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">Discover our bestselling beauty essentials loved by makeup artists and beauty enthusiasts worldwide</p> </div> </div> <div class="row"> <div class="col-lg-4 col-md-6 mb-4"> <div class="product-card animate-on-scroll"> <div class="product-image" style="background-image: url('https://images.unsplash.com/photo-1522335789203-aabd1fc54bc9?ixlib=rb-4.0.3&auto=format&fit=crop&w=1170&q=80')"> <div class="product-badge product-new">New</div> <div class="product-actions"> <button class="action-btn" onclick="addToWishlist('luxury-foundation')"> <i class="fas fa-heart"></i> </button> <button class="action-btn" onclick="quickView('luxury-foundation')"> <i class="fas fa-eye"></i> </button> <button class="action-btn" onclick="shareProduct('luxury-foundation')"> <i class="fas fa-share"></i> </button> </div> <div class="product-overlay"> <h5 style="color: white; margin: 0;">Luxury Foundation</h5> </div> </div> <div class="product-content"> <div class="product-category">Foundation</div> <h4 class="product-title">Radiant Glow Foundation</h4> <p class="product-description">Full coverage foundation with 24-hour wear and SPF 30 protection. Available in 40 inclusive shades.</p> <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">(324 reviews)</span> </div> <div class="product-price"> <div> <span class="price-current">$45.00</span> <span class="price-original">$55.00</span> </div> <span class="price-discount">18% OFF</span> </div> <button class="btn-add-cart" onclick="addToCart('luxury-foundation', 'Radiant Glow Foundation', 45.00)"> <i class="fas fa-shopping-bag me-2"></i>Add to Cart </button> </div> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="product-card animate-on-scroll"> <div class="product-image" style="background-image: url('https://images.unsplash.com/photo-1522335789203-aabd1fc54bc9?ixlib=rb-4.0.3&auto=format&fit=crop&w=1170&q=80')"> <div class="product-badge product-sale">Sale</div> <div class="product-actions"> <button class="action-btn" onclick="addToWishlist('eyeshadow-palette')"> <i class="fas fa-heart"></i> </button> <button class="action-btn" onclick="quickView('eyeshadow-palette')"> <i class="fas fa-eye"></i> </button> <button class="action-btn" onclick="shareProduct('eyeshadow-palette')"> <i class="fas fa-share"></i> </button> </div> <div class="product-overlay"> <h5 style="color: white; margin: 0;">Eyeshadow Palette</h5> </div> </div> <div class="product-content"> <div class="product-category">Eyeshadow</div> <h4 class="product-title">Sunset Dreams Palette</h4> <p class="product-description">18 highly pigmented shades in warm sunset tones. Includes matte, shimmer, and metallic finishes.</p> <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">(567 reviews)</span> </div> <div class="product-price"> <div> <span class="price-current">$32.00</span> <span class="price-original">$48.00</span> </div> <span class="price-discount">33% OFF</span> </div> <button class="btn-add-cart" onclick="addToCart('eyeshadow-palette', 'Sunset Dreams Palette', 32.00)"> <i class="fas fa-shopping-bag me-2"></i>Add to Cart </button> </div> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="product-card animate-on-scroll"> <div class="product-image" style="background-image: url('https://images.unsplash.com/photo-1586495777744-4413f21062fa?ixlib=rb-4.0.3&auto=format&fit=crop&w=1170&q=80')"> <div class="product-badge">Bestseller</div> <div class="product-actions"> <button class="action-btn" onclick="addToWishlist('lipstick-set')"> <i class="fas fa-heart"></i> </button> <button class="action-btn" onclick="quickView('lipstick-set')"> <i class="fas fa-eye"></i> </button> <button class="action-btn" onclick="shareProduct('lipstick-set')"> <i class="fas fa-share"></i> </button> </div> <div class="product-overlay"> <h5 style="color: white; margin: 0;">Lipstick Collection</h5> </div> </div> <div class="product-content"> <div class="product-category">Lipstick</div> <h4 class="product-title">Velvet Matte Lipstick Set</h4> <p class="product-description">Set of 6 long-lasting matte lipsticks in trending shades. Comfortable wear for up to 8 hours.</p> <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-half-alt"></i> </div> <span class="rating-text">(892 reviews)</span> </div> <div class="product-price"> <div> <span class="price-current">$68.00</span> </div> </div> <button class="btn-add-cart" onclick="addToCart('lipstick-set', 'Velvet Matte Lipstick Set', 68.00)"> <i class="fas fa-shopping-bag me-2"></i>Add to Cart </button> </div> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="product-card animate-on-scroll"> <div class="product-image" style="background-image: url('https://images.unsplash.com/photo-1620916566398-39f1143ab7be?ixlib=rb-4.0.3&auto=format&fit=crop&w=1170&q=80')"> <div class="product-badge product-new">New</div> <div class="product-actions"> <button class="action-btn" onclick="addToWishlist('skincare-serum')"> <i class="fas fa-heart"></i> </button> <button class="action-btn" onclick="quickView('skincare-serum')"> <i class="fas fa-eye"></i> </button> <button class="action-btn" onclick="shareProduct('skincare-serum')"> <i class="fas fa-share"></i> </button> </div> <div class="product-overlay"> <h5 style="color: white; margin: 0;">Vitamin C Serum</h5> </div> </div> <div class="product-content"> <div class="product-category">Skincare</div> <h4 class="product-title">Brightening Vitamin C Serum</h4> <p class="product-description">Powerful antioxidant serum with 20% Vitamin C to brighten skin and reduce dark spots.</p> <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">(156 reviews)</span> </div> <div class="product-price"> <div> <span class="price-current">$38.00</span> </div> </div> <button class="btn-add-cart" onclick="addToCart('skincare-serum', 'Brightening Vitamin C Serum', 38.00)"> <i class="fas fa-shopping-bag me-2"></i>Add to Cart </button> </div> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="product-card animate-on-scroll"> <div class="product-image" style="background-image: url('https://images.unsplash.com/photo-1596755389378-c31d21fd1273?ixlib=rb-4.0.3&auto=format&fit=crop&w=1170&q=80')"> <div class="product-badge product-sale">Sale</div> <div class="product-actions"> <button class="action-btn" onclick="addToWishlist('makeup-brushes')"> <i class="fas fa-heart"></i> </button> <button class="action-btn" onclick="quickView('makeup-brushes')"> <i class="fas fa-eye"></i> </button> <button class="action-btn" onclick="shareProduct('makeup-brushes')"> <i class="fas fa-share"></i> </button> </div> <div class="product-overlay"> <h5 style="color: white; margin: 0;">Brush Set</h5> </div> </div> <div class="product-content"> <div class="product-category">Tools</div> <h4 class="product-title">Professional Brush Set</h4> <p class="product-description">12-piece professional makeup brush set with synthetic bristles and rose gold handles.</p> <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">(423 reviews)</span> </div> <div class="product-price"> <div> <span class="price-current">$42.00</span> <span class="price-original">$65.00</span> </div> <span class="price-discount">35% OFF</span> </div> <button class="btn-add-cart" onclick="addToCart('makeup-brushes', 'Professional Brush Set', 42.00)"> <i class="fas fa-shopping-bag me-2"></i>Add to Cart </button> </div> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="product-card animate-on-scroll"> <div class="product-image" style="background-image: url('https://images.unsplash.com/photo-1522335789203-aabd1fc54bc9?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="addToWishlist('face-mask')"> <i class="fas fa-heart"></i> </button> <button class="action-btn" onclick="quickView('face-mask')"> <i class="fas fa-eye"></i> </button> <button class="action-btn" onclick="shareProduct('face-mask')"> <i class="fas fa-share"></i> </button> </div> <div class="product-overlay"> <h5 style="color: white; margin: 0;">Hydrating Mask</h5> </div> </div> <div class="product-content"> <div class="product-category">Skincare</div> <h4 class="product-title">Gold Hydrating Face Mask</h4> <p class="product-description">Luxurious hydrating mask with 24k gold and hyaluronic acid for instant moisture boost.</p> <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-half-alt"></i> </div> <span class="rating-text">(234 reviews)</span> </div> <div class="product-price"> <div> <span class="price-current">$28.00</span> </div> </div> <button class="btn-add-cart" onclick="addToCart('face-mask', 'Gold Hydrating Face Mask', 28.00)"> <i class="fas fa-shopping-bag me-2"></i>Add to Cart </button> </div> </div> </div> </div> </div> </section> <!-- Categories Section --> <section id="categories" class="categories-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">Shop by Category</h2> <p class="section-subtitle animate-on-scroll">Explore our comprehensive range of beauty products organized by category</p> </div> </div> <div class="row"> <div class="col-lg-4 col-md-6 mb-4"> <div class="category-card animate-on-scroll"> <div class="category-icon"> <i class="fas fa-palette"></i> </div> <h4 class="category-title">Makeup</h4> <p class="category-description">Complete makeup collection including foundations, eyeshadows, lipsticks, and more for every look.</p> <div class="category-count">150+ Products</div> <button class="btn-category" onclick="browseCategory('makeup')"> <i class="fas fa-arrow-right me-2"></i>Shop Makeup </button> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="category-card animate-on-scroll"> <div class="category-icon"> <i class="fas fa-spa"></i> </div> <h4 class="category-title">Skincare</h4> <p class="category-description">Premium skincare products for all skin types including cleansers, serums, moisturizers, and treatments.</p> <div class="category-count">80+ Products</div> <button class="btn-category" onclick="browseCategory('skincare')"> <i class="fas fa-arrow-right me-2"></i>Shop Skincare </button> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="category-card animate-on-scroll"> <div class="category-icon"> <i class="fas fa-cut"></i> </div> <h4 class="category-title">Hair Care</h4> <p class="category-description">Professional hair care products including shampoos, conditioners, treatments, and styling tools.</p> <div class="category-count">60+ Products</div> <button class="btn-category" onclick="browseCategory('haircare')"> <i class="fas fa-arrow-right me-2"></i>Shop Hair Care </button> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="category-card animate-on-scroll"> <div class="category-icon"> <i class="fas fa-spray-can"></i> </div> <h4 class="category-title">Fragrance</h4> <p class="category-description">Exquisite collection of perfumes and body sprays from luxury and niche fragrance brands.</p> <div class="category-count">45+ Products</div> <button class="btn-category" onclick="browseCategory('fragrance')"> <i class="fas fa-arrow-right me-2"></i>Shop Fragrance </button> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="category-card animate-on-scroll"> <div class="category-icon"> <i class="fas fa-paint-brush"></i> </div> <h4 class="category-title">Tools & Brushes</h4> <p class="category-description">Professional makeup tools, brushes, and accessories for flawless application and blending.</p> <div class="category-count">35+ Products</div> <button class="btn-category" onclick="browseCategory('tools')"> <i class="fas fa-arrow-right me-2"></i>Shop Tools </button> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="category-card animate-on-scroll"> <div class="category-icon"> <i class="fas fa-gift"></i> </div> <h4 class="category-title">Gift Sets</h4> <p class="category-description">Beautifully curated gift sets perfect for special occasions and beauty lovers.</p> <div class="category-count">25+ Products</div> <button class="btn-category" onclick="browseCategory('gifts')"> <i class="fas fa-arrow-right me-2"></i>Shop Gifts </button> </div> </div> </div> </div> </section> <!-- Features Section --> <section id="features" class="features-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">Why Choose Bella Cosmetics</h2> <p class="section-subtitle animate-on-scroll">We're committed to providing the highest quality beauty products with exceptional service</p> </div> </div> <div class="row"> <div class="col-lg-4 col-md-6 mb-4"> <div class="feature-card animate-on-scroll"> <div class="feature-icon-large"> <i class="fas fa-leaf"></i> </div> <h4 class="feature-title">Cruelty-Free & Vegan</h4> <p class="feature-description">All our products are cruelty-free and many are vegan-friendly. We believe in ethical beauty that doesn't compromise on quality or performance.</p> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="feature-card animate-on-scroll"> <div class="feature-icon-large"> <i class="fas fa-shipping-fast"></i> </div> <h4 class="feature-title">Free Fast Shipping</h4> <p class="feature-description">Enjoy free shipping on orders over $50 with fast 2-3 day delivery. Express overnight shipping available for urgent orders.</p> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="feature-card animate-on-scroll"> <div class="feature-icon-large"> <i class="fas fa-award"></i> </div> <h4 class="feature-title">Premium Quality</h4> <p class="feature-description">We carefully curate only the finest beauty products from trusted brands known for their innovation and quality standards.</p> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="feature-card animate-on-scroll"> <div class="feature-icon-large"> <i class="fas fa-undo"></i> </div> <h4 class="feature-title">Easy Returns</h4> <p class="feature-description">Not satisfied? Return any product within 30 days for a full refund. Your satisfaction is our top priority.</p> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="feature-card animate-on-scroll"> <div class="feature-icon-large"> <i class="fas fa-user-friends"></i> </div> <h4 class="feature-title">Expert Support</h4> <p class="feature-description">Our beauty experts are here to help you find the perfect products for your skin type and beauty goals.</p> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="feature-card animate-on-scroll"> <div class="feature-icon-large"> <i class="fas fa-star"></i> </div> <h4 class="feature-title">Loyalty Rewards</h4> <p class="feature-description">Earn points with every purchase and unlock exclusive discounts, early access to new products, and special perks.</p> </div> </div> </div> </div> </section> <!-- Newsletter Section --> <section id="newsletter" class="newsletter-section section-padding"> <div class="container"> <div class="newsletter-content animate-on-scroll"> <h2 class="newsletter-title display-font">Stay Beautiful</h2> <p class="newsletter-subtitle">Subscribe to our newsletter for beauty tips, exclusive offers, and first access to new arrivals</p> <form class="newsletter-form" id="newsletterForm"> <input type="email" class="newsletter-input" placeholder="Enter your email address" required> <button type="submit" class="btn-newsletter"> <i class="fas fa-paper-plane me-2"></i>Subscribe </button> </form> </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">? Bella Cosmetics</div> <p class="text-white-75 mb-4">Your premier destination for luxury beauty products. We believe every person deserves to feel beautiful and confident in their own skin.</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">Shop</h5> <div class="footer-links"> <a href="#" onclick="browseCategory('makeup')">Makeup</a> <a href="#" onclick="browseCategory('skincare')">Skincare</a> <a href="#" onclick="browseCategory('haircare')">Hair Care</a> <a href="#" onclick="browseCategory('fragrance')">Fragrance</a> <a href="#" onclick="browseCategory('tools')">Tools</a> <a href="#" onclick="browseCategory('gifts')">Gift Sets</a> </div> </div> <div class="col-lg-3 col-md-6 mb-4"> <h5 class="fw-bold mb-3 text-white">Customer Care</h5> <div class="footer-links"> <a href="#" onclick="showShippingInfo()">Shipping Info</a> <a href="#" onclick="showReturnPolicy()">Returns & Exchanges</a> <a href="#" onclick="showSizeGuide()">Size Guide</a> <a href="#" onclick="contactSupport()">Contact Support</a> <a href="#" onclick="showFAQ()">FAQ</a> <a href="#" onclick="trackOrder()">Track Order</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:+15551234567">? (555) 123-BEAUTY</a> <a href="mailto:hello@bellacosmetics.com">? hello@bellacosmetics.com</a> <a href="#">? 123 Beauty Boulevard, NYC</a> <a href="#" onclick="showStoreHours()">? Store Hours</a> <a href="#" onclick="findStore()">? Find a Store</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 Bella Cosmetics. 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">Accessibility</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:'977befe044813cc3',t:'MTc1NjYzNzExMi4wMDAwMDA='};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 { --rose-gold: #E8B4B8; --deep-rose: #C7969B; --blush-pink: #F4E4E6; --champagne: #F7E7CE; --pearl-white: #FFF9F5; --charcoal: #2C2C2C; --soft-gray: #6B7280; --warm-beige: #F5F0E8; --coral: #FF6B6B; --lavender: #B19CD9; --mint: #A8E6CF; --gold: #FFD700; --gradient-rose: linear-gradient(135deg, #E8B4B8 0%, #C7969B 100%); --gradient-luxury: linear-gradient(135deg, #FFD700 0%, #E8B4B8 100%); --gradient-coral: linear-gradient(135deg, #FF6B6B 0%, #E8B4B8 100%); --gradient-lavender: linear-gradient(135deg, #B19CD9 0%, #E8B4B8 100%); --shadow-soft: 0 8px 25px rgba(232, 180, 184, 0.2); --shadow-medium: 0 12px 35px rgba(232, 180, 184, 0.3); --shadow-strong: 0 20px 50px rgba(232, 180, 184, 0.4); --border-radius: 20px; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Poppins', sans-serif; line-height: 1.7; color: var(--charcoal); background: var(--pearl-white); overflow-x: hidden; } .display-font { font-family: 'Playfair Display', serif; } .script-font { font-family: 'Dancing Script', cursive; } /* Header Banner */ .header-banner { background: var(--gradient-rose); color: white; padding: 12px 0; text-align: center; font-weight: 500; animation: slideDown 0.6s ease-out; letter-spacing: 0.5px; } @keyframes slideDown { from { transform: translateY(-100%); } to { transform: translateY(0); } } /* Navigation */ .navbar-custom { background: rgba(255, 249, 245, 0.95); backdrop-filter: blur(20px); box-shadow: var(--shadow-soft); transition: all 0.3s ease; padding: 1.2rem 0; border-bottom: 2px solid var(--rose-gold); } .navbar-brand { font-weight: 700; font-size: 2.5rem; color: var(--charcoal) !important; display: flex; align-items: center; letter-spacing: 1px; } .navbar-brand i { margin-right: 12px; font-size: 2.8rem; color: var(--rose-gold); } .nav-link { font-weight: 500; color: var(--charcoal) !important; margin: 0 1rem; transition: all 0.3s ease; position: relative; letter-spacing: 0.5px; } .nav-link:hover { color: var(--deep-rose) !important; } .nav-link::after { content: ''; position: absolute; width: 0; height: 2px; bottom: -5px; left: 50%; background: var(--gradient-rose); transition: all 0.3s ease; transform: translateX(-50%); } .nav-link:hover::after { width: 100%; } .btn-shop { background: var(--gradient-rose); color: white; border: none; padding: 12px 28px; border-radius: 25px; font-weight: 600; margin-left: 20px; transition: all 0.3s ease; letter-spacing: 0.5px; } .btn-shop:hover { transform: translateY(-2px); box-shadow: var(--shadow-medium); color: white; } /* Hero Section */ .hero-section { height: 100vh; background: linear-gradient(rgba(232, 180, 184, 0.3), rgba(199, 150, 155, 0.2)), url('https://images.unsplash.com/photo-1596462502278-27bfdc403348?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: 800; color: var(--charcoal); /* margin-bottom: 1.5rem; */ animation: fadeInUp 1s ease-out; line-height: 1.2; } .hero-subtitle { font-size: 1.2rem; color: var(--soft-gray); /* margin-bottom: 2.5rem; */ animation: fadeInUp 1s ease-out 0.3s both; font-weight: 400; max-width: 600px; } .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: var(--charcoal); background: rgba(255, 255, 255, 0.9); padding: 16px 24px; border-radius: 30px; backdrop-filter: blur(15px); border: 2px solid rgba(232, 180, 184, 0.3); transition: all 0.3s ease; } .feature-item:hover { background: rgba(255, 255, 255, 1); transform: translateY(-3px); box-shadow: var(--shadow-medium); } .feature-icon { font-size: 1.5rem; margin-right: 12px; color: var(--rose-gold); } .hero-buttons { animation: fadeInUp 1s ease-out 0.9s both; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } } .btn-custom { padding: 16px 35px; font-weight: 600; border-radius: 35px; letter-spacing: 0.5px; transition: all 0.3s ease; border: none; margin: 0 12px; text-decoration: none; display: inline-block; font-size: 1rem; } .btn-primary-custom { background: var(--gradient-rose); color: white; } .btn-primary-custom:hover { transform: translateY(-3px); box-shadow: var(--shadow-medium); color: white; } .btn-secondary-custom { background: transparent; color: var(--charcoal); border: 2px solid var(--rose-gold); } .btn-secondary-custom:hover { background: var(--rose-gold); color: white; transform: translateY(-3px); } /* Section Styling */ .section-padding { padding: 100px 0; } .section-title { font-size: 3.5rem; font-weight: 700; margin-bottom: 1rem; color: var(--charcoal); text-align: center; line-height: 1.3; } .section-subtitle { font-size: 1.3rem; color: var(--soft-gray); margin-bottom: 4rem; text-align: center; font-weight: 400; max-width: 700px; margin-left: auto; margin-right: auto; } /* Products Section */ .products-section { background: var(--warm-beige); } .product-card { background: white; border-radius: var(--border-radius); overflow: hidden; box-shadow: var(--shadow-soft); transition: all 0.4s ease; height: 100%; border: 1px solid rgba(232, 180, 184, 0.2); position: relative; } .product-card:hover { transform: translateY(-12px); box-shadow: var(--shadow-strong); } .product-image { height: 300px; background-size: cover; background-position: center; position: relative; overflow: hidden; } .product-badge { position: absolute; top: 15px; left: 15px; background: var(--gradient-rose); color: white; padding: 8px 16px; border-radius: 20px; font-weight: 600; font-size: 0.85rem; letter-spacing: 0.5px; } .product-sale { background: var(--gradient-coral); } .product-new { background: var(--gradient-lavender); } .product-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(to bottom, transparent, rgba(44, 44, 44, 0.8)); display: flex; align-items: flex-end; padding: 1.5rem; opacity: 0; transition: opacity 0.3s ease; } .product-card:hover .product-overlay { opacity: 1; } .product-actions { position: absolute; top: 15px; right: 15px; display: flex; flex-direction: column; gap: 8px; 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; color: var(--charcoal); transition: all 0.3s ease; box-shadow: var(--shadow-soft); } .action-btn:hover { background: var(--rose-gold); color: white; transform: scale(1.1); } .product-content { padding: 2rem; } .product-category { color: var(--soft-gray); font-size: 0.9rem; margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 1px; font-weight: 500; } .product-title { font-size: 1.4rem; font-weight: 600; margin-bottom: 0.8rem; color: var(--charcoal); line-height: 1.4; } .product-description { color: var(--soft-gray); margin-bottom: 1.5rem; line-height: 1.6; font-size: 0.95rem; } .product-rating { display: flex; align-items: center; margin-bottom: 1rem; } .stars { color: var(--gold); margin-right: 8px; } .rating-text { color: var(--soft-gray); font-size: 0.9rem; } .product-price { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; } .price-current { font-size: 1.5rem; font-weight: 700; color: var(--deep-rose); } .price-original { font-size: 1.1rem; color: var(--soft-gray); text-decoration: line-through; margin-left: 8px; } .price-discount { background: var(--gradient-coral); color: white; padding: 4px 8px; border-radius: 12px; font-size: 0.8rem; font-weight: 600; } .btn-add-cart { background: var(--gradient-rose); color: white; border: none; padding: 12px 24px; border-radius: 25px; font-weight: 600; transition: all 0.3s ease; width: 100%; letter-spacing: 0.5px; } .btn-add-cart:hover { transform: translateY(-2px); box-shadow: var(--shadow-medium); color: white; } /* Categories Section */ .categories-section { background: white; } .category-card { background: var(--warm-beige); border-radius: var(--border-radius); padding: 3rem 2rem; text-align: center; transition: all 0.4s ease; height: 100%; border: 1px solid rgba(232, 180, 184, 0.2); position: relative; overflow: hidden; } .category-card::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(232, 180, 184, 0.1), transparent); transition: left 0.5s ease; } .category-card:hover::before { left: 100%; } .category-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-medium); } .category-icon { width: 100px; height: 100px; background: var(--gradient-rose); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 2rem; font-size: 3rem; color: white; transition: transform 0.3s ease; } .category-card:hover .category-icon { transform: scale(1.1); } .category-title { font-size: 1.8rem; font-weight: 700; margin-bottom: 1rem; color: var(--charcoal); } .category-description { color: var(--soft-gray); line-height: 1.6; margin-bottom: 2rem; } .category-count { font-size: 1.1rem; font-weight: 600; color: var(--deep-rose); margin-bottom: 2rem; } .btn-category { background: var(--gradient-rose); color: white; border: none; padding: 12px 28px; border-radius: 25px; font-weight: 600; transition: all 0.3s ease; letter-spacing: 0.5px; } .btn-category:hover { transform: translateY(-2px); box-shadow: var(--shadow-medium); color: white; } /* Features Section */ .features-section { background: var(--blush-pink); } .feature-card { background: white; border-radius: var(--border-radius); padding: 3rem 2rem; text-align: center; transition: all 0.4s ease; height: 100%; border: 1px solid rgba(232, 180, 184, 0.2); } .feature-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-strong); } .feature-icon-large { 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: 2rem; color: white; transition: transform 0.3s ease; } .feature-card:hover .feature-icon-large { transform: scale(1.1); } .feature-title { font-size: 1.5rem; font-weight: 700; margin-bottom: 1rem; color: var(--charcoal); } .feature-description { color: var(--soft-gray); line-height: 1.6; } /* Newsletter Section */ .newsletter-section { background: var(--gradient-rose); color: white; text-align: center; } .newsletter-content { max-width: 600px; margin: 0 auto; } .newsletter-title { font-size: 3rem; font-weight: 700; margin-bottom: 1rem; } .newsletter-subtitle { font-size: 1.2rem; margin-bottom: 3rem; opacity: 0.9; } .newsletter-form { display: flex; gap: 1rem; max-width: 500px; margin: 0 auto; } .newsletter-input { flex: 1; padding: 16px 24px; border: none; border-radius: 25px; font-size: 1rem; background: rgba(255, 255, 255, 0.9); color: var(--charcoal); } .newsletter-input::placeholder { color: var(--soft-gray); } .btn-newsletter { background: white; color: var(--deep-rose); border: none; padding: 16px 32px; border-radius: 25px; font-weight: 600; transition: all 0.3s ease; letter-spacing: 0.5px; } .btn-newsletter:hover { transform: translateY(-2px); box-shadow: var(--shadow-medium); } /* Footer */ .footer-section { background: var(--charcoal); color: white; padding: 80px 0 40px; } .footer-brand { font-size: 2.5rem; font-weight: 800; margin-bottom: 1.5rem; color: var(--rose-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; font-weight: 400; } .footer-links a:hover { color: var(--rose-gold); } .social-links a { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; background: var(--gradient-luxury); color: var(--charcoal); 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(30px); transition: all 0.8s ease; } .animate-on-scroll.animated { opacity: 1; transform: translateY(0); } /* Success Messages */ .success-message { position: fixed; top: 100px; right: 30px; background: var(--gradient-luxury); color: var(--charcoal); padding: 16px 25px; border-radius: 12px; box-shadow: var(--shadow-medium); z-index: 1060; transform: translateX(400px); transition: transform 0.3s ease; font-weight: 600; } .success-message.show { transform: translateX(0); } /* Loading Animation */ .loading-spinner { display: inline-block; width: 18px; height: 18px; border: 2px 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); } } /* Cart Badge */ .cart-badge { position: absolute; top: -8px; right: -8px; background: var(--coral); color: white; border-radius: 50%; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 600; } /* Responsive Design */ @media (max-width: 768px) { .hero-title { font-size: 3rem; } .section-title { font-size: 2.5rem; } .hero-features { flex-direction: column; gap: 1rem; } .newsletter-form { flex-direction: column; } .product-price { flex-direction: column; align-items: flex-start; gap: 0.5rem; } }
JavaScript
let cart = []; let cartTotal = 0; // 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(255, 249, 245, 0.98)'; navbar.style.boxShadow = '0 12px 35px rgba(232, 180, 184, 0.3)'; } else { navbar.style.background = 'rgba(255, 249, 245, 0.95)'; navbar.style.boxShadow = '0 8px 25px rgba(232, 180, 184, 0.2)'; } animateOnScroll(); }); // Add to cart function function addToCart(productId, productName, price) { const existingItem = cart.find(item => item.id === productId); if (existingItem) { existingItem.quantity += 1; } else { cart.push({ id: productId, name: productName, price: price, quantity: 1 }); } updateCartBadge(); showSuccessMessage(`${productName} added to cart!`); setTimeout(() => { alert(`?️ ADDED TO CART! ?️\n\n✨ ${productName}\n? $${price.toFixed(2)}\n\n? Cart Summary:\n• Items: ${cart.length} products\n• Total: $${calculateCartTotal().toFixed(2)}\n\n? Benefits:\n• Free shipping on orders over $50\n• 30-day return policy\n• Loyalty points earned\n• Expert beauty support\n\n? Continue shopping or checkout when ready!\nYour beauty journey awaits! ✨`); }, 1000); } // Update cart badge function updateCartBadge() { const badge = document.getElementById('cartBadge'); const totalItems = cart.reduce((sum, item) => sum + item.quantity, 0); badge.textContent = totalItems; } // Calculate cart total function calculateCartTotal() { return cart.reduce((sum, item) => sum + (item.price * item.quantity), 0); } // Open cart function openCart() { if (cart.length === 0) { showSuccessMessage('Your cart is empty'); setTimeout(() => { alert('? YOUR SHOPPING CART ?\n\n? Your cart is currently empty\n\n✨ Discover our amazing products:\n• Premium makeup collections\n• Luxury skincare essentials\n• Professional beauty tools\n• Exclusive gift sets\n\n? Special Offers:\n• Free shipping on orders over $50\n• 20% off your first purchase\n• Loyalty rewards program\n• Expert beauty consultations\n\n? Start shopping and build your perfect beauty collection!'); }, 800); return; } let cartSummary = '?️ YOUR SHOPPING CART ?️\n\n'; cart.forEach(item => { cartSummary += `✨ ${item.name}\n $${item.price.toFixed(2)} x ${item.quantity} = $${(item.price * item.quantity).toFixed(2)}\n\n`; }); cartSummary += `? Subtotal: $${calculateCartTotal().toFixed(2)}\n`; cartSummary += `? Shipping: ${calculateCartTotal() >= 50 ? 'FREE' : '$5.99'}\n`; cartSummary += `? Total: $${(calculateCartTotal() + (calculateCartTotal() >= 50 ? 0 : 5.99)).toFixed(2)}\n\n`; cartSummary += `? Your Benefits:\n• ${calculateCartTotal() >= 50 ? 'Free shipping included!' : 'Add $' + (50 - calculateCartTotal()).toFixed(2) + ' for free shipping'}\n• 30-day return policy\n• Loyalty points: +${Math.floor(calculateCartTotal())} points\n• Expert beauty support\n\n? Ready to checkout? Your beauty transformation awaits!`; alert(cartSummary); } // Product actions function addToWishlist(productId) { showSuccessMessage('Added to wishlist!'); setTimeout(() => { alert('? ADDED TO WISHLIST! ?\n\n✨ Product saved to your wishlist\n\n? Wishlist Benefits:\n• Save items for later\n• Price drop notifications\n• Easy reordering\n• Share with friends\n• Never lose track of favorites\n\n? We\'ll notify you about:\n• Price changes\n• Back in stock alerts\n• Special promotions\n• New similar products\n\n? Keep building your beauty wishlist!'); }, 800); } function quickView(productId) { showSuccessMessage('Opening quick view...'); setTimeout(() => { alert('?️ QUICK VIEW ?️\n\nDetailed product information, ingredients, reviews, and high-resolution images would be displayed in a modal window.\n\n? Quick View Features:\n• Product details & ingredients\n• Customer reviews & ratings\n• Size and shade options\n• How-to-use instructions\n• Related product suggestions\n• Add to cart or wishlist\n\n? Full product experience in one view!'); }, 800); } function shareProduct(productId) { showSuccessMessage('Opening share options...'); setTimeout(() => { alert('? SHARE PRODUCT ?\n\nShare this amazing product with friends!\n\n? Share Options:\n• Social media (Instagram, Facebook, Twitter)\n• Email to friends\n• Copy product link\n• WhatsApp sharing\n• Pinterest save\n• Generate QR code\n\n? Referral Rewards:\n• Earn points for successful referrals\n• Friends get 10% off first order\n• You get $5 credit for each referral\n\n? Spread the beauty love!'); }, 800); } // Browse categories function browseCategory(category) { const categories = { 'makeup': { title: 'Makeup Collection', details: '? MAKEUP COLLECTION ?\n\n✨ Complete Makeup Range:\n\n? Face Products:\n• Foundations (40+ shades)\n• Concealers & Color Correctors\n• Blush & Bronzers\n• Highlighters & Contouring\n• Setting Powders & Sprays\n• Primers for all skin types\n\n?️ Eye Makeup:\n• Eyeshadow Palettes (20+ options)\n• Eyeliners (pencil, gel, liquid)\n• Mascaras (volumizing, lengthening)\n• Eyebrow Products\n• False Lashes & Adhesives\n• Eye Primers\n\n? Lip Products:\n• Lipsticks (matte, satin, gloss)\n• Lip Liners & Pencils\n• Liquid Lipsticks\n• Lip Balms & Treatments\n• Lip Glosses & Stains\n• Lip Sets & Collections\n\n? Special Collections:\n• Bridal makeup sets\n• Professional artist kits\n• Travel-size essentials\n• Limited edition palettes\n• Seasonal color collections\n\n? Price Range: $8 - $85\n? Free shipping on orders over $50\n⭐ Average rating: 4.8/5 stars\n\n? Find your perfect makeup match!' }, 'skincare': { title: 'Skincare Essentials', details: '? SKINCARE ESSENTIALS ?\n\n✨ Complete Skincare Routine:\n\n? Cleansers:\n• Gentle daily cleansers\n• Exfoliating scrubs\n• Makeup removers\n• Oil cleansers\n• Micellar waters\n• Cleansing balms\n\n? Treatments:\n• Vitamin C serums\n• Retinol products\n• Hyaluronic acid\n• Niacinamide serums\n• AHA/BHA exfoliants\n• Anti-aging treatments\n\n? Moisturizers:\n• Day creams with SPF\n• Night moisturizers\n• Eye creams\n• Face oils\n• Gel moisturizers\n• Anti-aging creams\n\n? Masks & Treatments:\n• Sheet masks\n• Clay masks\n• Hydrating masks\n• Anti-aging masks\n• Spot treatments\n• Under-eye patches\n\n☀️ Sun Protection:\n• Daily SPF moisturizers\n• Sunscreen for face\n• Tinted sunscreens\n• SPF setting sprays\n\n? Price Range: $12 - $120\n? Cruelty-free & vegan options\n⭐ Dermatologist recommended\n\n? Achieve your best skin ever!' }, 'haircare': { title: 'Hair Care Products', details: '?♀️ HAIR CARE COLLECTION ?♀️\n\n✨ Complete Hair Care System:\n\n? Shampoos:\n• Moisturizing shampoos\n• Clarifying shampoos\n• Color-safe formulas\n• Dry shampoos\n• Sulfate-free options\n• Specialized treatments\n\n?♀️ Conditioners:\n• Daily conditioners\n• Deep conditioning masks\n• Leave-in treatments\n• Protein treatments\n• Color-protecting formulas\n• Detangling conditioners\n\n? Styling Products:\n• Heat protectants\n• Hair oils & serums\n• Styling creams\n• Hair sprays\n• Texturizing products\n• Curl enhancers\n\n? Tools & Accessories:\n• Professional hair dryers\n• Styling brushes\n• Heat styling tools\n• Hair accessories\n• Scalp massagers\n• Hair clips & ties\n\n? Natural Treatments:\n• Argan oil treatments\n• Coconut oil masks\n• Keratin treatments\n• Scalp treatments\n• Hair growth serums\n\n? Price Range: $15 - $95\n? Sulfate-free & paraben-free\n⭐ Salon-quality results\n\n?♀️ Transform your hair today!' }, 'fragrance': { title: 'Fragrance Collection', details: '? FRAGRANCE COLLECTION ?\n\n✨ Exquisite Scent Selection:\n\n? Women\'s Fragrances:\n• Floral & romantic scents\n• Fresh & citrusy perfumes\n• Warm & spicy fragrances\n• Sweet & gourmand scents\n• Oriental & exotic blends\n• Light & airy day scents\n\n? Men\'s Fragrances:\n• Woody & masculine scents\n• Fresh & aquatic colognes\n• Spicy & bold fragrances\n• Citrus & energizing scents\n• Classic & timeless blends\n\n? Unisex Options:\n• Gender-neutral scents\n• Minimalist fragrances\n• Natural & organic perfumes\n• Artisanal niche brands\n\n? Product Types:\n• Eau de Parfum (long-lasting)\n• Eau de Toilette (daily wear)\n• Body mists & sprays\n• Solid perfumes\n• Fragrance oils\n• Travel-size options\n\n? Gift Sets:\n• Perfume & lotion sets\n• Mini fragrance collections\n• Luxury gift boxes\n• Discovery sets\n• Limited edition packages\n\n? Price Range: $25 - $150\n? Cruelty-free options available\n⭐ Long-lasting formulations\n\n? Find your signature scent!' }, 'tools': { title: 'Beauty Tools & Brushes', details: '?️ BEAUTY TOOLS & BRUSHES ?️\n\n✨ Professional Beauty Tools:\n\n? Makeup Brushes:\n• Foundation brushes\n• Concealer brushes\n• Powder brushes\n• Blush & bronzer brushes\n• Eyeshadow brush sets\n• Lip brushes\n\n? Application Tools:\n• Beauty sponges & blenders\n• Makeup wedges\n• Silicone applicators\n• Brush cleaning tools\n• Brush guards & holders\n• Travel brush sets\n\n✨ Skincare Tools:\n• Facial rollers (jade, rose quartz)\n• Gua sha tools\n• Cleansing brushes\n• Microneedling tools\n• LED light therapy devices\n• Facial steamers\n\n? Nail Tools:\n• Nail files & buffers\n• Cuticle tools\n• Nail art brushes\n• UV/LED nail lamps\n• Nail polish organizers\n\n?️ Lash & Brow Tools:\n• Eyelash curlers\n• Lash applicators\n• Brow tweezers\n• Spoolie brushes\n• Lash combs\n• Heated lash curlers\n\n? Storage & Organization:\n• Makeup bags & cases\n• Brush holders\n• Cosmetic organizers\n• Travel containers\n• Vanity accessories\n\n? Price Range: $8 - $75\n? Professional quality\n⭐ Easy to clean & maintain\n\n?️ Elevate your beauty routine!' }, 'gifts': { title: 'Beauty Gift Sets', details: '? BEAUTY GIFT SETS ?\n\n✨ Perfect Gifts for Beauty Lovers:\n\n? Makeup Gift Sets:\n• Complete makeup starter kits\n• Eyeshadow palette collections\n• Lipstick & gloss sets\n• Brush & tool collections\n• Brand-specific gift boxes\n• Seasonal makeup sets\n\n? Skincare Gift Sets:\n• Anti-aging skincare kits\n• Hydrating routine sets\n• Vitamin C skincare systems\n• Travel-size skincare sets\n• Luxury spa collections\n• Men\'s grooming sets\n\n? Fragrance Gift Sets:\n• Perfume & body lotion duos\n• Mini fragrance collections\n• Seasonal scent sets\n• Luxury perfume gift boxes\n• Body care & fragrance sets\n\n? Special Occasion Sets:\n• Bridal beauty collections\n• Birthday surprise boxes\n• Holiday limited editions\n• Mother\'s Day specials\n• Valentine\'s Day romance sets\n• Graduation gift boxes\n\n? Luxury Collections:\n• Premium brand gift sets\n• Limited edition collaborations\n• Exclusive product bundles\n• VIP beauty experiences\n• Customizable gift boxes\n\n? Gift Services:\n• Beautiful gift wrapping\n• Personalized messages\n• Direct shipping to recipient\n• Gift receipt included\n• Express delivery options\n\n? Price Range: $25 - $200\n? Perfect for any occasion\n⭐ Beautifully packaged\n\n? Give the gift of beauty!' } }; const category_info = categories[category]; if (category_info) { showSuccessMessage('Loading category...'); setTimeout(() => { alert(category_info.details); }, 800); } } // Footer functions function showShippingInfo() { alert('? SHIPPING INFORMATION ?\n\n? Shipping Options:\n• Standard (3-5 days): FREE on orders $50+\n• Express (2-3 days): $9.99\n• Overnight (1 day): $19.99\n• International: Starting at $15\n\n? We Ship To:\n• All 50 US States\n• Canada & Mexico\n• International destinations\n• APO/FPO addresses\n\n? Processing Time:\n• Orders placed by 2 PM EST ship same day\n• Weekend orders ship Monday\n• Custom orders: 2-3 business days\n\n? Tracking:\n• Email confirmation with tracking\n• SMS updates available\n• Real-time tracking online\n\n? Get your beauty products fast!'); } function showReturnPolicy() { alert('↩️ RETURNS & EXCHANGES ↩️\n\n✅ Easy Returns:\n• 30-day return window\n• Free return shipping\n• Full refund or exchange\n• No restocking fees\n• Hassle-free process\n\n? Return Conditions:\n• Items in original condition\n• Original packaging preferred\n• Receipt or order number\n• Hygiene seal intact (where applicable)\n\n? Exchange Process:\n• Online return portal\n• Print prepaid return label\n• Drop off at any carrier location\n• Refund processed in 3-5 days\n\n? Refund Methods:\n• Original payment method\n• Store credit (instant)\n• Gift card option\n\n? Need Help?\nCall: (555) 123-BEAUTY\nEmail: returns@bellacosmetics.com\n\n? Your satisfaction guaranteed!'); } function contactSupport() { alert('? CUSTOMER SUPPORT ?\n\n? Contact Options:\n• Phone: (555) 123-BEAUTY\n• Email: hello@bellacosmetics.com\n• Live Chat: Available 24/7\n• Text: (555) 123-4567\n\n? Support Hours:\n• Phone: Mon-Fri 8 AM - 8 PM EST\n• Email: 24/7 (response within 2 hours)\n• Chat: 24/7 instant support\n\n? Beauty Experts Available For:\n• Product recommendations\n• Shade matching assistance\n• Skincare consultations\n• Application tutorials\n• Order assistance\n• Technical support\n\n? Premium Support:\n• VIP customer line\n• Personal beauty advisor\n• Video consultations\n• Custom product curation\n\n? We\'re here to help you look and feel beautiful!'); } function showStoreHours() { alert('? STORE HOURS ?\n\n? Flagship Store - NYC:\n? 123 Beauty Boulevard, New York\n\n⏰ Hours:\n• Monday - Saturday: 10 AM - 9 PM\n• Sunday: 11 AM - 7 PM\n• Holidays: 12 PM - 6 PM\n\n✨ In-Store Services:\n• Personal beauty consultations\n• Professional makeup application\n• Skin analysis & recommendations\n• Color matching services\n• Product testing stations\n• Beauty workshops & events\n\n? Store Exclusive:\n• Limited edition products\n• In-store only promotions\n• Beauty masterclasses\n• VIP shopping experiences\n\n? Store Phone: (555) 123-STORE\n? Visit us for the full beauty experience!'); } // Newsletter subscription document.getElementById('newsletterForm').addEventListener('submit', function(e) { e.preventDefault(); const submitBtn = this.querySelector('.btn-newsletter'); 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!'); setTimeout(() => { alert('? WELCOME TO BELLA BEAUTY! ?\n\n✨ Thank you for subscribing!\n\n? Your Welcome Gift:\n• 20% off your first order\n• Free shipping on any purchase\n• Exclusive access to new arrivals\n• Beauty tips & tutorials\n• Members-only sales\n\n? What to Expect:\n• Weekly beauty newsletters\n• Product launch notifications\n• Exclusive discount codes\n• Beauty tips from experts\n• Seasonal trend updates\n• Birthday month surprises\n\n? Your beauty journey starts now!\nCheck your email for your welcome gift! ✨'); }, 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