Salon 20 Template | QuickCoder | The frontend studio

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Salon 2.0 - Modern Beauty Experience</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">

</head>
<body>
    
    <header id="header">
        <a href="#" class="logo"><i class="fas fa-scissors"></i> Salon 2.0</a>
        <div class="menu-toggle" id="menuToggle">
            <i class="fas fa-bars"></i>
        </div>
        <ul class="nav-links" id="navLinks">
            <li><a href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#services">Services</a></li>
            <li><a href="#team">Team</a></li>
            <li><a href="#testimonials">Testimonials</a></li>
            <li><a href="#gallery">Gallery</a></li>
            <li><a href="#booking" class="cta-button">Book Now</a></li>
        </ul>
    </header>

<section class="hero" id="home">
        <div class="hero-content">
            <h1>Redefining <span>Beauty</span> in the Digital Age</h1>
            <p>Salon 2.0 combines cutting-edge technology with traditional beauty expertise to deliver a personalized, luxurious experience that leaves you feeling confident and refreshed.</p>
            <div class="hero-buttons">
                <a href="#booking" class="cta-button">Book Appointment</a>
                <a href="#services" class="secondary-button">Our Services</a>
            </div>
        </div>
    </section>

<section class="about" id="about">
        <div class="about-image">
            <img src="https://images.unsplash.com/photo-1595476108010-b4d1f102b1b1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1886&q=80" alt="Salon Interior">
        </div>
        <div class="about-content">
            <h2 class="section-title">About Salon 2.0</h2>
            <p>Founded in 2023, Salon 2.0 represents the next generation of beauty salons. We've reimagined every aspect of the salon experience to create a space that's as innovative as it is inviting.</p>
            <p>Our team of certified professionals stays at the forefront of industry trends and techniques, ensuring you receive the highest quality service tailored to your unique needs.</p>
            <div class="about-features">
                <div class="feature-item">
                    <div class="feature-icon">
                        <i class="fas fa-spa"></i>
                    </div>
                    <div>
                        <h3>Premium Products</h3>
                        <p>We use only the highest quality, cruelty-free products from leading brands.</p>
                    </div>
                </div>
                <div class="feature-item">
                    <div class="feature-icon">
                        <i class="fas fa-leaf"></i>
                    </div>
                    <div>
                        <h3>Eco-Friendly</h3>
                        <p>Our salon is committed to sustainable practices and reducing environmental impact.</p>
                    </div>
                </div>
                <div class="feature-item">
                    <div class="feature-icon">
                        <i class="fas fa-user-md"></i>
                    </div>
                    <div>
                        <h3>Certified Experts</h3>
                        <p>All our stylists and technicians are fully certified and regularly trained.</p>
                    </div>
                </div>
                <div class="feature-item">
                    <div class="feature-icon">
                        <i class="fas fa-tablet-alt"></i>
                    </div>
                    <div>
                        <h3>Digital Experience</h3>
                        <p>Book appointments, track your beauty history, and more with our mobile app.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="services" id="services">
        <div class="container">
            <h2 class="section-title">Our Services</h2>
            <p>From classic treatments to innovative beauty solutions, we offer a comprehensive range of services to help you look and feel your best.</p>
            <div class="services-grid">
                <div class="service-card">
                    <div class="service-image">
                        <img src="https://images.unsplash.com/photo-1519699047748-de8e457a634e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1780&q=80" alt="Hair Styling">
                    </div>
                    <div class="service-content">
                        <h3>Hair Styling</h3>
                        <p>Transform your look with our expert hair styling services, from precision cuts to glamorous blowouts.</p>
                        <span class="service-price">From $45</span>
                        <a href="#booking" class="secondary-button">Book Now</a>
                    </div>
                </div>
                <div class="service-card">
                    <div class="service-image">
                        <img src="https://images.unsplash.com/photo-1596704017255-ee7b3316f0cd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1887&q=80" alt="Hair Coloring">
                    </div>
                    <div class="service-content">
                        <h3>Hair Coloring</h3>
                        <p>Refresh your color or make a bold statement with our professional coloring services.</p>
                        <span class="service-price">From $75</span>
                        <a href="#booking" class="secondary-button">Book Now</a>
                    </div>
                </div>
                <div class="service-card">
                    <div class="service-image">
                        <img src="https://images.unsplash.com/photo-1522335789203-aabd1fc54bc9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1887&q=80" alt="Facial Treatments">
                    </div>
                    <div class="service-content">
                        <h3>Facial Treatments</h3>
                        <p>Rejuvenate your skin with our customized facials designed for your specific skin type.</p>
                        <span class="service-price">From $60</span>
                        <a href="#booking" class="secondary-button">Book Now</a>
                    </div>
                </div>
                <div class="service-card">
                    <div class="service-image">
                        <img src="https://images.unsplash.com/photo-1596462502278-27bfdc403348?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Manicure & Pedicure">
                    </div>
                    <div class="service-content">
                        <h3>Manicure & Pedicure</h3>
                        <p>Pamper your hands and feet with our luxurious nail care services and designs.</p>
                        <span class="service-price">From $35</span>
                        <a href="#booking" class="secondary-button">Book Now</a>
                    </div>
                </div>
                <div class="service-card">
                    <div class="service-image">
                        <img src="https://images.unsplash.com/photo-1600334129128-685c5582fd35?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Makeup Artistry">
                    </div>
                    <div class="service-content">
                        <h3>Makeup Artistry</h3>
                        <p>From natural daytime looks to dramatic evening styles, our makeup artists have you covered.</p>
                        <span class="service-price">From $55</span>
                        <a href="#booking" class="secondary-button">Book Now</a>
                    </div>
                </div>
                <div class="service-card">
                    <div class="service-image">
                        <img src="https://images.unsplash.com/photo-1600334129128-685c5582fd35?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Waxing Services">
                    </div>
                    <div class="service-content">
                        <h3>Waxing Services</h3>
                        <p>Professional waxing services for smooth, hair-free skin with minimal discomfort.</p>
                        <span class="service-price">From $25</span>
                        <a href="#booking" class="secondary-button">Book Now</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="team" id="team">
        <div class="container">
            <h2 class="section-title">Meet Our Team</h2>
            <p>Our talented team of beauty professionals brings passion, creativity, and expertise to every service.</p>
            <div class="team-grid">
                <div class="team-member">
                    <div class="member-image">
                        <img src="https://images.unsplash.com/photo-1551836022-d5d88e9218df?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1887&q=80" alt="Sarah Johnson">
                    </div>
                    <div class="member-info">
                        <h3>Sarah Johnson</h3>
                        <p>Master Stylist</p>
                        <div class="social-links">
                            <a href="#"><i class="fab fa-instagram"></i></a>
                            <a href="#"><i class="fab fa-facebook-f"></i></a>
                            <a href="#"><i class="fab fa-twitter"></i></a>
                        </div>
                    </div>
                </div>
                <div class="team-member">
                    <div class="member-image">
                        <img src="https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1887&q=80" alt="Michael Chen">
                    </div>
                    <div class="member-info">
                        <h3>Michael Chen</h3>
                        <p>Color Specialist</p>
                        <div class="social-links">
                            <a href="#"><i class="fab fa-instagram"></i></a>
                            <a href="#"><i class="fab fa-facebook-f"></i></a>
                            <a href="#"><i class="fab fa-twitter"></i></a>
                        </div>
                    </div>
                </div>
                <div class="team-member">
                    <div class="member-image">
                        <img src="https://images.unsplash.com/photo-1595475884562-073c30d45670?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1889&q=80" alt="Emily Rodriguez">
                    </div>
                    <div class="member-info">
                        <h3>Emily Rodriguez</h3>
                        <p>Skincare Expert</p>
                        <div class="social-links">
                            <a href="#"><i class="fab fa-instagram"></i></a>
                            <a href="#"><i class="fab fa-facebook-f"></i></a>
                            <a href="#"><i class="fab fa-twitter"></i></a>
                        </div>
                    </div>
                </div>
                <div class="team-member">
                    <div class="member-image">
                        <img src="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1961&q=80" alt="David Kim">
                    </div>
                    <div class="member-info">
                        <h3>David Kim</h3>
                        <p>Nail Artist</p>
                        <div class="social-links">
                            <a href="#"><i class="fab fa-instagram"></i></a>
                            <a href="#"><i class="fab fa-facebook-f"></i></a>
                            <a href="#"><i class="fab fa-twitter"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="testimonials" id="testimonials">
        <div class="container">
            <h2 class="section-title">Client Testimonials</h2>
            <p>Don't just take our word for it - hear what our clients have to say about their Salon 2.0 experience.</p>
            <div class="testimonial-slider">
                <div class="testimonial-slide active">
                    <div class="client-image">
                        <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Jessica M.">
                    </div>
                    <p class="testimonial-text">"I've been to many salons over the years, but Salon 2.0 is truly in a league of its own. The attention to detail and personalized service make me feel like a VIP every time. My color has never looked better!"</p>
                    <h4 class="client-name">Jessica M.</h4>
                    <p class="client-role">Regular Client for 2 Years</p>
                </div>
                <div class="testimonial-slide">
                    <div class="client-image">
                        <img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1888&q=80" alt="Amanda T.">
                    </div>
                    <p class="testimonial-text">"The digital booking system is so convenient, and the stylists really listen to what I want. They've transformed my hair from damaged and dull to healthy and shiny. I won't go anywhere else now!"</p>
                    <h4 class="client-name">Amanda T.</h4>
                    <p class="client-role">First-Time Client</p>
                </div>
                <div class="testimonial-slide">
                    <div class="client-image">
                        <img src="https://images.unsplash.com/photo-1552058544-f2b08422138a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1899&q=80" alt="Robert K.">
                    </div>
                    <p class="testimonial-text">"As a guy who was nervous about going to a salon, the team at Salon 2.0 made me feel completely comfortable. The beard trim and facial treatment were exceptional - I look and feel 10 years younger!"</p>
                    <h4 class="client-name">Robert K.</h4>
                    <p class="client-role">Monthly Client</p>
                </div>
                <div class="slider-controls">
                    <div class="slider-dot active" data-slide="0"></div>
                    <div class="slider-dot" data-slide="1"></div>
                    <div class="slider-dot" data-slide="2"></div>
                </div>
            </div>
        </div>
    </section>

