Luxury Makeup Artistry Template | QuickCoder

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Elena Rose | Luxury Makeup Artistry</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600&display=swap">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css">
    
</head>
<body>
    
    <header id="header">
        <div class="container nav-container">
            <a href="#" class="logo">
                <div class="logo-icon">
                    <i class="fas fa-palette"></i>
                </div>
                Elena<span>Rose</span>
            </a>
            <button class="mobile-menu-btn" id="mobileMenuBtn">
                <i class="fas fa-bars"></i>
            </button>
            <ul class="nav-links" id="navLinks">
                <li><a href="#home">Home</a></li>
                <li><a href="#portfolio">Portfolio</a></li>
                <li><a href="#services">Services</a></li>
                <li><a href="#testimonials">Testimonials</a></li>
            </ul>
            <div class="nav-cta">
                <a href="#booking" class="btn btn-primary">Book Now</a>
            </div>
        </div>
    </header>

<section class="hero" id="home">
        <div class="container hero-content">
            <h1>Luxury Makeup Artistry for the <strong>Discerning Client</strong></h1>
            <div class="name-reveal">
                <span>E</span><span>l</span><span>e</span><span>n</span><span>a</span>
                <span> </span>
                <span>R</span><span>o</span><span>s</span><span>e</span>
            </div>
    
        </div>
        <a href="#portfolio" class="scroll-indicator">
            <span>EXPLORE</span>
            <i class="fas fa-chevron-down"></i>
        </a>
    </section>

<section class="portfolio" id="portfolio">
        <div class="container">
            <div class="section-title">
                <span class="subtitle">Recent Work</span>
                <h2>Portfolio Gallery</h2>
            </div>
            <div class="portfolio-grid" id="portfolioGrid">
                <div class="portfolio-item">
                    <img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Bridal Makeup">
                    <div class="portfolio-overlay">
                        <div class="portfolio-category">Bridal</div>
                        <h3>Timeless Elegance</h3>
                        <p>Soft, romantic look for a vineyard wedding</p>
                    </div>
                </div>
                <div class="portfolio-item">
                    <img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Editorial Makeup">
                    <div class="portfolio-overlay">
                        <div class="portfolio-category">Editorial</div>
                        <h3>Metallic Glam</h3>
                        <p>Bold look for Vogue photoshoot</p>
                    </div>
                </div>
                <div class="portfolio-item">
                    <img src="https://images.unsplash.com/photo-1519699047748-de8e457a634e?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Special Occasion">
                    <div class="portfolio-overlay">
                        <div class="portfolio-category">Evening</div>
                        <h3>Red Carpet Ready</h3>
                        <p>Glamorous look for awards ceremony</p>
                    </div>
                </div>
                <div class="portfolio-item">
                    <img src="https://images.unsplash.com/photo-1529626455594-4ff0802cfb7e?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Natural Look">
                    <div class="portfolio-overlay">
                        <div class="portfolio-category">Natural</div>
                        <h3>Fresh & Dewy</h3>
                        <p>Everyday luxury with a radiant finish</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="services" id="services">
        <div class="container">
            <div class="section-title">
                <span class="subtitle">Exclusive Services</span>
                <h2>Pricing & Packages</h2>
            </div>
            <div class="pricing-cards" id="pricingCards">
                <div class="pricing-card">
                    <div class="pricing-icon">
                        <i class="fas fa-heart"></i>
                    </div>
                    <h3>Bridal Luxury</h3>
                    <div class="price">450<span>+</span></div>
                    <ul>
                        <li>Pre-wedding consultation & trial</li>
                        <li>Wedding day makeup application</li>
                        <li>Bridal touch-up kit</li>
                        <li>Up to 6 hours of coverage</li>
                        <li>Travel within 50 miles</li>
                        <li>Emergency on-call support</li>
                    </ul>
                    <a href="#booking" class="btn">Book Now</a>
                </div>
                <div class="pricing-card featured">
                    <div class="pricing-icon">
                        <i class="fas fa-star"></i>
                    </div>
                    <h3>Editorial Excellence</h3>
                    <div class="price">350<span>+</span></div>
                    <ul>
                        <li>Creative direction & consultation</li>
                        <li>Custom look development</li>
                        <li>HD & 4K camera ready</li>
                        <li>Multiple look changes</li>
                        <li>Up to 5 hours coverage</li>
                        <li>Collaboration with photographer</li>
                    </ul>
                    <a href="#booking" class="btn btn-primary">Book Now</a>
                </div>
                <div class="pricing-card">
                    <div class="pricing-icon">
                        <i class="fas fa-glass-cheers"></i>
                    </div>
                    <h3>Special Events</h3>
                    <div class="price">220<span>+</span></div>
                    <ul>
                        <li>Personalized consultation</li>
                        <li>Custom look design</li>
                        <li>Long-wearing luxury formulas</li>
                        <li>Travel to your location</li>
                        <li>Up to 3 hours coverage</li>
                        <li>Complimentary lashes</li>
                    </ul>
                    <a href="#booking" class="btn">Book Now</a>
                </div>
            </div>
        </div>
    </section>

