Premium Hair Beauty Parlor Studio
Preview
Edit
Download
Run
Download Options
HTML File
Download as .html file
CSS File
Download as .css file
JavaScript File
Download as .js file
Combined HTML
All code in one HTML file
Project ZIP
All files in a ZIP archive
Cancel
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>StyleCraft Salon - Premium Hair & Beauty Studio</title> <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"> </head> <body> <!-- Navigation --> <nav class="navbar" id="navbar"> <div class="nav-container"> <a href="#" class="logo"> <i class="fas fa-cut"></i> StyleCraft </a> <ul class="nav-menu" id="nav-menu"> <li><a href="#home" class="nav-link">Home</a></li> <li><a href="#services" class="nav-link">Services</a></li> <li><a href="#gallery" class="nav-link">Gallery</a></li> <li><a href="#contact" class="nav-link">Contact</a></li> <li><a href="#booking" class="nav-cta">Book Now</a></li> </ul> <div class="hamburger" id="hamburger"> <span></span> <span></span> <span></span> </div> </div> </nav> <!-- Hero Section --> <section class="hero" id="home"> <div class="floating-elements"> <div class="floating-element"></div> <div class="floating-element"></div> <div class="floating-element"></div> </div> <div class="hero-content"> <div class="hero-subtitle">Premium Hair Salon</div> <h1>Where Style Meets Artistry</h1> <p class="hero-description">Experience the finest in hair styling, cutting, and beauty treatments. Our master stylists create stunning looks that reflect your unique personality and lifestyle.</p> <div class="hero-buttons"> <a href="#booking" class="btn-primary">Book Appointment</a> <a href="#services" class="btn-secondary">View Services</a> </div> </div> </section> <!-- Services Section --> <section class="services" id="services"> <div class="container"> <div class="section-header"> <div class="section-subtitle">Our Services</div> <h2 class="section-title">Professional Hair & Beauty</h2> <p class="section-description">From precision cuts to stunning color transformations, we offer comprehensive hair and beauty services using premium products and advanced techniques.</p> </div> <div class="services-grid"> <div class="service-card"> <div class="service-image"> <i class="fas fa-cut service-icon"></i> <div class="service-price">From $65</div> </div> <div class="service-content"> <h3 class="service-title">Hair Cutting & Styling</h3> <p class="service-description">Expert precision cuts and professional styling tailored to your face shape, lifestyle, and personal preferences.</p> <ul class="service-features"> <li><i class="fas fa-check"></i> Consultation & hair analysis</li> <li><i class="fas fa-check"></i> Precision cutting techniques</li> <li><i class="fas fa-check"></i> Professional blow-dry styling</li> <li><i class="fas fa-check"></i> Styling tips & maintenance advice</li> </ul> <div class="service-footer"> <div class="service-duration"> <i class="fas fa-clock"></i> <span>60-90 minutes</span> </div> <button class="book-btn" onclick="bookService('Hair Cutting')">Book Now</button> </div> </div> </div> <div class="service-card"> <div class="service-image"> <i class="fas fa-palette service-icon"></i> <div class="service-price">From $95</div> </div> <div class="service-content"> <h3 class="service-title">Hair Coloring & Highlights</h3> <p class="service-description">Transform your look with professional coloring services, from subtle highlights to bold color changes.</p> <ul class="service-features"> <li><i class="fas fa-check"></i> Color consultation & matching</li> <li><i class="fas fa-check"></i> Full color & root touch-ups</li> <li><i class="fas fa-check"></i> Highlights & lowlights</li> <li><i class="fas fa-check"></i> Color correction services</li> </ul> <div class="service-footer"> <div class="service-duration"> <i class="fas fa-clock"></i> <span>120-180 minutes</span> </div> <button class="book-btn" onclick="bookService('Hair Coloring')">Book Now</button> </div> </div> </div> <div class="service-card"> <div class="service-image"> <i class="fas fa-magic service-icon"></i> <div class="service-price">From $85</div> </div> <div class="service-content"> <h3 class="service-title">Hair Treatments & Care</h3> <p class="service-description">Restore and nourish your hair with our premium treatment services for healthier, stronger hair.</p> <ul class="service-features"> <li><i class="fas fa-check"></i> Deep conditioning treatments</li> <li><i class="fas fa-check"></i> Keratin smoothing treatments</li> <li><i class="fas fa-check"></i> Scalp treatments & massage</li> <li><i class="fas fa-check"></i> Damage repair therapy</li> </ul> <div class="service-footer"> <div class="service-duration"> <i class="fas fa-clock"></i> <span>90-120 minutes</span> </div> <button class="book-btn" onclick="bookService('Hair Treatment')">Book Now</button> </div> </div> </div> <div class="service-card"> <div class="service-image"> <i class="fas fa-fire service-icon"></i> <div class="service-price">From $45</div> </div> <div class="service-content"> <h3 class="service-title">Blowouts & Styling</h3> <p class="service-description">Professional blowouts and special occasion styling to keep you looking fabulous for any event.</p> <ul class="service-features"> <li><i class="fas fa-check"></i> Signature blowout styles</li> <li><i class="fas fa-check"></i> Special event styling</li> <li><i class="fas fa-check"></i> Curling & straightening</li> <li><i class="fas fa-check"></i> Updo & formal styles</li> </ul> <div class="service-footer"> <div class="service-duration"> <i class="fas fa-clock"></i> <span>45-60 minutes</span> </div> <button class="book-btn" onclick="bookService('Blowout')">Book Now</button> </div> </div> </div> <div class="service-card"> <div class="service-image"> <i class="fas fa-crown service-icon"></i> <div class="service-price">From $150</div> </div> <div class="service-content"> <h3 class="service-title">Bridal & Special Events</h3> <p class="service-description">Look stunning on your special day with our bridal and event styling services, including trials and touch-ups.</p> <ul class="service-features"> <li><i class="fas fa-check"></i> Bridal consultation & trial</li> <li><i class="fas fa-check"></i> Wedding day styling</li> <li><i class="fas fa-check"></i> Bridal party services</li> <li><i class="fas fa-check"></i> Special event styling</li> </ul> <div class="service-footer"> <div class="service-duration"> <i class="fas fa-clock"></i> <span>120-240 minutes</span> </div> <button class="book-btn" onclick="bookService('Bridal')">Book Now</button> </div> </div> </div> <div class="service-card"> <div class="service-image"> <i class="fas fa-male service-icon"></i> <div class="service-price">From $35</div> </div> <div class="service-content"> <h3 class="service-title">Men's Grooming</h3> <p class="service-description">Professional men's haircuts, beard trimming, and grooming services for the modern gentleman.</p> <ul class="service-features"> <li><i class="fas fa-check"></i> Classic & modern cuts</li> <li><i class="fas fa-check"></i> Beard trimming & shaping</li> <li><i class="fas fa-check"></i> Hot towel treatments</li> <li><i class="fas fa-check"></i> Styling & grooming advice</li> </ul> <div class="service-footer"> <div class="service-duration"> <i class="fas fa-clock"></i> <span>30-45 minutes</span> </div> <button class="book-btn" onclick="bookService('Mens Grooming')">Book Now</button> </div> </div> </div> </div> </div> </section> <!-- Stylists Section --> <section class="stylists" id="stylists"> <div class="container"> <div class="section-header"> <div class="section-subtitle">Meet Our Team</div> <h2 class="section-title">Master Hair Stylists</h2> <p class="section-description">Our talented team of experienced stylists brings creativity, expertise, and passion to every appointment.</p> </div> <div class="stylists-grid"> <div class="stylist-card"> <div class="stylist-image"> <i class="fas fa-user-crown"></i> <div class="stylist-badge">Master Stylist</div> </div> <div class="stylist-content"> <h3 class="stylist-name">Alexandra Stone</h3> <div class="stylist-title">Creative Director & Master Stylist</div> <ul class="stylist-specialties"> <li>• Advanced Color Techniques</li> <li>• Precision Cutting</li> <li>• Bridal & Event Styling</li> <li>• 15+ Years Experience</li> </ul> <div class="stylist-rating"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> </div> <div class="stylist-contact"> <button class="contact-btn" title="Call"><i class="fas fa-phone"></i></button> <button class="contact-btn" title="Email"><i class="fas fa-envelope"></i></button> <button class="contact-btn" title="Instagram"><i class="fab fa-instagram"></i></button> </div> </div> </div> <div class="stylist-card"> <div class="stylist-image"> <i class="fas fa-palette"></i> <div class="stylist-badge">Color Specialist</div> </div> <div class="stylist-content"> <h3 class="stylist-name">Marcus Rivera</h3> <div class="stylist-title">Senior Color Specialist</div> <ul class="stylist-specialties"> <li>• Balayage & Highlights</li> <li>• Color Correction</li> <li>• Fashion Colors</li> <li>• 12+ Years Experience</li> </ul> <div class="stylist-rating"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> </div> <div class="stylist-contact"> <button class="contact-btn" title="Call"><i class="fas fa-phone"></i></button> <button class="contact-btn" title="Email"><i class="fas fa-envelope"></i></button> <button class="contact-btn" title="Instagram"><i class="fab fa-instagram"></i></button> </div> </div> </div> <div class="stylist-card"> <div class="stylist-image"> <i class="fas fa-cut"></i> <div class="stylist-badge">Senior Stylist</div> </div> <div class="stylist-content"> <h3 class="stylist-name">Emma Thompson</h3> <div class="stylist-title">Senior Hair Stylist</div> <ul class="stylist-specialties"> <li>• Modern & Classic Cuts</li> <li>• Texture Specialists</li> <li>• Curly Hair Expert</li> <li>• 10+ Years Experience</li> </ul> <div class="stylist-rating"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> </div> <div class="stylist-contact"> <button class="contact-btn" title="Call"><i class="fas fa-phone"></i></button> <button class="contact-btn" title="Email"><i class="fas fa-envelope"></i></button> <button class="contact-btn" title="Instagram"><i class="fab fa-instagram"></i></button> </div> </div> </div> <div class="stylist-card"> <div class="stylist-image"> <i class="fas fa-male"></i> <div class="stylist-badge">Men's Specialist</div> </div> <div class="stylist-content"> <h3 class="stylist-name">David Chen</h3> <div class="stylist-title">Men's Grooming Specialist</div> <ul class="stylist-specialties"> <li>• Classic & Modern Men's Cuts</li> <li>• Beard Styling & Trimming</li> <li>• Hot Towel Treatments</li> <li>• 8+ Years Experience</li> </ul> <div class="stylist-rating"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> </div> <div class="stylist-contact"> <button class="contact-btn" title="Call"><i class="fas fa-phone"></i></button> <button class="contact-btn" title="Email"><i class="fas fa-envelope"></i></button> <button class="contact-btn" title="Instagram"><i class="fab fa-instagram"></i></button> </div> </div> </div> <div class="stylist-card"> <div class="stylist-image"> <i class="fas fa-crown"></i> <div class="stylist-badge">Bridal Specialist</div> </div> <div class="stylist-content"> <h3 class="stylist-name">Sofia Martinez</h3> <div class="stylist-title">Bridal & Event Stylist</div> <ul class="stylist-specialties"> <li>• Bridal Hair & Makeup</li> <li>• Special Event Styling</li> <li>• Updo Specialist</li> <li>• 9+ Years Experience</li> </ul> <div class="stylist-rating"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> </div> <div class="stylist-contact"> <button class="contact-btn" title="Call"><i class="fas fa-phone"></i></button> <button class="contact-btn" title="Email"><i class="fas fa-envelope"></i></button> <button class="contact-btn" title="Instagram"><i class="fab fa-instagram"></i></button> </div> </div> </div> <div class="stylist-card"> <div class="stylist-image"> <i class="fas fa-magic"></i> <div class="stylist-badge">Treatment Expert</div> </div> <div class="stylist-content"> <h3 class="stylist-name">Rachel Kim</h3> <div class="stylist-title">Hair Treatment Specialist</div> <ul class="stylist-specialties"> <li>• Keratin Treatments</li> <li>• Deep Conditioning</li> <li>• Scalp Therapy</li> <li>• 7+ Years Experience</li> </ul> <div class="stylist-rating"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> </div> <div class="stylist-contact"> <button class="contact-btn" title="Call"><i class="fas fa-phone"></i></button> <button class="contact-btn" title="Email"><i class="fas fa-envelope"></i></button> <button class="contact-btn" title="Instagram"><i class="fab fa-instagram"></i></button> </div> </div> </div> </div> </div> </section> <!-- Gallery Section --> <section class="gallery" id="gallery"> <div class="container"> <div class="section-header"> <div class="section-subtitle">Our Work</div> <h2 class="section-title">Style Gallery</h2> <p class="section-description">Explore our portfolio of stunning transformations and creative styling work that showcases our expertise and artistry.</p> </div> <div class="gallery-grid"> <div class="gallery-item"> <i class="fas fa-cut gallery-icon"></i> <div class="gallery-overlay"> <h4 class="gallery-title">Precision Cuts</h4> <p class="gallery-description">Modern and classic cutting techniques</p> </div> </div> <div class="gallery-item"> <i class="fas fa-palette gallery-icon"></i> <div class="gallery-overlay"> <h4 class="gallery-title">Color Transformations</h4> <p class="gallery-description">Stunning color changes and highlights</p> </div> </div> <div class="gallery-item"> <i class="fas fa-crown gallery-icon"></i> <div class="gallery-overlay"> <h4 class="gallery-title">Bridal Styles</h4> <p class="gallery-description">Elegant wedding and event looks</p> </div> </div> <div class="gallery-item"> <i class="fas fa-fire gallery-icon"></i> <div class="gallery-overlay"> <h4 class="gallery-title">Blowout Styles</h4> <p class="gallery-description">Professional styling and blowouts</p> </div> </div> <div class="gallery-item"> <i class="fas fa-male gallery-icon"></i> <div class="gallery-overlay"> <h4 class="gallery-title">Men's Grooming</h4> <p class="gallery-description">Sharp cuts and beard styling</p> </div> </div> <div class="gallery-item"> <i class="fas fa-magic gallery-icon"></i> <div class="gallery-overlay"> <h4 class="gallery-title">Hair Treatments</h4> <p class="gallery-description">Healthy hair transformations</p> </div> </div> </div> </div> </section> <!-- Testimonials Section --> <section class="testimonials" id="testimonials"> <div class="container"> <div class="section-header"> <div class="section-subtitle">Client Reviews</div> <h2 class="section-title">What Our Clients Say</h2> <p class="section-description">Read authentic reviews from our satisfied clients who love their new looks and our exceptional service.</p> </div> </div> <div class="testimonials-slider"> <div class="testimonials-slides" id="testimonials-slides"> <div class="testimonial-slide"> <div class="testimonial-quote"> Alexandra is absolutely amazing! She transformed my hair completely and I couldn't be happier. The color is perfect and the cut is exactly what I wanted. The salon has such a great atmosphere and everyone is so professional. </div> <div class="testimonial-author"> <div class="author-avatar">JD</div> <div class="author-info"> <h4>Jessica Davis</h4> <p>Regular Client</p> <div class="rating"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> </div> </div> </div> </div> <div class="testimonial-slide"> <div class="testimonial-quote"> Marcus did an incredible job with my color correction. I came in with a hair disaster and left feeling like a new person. His expertise with color is unmatched and he really knows how to work with different hair types. </div> <div class="testimonial-author"> <div class="author-avatar">LW</div> <div class="author-info"> <h4>Lisa Wilson</h4> <p>Color Client</p> <div class="rating"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> </div> </div> </div> </div> <div class="testimonial-slide"> <div class="testimonial-quote"> Sofia made my wedding day absolutely perfect! The trial was great and on the wedding day everything went smoothly. My hair looked stunning all day and night. I highly recommend her for any special event. </div> <div class="testimonial-author"> <div class="author-avatar">MR</div> <div class="author-info"> <h4>Maria Rodriguez</h4> <p>Bridal Client</p> <div class="rating"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> </div> </div> </div> </div> <div class="testimonial-slide"> <div class="testimonial-quote"> David gives the best men's cuts in the city! He really listens to what you want and always delivers. The hot towel treatment is amazing and the whole experience is top-notch. I won't go anywhere else. </div> <div class="testimonial-author"> <div class="author-avatar">TJ</div> <div class="author-info"> <h4>Thomas Johnson</h4> <p>Men's Grooming Client</p> <div class="rating"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> </div> </div> </div> </div> </div> <div class="slider-controls"> <button class="slider-btn" onclick="previousTestimonial()"><i class="fas fa-chevron-left"></i></button> <button class="slider-btn" onclick="nextTestimonial()"><i class="fas fa-chevron-right"></i></button> </div> <div class="slider-dots" id="testimonial-dots"> <span class="dot active" onclick="currentTestimonial(0)"></span> <span class="dot" onclick="currentTestimonial(1)"></span> <span class="dot" onclick="currentTestimonial(2)"></span> <span class="dot" onclick="currentTestimonial(3)"></span> </div> </div> </section> <!-- Booking Section --> <section class="booking" id="booking"> <div class="container"> <div class="section-header"> <div class="section-subtitle">Book Appointment</div> <h2 class="section-title">Schedule Your Visit</h2> <p class="section-description">Ready for a new look? Book your appointment with one of our expert stylists and experience the StyleCraft difference.</p> </div> <div class="booking-container"> <form class="booking-form" id="booking-form"> <div class="form-row"> <div class="form-group"> <label for="firstName">First Name</label> <input type="text" id="firstName" name="firstName" required> </div> <div class="form-group"> <label for="lastName">Last Name</label> <input type="text" id="lastName" name="lastName" required> </div> </div> <div class="form-row"> <div class="form-group"> <label for="email">Email Address</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> <div class="form-row"> <div class="form-group"> <label for="service">Select Service</label> <select id="service" name="service" required> <option value="">Choose a service</option> <option value="hair-cutting">Hair Cutting & Styling</option> <option value="hair-coloring">Hair Coloring & Highlights</option> <option value="hair-treatment">Hair Treatments & Care</option> <option value="blowout">Blowouts & Styling</option> <option value="bridal">Bridal & Special Events</option> <option value="mens-grooming">Men's Grooming</option> <option value="consultation">Consultation</option> </select> </div> <div class="form-group"> <label for="stylist">Preferred Stylist</label> <select id="stylist" name="stylist"> <option value="">No preference</option> <option value="alexandra">Alexandra Stone</option> <option value="marcus">Marcus Rivera</option> <option value="emma">Emma Thompson</option> <option value="david">David Chen</option> <option value="sofia">Sofia Martinez</option> <option value="rachel">Rachel Kim</option> </select> </div> </div> <div class="form-row"> <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> <select id="time" name="time" required> <option value="">Select time</option> <option value="09:00">9:00 AM</option> <option value="10:00">10:00 AM</option> <option value="11:00">11:00 AM</option> <option value="12:00">12:00 PM</option> <option value="13:00">1:00 PM</option> <option value="14:00">2:00 PM</option> <option value="15:00">3:00 PM</option> <option value="16:00">4:00 PM</option> <option value="17:00">5:00 PM</option> <option value="18:00">6:00 PM</option> </select> </div> </div> <div class="form-group"> <label for="notes">Special Requests or Notes</label> <textarea id="notes" name="notes" placeholder="Tell us about your hair goals, any allergies, or special requests..."></textarea> </div> <button type="submit" class="submit-btn">Book My Appointment</button> </form> </div> </div> </section> <!-- Contact Section --> <section class="contact" id="contact"> <div class="container"> <div class="section-header"> <div class="section-subtitle">Get In Touch</div> <h2 class="section-title">Visit Our Salon</h2> <p class="section-description">Have questions about our services or want to learn more? We'd love to hear from you!</p> </div> <div class="contact-content"> <div class="contact-info"> <div class="contact-item"> <div class="contact-icon"> <i class="fas fa-map-marker-alt"></i> </div> <div class="contact-details"> <h4>Visit Our Salon</h4> <p>456 Style Avenue<br>Fashion District, NY 10002<br>United States</p> </div> </div> <div class="contact-item"> <div class="contact-icon"> <i class="fas fa-phone"></i> </div> <div class="contact-details"> <h4>Call Us</h4> <p>+1 (555) 789-STYLE<br>+1 (555) 789-7895<br>Available 7 Days a Week</p> </div> </div> <div class="contact-item"> <div class="contact-icon"> <i class="fas fa-envelope"></i> </div> <div class="contact-details"> <h4>Email Us</h4> <p>hello@stylecraftsalon.com<br>bookings@stylecraftsalon.com<br>info@stylecraftsalon.com</p> </div> </div> <div class="contact-item"> <div class="contact-icon"> <i class="fas fa-clock"></i> </div> <div class="contact-details"> <h4>Opening Hours</h4> <p>Monday - Friday: 9:00 AM - 8:00 PM<br>Saturday: 8:00 AM - 7:00 PM<br>Sunday: 10:00 AM - 6:00 PM</p> </div> </div> </div> <div class="contact-form"> <h3 style="margin-bottom: 2rem; color: var(--text-dark);">Send Us a Message</h3> <form id="contact-form"> <div class="form-row"> <div class="form-group"> <label for="contactName">Your Name</label> <input type="text" id="contactName" name="contactName" required> </div> <div class="form-group"> <label for="contactEmail">Email Address</label> <input type="email" id="contactEmail" name="contactEmail" required> </div> </div> <div class="form-group"> <label for="subject">Subject</label> <input type="text" id="subject" name="subject" required> </div> <div class="form-group"> <label for="message">Message</label> <textarea id="message" name="message" rows="5" placeholder="Tell us how we can help you..." required></textarea> </div> <button type="submit" class="submit-btn">Send Message</button> </form> </div> </div> </div> </section> <!-- Footer --> <footer class="footer"> <div class="container"> <div class="footer-content"> <div class="footer-section"> <h4>StyleCraft Salon</h4> <p>Your premier destination for professional hair styling and beauty services. We combine artistic vision with technical expertise to create stunning looks that reflect your unique style.</p> <div class="social-links"> <a href="#" class="social-link"><i class="fab fa-facebook-f"></i></a> <a href="#" class="social-link"><i class="fab fa-instagram"></i></a> <a href="#" class="social-link"><i class="fab fa-twitter"></i></a> </div> </div> <div class="footer-section"> <h4>Our Services</h4> <ul> <li><a href="#services">Hair Cutting & Styling</a></li> <li><a href="#services">Hair Coloring & Highlights</a></li> <li><a href="#services">Hair Treatments & Care</a></li> <li><a href="#services">Blowouts & Styling</a></li> <li><a href="#services">Men's Grooming</a></li> <li><a href="#booking">Consultations</a></li> </ul> </div> <div class="footer-section"> <h4>Quick Links</h4> <ul> <li><a href="#booking">Book Appointment</a></li> <li><a href="#stylists">Our Stylists</a></li> <li><a href="#gallery">Gallery</a></li> <li><a href="#testimonials">Client Reviews</a></li> <li><a href="#contact">Contact Us</a></li> <li><a href="#">Style Trends</a></li> </ul> </div> <div class="footer-section"> <h4>Contact Info</h4> <ul> <li><a href="#">Fashion District, NY 10002</a></li> <li><a href="tel:+15557897895">+1 (555) 789-STYLE</a></li> <li><a href="#">Mon-Fri: 9AM-8PM</a></li> <li><a href="#">Sat: 8AM-7PM</a></li> <li><a href="#">Sun: 10AM-6PM</a></li> </ul> </div> </div> <div class="footer-bottom"> <p>© 2024 StyleCraft Salon. All rights reserved. | Privacy Policy | Terms of Service | Cancellation Policy</p> </div> </div> </footer> </body> </html>
CSS
:root { --primary-gold: #D4AF37; --secondary-gold: #F4E4BC; --dark-gold: #B8941F; --charcoal: #2C2C2C; --light-charcoal: #404040; --cream: #FAF8F5; --white: #FFFFFF; --light-gray: #F8F9FA; --text-dark: #1A1A1A; --text-light: #6C757D; --accent-rose: #E8B4B8; --success: #28A745; --gradient-gold: linear-gradient(135deg, #D4AF37 0%, #F4E4BC 100%); --gradient-dark: linear-gradient(135deg, #2C2C2C 0%, #404040 100%); --shadow-light: 0 4px 15px rgba(212, 175, 55, 0.1); --shadow-medium: 0 8px 25px rgba(212, 175, 55, 0.15); --shadow-heavy: 0 15px 45px rgba(212, 175, 55, 0.2); } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Inter', sans-serif; line-height: 1.6; color: var(--text-dark); overflow-x: hidden; } /* Custom Scrollbar */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: var(--light-gray); } ::-webkit-scrollbar-thumb { background: var(--gradient-gold); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--dark-gold); } /* Navigation */ .navbar { position: fixed; top: 0; width: 100%; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(20px); z-index: 1000; padding: 1rem 0; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); border-bottom: 1px solid rgba(212, 175, 55, 0.1); } .navbar.scrolled { background: rgba(255, 255, 255, 0.98); box-shadow: var(--shadow-medium); padding: 0.5rem 0; } .nav-container { max-width: 1400px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 0 2rem; } .logo { font-family: 'Playfair Display', serif; font-size: 2.2rem; font-weight: 700; background: var(--gradient-gold); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-decoration: none; display: flex; align-items: center; gap: 0.5rem; } .logo i { font-size: 2.5rem; background: var(--gradient-gold); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .nav-menu { display: flex; list-style: none; gap: 2.5rem; align-items: center; } .nav-link { text-decoration: none; color: var(--text-dark); font-weight: 500; font-size: 1rem; transition: all 0.3s ease; position: relative; padding: 0.5rem 0; } .nav-link:hover { color: var(--primary-gold); transform: translateY(-2px); } .nav-link::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: var(--gradient-gold); transition: width 0.3s ease; } .nav-link:hover::after { width: 100%; } .nav-cta { background: var(--gradient-gold); color: var(--charcoal); padding: 0.8rem 1.5rem; border-radius: 50px; text-decoration: none; font-weight: 700; transition: all 0.3s ease; box-shadow: var(--shadow-light); } .nav-cta:hover { transform: translateY(-3px); box-shadow: var(--shadow-medium); background: var(--dark-gold); color: var(--white); } .hamburger { display: none; flex-direction: column; cursor: pointer; padding: 0.5rem; } .hamburger span { width: 25px; height: 3px; background: var(--text-dark); margin: 3px 0; transition: 0.3s; border-radius: 2px; } /* Hero Section */ .hero { height: 100vh; background: linear-gradient(135deg, rgba(44, 44, 44, 0.9) 0%, rgba(64, 64, 64, 0.8) 100%), url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 800"><defs><pattern id="salon-pattern" patternUnits="userSpaceOnUse" width="150" height="150"><rect width="150" height="150" fill="%23FAF8F5"/><circle cx="75" cy="75" r="30" fill="%23D4AF37" opacity="0.1"/><path d="M0,75 Q37.5,37.5 75,75 T150,75" stroke="%23D4AF37" stroke-width="2" fill="none" opacity="0.2"/><circle cx="25" cy="25" r="8" fill="%23E8B4B8" opacity="0.3"/><circle cx="125" cy="125" r="12" fill="%23F4E4BC" opacity="0.4"/></pattern></defs><rect width="1200" height="800" fill="url(%23salon-pattern)"/></svg>'); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; text-align: center; position: relative; overflow: hidden; } .hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at center, transparent 0%, rgba(0, 0, 0, 0.2) 100%); } .hero-content { max-width: 900px; padding: 0 2rem; animation: heroFadeIn 1.5s cubic-bezier(0.4, 0, 0.2, 1); position: relative; z-index: 2; } .hero-subtitle { font-size: 1.2rem; font-weight: 600; color: var(--primary-gold); margin-bottom: 1rem; letter-spacing: 3px; text-transform: uppercase; } .hero h1 { font-family: 'Playfair Display', serif; font-size: 3.5rem; font-weight: 800; margin-bottom: 1.5rem; color: var(--white); line-height: 1.1; text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); } .hero-description { font-size: 1.1rem; margin-bottom: 2rem; color: var(--white); opacity: 0.95; line-height: 1.6; max-width: 600px; margin-left: auto; margin-right: auto; } .hero-buttons { display: flex; gap: 1.5rem; justify-content: center; flex-wrap: wrap; } .btn-primary { background: var(--gradient-gold); color: var(--charcoal); padding: 1.2rem 2.5rem; text-decoration: none; border-radius: 50px; font-weight: 700; font-size: 1.1rem; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: var(--shadow-medium); border: 2px solid transparent; } .btn-primary:hover { transform: translateY(-5px); box-shadow: var(--shadow-heavy); background: var(--white); color: var(--primary-gold); border-color: var(--primary-gold); } .btn-secondary { background: transparent; color: var(--white); padding: 1.2rem 2.5rem; text-decoration: none; border-radius: 50px; font-weight: 600; font-size: 1.1rem; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); border: 2px solid var(--white); } .btn-secondary:hover { transform: translateY(-5px); background: var(--white); color: var(--charcoal); box-shadow: var(--shadow-medium); } .floating-elements { position: absolute; width: 100%; height: 100%; overflow: hidden; pointer-events: none; } .floating-element { position: absolute; background: rgba(212, 175, 55, 0.1); border-radius: 50%; animation: float 10s ease-in-out infinite; } .floating-element:nth-child(1) { width: 120px; height: 120px; top: 20%; left: 15%; animation-delay: 0s; } .floating-element:nth-child(2) { width: 80px; height: 80px; top: 60%; right: 20%; animation-delay: 4s; } .floating-element:nth-child(3) { width: 100px; height: 100px; bottom: 30%; left: 30%; animation-delay: 8s; } /* Services Section */ .services { padding: 6rem 0; background: var(--cream); } .container { max-width: 1400px; margin: 0 auto; padding: 0 2rem; } .section-header { text-align: center; margin-bottom: 4rem; } .section-subtitle { font-size: 1.1rem; font-weight: 600; color: var(--primary-gold); margin-bottom: 1rem; letter-spacing: 2px; text-transform: uppercase; } .section-title { font-family: 'Playfair Display', serif; font-size: 3rem; font-weight: 800; margin-bottom: 1.5rem; color: var(--text-dark); line-height: 1.2; } .section-description { font-size: 1.2rem; color: var(--text-light); max-width: 600px; margin: 0 auto; line-height: 1.6; } .services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 2rem; margin-top: 3rem; } .service-card { background: var(--white); border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-light); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); position: relative; cursor: pointer; } .service-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-heavy); } .service-image { height: 280px; background: var(--gradient-gold); position: relative; overflow: hidden; } .service-image::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(45deg, rgba(212, 175, 55, 0.8) 0%, rgba(244, 228, 188, 0.6) 100%); z-index: 1; } .service-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 4rem; color: var(--white); z-index: 2; } .service-price { position: absolute; top: 1rem; right: 1rem; background: rgba(255, 255, 255, 0.95); color: var(--primary-gold); padding: 0.8rem 1.2rem; border-radius: 25px; font-weight: 800; font-size: 1.1rem; z-index: 3; box-shadow: var(--shadow-light); } .service-content { padding: 2rem; } .service-title { font-family: 'Playfair Display', serif; font-size: 1.5rem; font-weight: 700; margin-bottom: 1rem; color: var(--text-dark); } .service-description { color: var(--text-light); line-height: 1.6; margin-bottom: 1.5rem; } .service-features { list-style: none; margin-bottom: 1.5rem; } .service-features li { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; color: var(--text-light); font-size: 0.9rem; } .service-features li i { color: var(--primary-gold); width: 16px; } .service-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 1rem; border-top: 1px solid #E9ECEF; } .service-duration { color: var(--text-light); font-size: 0.9rem; display: flex; align-items: center; gap: 0.5rem; } .book-btn { background: var(--gradient-gold); color: var(--charcoal); padding: 0.8rem 1.5rem; border: none; border-radius: 25px; font-weight: 700; cursor: pointer; transition: all 0.3s ease; } .book-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-light); background: var(--dark-gold); color: var(--white); } /* Stylists Section */ .stylists { padding: 6rem 0; background: var(--white); } .stylists-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 2rem; margin-top: 3rem; } .stylist-card { background: var(--cream); border-radius: 20px; overflow: hidden; text-align: center; transition: all 0.4s ease; position: relative; } .stylist-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-heavy); } .stylist-image { height: 300px; background: var(--gradient-gold); display: flex; align-items: center; justify-content: center; color: var(--white); font-size: 4rem; position: relative; } .stylist-badge { position: absolute; top: 1rem; left: 1rem; background: var(--charcoal); color: var(--primary-gold); padding: 0.5rem 1rem; border-radius: 20px; font-size: 0.8rem; font-weight: 600; } .stylist-content { padding: 2rem; } .stylist-name { font-family: 'Playfair Display', serif; font-size: 1.4rem; font-weight: 700; margin-bottom: 0.5rem; color: var(--text-dark); } .stylist-title { color: var(--primary-gold); font-weight: 600; margin-bottom: 1rem; } .stylist-specialties { list-style: none; margin-bottom: 1.5rem; } .stylist-specialties li { color: var(--text-light); font-size: 0.9rem; margin-bottom: 0.3rem; } .stylist-rating { display: flex; justify-content: center; gap: 0.2rem; margin-bottom: 1.5rem; } .stylist-rating i { color: var(--primary-gold); font-size: 1.1rem; } .stylist-contact { display: flex; justify-content: center; gap: 1rem; } .contact-btn { width: 40px; height: 40px; background: var(--gradient-gold); border: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--charcoal); cursor: pointer; transition: all 0.3s ease; } .contact-btn:hover { transform: scale(1.1); box-shadow: var(--shadow-light); background: var(--charcoal); color: var(--primary-gold); } /* Gallery Section */ .gallery { padding: 6rem 0; background: var(--light-gray); } .gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; margin-top: 3rem; } .gallery-item { aspect-ratio: 1; background: var(--gradient-gold); border-radius: 15px; overflow: hidden; position: relative; cursor: pointer; transition: all 0.4s ease; } .gallery-item:hover { transform: scale(1.05); box-shadow: var(--shadow-heavy); } .gallery-item::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(45deg, rgba(212, 175, 55, 0.7) 0%, rgba(244, 228, 188, 0.5) 100%); z-index: 1; opacity: 0; transition: opacity 0.3s ease; } .gallery-item:hover::before { opacity: 1; } .gallery-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 3rem; color: var(--white); z-index: 2; } .gallery-overlay { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(0, 0, 0, 0.8)); color: var(--white); padding: 2rem 1.5rem 1.5rem; transform: translateY(100%); transition: transform 0.3s ease; z-index: 3; } .gallery-item:hover .gallery-overlay { transform: translateY(0); } .gallery-title { font-weight: 600; margin-bottom: 0.5rem; } .gallery-description { font-size: 0.9rem; opacity: 0.9; } /* Testimonials Section */ .testimonials { padding: 6rem 0; background: var(--charcoal); color: var(--white); } .testimonials-slider { position: relative; max-width: 1000px; margin: 3rem auto; overflow: hidden; border-radius: 20px; } .testimonials-slides { display: flex; transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); } .testimonial-slide { min-width: 100%; padding: 4rem; background: var(--light-charcoal); text-align: center; position: relative; } .testimonial-quote { font-size: 1.3rem; line-height: 1.8; color: var(--white); margin-bottom: 2rem; font-style: italic; position: relative; } .testimonial-quote::before { content: '"'; font-size: 4rem; color: var(--primary-gold); position: absolute; top: -1rem; left: -2rem; font-family: serif; } .testimonial-author { display: flex; align-items: center; justify-content: center; gap: 1rem; } .author-avatar { width: 60px; height: 60px; background: var(--gradient-gold); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--charcoal); font-size: 1.5rem; font-weight: 700; } .author-info h4 { font-weight: 600; color: var(--white); margin-bottom: 0.2rem; } .author-info p { color: var(--primary-gold); font-size: 0.9rem; } .rating { display: flex; gap: 0.2rem; margin-top: 0.5rem; justify-content: center; } .rating i { color: var(--primary-gold); font-size: 1.1rem; } .slider-controls { text-align: center; margin-top: 2rem; } .slider-btn { background: var(--gradient-gold); border: none; width: 50px; height: 50px; border-radius: 50%; margin: 0 0.5rem; cursor: pointer; font-size: 1.2rem; color: var(--charcoal); transition: all 0.3s ease; } .slider-btn:hover { transform: scale(1.1); box-shadow: var(--shadow-medium); } .slider-dots { display: flex; justify-content: center; gap: 0.5rem; margin-top: 1rem; } .dot { width: 12px; height: 12px; border-radius: 50%; background: #666; cursor: pointer; transition: all 0.3s ease; } .dot.active { background: var(--primary-gold); transform: scale(1.2); } /* Booking Section */ .booking { padding: 6rem 0; background: var(--cream); } .booking-container { max-width: 800px; margin: 0 auto; background: var(--white); border-radius: 20px; padding: 3rem; box-shadow: var(--shadow-medium); } .booking-form { display: grid; gap: 1.5rem; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .form-group { display: flex; flex-direction: column; } .form-group label { margin-bottom: 0.5rem; font-weight: 600; color: var(--text-dark); } .form-group input, .form-group select, .form-group textarea { padding: 1rem; border: 2px solid #E9ECEF; border-radius: 12px; font-family: 'Inter', sans-serif; font-size: 1rem; transition: all 0.3s ease; background: var(--white); } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--primary-gold); box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1); } .form-group textarea { resize: vertical; min-height: 100px; } .submit-btn { background: var(--gradient-gold); color: var(--charcoal); padding: 1.2rem 2.5rem; border: none; border-radius: 50px; font-weight: 700; font-size: 1.1rem; cursor: pointer; transition: all 0.3s ease; margin-top: 1rem; } .submit-btn:hover { transform: translateY(-3px); box-shadow: var(--shadow-medium); background: var(--dark-gold); color: var(--white); } /* Contact Section */ .contact { padding: 6rem 0; background: var(--white); } .contact-content { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; margin-top: 3rem; } .contact-info { padding: 2rem; } .contact-item { display: flex; align-items: flex-start; margin-bottom: 2.5rem; padding: 1.5rem; background: var(--cream); border-radius: 15px; transition: all 0.3s ease; } .contact-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-light); } .contact-icon { width: 60px; height: 60px; background: var(--gradient-gold); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 1.5rem; color: var(--charcoal); font-size: 1.3rem; flex-shrink: 0; } .contact-details h4 { font-weight: 600; margin-bottom: 0.5rem; color: var(--text-dark); } .contact-details p { color: var(--text-light); line-height: 1.6; } .contact-form { background: var(--cream); padding: 3rem; border-radius: 20px; box-shadow: var(--shadow-light); } /* Footer */ .footer { background: var(--charcoal); color: var(--white); padding: 4rem 0 2rem; } .footer-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 3rem; margin-bottom: 3rem; } .footer-section h4 { margin-bottom: 1.5rem; color: var(--primary-gold); font-size: 1.3rem; font-weight: 700; } .footer-section p, .footer-section a { color: #BDC3C7; text-decoration: none; line-height: 1.8; transition: all 0.3s ease; } .footer-section a:hover { color: var(--primary-gold); transform: translateX(5px); } .footer-section ul { list-style: none; } .footer-section ul li { margin-bottom: 0.8rem; } .social-links { display: flex; gap: 1rem; margin-top: 1.5rem; } .social-link { width: 45px; height: 45px; background: var(--gradient-gold); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--charcoal); text-decoration: none; transition: all 0.3s ease; font-size: 1.1rem; } .social-link:hover { background: var(--white); color: var(--primary-gold); transform: translateY(-5px); box-shadow: var(--shadow-medium); } .footer-bottom { text-align: center; padding-top: 2rem; border-top: 1px solid #404040; color: #BDC3C7; } /* Animations */ @keyframes heroFadeIn { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: translateY(0); } } @keyframes float { 0%, 100% { transform: translateY(0px) rotate(0deg); } 33% { transform: translateY(-30px) rotate(5deg); } 66% { transform: translateY(-15px) rotate(-5deg); } } /* Responsive Design */ @media (max-width: 1024px) { .hero h1 { font-size: 3.5rem; } .section-title { font-size: 2.5rem; } .contact-content { grid-template-columns: 1fr; gap: 2rem; } .services-grid { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } } @media (max-width: 768px) { .hamburger { display: flex; } .nav-menu { position: fixed; left: -100%; top: 80px; flex-direction: column; background: rgba(255, 255, 255, 0.98); backdrop-filter: blur(20px); width: 100%; text-align: center; transition: 0.4s; box-shadow: var(--shadow-medium); padding: 2rem 0; gap: 1rem; } .nav-menu.active { left: 0; } .hero h1 { font-size: 2.8rem; } .hero-buttons { flex-direction: column; align-items: center; } .services-grid, .gallery-grid, .stylists-grid { grid-template-columns: 1fr; } .form-row { grid-template-columns: 1fr; } .footer-content { grid-template-columns: 1fr; text-align: center; } } @media (max-width: 480px) { .hero h1 { font-size: 2.2rem; } .section-title { font-size: 2rem; } .nav-container, .container { padding: 0 1rem; } .hero-content { padding: 0 1rem; } .btn-primary, .btn-secondary { padding: 1rem 2rem; font-size: 1rem; } .booking-container { padding: 2rem 1.5rem; margin: 0 1rem; } }
JavaScript
// Mobile Navigation const hamburger = document.getElementById('hamburger'); const navMenu = document.getElementById('nav-menu'); hamburger.addEventListener('click', () => { navMenu.classList.toggle('active'); hamburger.classList.toggle('active'); }); // Close mobile menu when clicking on a link document.querySelectorAll('.nav-link, .nav-cta').forEach(link => { link.addEventListener('click', () => { navMenu.classList.remove('active'); hamburger.classList.remove('active'); }); }); // Navbar scroll effect window.addEventListener('scroll', () => { const navbar = document.getElementById('navbar'); if (window.scrollY > 100) { navbar.classList.add('scrolled'); } else { navbar.classList.remove('scrolled'); } }); // Smooth scrolling for navigation links document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function (e) { e.preventDefault(); const target = document.querySelector(this.getAttribute('href')); if (target) { target.scrollIntoView({ behavior: 'smooth', block: 'start' }); } }); }); // Service booking functionality function bookService(serviceName) { // Scroll to booking section document.getElementById('booking').scrollIntoView({ behavior: 'smooth', block: 'start' }); // Pre-select the service in the booking form setTimeout(() => { const serviceSelect = document.getElementById('service'); const serviceMap = { 'Hair Cutting': 'hair-cutting', 'Hair Coloring': 'hair-coloring', 'Hair Treatment': 'hair-treatment', 'Blowout': 'blowout', 'Bridal': 'bridal', 'Mens Grooming': 'mens-grooming' }; if (serviceMap[serviceName]) { serviceSelect.value = serviceMap[serviceName]; serviceSelect.focus(); } }, 1000); } // Testimonials Slider let currentTestimonialIndex = 0; const testimonialSlides = document.querySelectorAll('.testimonial-slide'); const totalTestimonials = testimonialSlides.length; const dots = document.querySelectorAll('.dot'); function showTestimonial(index) { const slidesContainer = document.getElementById('testimonials-slides'); slidesContainer.style.transform = `translateX(-${index * 100}%)`; // Update dots dots.forEach((dot, i) => { dot.classList.toggle('active', i === index); }); } function nextTestimonial() { currentTestimonialIndex = (currentTestimonialIndex + 1) % totalTestimonials; showTestimonial(currentTestimonialIndex); } function previousTestimonial() { currentTestimonialIndex = (currentTestimonialIndex - 1 + totalTestimonials) % totalTestimonials; showTestimonial(currentTestimonialIndex); } function currentTestimonial(index) { currentTestimonialIndex = index; showTestimonial(currentTestimonialIndex); } // Auto-advance testimonials setInterval(nextTestimonial, 6000); // Stylist contact document.querySelectorAll('.contact-btn').forEach(btn => { btn.addEventListener('click', function (e) { e.stopPropagation(); const stylistName = this.closest('.stylist-card').querySelector('.stylist-name').textContent; const action = this.title; if (action === 'Call') { alert(`Calling ${stylistName}. In a real application, this would initiate a phone call to book directly with this stylist.`); } else if (action === 'Email') { alert(`Opening email to ${stylistName}. You can send them a direct message about your hair goals and preferences.`); } else if (action === 'Instagram') { alert(`Opening ${stylistName}'s Instagram profile to see their latest work and hair styling inspiration.`); } }); }); // Booking Form document.getElementById('booking-form').addEventListener('submit', function (e) { e.preventDefault(); // Get form data const formData = new FormData(this); const firstName = formData.get('firstName'); const lastName = formData.get('lastName'); const email = formData.get('email'); const phone = formData.get('phone'); const service = formData.get('service'); const date = formData.get('date'); const time = formData.get('time'); // Simple validation if (!firstName || !lastName || !email || !phone || !service || !date || !time) { alert('Please fill in all required fields to complete your booking.'); return; } // Validate date is not in the past const selectedDate = new Date(date); const today = new Date(); today.setHours(0, 0, 0, 0); if (selectedDate < today) { alert('Please select a future date for your appointment.'); return; } // Simulate form submission const submitBtn = this.querySelector('.submit-btn'); const originalText = submitBtn.textContent; submitBtn.textContent = 'Booking...'; submitBtn.disabled = true; setTimeout(() => { alert(`Thank you ${firstName}! Your ${service.replace('-', ' ')} appointment has been booked for ${date} at ${time}. We'll send you a confirmation email shortly and call you to confirm the details.`); this.reset(); submitBtn.textContent = originalText; submitBtn.disabled = false; }, 2000); }); // Contact Form document.getElementById('contact-form').addEventListener('submit', function (e) { e.preventDefault(); // Get form data const formData = new FormData(this); const name = formData.get('contactName'); const email = formData.get('contactEmail'); const subject = formData.get('subject'); const message = formData.get('message'); // Simple validation if (!name || !email || !subject || !message) { alert('Please fill in all fields.'); return; } // Simulate form submission const submitBtn = this.querySelector('.submit-btn'); const originalText = submitBtn.textContent; submitBtn.textContent = 'Sending...'; submitBtn.disabled = true; setTimeout(() => { alert(`Thank you ${name}! Your message has been received. We'll get back to you within 24 hours.`); this.reset(); submitBtn.textContent = originalText; submitBtn.disabled = false; }, 2000); }); // Gallery item interactions document.querySelectorAll('.gallery-item').forEach(item => { item.addEventListener('click', function () { const title = this.querySelector('.gallery-title').textContent; alert(`Opening ${title} gallery. Here you would see a full portfolio of our work in this category with before/after photos and detailed views.`); }); }); // Service card interactions document.querySelectorAll('.service-card').forEach(card => { card.addEventListener('click', function (e) { if (!e.target.classList.contains('book-btn')) { const serviceTitle = this.querySelector('.service-title').textContent; alert(`Learning more about ${serviceTitle}. Here you would see detailed information, pricing options, and available add-ons for this service.`); } }); }); // Set minimum date for booking to today document.addEventListener('DOMContentLoaded', function () { const dateInput = document.getElementById('date'); const today = new Date().toISOString().split('T')[0]; dateInput.setAttribute('min', today); }); // Intersection Observer for animations const observerOptions = { threshold: 0.1, rootMargin: '0px 0px -50px 0px' }; const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.style.opacity = '1'; entry.target.style.transform = 'translateY(0)'; } }); }, observerOptions); // Observe elements for animation document.querySelectorAll('.service-card, .gallery-item, .stylist-card, .contact-item').forEach(el => { el.style.opacity = '0'; el.style.transform = 'translateY(30px)'; el.style.transition = 'opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1)'; observer.observe(el); }); // Add loading states to interactive elements document.querySelectorAll('button, .btn-primary, .btn-secondary').forEach(btn => { btn.addEventListener('click', function () { if (!this.disabled) { this.style.transform = 'scale(0.98)'; setTimeout(() => { this.style.transform = ''; }, 150); } }); }); // Dynamic service pricing based on selection document.getElementById('service')?.addEventListener('change', function () { const priceMap = { 'hair-cutting': 'From $65', 'hair-coloring': 'From $95', 'hair-treatment': 'From $85', 'blowout': 'From $45', 'bridal': 'From $150', 'mens-grooming': 'From $35', 'consultation': 'Free' }; // This would update pricing display in a real application console.log(`Selected service pricing: ${priceMap[this.value] || 'Contact for pricing'}`); });
Output Preview
Desktop
Mobile
Fullscreen