<section class="gallery" id="gallery">
        <div class="container">
            <h2 class="section-title">Our Work</h2>
            <p>Browse through our gallery to see the transformations we've created for our clients.</p>
            <div class="gallery-grid">
                <div class="gallery-item">
                    <img src="https://images.unsplash.com/photo-1513201099705-a9746e1e201f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1964&q=80" alt="Hair Makeover">
                    <div class="gallery-overlay">
                        <h3>Dramatic Hair Makeover</h3>
                    </div>
                </div>
                <div class="gallery-item">
                    <img src="https://images.unsplash.com/photo-1559599101-f09722fb4948?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2069&q=80" alt="Color Correction">
                    <div class="gallery-overlay">
                        <h3>Professional Color Correction</h3>
                    </div>
                </div>
                <div class="gallery-item">
                    <img src="https://images.unsplash.com/photo-1529626455594-4ff0802cfb7e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1887&q=80" alt="Bridal Makeup">
                    <div class="gallery-overlay">
                        <h3>Elegant Bridal Makeup</h3>
                    </div>
                </div>
                <div class="gallery-item">
                    <img src="https://images.unsplash.com/photo-1596704017255-ee7b3316f0cd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1887&q=80" alt="Balayage Highlights">
                    <div class="gallery-overlay">
                        <h3>Natural Balayage Highlights</h3>
                    </div>
                </div>
                <div class="gallery-item">
                    <img src="https://images.unsplash.com/photo-1595475884562-073c30d45670?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1889&q=80" alt="Facial Treatment">
                    <div class="gallery-overlay">
                        <h3>Luxury Facial Treatment</h3>
                    </div>
                </div>
                <div class="gallery-item">
                    <img src="https://images.unsplash.com/photo-1596462502278-27bfdc403348?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Nail Art">
                    <div class="gallery-overlay">
                        <h3>Creative Nail Art</h3>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="booking" id="booking">
        <div class="booking-container">
            <h2 class="section-title">Book Your Appointment</h2>
            <p>Ready to experience the Salon 2.0 difference? Fill out the form below and we'll get back to you shortly to confirm your appointment.</p>
            <form class="booking-form">
                <div class="form-group">
                    <label for="name">Full Name</label>
                    <input type="text" id="name" name="name" required>
                </div>
                <div class="form-group">
                    <label for="email">Email</label>
                    <input type="email" id="email" name="email" required>
                </div>
                <div class="form-group">
                    <label for="phone">Phone Number</label>
                    <input type="tel" id="phone" name="phone" required>
                </div>
                <div class="form-group">
                    <label for="service">Service</label>
                    <select id="service" name="service" required>
                        <option value="">Select a Service</option>
                        <option value="haircut">Haircut & Styling</option>
                        <option value="coloring">Hair Coloring</option>
                        <option value="highlights">Highlights/Balayage</option>
                        <option value="facial">Facial Treatment</option>
                        <option value="makeup">Makeup Application</option>
                        <option value="manicure">Manicure</option>
                        <option value="pedicure">Pedicure</option>
                        <option value="waxing">Waxing</option>
                        <option value="other">Other Service</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="date">Preferred Date</label>
                    <input type="date" id="date" name="date" required>
                </div>
                <div class="form-group">
                    <label for="time">Preferred Time</label>
                    <input type="time" id="time" name="time" required>
                </div>
                <div class="form-group full-width">
                    <label for="notes">Special Requests or Notes</label>
                    <textarea id="notes" name="notes" rows="3"></textarea>
                </div>
                <button type="submit" class="submit-btn">Request Appointment</button>
            </form>
        </div>
    </section>