<section class="testimonials" id="testimonials">
        <div class="container">
            <div class="section-title">
                <span class="subtitle">Client Love</span>
                <h2>Testimonials</h2>
            </div>
            <div class="testimonial-slider">
                <div class="swiper">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <div class="testimonial-slide">
                                <div class="testimonial-content">
                                    Elena transformed my wedding day look into something truly magical. Her attention to detail and ability to enhance natural beauty is unparalleled. I felt like the most beautiful version of myself.
                                </div>
                                <div class="testimonial-author">
                                    <div class="author-avatar">
                                        <img src="https://images.unsplash.com/photo-1494790108755-2616b612b786?ixlib=rb-4.0.3&auto=format&fit=crop&w=200&q=80" alt="Sarah Johnson">
                                    </div>
                                    <div class="author-info">
                                        <h4>Sarah Johnson</h4>
                                        <p>Bride, June 2023</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="testimonial-slide">
                                <div class="testimonial-content">
                                    Working with Elena on our editorial shoot was an absolute pleasure. Her creative vision and technical skill brought our concepts to life. The makeup looked flawless both in person and on camera.
                                </div>
                                <div class="testimonial-author">
                                    <div class="author-avatar">
                                        <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&auto=format&fit=crop&w=200&q=80" alt="Michael Chen">
                                    </div>
                                    <div class="author-info">
                                        <h4>Michael Chen</h4>
                                        <p>Photographer, Vogue</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="testimonial-slide">
                                <div class="testimonial-content">
                                    For my graduation ball, Elena created the perfect look that lasted all night. She listened to what I wanted and added her professional expertise. I received so many compliments!
                                </div>
                                <div class="testimonial-author">
                                    <div class="author-avatar">
                                        <img src="https://images.unsplash.com/photo-1544725176-7c40e5a71c5e?ixlib=rb-4.0.3&auto=format&fit=crop&w=200&q=80" alt="Jessica Williams">
                                    </div>
                                    <div class="author-info">
                                        <h4>Jessica Williams</h4>
                                        <p>University Graduate</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="testimonial-slide">
                                <div class="testimonial-content">
                                    Elena's work is simply exceptional. She did makeup for our entire bridal party and everyone looked stunning. Her professionalism and talent made the entire experience stress-free and enjoyable.
                                </div>
                                <div class="testimonial-author">
                                    <div class="author-avatar">
                                        <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&auto=format&fit=crop&w=200&q=80" alt="Amanda Rodriguez">
                                    </div>
                                    <div class="author-info">
                                        <h4>Amanda Rodriguez</h4>
                                        <p>Bride, September 2023</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-pagination"></div>
                </div>
            </div>
        </div>
    </section>

<section class="booking" id="booking">
        <div class="container">
            <div class="section-title">
                <span class="subtitle">Reserve Your Session</span>
                <h2>Book Your Appointment</h2>
            </div>
            <div class="booking-form-container">
                <form id="bookingForm">
                    <div class="form-row">
                        <div class="form-group">
                            <label for="name">Full Name *</label>
                            <input type="text" id="name" class="form-control" placeholder="Enter your full name" required>
                        </div>
                        <div class="form-group">
                            <label for="email">Email Address *</label>
                            <input type="email" id="email" class="form-control" placeholder="Enter your email" required>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group">
                            <label for="phone">Phone Number *</label>
                            <input type="tel" id="phone" class="form-control" placeholder="Enter your phone number" required>
                        </div>
                        <div class="form-group">
                            <label for="service">Service Type *</label>
                            <select id="service" class="form-control" required>
                                <option value="" disabled selected>Select a service</option>
                                <option value="bridal">Bridal Luxury Package</option>
                                <option value="editorial">Editorial Excellence</option>
                                <option value="occasion">Special Events</option>
                                <option value="consultation">Consultation Only</option>
                                <option value="other">Other (Please specify in notes)</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group">
                            <label for="date">Preferred Date *</label>
                            <input type="date" id="date" class="form-control" required>
                        </div>
                        <div class="form-group">
                            <label for="time">Preferred Time</label>
                            <select id="time" class="form-control">
                                <option value="" selected>Flexible</option>
                                <option value="morning">Morning (9am-12pm)</option>
                                <option value="afternoon">Afternoon (12pm-4pm)</option>
                                <option value="evening">Evening (4pm-7pm)</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="message">Additional Notes</label>
                        <textarea id="message" class="form-control" rows="5" placeholder="Tell me about your vision, special requirements, venue details, or any questions..."></textarea>
                    </div>
                    <div class="booking-cta">
                        <button type="submit" class="glowing-btn">
                            <i class="fas fa-paper-plane"></i> Submit Booking Request
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </section>