<footer>
        <div class="footer-content">
            <div class="footer-column">
                <h3>Salon 2.0</h3>
                <p>Redefining beauty in the digital age with innovative services, premium products, and exceptional customer care.</p>
                <div class="social-media">
                    <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-pinterest-p"></i></a>
                </div>
            </div>
            <div class="footer-column">
                <h3>Quick Links</h3>
                <ul class="footer-links">
                    <li><a href="#home">Home</a></li>
                    <li><a href="#about">About Us</a></li>
                    <li><a href="#services">Services</a></li>
                    <li><a href="#team">Our Team</a></li>
                    <li><a href="#gallery">Gallery</a></li>
                    <li><a href="#booking">Book Online</a></li>
                </ul>
            </div>
            <div class="footer-column">
                <h3>Services</h3>
                <ul class="footer-links">
                    <li><a href="#">Hair Styling</a></li>
                    <li><a href="#">Hair Coloring</a></li>
                    <li><a href="#">Skincare</a></li>
                    <li><a href="#">Makeup</a></li>
                    <li><a href="#">Nail Care</a></li>
                    <li><a href="#">Waxing</a></li>
                </ul>
            </div>
            <div class="footer-column">
                <h3>Contact Us</h3>
                <ul class="contact-info">
                    <li>
                        <i class="fas fa-map-marker-alt"></i>
                        <span>123 Beauty Street, Fashion District, NY 10001</span>
                    </li>
                    <li>
                        <i class="fas fa-phone-alt"></i>
                        <span>(212) 555-1234</span>
                    </li>
                    <li>
                        <i class="fas fa-envelope"></i>
                        <span>info@salon2.com</span>
                    </li>
                    <li>
                        <i class="fas fa-clock"></i>
                        <span>Mon-Fri: 9am-8pm<br>Sat-Sun: 10am-6pm</span>
                    </li>
                </ul>
            </div>
        </div>
        <div class="footer-bottom">
            <p>&copy; 2023 Salon 2.0. All Rights Reserved. | Designed with ❤️ for your beauty needs</p>
        </div>
    </footer>