<footer>
        <div class="container">
            <div class="footer-content">
                <div class="footer-col">
                    <h3>Elena Rose</h3>
                    <p>Luxury makeup artistry specializing in bridal, editorial, and special occasion looks. Transforming beauty with precision, creativity, and elegance.</p>
                    <div class="social-links">
                        <a href="#"><i class="fab fa-instagram"></i></a>
                        <a href="#"><i class="fab fa-pinterest-p"></i></a>
                        <a href="#"><i class="fab fa-facebook-f"></i></a>
                        <a href="#"><i class="fab fa-tiktok"></i></a>
                    </div>
                </div>
                <div class="footer-col">
                    <h3>Contact Info</h3>
                    <ul class="contact-info">
                        <li>
                            <i class="fas fa-map-marker-alt"></i>
                            <span>123 Beauty Avenue, Suite 501<br>New York, NY 10001</span>
                        </li>
                        <li>
                            <i class="fas fa-phone"></i>
                            <span>(555) 123-4567</span>
                        </li>
                        <li>
                            <i class="fas fa-envelope"></i>
                            <span>hello@elenarosemakeup.com</span>
                        </li>
                    </ul>
                </div>
                <div class="footer-col">
                    <h3>Business Hours</h3>
                    <ul class="contact-info">
                        <li>
                            <i class="far fa-clock"></i>
                            <span>Monday - Friday: 9am - 7pm</span>
                        </li>
                        <li>
                            <i class="far fa-clock"></i>
                            <span>Saturday: 10am - 5pm</span>
                        </li>
                        <li>
                            <i class="far fa-clock"></i>
                            <span>Sunday: By appointment only</span>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2023 Elena Rose Luxury Makeup Artistry. All rights reserved. | Crafted with elegance</p>
            </div>
        </div>
    </footer>

CSS

:root {
            --color-ebony: #0A0A0A;
            --color-charcoal: #1A1A1A;
            --color-soft-black: #2A2A2A;
            --color-peach: #FF9A8B;
            --color-peach-light: #FFCEC6;
            --color-peach-dark: #E87C6D;
            --color-peach-glow: rgba(255, 154, 139, 0.3);
            --color-ivory: #FFF8F5;
            --color-soft-white: #F9F5F3;
            --color-gold: #D4AF37;
            --color-text: #333333;
            --color-text-light: #666666;
            --font-heading: 'Cormorant Garamond', serif;
            --font-body: 'Inter', sans-serif;
            --transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1);
            --transition-slow: all 0.7s cubic-bezier(0.16, 1, 0.3, 1);
            --shadow-subtle: 0 5px 20px rgba(10, 10, 10, 0.05);
            --shadow-medium: 0 10px 30px rgba(10, 10, 10, 0.1);
            --shadow-heavy: 0 20px 60px rgba(10, 10, 10, 0.15);
            --shadow-glow: 0 10px 30px var(--color-peach-glow);
            --border-radius: 12px;
            --border-radius-lg: 20px;
        }

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

html {
            scroll-behavior: smooth;
            font-size: 16px;
        }

body {
            font-family: var(--font-body);
            color: var(--color-text);
            background-color: var(--color-ivory);
            line-height: 1.7;
            overflow-x: hidden;
            font-weight: 400;
        }

h1, h2, h3, h4, h5, h6 {
            font-family: var(--font-heading);
            font-weight: 600;
            line-height: 1.2;
            letter-spacing: -0.02em;
        }

a {
            text-decoration: none;
            color: inherit;
        }

.container {
            width: 100%;
            max-width: 1300px;
            margin: 0 auto;
            padding: 0 40px;
        }

section {
            padding: 100px 0;
            position: relative;
        }

.section-title {
            text-align: center;
            margin-bottom: 70px;
            overflow: hidden;
        }

.section-title .subtitle {
            font-size: 0.95rem;
            letter-spacing: 3px;
            text-transform: uppercase;
            color: var(--color-peach);
            margin-bottom: 15px;
            display: block;
            font-weight: 500;
            opacity: 0;
            transform: translateY(20px);
            animation: fadeUp 0.8s 0.2s forwards;
        }

.section-title h2 {
            font-size: 3.2rem;
            color: var(--color-ebony);
            position: relative;
            display: inline-block;
            padding-bottom: 20px;
            opacity: 0;
            transform: translateY(30px);
            animation: fadeUp 0.8s 0.4s forwards;
        }

.section-title h2:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 100px;
            height: 2px;
            background: linear-gradient(to right, transparent, var(--color-peach), transparent);
        }

.btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            padding: 18px 36px;
            background-color: var(--color-ebony);
            color: var(--color-ivory);
            border-radius: 100px;
            font-weight: 500;
            letter-spacing: 0.5px;
            transition: var(--transition);
            border: none;
            cursor: pointer;
            font-size: 0.95rem;
            position: relative;
            overflow: hidden;
            z-index: 1;
            text-transform: uppercase;
            font-family: var(--font-body);
        }

.btn:before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
            transition: 0.7s;
            z-index: -1;
        }

.btn:hover:before {
            left: 100%;
        }

.btn:hover {
            background-color: var(--color-soft-black);
            transform: translateY(-3px);
            box-shadow: var(--shadow-glow);
        }

.btn-primary {
            background: linear-gradient(135deg, var(--color-peach), var(--color-peach-dark));
            color: var(--color-ebony);
            font-weight: 600;
        }