CSS

:root {
            --primary: #ff6b98;
            --secondary: #5f2c82;
            --dark: #2a2a2a;
            --light: #f8f8f8;
            --accent: #ffd166;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Poppins', sans-serif;
            color: var(--dark);
            overflow-x: hidden;
            background-color: var(--light);
        }
        
        h1, h2, h3, h4 {
            font-family: 'Playfair Display', serif;
        }
        
        /* Header/Navigation */
        header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            padding: 20px 5%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 1000;
            transition: all 0.5s ease;
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(10px);
        }
        
        header.scrolled {
            padding: 15px 5%;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
        }
        
        .logo {
            font-size: 28px;
            font-weight: 700;
            color: var(--primary);
            text-decoration: none;
            display: flex;
            align-items: center;
        }
        
        .logo i {
            margin-right: 10px;
            font-size: 32px;
        }
        
        .nav-links {
            display: flex;
            list-style: none;
        }
        
        .nav-links li {
            margin: 0 15px;
        }
        
        .nav-links a {
            text-decoration: none;
            color: var(--dark);
            font-weight: 500;
            position: relative;
            padding: 5px 0;
            transition: all 0.3s ease;
        }
        
        .nav-links a:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 2px;
            background: var(--primary);
            transition: width 0.3s ease;
        }
        
        .nav-links a:hover:after {
            width: 100%;
        }
        
        .nav-links a:hover {
            color: var(--primary);
        }
        
        .cta-button {
            background: linear-gradient(45deg, var(--primary), var(--secondary));
            color: white;
            padding: 10px 25px;
            border-radius: 30px;
            text-decoration: none;
            font-weight: 600;
            transition: all 0.3s ease;
            box-shadow: 0 5px 15px rgba(255, 107, 152, 0.3);
        }
        
        .cta-button:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(255, 107, 152, 0.4);
        }
        
        .menu-toggle {
            display: none;
            cursor: pointer;
            font-size: 24px;
        }
        
        /* Hero Section */
        .hero {
            height: 100vh;
            display: flex;
            align-items: center;
            padding: 0 5%;
            position: relative;
            overflow: hidden;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7));
        }
        
        .hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('https://images.unsplash.com/photo-1522337360788-8b13dee7a37e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80') no-repeat center center/cover;
            z-index: -1;
            opacity: 0.7;
        }
        
        .hero-content {
            max-width: 600px;
            animation: fadeInUp 1s ease;
        }
        
        .hero h1 {
            font-size: 4rem;
            margin-bottom: 20px;
            color: var(--dark);
            line-height: 1.2;
        }
        
        .hero h1 span {
            color: var(--primary);
        }
        
        .hero p {
            font-size: 1.1rem;
            margin-bottom: 30px;
            line-height: 1.6;
        }
        
        .hero-buttons {
            display: flex;
            gap: 20px;
        }
        
        .secondary-button {
            border: 2px solid var(--primary);
            color: var(--primary);
            padding: 10px 25px;
            border-radius: 30px;
            text-decoration: none;
            font-weight: 600;
            transition: all 0.3s ease;
        }
        
        .secondary-button:hover {
            background: var(--primary);
            color: white;
        }
        
        /* About Section */
        .about {
            padding: 100px 5%;
            display: flex;
            align-items: center;
            gap: 50px;
            background: white;
        }
        
        .about-image {
            flex: 1;
            position: relative;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
            height: 500px;
        }
        
        .about-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }
        
        .about-image:hover img {
            transform: scale(1.05);
        }
        
        .about-content {
            flex: 1;
        }
        
        .section-title {
            font-size: 2.5rem;
            margin-bottom: 20px;
            position: relative;
            display: inline-block;
        }
        
        .section-title:after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 0;
            width: 50%;
            height: 3px;
            background: linear-gradient(45deg, var(--primary), var(--secondary));
        }
        
        .about-content p {
            margin-bottom: 20px;
            line-height: 1.8;
        }
        
        .about-features {
            margin-top: 30px;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
        }
        
        .feature-item {
            display: flex;
            align-items: flex-start;
            gap: 15px;
        }
        
        .feature-icon {
            background: linear-gradient(45deg, var(--primary), var(--secondary));
            color: white;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        
        /* Services Section */
        .services {
            padding: 100px 5%;
            background: var(--light);
            text-align: center;
        }
        
        .services .section-title {
            margin-bottom: 50px;
        }
        
        .services-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            margin-top: 50px;
        }
        
        .service-card {
            background: white;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
            transition: all 0.3s ease;
            text-align: left;
        }
        
        .service-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
        }
        
        .service-image {
            height: 200px;
            overflow: hidden;
        }
        
        .service-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }
        
        .service-card:hover .service-image img {
            transform: scale(1.1);
        }
        
        .service-content {
            padding: 25px;
        }
        
        .service-content h3 {
            font-size: 1.5rem;
            margin-bottom: 15px;
        }
        
        .service-content p {
            margin-bottom: 20px;
            color: #666;
            line-height: 1.6;
        }
        
        .service-price {
            font-weight: 700;
            color: var(--primary);
            font-size: 1.2rem;
            margin-bottom: 20px;
            display: block;
        }
        
        /* Team Section */
        .team {
            padding: 100px 5%;
            background: white;
            text-align: center;
        }
        
        .team .section-title {
            margin-bottom: 50px;
        }
        
        .team-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 30px;
        }
        
        .team-member {
            background: var(--light);
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
            transition: all 0.3s ease;
            position: relative;
        }
        
        .team-member:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
        }
        
        .member-image {
            height: 300px;
            overflow: hidden;
        }
        
        .member-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }
        
        .team-member:hover .member-image img {
            transform: scale(1.1);
        }
        
        .member-info {
            padding: 20px;
        }
        
        .member-info h3 {
            font-size: 1.3rem;
            margin-bottom: 5px;
        }
        
        .member-info p {
            color: var(--primary);
            font-weight: 600;
            margin-bottom: 15px;
        }
        
        .social-links {
            display: flex;
            justify-content: center;
            gap: 15px;
        }
        
        .social-links a {
            color: var(--dark);
            width: 35px;
            height: 35px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }
        
        .social-links a:hover {
            background: var(--primary);
            color: white;
        }
        
        /* Testimonials Section */
        .testimonials {
            padding: 100px 5%;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            color: white;
            text-align: center;
        }
        
        .testimonials .section-title {
            color: white;
        }
        
        .testimonials .section-title:after {
            background: white;
        }
        
        .testimonial-slider {
            max-width: 800px;
            margin: 50px auto 0;
            position: relative;
        }
        
        .testimonial-slide {
            padding: 40px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 15px;
            backdrop-filter: blur(10px);
            display: none;
            animation: fadeIn 0.5s ease;
        }
        
        .testimonial-slide.active {
            display: block;
        }
        
        .client-image {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            overflow: hidden;
            margin: 0 auto 20px;
            border: 3px solid white;
        }
        
        .client-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .testimonial-text {
            font-size: 1.1rem;
            line-height: 1.8;
            margin-bottom: 20px;
            font-style: italic;
        }
        
        .client-name {
            font-weight: 700;
            font-size: 1.2rem;
        }
        
        .client-role {
            font-size: 0.9rem;
            opacity: 0.8;
        }
        
        .slider-controls {
            margin-top: 30px;
            display: flex;
            justify-content: center;
            gap: 15px;
        }
        
        .slider-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.5);
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .slider-dot.active {
            background: white;
            transform: scale(1.2);
        }
        
        /* Gallery Section */
        .gallery {
            padding: 100px 5%;
            background: var(--light);
            text-align: center;
        }
        
        .gallery .section-title {
            margin-bottom: 50px;
        }
        
        .gallery-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
        }
        
        .gallery-item {
            position: relative;
            border-radius: 10px;
            overflow: hidden;
            height: 250px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
        }
        
        .gallery-item:hover {
            transform: scale(1.03);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
        }
        
        .gallery-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }
        
        .gallery-item:hover img {
            transform: scale(1.1);
        }
        
        .gallery-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
            display: flex;
            align-items: flex-end;
            padding: 20px;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .gallery-item:hover .gallery-overlay {
            opacity: 1;
        }
        
        .gallery-overlay h3 {
            color: white;
            font-size: 1.2rem;
        }
        
        /* Booking Section */
        .booking {
            padding: 100px 5%;
            background: white;
            text-align: center;
        }
        
        .booking-container {
            max-width: 800px;
            margin: 0 auto;
            background: var(--light);
            border-radius: 20px;
            padding: 50px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
        }
        
        .booking .section-title {
            margin-bottom: 30px;
        }
        
        .booking-form {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            text-align: left;
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-group.full-width {
            grid-column: span 2;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
        }
        
        .form-group input,
        .form-group select,
        .form-group textarea {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-family: 'Poppins', sans-serif;
            transition: all 0.3s ease;
        }
        
        .form-group input:focus,
        .form-group select:focus,
        .form-group textarea:focus {
            border-color: var(--primary);
            outline: none;
            box-shadow: 0 0 0 3px rgba(255, 107, 152, 0.2);
        }
        
        .form-group textarea {
            min-height: 120px;
            resize: vertical;
        }
        
        .submit-btn {
            grid-column: span 2;
            background: linear-gradient(45deg, var(--primary), var(--secondary));
            color: white;
            border: none;
            padding: 15px;
            border-radius: 8px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .submit-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 20px rgba(255, 107, 152, 0.3);
        }
        
        /* Footer */
        footer {
            background: var(--dark);
            color: white;
            padding: 80px 5% 30px;
        }
        
        .footer-content {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 40px;
            margin-bottom: 50px;
        }
        
        .footer-column h3 {
            font-size: 1.3rem;
            margin-bottom: 20px;
            position: relative;
            display: inline-block;
        }
        
        .footer-column h3:after {
            content: '';
            position: absolute;
            bottom: -8px;
            left: 0;
            width: 40px;
            height: 2px;
            background: var(--primary);
        }
        
        .footer-column p {
            margin-bottom: 15px;
            line-height: 1.6;
            opacity: 0.8;
        }
        
        .footer-links {
            list-style: none;
        }
        
        .footer-links li {
            margin-bottom: 10px;
        }
        
        .footer-links a {
            color: white;
            text-decoration: none;
            opacity: 0.8;
            transition: all 0.3s ease;
            position: relative;
            padding-left: 15px;
        }
        
        .footer-links a:before {
            content: '→';
            position: absolute;
            left: 0;
            color: var(--primary);
            opacity: 0;
            transition: all 0.3s ease;
        }
        
        .footer-links a:hover {
            opacity: 1;
            padding-left: 20px;
        }
        
        .footer-links a:hover:before {
            opacity: 1;
        }
        
        .contact-info {
            list-style: none;
        }
        
        .contact-info li {
            margin-bottom: 15px;
            display: flex;
            align-items: flex-start;
            gap: 10px;
        }
        
        .contact-info i {
            color: var(--primary);
            margin-top: 3px;
        }
        
        .social-media {
            display: flex;
            gap: 15px;
            margin-top: 20px;
        }
        
        .social-media a {
            color: white;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }
        
        .social-media a:hover {
            background: var(--primary);
            transform: translateY(-3px);
        }
        
        .footer-bottom {
            text-align: center;
            padding-top: 30px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            opacity: 0.7;
            font-size: 0.9rem;
        }
        
        /* Animations */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        @keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }
        
        @keyframes pulse {
            0% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.05);
            }
            100% {
                transform: scale(1);
            }
        }
        
        /* Responsive Styles */
        @media (max-width: 992px) {
            .about {
                flex-direction: column;
            }
            
            .hero h1 {
                font-size: 3rem;
            }
        }
        
        @media (max-width: 768px) {
            .nav-links {
                position: fixed;
                top: 80px;
                left: -100%;
                width: 100%;
                height: calc(100vh - 80px);
                background: white;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                transition: all 0.5s ease;
                gap: 30px;
            }
            
            .nav-links.active {
                left: 0;
            }
            
            .menu-toggle {
                display: block;
            }
            
            .hero h1 {
                font-size: 2.5rem;
            }
            
            .hero-buttons {
                flex-direction: column;
                gap: 15px;
            }
            
            .booking-form {
                grid-template-columns: 1fr;
            }
            
            .form-group.full-width, .submit-btn {
                grid-column: span 1;
            }
        }
        
        @media (max-width: 576px) {
            .hero h1 {
                font-size: 2rem;
            }
            
            .section-title {
                font-size: 2rem;
            }
            
            .booking-container {
                padding: 30px 20px;
            }
        }