.btn-primary:hover {
            background: linear-gradient(135deg, var(--color-peach-dark), var(--color-peach));
            transform: translateY(-5px);
            box-shadow: var(--shadow-glow);
        }

/* Header & Navigation */
        header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 1000;
            background-color: rgba(10, 10, 10, 0.92);
            backdrop-filter: blur(10px);
            padding: 22px 0;
            transition: var(--transition);
            border-bottom: 1px solid rgba(255, 154, 139, 0.1);
        }

header.scrolled {
            padding: 18px 0;
            box-shadow: var(--shadow-medium);
        }

.nav-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

.logo {
            font-family: var(--font-heading);
            font-size: 1.9rem;
            font-weight: 700;
            color: var(--color-ivory);
            display: flex;
            align-items: center;
            gap: 10px;
            opacity: 0;
            transform: translateY(-10px);
            animation: fadeDown 0.8s 0.3s forwards;
        }

.logo span {
            color: var(--color-peach);
            font-weight: 600;
        }

.logo .logo-icon {
            width: 32px;
            height: 32px;
            background: linear-gradient(135deg, var(--color-peach), var(--color-peach-dark));
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            color: var(--color-ebony);
        }

.nav-links {
            display: flex;
            list-style: none;
            gap: 40px;
        }

.nav-links li {
            position: relative;
        }

.nav-links a {
            color: var(--color-ivory);
            font-weight: 500;
            font-size: 0.9rem;
            transition: var(--transition);
            position: relative;
            letter-spacing: 0.5px;
        }

.nav-links a:hover {
            color: var(--color-peach-light);
        }

.nav-links a:after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 0;
            height: 1px;
            background-color: var(--color-peach);
            transition: var(--transition);
        }

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

.nav-cta {
            opacity: 0;
            transform: translateY(-10px);
            animation: fadeDown 0.8s 0.5s forwards;
        }

.mobile-menu-btn {
            display: none;
            background: none;
            border: none;
            color: var(--color-ivory);
            font-size: 1.5rem;
            cursor: pointer;
            z-index: 1001;
        }

/* Hero Section */
        .hero {
            height: 100vh;
            background: linear-gradient(rgba(10, 10, 10, 0.85), rgba(10, 10, 10, 0.88)), url('https://images.unsplash.com/photo-1596462502278-27bfdc403348?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80');
            background-size: cover;
            background-position: center 30%;
            background-attachment: fixed;
            display: flex;
            align-items: center;
            color: var(--color-ivory);
            position: relative;
            overflow: hidden;
        }

.hero:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at 30% 50%, rgba(255, 154, 139, 0.15) 0%, transparent 60%);
            z-index: 1;
        }

.hero-content {
            max-width: 850px;
            position: relative;
            z-index: 2;
            opacity: 0;
            transform: translateY(40px);
            animation: fadeUp 1s 0.5s forwards;
        }

.hero h1 {
            font-size: 3.5rem;
            margin-bottom: 15px;
            line-height: 1.1;
            font-weight: 300;
        }

.hero h1 strong {
            font-weight: 600;
            color: var(--color-peach);
        }

.name-reveal {
            font-size: 4rem;
            color: var(--color-peach-light);
            font-weight: 600;
            margin-bottom: 15px;
            overflow: hidden;
            position: relative;
            height: 100px;
            display: flex;
            align-items: center;
        }

.name-reveal span {
            display: inline-block;
            transform: translateY(100%);
            opacity: 0;
            animation: slideUpLetter 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
        }

.name-reveal span:nth-child(1) { animation-delay: 0.8s; }
        .name-reveal span:nth-child(2) { animation-delay: 0.9s; }
        .name-reveal span:nth-child(3) { animation-delay: 1.0s; }
        .name-reveal span:nth-child(4) { animation-delay: 1.1s; }
        .name-reveal span:nth-child(5) { animation-delay: 1.2s; }
        .name-reveal span:nth-child(6) { animation-delay: 1.3s; }
        .name-reveal span:nth-child(7) { animation-delay: 1.4s; }
        .name-reveal span:nth-child(8) { animation-delay: 1.5s; }
        .name-reveal span:nth-child(9) { animation-delay: 1.6s; }

.hero p {
            font-size: 1.25rem;
            margin-bottom: 40px;
            max-width: 650px;
            color: rgba(255, 248, 245, 0.85);
            font-weight: 300;
            letter-spacing: 0.2px;
        }

.hero-btns {
            display: flex;
            gap: 20px;
            margin-top: 30px;
        }

.scroll-indicator {
            position: absolute;
            bottom: 40px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 10;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            color: var(--color-peach-light);
            opacity: 0.7;
            transition: var(--transition);
            animation: bounce 2s infinite;
        }

.scroll-indicator:hover {
            opacity: 1;
            transform: translateX(-50%) translateY(-5px);
        }

.scroll-indicator span {
            font-size: 0.8rem;
            letter-spacing: 2px;
        }

.scroll-indicator i {
            font-size: 1.2rem;
        }

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

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

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

@keyframes bounce {
            0%, 20%, 50%, 80%, 100% {
                transform: translateY(0) translateX(-50%);
            }
            40% {
                transform: translateY(-10px) translateX(-50%);
            }
            60% {
                transform: translateY(-5px) translateX(-50%);
            }
        }

/* Portfolio Section */
        .portfolio {
            background-color: var(--color-soft-white);
            position: relative;
        }

.portfolio:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ff9a8b' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
            opacity: 0.5;
            z-index: 0;
        }

.portfolio .container {
            position: relative;
            z-index: 1;
        }

.portfolio-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
            gap: 30px;
        }

.portfolio-item {
            position: relative;
            border-radius: var(--border-radius-lg);
            overflow: hidden;
            height: 400px;
            box-shadow: var(--shadow-medium);
            transition: var(--transition);
            opacity: 0;
            transform: translateY(40px);
        }

.portfolio-item.animate-in {
            opacity: 1;
            transform: translateY(0);
            transition: var(--transition-slow);
        }

.portfolio-item:hover {
            transform: translateY(-15px);
            box-shadow: var(--shadow-heavy);
        }

.portfolio-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: var(--transition-slow);
            filter: brightness(0.95);
        }

.portfolio-item:hover img {
            transform: scale(1.08);
            filter: brightness(1.05);
        }

.portfolio-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to bottom, rgba(255, 154, 139, 0.05) 0%, rgba(10, 10, 10, 0.85) 100%);
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 35px;
            opacity: 0;
            transition: var(--transition);
        }

.portfolio-item:hover .portfolio-overlay {
            opacity: 1;
        }

.portfolio-overlay h3 {
            color: var(--color-ivory);
            font-size: 1.6rem;
            margin-bottom: 12px;
            transform: translateY(30px);
            transition: var(--transition);
            transition-delay: 0.1s;
        }

.portfolio-overlay p {
            color: var(--color-peach-light);
            font-size: 0.95rem;
            transform: translateY(30px);
            transition: var(--transition);
            transition-delay: 0.2s;
            font-weight: 300;
        }

.portfolio-overlay .portfolio-category {
            position: absolute;
            top: 25px;
            right: 25px;
            background-color: var(--color-peach);
            color: var(--color-ebony);
            padding: 6px 15px;
            border-radius: 100px;
            font-size: 0.8rem;
            font-weight: 600;
            letter-spacing: 0.5px;
            opacity: 0;
            transform: translateY(20px);
            transition: var(--transition);
            transition-delay: 0.3s;
        }

.portfolio-item:hover .portfolio-overlay h3,
        .portfolio-item:hover .portfolio-overlay p,
        .portfolio-item:hover .portfolio-overlay .portfolio-category {
            transform: translateY(0);
            opacity: 1;
        }

/* Services Section */
        .services {
            background-color: var(--color-ivory);
        }

.pricing-cards {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 40px;
        }

.pricing-card {
            background-color: var(--color-soft-white);
            border-radius: var(--border-radius-lg);
            padding: 50px 40px;
            text-align: center;
            box-shadow: var(--shadow-subtle);
            transition: var(--transition);
            border: 1px solid rgba(255, 154, 139, 0.1);
            position: relative;
            overflow: hidden;
            opacity: 0;
            transform: translateY(40px);
        }

.pricing-card.animate-in {
            opacity: 1;
            transform: translateY(0);
            transition: var(--transition-slow);
        }

.pricing-card:hover {
            transform: translateY(-20px);
            box-shadow: var(--shadow-heavy);
            border-color: rgba(255, 154, 139, 0.2);
        }

.pricing-card.featured {
            border-top: 4px solid var(--color-peach);
            background-color: var(--color-ebony);
            color: var(--color-ivory);
        }

.pricing-card.featured:before {
            content: 'Most Popular';
            position: absolute;
            top: -12px;
            left: 50%;
            transform: translateX(-50%);
            background-color: var(--color-peach);
            color: var(--color-ebony);
            padding: 8px 20px;
            border-radius: 100px;
            font-size: 0.8rem;
            font-weight: 700;
            letter-spacing: 1px;
            box-shadow: var(--shadow-glow);
        }

.pricing-icon {
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg, var(--color-peach-light), var(--color-peach));
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 25px;
            font-size: 2rem;
            color: var(--color-ebony);
            transition: var(--transition);
        }

.pricing-card:hover .pricing-icon {
            transform: scale(1.1) rotate(5deg);
        }

.pricing-card h3 {
            font-size: 1.8rem;
            margin-bottom: 20px;
        }

.price {
            font-size: 3.2rem;
            font-weight: 700;
            color: var(--color-peach);
            margin: 25px 0;
            font-family: var(--font-body);
            position: relative;
            display: inline-block;
        }

.price:before {
            content: '$';
            font-size: 1.5rem;
            position: absolute;
            top: 10px;
            left: -20px;
            opacity: 0.7;
        }

.price span {
            font-size: 1rem;
            color: var(--color-text-light);
            font-weight: 400;
            margin-left: 5px;
        }

.pricing-card.featured .price span {
            color: rgba(255, 248, 245, 0.7);
        }

.pricing-card ul {
            list-style: none;
            margin: 30px 0;
            text-align: left;
        }