JavaScript

// Mobile Menu Toggle
        const menuToggle = document.getElementById('menuToggle');
        const navLinks = document.getElementById('navLinks');
        
        menuToggle.addEventListener('click', () => {
            navLinks.classList.toggle('active');
            menuToggle.innerHTML = navLinks.classList.contains('active') ? 
                '<i class="fas fa-times"></i>' : '<i class="fas fa-bars"></i>';
        });
        
        // Close mobile menu when clicking a link
        document.querySelectorAll('.nav-links a').forEach(link => {
            link.addEventListener('click', () => {
                if (navLinks.classList.contains('active')) {
                    navLinks.classList.remove('active');
                    menuToggle.innerHTML = '<i class="fas fa-bars"></i>';
                }
            });
        });
        
        // Header scroll effect
        window.addEventListener('scroll', () => {
            const header = document.getElementById('header');
            header.classList.toggle('scrolled', window.scrollY > 50);
        });
        
        // Testimonial slider
        const testimonialSlides = document.querySelectorAll('.testimonial-slide');
        const sliderDots = document.querySelectorAll('.slider-dot');
        let currentSlide = 0;
        
        function showSlide(index) {
            testimonialSlides.forEach(slide => slide.classList.remove('active'));
            sliderDots.forEach(dot => dot.classList.remove('active'));
            
            testimonialSlides[index].classList.add('active');
            sliderDots[index].classList.add('active');
            currentSlide = index;
        }
        
        sliderDots.forEach((dot, index) => {
            dot.addEventListener('click', () => showSlide(index));
        });
        
        // Auto-advance testimonials
        setInterval(() => {
            currentSlide = (currentSlide + 1) % testimonialSlides.length;
            showSlide(currentSlide);
        }, 5000);
        
        // 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) {
                    window.scrollTo({
                        top: targetElement.offsetTop - 80,
                        behavior: 'smooth'
                    });
                }
            });
        });
        
        // Animation on scroll
        function animateOnScroll() {
            const elements = document.querySelectorAll('.about, .services-grid, .team-grid, .gallery-grid, .booking-container');
            
            elements.forEach(element => {
                const elementPosition = element.getBoundingClientRect().top;
                const screenPosition = window.innerHeight / 1.2;
                
                if (elementPosition < screenPosition) {
                    element.style.animation = 'fadeInUp 1s ease forwards';
                }
            });
        }
        
        window.addEventListener('scroll', animateOnScroll);
        window.addEventListener('load', animateOnScroll);

Salon 20 Template Preview

Download Options