.pricing-card ul li {
            margin-bottom: 15px;
            padding-left: 30px;
            position: relative;
        }

.pricing-card ul li:before {
            content: '✓';
            position: absolute;
            left: 0;
            color: var(--color-peach);
            font-weight: bold;
            font-size: 1.1rem;
        }

.pricing-card.featured ul li:before {
            color: var(--color-peach-light);
        }

/* Testimonials Section */
        .testimonials {
            background-color: var(--color-ebony);
            color: var(--color-ivory);
            position: relative;
            overflow: hidden;
        }

.testimonials:before {
            content: '';
            position: absolute;
            top: -50%;
            right: -10%;
            width: 60%;
            height: 200%;
            background: radial-gradient(circle, rgba(255, 154, 139, 0.05) 0%, transparent 70%);
            z-index: 0;
        }

.testimonials .container {
            position: relative;
            z-index: 1;
        }

.testimonials .section-title h2 {
            color: var(--color-ivory);
        }

.testimonial-slider {
            max-width: 900px;
            margin: 0 auto;
            position: relative;
            overflow: hidden;
            border-radius: var(--border-radius-lg);
            background-color: rgba(26, 26, 26, 0.6);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 154, 139, 0.1);
            padding: 60px 40px;
        }

.swiper {
            width: 100%;
            height: 100%;
        }

.testimonial-slide {
            padding: 20px;
            text-align: center;
        }

.testimonial-content {
            font-size: 1.3rem;
            font-style: italic;
            margin-bottom: 40px;
            line-height: 1.8;
            color: rgba(255, 248, 245, 0.9);
            position: relative;
            padding: 0 40px;
        }

.testimonial-content:before, .testimonial-content:after {
            content: '"';
            font-size: 4rem;
            color: var(--color-peach);
            opacity: 0.3;
            position: absolute;
            font-family: serif;
            line-height: 1;
        }

.testimonial-content:before {
            top: -20px;
            left: 0;
        }

.testimonial-content:after {
            bottom: -40px;
            right: 0;
        }

.testimonial-author {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 20px;
        }

.author-avatar {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            overflow: hidden;
            border: 3px solid var(--color-peach);
            box-shadow: var(--shadow-glow);
        }

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

.author-info h4 {
            font-size: 1.3rem;
            margin-bottom: 8px;
            color: var(--color-peach-light);
        }

.author-info p {
            color: rgba(255, 248, 245, 0.6);
            font-size: 0.9rem;
            letter-spacing: 0.5px;
        }

.swiper-pagination {
            position: relative;
            margin-top: 50px;
        }

.swiper-pagination-bullet {
            width: 10px;
            height: 10px;
            background-color: rgba(255, 248, 245, 0.3);
            opacity: 1;
            transition: var(--transition);
        }

.swiper-pagination-bullet-active {
            background-color: var(--color-peach);
            transform: scale(1.3);
        }

/* Booking Section */
        .booking {
            background-color: var(--color-soft-white);
            text-align: center;
            position: relative;
            overflow: hidden;
        }

.booking:before {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 50%;
            background-color: var(--color-ebony);
        }

.booking .container {
            position: relative;
            z-index: 1;
        }

.booking-form-container {
            max-width: 800px;
            margin: 0 auto;
            background-color: var(--color-ivory);
            padding: 70px 60px;
            border-radius: var(--border-radius-lg);
            box-shadow: var(--shadow-heavy);
            position: relative;
            overflow: hidden;
            border: 1px solid rgba(255, 154, 139, 0.1);
        }

.booking-form-container:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 5px;
            background: linear-gradient(to right, var(--color-peach), var(--color-peach-dark));
        }

.form-group {
            margin-bottom: 30px;
            text-align: left;
            position: relative;
        }

.form-group label {
            display: block;
            margin-bottom: 10px;
            font-weight: 500;
            color: var(--color-soft-black);
            font-size: 0.95rem;
            letter-spacing: 0.5px;
        }

.form-control {
            width: 100%;
            padding: 18px 20px;
            border: 1px solid rgba(10, 10, 10, 0.1);
            border-radius: var(--border-radius);
            font-family: var(--font-body);
            font-size: 1rem;
            transition: var(--transition);
            background-color: var(--color-soft-white);
            color: var(--color-text);
        }

.form-control:focus {
            outline: none;
            border-color: var(--color-peach);
            box-shadow: 0 0 0 3px var(--color-peach-glow);
            background-color: var(--color-ivory);
        }

.form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
        }

.booking-cta {
            margin-top: 40px;
        }

.glowing-btn {
            background: linear-gradient(135deg, var(--color-peach), var(--color-peach-dark));
            color: var(--color-ebony);
            font-size: 1.1rem;
            padding: 22px 50px;
            border-radius: 100px;
            position: relative;
            overflow: hidden;
            box-shadow: 0 10px 30px var(--color-peach-glow);
            transition: var(--transition);
            font-weight: 600;
            letter-spacing: 1px;
            border: none;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 15px;
        }

.glowing-btn:before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
            transition: 0.7s;
        }

.glowing-btn:hover:before {
            left: 100%;
        }

.glowing-btn:hover {
            box-shadow: 0 15px 40px var(--color-peach-glow);
            transform: translateY(-5px);
        }

/* Footer */
        footer {
            background-color: var(--color-ebony);
            color: var(--color-ivory);
            padding: 80px 0 30px;
            position: relative;
        }

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

.footer-col h3 {
            font-size: 1.4rem;
            margin-bottom: 25px;
            color: var(--color-peach-light);
            position: relative;
            padding-bottom: 15px;
        }

.footer-col h3:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 40px;
            height: 2px;
            background-color: var(--color-peach);
        }

.footer-col p {
            margin-bottom: 20px;
            color: rgba(255, 248, 245, 0.7);
            line-height: 1.8;
        }

.contact-info {
            list-style: none;
        }

.contact-info li {
            margin-bottom: 15px;
            display: flex;
            align-items: flex-start;
            gap: 15px;
            color: rgba(255, 248, 245, 0.7);
        }

.contact-info i {
            color: var(--color-peach);
            margin-top: 3px;
        }

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

.social-links a {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 45px;
            height: 45px;
            background-color: rgba(255, 154, 139, 0.1);
            border-radius: 50%;
            transition: var(--transition);
            color: var(--color-peach-light);
            font-size: 1.1rem;
        }

.social-links a:hover {
            background-color: var(--color-peach);
            color: var(--color-ebony);
            transform: translateY(-5px);
        }

.footer-bottom {
            text-align: center;
            padding-top: 30px;
            border-top: 1px solid rgba(255, 154, 139, 0.1);
            font-size: 0.9rem;
            color: rgba(255, 248, 245, 0.5);
            letter-spacing: 0.5px;
        }

/* Responsive Styles */
        @media (max-width: 1200px) {
            .hero h1 {
                font-size: 3.8rem;
            }
            
            .name-reveal {
                font-size: 4.5rem;
                height: 85px;
            }
            
            .section-title h2 {
                font-size: 2.8rem;
            }
            
            .portfolio-grid {
                grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            }
        }

@media (max-width: 992px) {
            .container {
                padding: 0 30px;
            }
            
            section {
                padding: 80px 0;
            }
            
            .hero h1 {
                font-size: 3.2rem;
            }
            
            .name-reveal {
                font-size: 3.8rem;
                height: 75px;
            }
            
            .section-title h2 {
                font-size: 2.5rem;
            }
            
            .form-row {
                grid-template-columns: 1fr;
                gap: 20px;
            }
            
            .nav-links {
                gap: 25px;
            }
        }

@media (max-width: 768px) {
            .nav-links {
                position: fixed;
                top: 0;
                right: -100%;
                width: 280px;
                height: 100vh;
                background-color: var(--color-ebony);
                flex-direction: column;
                align-items: flex-start;
                justify-content: flex-start;
                padding: 100px 40px 40px;
                transition: var(--transition);
                z-index: 1000;
                box-shadow: -5px 0 30px rgba(0, 0, 0, 0.2);
            }
            
            .nav-links.active {
                right: 0;
            }
            
            .nav-links li {
                margin: 0;
                width: 100%;
            }
            
            .nav-links a {
                font-size: 1.1rem;
                padding: 10px 0;
                display: block;
                width: 100%;
            }
            
            .mobile-menu-btn {
                display: block;
            }
            
            .hero h1 {
                font-size: 2.8rem;
            }
            
            .name-reveal {
                font-size: 3.2rem;
                height: 65px;
            }
            
            .hero p {
                font-size: 1.1rem;
            }
            
            .hero-btns {
                flex-direction: column;
                align-items: flex-start;
                gap: 15px;
            }
            
            .portfolio-grid {
                grid-template-columns: 1fr;
                gap: 25px;
            }
            
            .portfolio-item {
                height: 350px;
            }
            
            .pricing-cards {
                grid-template-columns: 1fr;
                gap: 30px;
            }
            
            .booking-form-container {
                padding: 50px 30px;
            }
            
            .testimonial-slider {
                padding: 40px 25px;
            }
            
            .testimonial-content {
                padding: 0 20px;
                font-size: 1.1rem;
            }
        }

@media (max-width: 576px) {
            .container {
                padding: 0 20px;
            }
            
            .hero h1 {
                font-size: 2.3rem;
            }
            
            .name-reveal {
                font-size: 2.5rem;
                height: 55px;
            }
            
            .section-title h2 {
                font-size: 2rem;
            }
            
            .section-title .subtitle {
                font-size: 0.85rem;
                letter-spacing: 2px;
            }
            
            .btn, .glowing-btn {
                padding: 16px 30px;
                font-size: 0.9rem;
            }
            
            .portfolio-item {
                height: 300px;
            }
            
            .price {
                font-size: 2.5rem;
            }
        }

JavaScript

// Mobile menu toggle
        const mobileMenuBtn = document.getElementById('mobileMenuBtn');
        const navLinks = document.getElementById('navLinks');
        
        mobileMenuBtn.addEventListener('click', () => {
            navLinks.classList.toggle('active');
            mobileMenuBtn.innerHTML = navLinks.classList.contains('active') ? 
                '<i class="fas fa-times"></i>' : '<i class="fas fa-bars"></i>';
        });
        
        // Header scroll effect
        window.addEventListener('scroll', () => {
            const header = document.getElementById('header');
            if (window.scrollY > 50) {
                header.classList.add('scrolled');
            } else {
                header.classList.remove('scrolled');
            }
        });
        
        // Initialize Swiper testimonial slider
        const swiper = new Swiper('.swiper', {
            slidesPerView: 1,
            spaceBetween: 0,
            loop: true,
            autoplay: {
                delay: 5000,
                disableOnInteraction: false,
            },
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
            speed: 800,
            effect: 'fade',
            fadeEffect: {
                crossFade: true
            },
        });
        
        // Intersection Observer for scroll animations
        const observerOptions = {
            threshold: 0.1,
            rootMargin: '0px 0px -100px 0px'
        };
        
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('animate-in');
                }
            });
        }, observerOptions);
        
        // Observe portfolio items
        document.querySelectorAll('.portfolio-item').forEach(item => {
            observer.observe(item);
        });
        
        // Observe pricing cards
        document.querySelectorAll('.pricing-card').forEach(card => {
            observer.observe(card);
        });
        
        // Form submission
        const bookingForm = document.getElementById('bookingForm');
        
        bookingForm.addEventListener('submit', (e) => {
            e.preventDefault();
            
            // Get form values
            const name = document.getElementById('name').value;
            const service = document.getElementById('service').value;
            const date = document.getElementById('date').value;
            
            // Format date for display
            const formattedDate = new Date(date).toLocaleDateString('en-US', {
                weekday: 'long',
                year: 'numeric',
                month: 'long',
                day: 'numeric'
            });
            
            // Show confirmation
            const serviceNames = {
                'bridal': 'Bridal Luxury Package',
                'editorial': 'Editorial Excellence',
                'occasion': 'Special Events',
                'consultation': 'Consultation Only',
                'other': 'Custom Service'
            };
            
            const serviceName = serviceNames[service] || 'Your selected service';
            
            // Create a more elegant confirmation
            const confirmationHTML = `
                <div style="text-align: center; padding: 20px;">
                    <div style="font-size: 3rem; color: #FF9A8B; margin-bottom: 20px;">
                        <i class="fas fa-check-circle"></i>
                    </div>
                    <h3 style="font-family: 'Cormorant Garamond', serif; margin-bottom: 15px;">Booking Request Submitted!</h3>
                    <p style="margin-bottom: 10px;">Thank you <strong>${name}</strong>!</p>
                    <p style="margin-bottom: 10px;">Your request for <strong>${serviceName}</strong> on <strong>${formattedDate}</strong> has been received.</p>
                    <p>I will contact you within 24 hours to confirm your appointment.</p>
                </div>
            `;
            
            // Replace form with confirmation
            bookingForm.innerHTML = confirmationHTML;
            
            // Add a button to submit another booking
            setTimeout(() => {
                const backButton = document.createElement('button');
                backButton.className = 'glowing-btn';
                backButton.style.marginTop = '30px';
                backButton.innerHTML = '<i class="fas fa-calendar-plus"></i> Book Another Appointment';
                backButton.addEventListener('click', () => {
                    location.reload();
                });
                bookingForm.appendChild(backButton);
            }, 1000);
        });
        
        // Smooth scrolling for anchor links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function(e) {
                e.preventDefault();
                
                const targetId = this.getAttribute('href');
                if(targetId === '#') return;
                
                const targetElement = document.querySelector(targetId);
                if(targetElement) {
                    // Close mobile menu if open
                    if(window.innerWidth <= 768 && navLinks.classList.contains('active')) {
                        navLinks.classList.remove('active');
                        mobileMenuBtn.innerHTML = '<i class="fas fa-bars"></i>';
                    }
                    
                    window.scrollTo({
                        top: targetElement.offsetTop - 80,
                        behavior: 'smooth'
                    });
                }
            });
        });
        
        // Set minimum date for booking form to today
        const today = new Date().toISOString().split('T')[0];
        document.getElementById('date').setAttribute('min', today);
        
        // Add a subtle parallax effect to hero background
        window.addEventListener('scroll', () => {
            const scrolled = window.pageYOffset;
            const hero = document.querySelector('.hero');
            if (hero) {
                hero.style.backgroundPositionY = `${scrolled * 0.5}px`;
            }
        });
        
        // Add a subtle animation to the logo on page load
        document.addEventListener('DOMContentLoaded', () => {
            // Add a loading animation class to body and remove after load
            document.body.classList.add('loaded');
            
            // Animate the logo icon
            const logoIcon = document.querySelector('.logo-icon');
            if (logoIcon) {
                setTimeout(() => {
                    logoIcon.style.transform = 'rotate(360deg)';
                    setTimeout(() => {
                        logoIcon.style.transform = 'rotate(0deg)';
                    }, 600);
                }, 1000);
            }
        });

Luxury Makeup Artistry Template Preview

Download Options