Saloon About Page Template
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>Luxury Salon - About Us</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> </head> <body> <!-- Header --> <header id="header"> <div class="container header-container"> <a href="#" class="logo"><i class="fas fa-cut"></i>Luxury Salon</a> <nav> <ul class="nav-links" id="navLinks"> <li><a href="#">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="#gallery">Gallery</a></li> <li><a href="#contact">Contact</a></li> </ul> <div class="hamburger" id="hamburger"> <i class="fas fa-bars"></i> </div> </nav> </div> </header> <!-- Hero Section --> <section class="hero" id="home"> <div class="container"> <div class="hero-content"> <h1>Experience Luxury Beauty Services</h1> <p>Our salon offers premium beauty treatments in a relaxing environment. Let our experts bring out your natural beauty.</p> <div class="hero-btns"> <a href="#services" class="btn">Our Services</a> <a href="#contact" class="btn btn-outline">Book Now</a> </div> </div> </div> </section> <!-- About Section --> <section class="section about" id="about"> <div class="container"> <div class="section-title"> <h2>About Our Salon</h2> <p>Discover our story and what makes us different from other beauty salons in the area.</p> </div> <div class="about-content"> <div class="about-img"> <img src="https://images.unsplash.com/photo-1522337360788-8b13dee7a37e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Salon interior"> </div> <div class="about-text"> <h3>15 Years of Beauty Excellence</h3> <p>Founded in 2008, Luxury Salon has been providing top-quality beauty services to our valued clients. Our mission is to enhance your natural beauty while providing a relaxing and luxurious experience.</p> <p>We use only premium products and our stylists undergo continuous training to stay updated with the latest trends and techniques in the beauty industry.</p> <div class="about-features"> <div class="feature-item"> <div class="feature-icon"> <i class="fas fa-award"></i> </div> <div> <h4>Certified Experts</h4> <p>All our stylists are certified professionals with years of experience.</p> </div> </div> <div class="feature-item"> <div class="feature-icon"> <i class="fas fa-spa"></i> </div> <div> <h4>Premium Products</h4> <p>We use only high-quality, professional-grade products.</p> </div> </div> <div class="feature-item"> <div class="feature-icon"> <i class="fas fa-heart"></i> </div> <div> <h4>Personalized Care</h4> <p>Each service is tailored to your unique needs and preferences.</p> </div> </div> <div class="feature-item"> <div class="feature-icon"> <i class="fas fa-thumbs-up"></i> </div> <div> <h4>Satisfaction Guarantee</h4> <p>We stand behind our work and ensure you leave happy.</p> </div> </div> </div> </div> </div> </div> </section> <!-- Services Section --> <section class="section services" id="services"> <div class="container"> <div class="section-title"> <h2>Our Services</h2> <p>We offer a wide range of beauty services to help you look and feel your best.</p> </div> <div class="services-grid"> <div class="service-card"> <div class="service-img"> <img src="https://images.unsplash.com/photo-1605497788044-5a32c7078486?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Haircut service"> </div> <div class="service-info"> <h3>Haircut & Styling</h3> <p>Professional haircut tailored to your face shape and personal style, followed by a blowout.</p> <div class="service-price"> <span class="price">$45+</span> <a href="#contact" class="btn">Book Now</a> </div> </div> </div> <div class="service-card"> <div class="service-img"> <img src="https://images.pexels.com/photos/4625622/pexels-photo-4625622.jpeg" alt="Hair coloring service"> </div> <div class="service-info"> <h3>Hair Coloring</h3> <p>Custom hair coloring services including highlights, balayage, ombre, and full color.</p> <div class="service-price"> <span class="price">$75+</span> <a href="#contact" class="btn">Book Now</a> </div> </div> </div> <div class="service-card"> <div class="service-img"> <img src="https://images.unsplash.com/photo-1595476108010-b4d1f102b1b1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1632&q=80" alt="Facial service"> </div> <div class="service-info"> <h3>Facials & Skincare</h3> <p>Rejuvenating facials designed for your skin type to promote healthy, glowing skin.</p> <div class="service-price"> <span class="price">$65+</span> <a href="#contact" class="btn">Book Now</a> </div> </div> </div> <div class="service-card"> <div class="service-img"> <img src="https://images.unsplash.com/photo-1519735777090-ec97162dc266?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1115&q=80" alt="Manicure service"> </div> <div class="service-info"> <h3>Manicure & Pedicure</h3> <p>Luxurious nail care services including shaping, cuticle care, and polish application.</p> <div class="service-price"> <span class="price">$35+</span> <a href="#contact" class="btn">Book Now</a> </div> </div> </div> <div class="service-card"> <div class="service-img"> <img src="https://images.unsplash.com/photo-1600334129128-685c5582fd35?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Makeup service"> </div> <div class="service-info"> <h3>Professional Makeup</h3> <p>Flawless makeup application for special occasions, weddings, or everyday wear.</p> <div class="service-price"> <span class="price">$55+</span> <a href="#contact" class="btn">Book Now</a> </div> </div> </div> <div class="service-card"> <div class="service-img"> <img src="https://images.unsplash.com/photo-1599351431405-41b8b0f41720?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1473&q=80" alt="Waxing service"> </div> <div class="service-info"> <h3>Waxing Services</h3> <p>Professional hair removal services for face and body using high-quality wax.</p> <div class="service-price"> <span class="price">$25+</span> <a href="#contact" class="btn">Book Now</a> </div> </div> </div> </div> </div> </section> <!-- Team Section --> <section class="section team" id="team"> <div class="container"> <div class="section-title"> <h2>Meet Our Team</h2> <p>Our talented professionals are dedicated to making you look and feel your best.</p> </div> <div class="team-grid"> <div class="team-member"> <div class="member-img"> <img src="https://images.unsplash.com/photo-1551836022-d5d88e9218df?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Stylist Sarah"> <div class="social-links"> <a href="#"><i class="fab fa-facebook-f"></i></a> <a href="#"><i class="fab fa-instagram"></i></a> <a href="#"><i class="fab fa-twitter"></i></a> </div> </div> <div class="member-info"> <h3>Sarah Johnson</h3> <p>Master Stylist</p> <p>Specializes in precision cuts and creative coloring.</p> </div> </div> <div class="team-member"> <div class="member-img"> <img src="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=761&q=80" alt="Stylist Michael"> <div class="social-links"> <a href="#"><i class="fab fa-facebook-f"></i></a> <a href="#"><i class="fab fa-instagram"></i></a> <a href="#"><i class="fab fa-twitter"></i></a> </div> </div> <div class="member-info"> <h3>Michael Chen</h3> <p>Color Specialist</p> <p>Expert in balayage, ombre, and corrective color.</p> </div> </div> <div class="team-member"> <div class="member-img"> <img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=688&q=80" alt="Esthetician Emma"> <div class="social-links"> <a href="#"><i class="fab fa-facebook-f"></i></a> <a href="#"><i class="fab fa-instagram"></i></a> <a href="#"><i class="fab fa-twitter"></i></a> </div> </div> <div class="member-info"> <h3>Emma Rodriguez</h3> <p>Lead Esthetician</p> <p>Specializes in advanced skincare treatments.</p> </div> </div> <div class="team-member"> <div class="member-img"> <img src="https://images.unsplash.com/photo-1583864697784-a0efc8379f70?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=688&q=80" alt="Nail Technician Lisa"> <div class="social-links"> <a href="#"><i class="fab fa-facebook-f"></i></a> <a href="#"><i class="fab fa-instagram"></i></a> <a href="#"><i class="fab fa-twitter"></i></a> </div> </div> <div class="member-info"> <h3>Lisa Thompson</h3> <p>Nail Technician</p> <p>Creates beautiful, long-lasting nail designs.</p> </div> </div> </div> </div> </section> <!-- Testimonials Section --> <section class="section testimonials"> <div class="container"> <div class="section-title"> <h2>Client Testimonials</h2> <p>Hear what our clients have to say about their experiences at our salon.</p> </div> <div class="testimonial-slider"> <div class="testimonial active"> <div class="client-img"> <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Client Jessica"> </div> <p>"I've been going to Luxury Salon for years and wouldn't trust anyone else with my hair. Sarah always knows exactly what will look best for my face shape and lifestyle."</p> <div class="client-info"> <h4>Jessica Williams</h4> <span>Regular Client</span> </div> </div> <div class="testimonial"> <div class="client-img"> <img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=688&q=80" alt="Client Amanda"> </div> <p>"The color correction Michael did for me was amazing! He transformed my damaged, over-processed hair into healthy, beautiful blonde locks. Worth every penny!"</p> <div class="client-info"> <h4>Amanda Smith</h4> <span>New Client</span> </div> </div> <div class="testimonial"> <div class="client-img"> <img src="https://images.unsplash.com/photo-1552058544-f2b08422138a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=699&q=80" alt="Client Robert"> </div> <p>"As a man, I was hesitant about going to a 'salon' but the barber here gave me the best haircut I've ever had. The atmosphere is welcoming and professional."</p> <div class="client-info"> <h4>Robert Johnson</h4> <span>Male Client</span> </div> </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> <!-- Gallery Section --> <section class="section gallery" id="gallery"> <div class="container"> <div class="section-title"> <h2>Our Work</h2> <p>Browse through our gallery to see examples of our transformations and styling work.</p> </div> <div class="gallery-grid"> <div class="gallery-item"> <img src="https://images.unsplash.com/photo-1519699047748-de8e457a634e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=880&q=80" alt="Hair transformation"> <div class="gallery-overlay"> <i class="fas fa-search-plus"></i> </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=1469&q=80" alt="Hair styling"> <div class="gallery-overlay"> <i class="fas fa-search-plus"></i> </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=687&q=80" alt="Makeup work"> <div class="gallery-overlay"> <i class="fas fa-search-plus"></i> </div> </div> <div class="gallery-item"> <img src="https://images.pexels.com/photos/4625622/pexels-photo-4625622.jpeg" alt="Hair coloring"> <div class="gallery-overlay"> <i class="fas fa-search-plus"></i> </div> </div> <div class="gallery-item"> <img src="https://images.unsplash.com/photo-1595476108010-b4d1f102b1b1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1632&q=80" alt="Facial treatment"> <div class="gallery-overlay"> <i class="fas fa-search-plus"></i> </div> </div> <div class="gallery-item"> <img src="https://images.unsplash.com/photo-1519735777090-ec97162dc266?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1115&q=80" alt="Nail art"> <div class="gallery-overlay"> <i class="fas fa-search-plus"></i> </div> </div> </div> </div> </section> <!-- Contact Section --> <section class="section contact" id="contact"> <div class="container"> <div class="section-title"> <h2>Contact Us</h2> <p>Book an appointment or ask us any questions. We'd love to hear from you!</p> </div> <div class="contact-container"> <div class="contact-info"> <h3>Get In Touch</h3> <div class="contact-details"> <div class="contact-item"> <div class="contact-icon"> <i class="fas fa-map-marker-alt"></i> </div> <div class="contact-text"> <h4>Location</h4> <p>123 Beauty Street, Suite 100<br>New York, NY 10001</p> </div> </div> <div class="contact-item"> <div class="contact-icon"> <i class="fas fa-phone-alt"></i> </div> <div class="contact-text"> <h4>Phone</h4> <p><a href="tel:+12125551234">(212) 555-1234</a></p> </div> </div> <div class="contact-item"> <div class="contact-icon"> <i class="fas fa-envelope"></i> </div> <div class="contact-text"> <h4>Email</h4> <p><a href="mailto:info@luxurysalon.com">info@luxurysalon.com</a></p> </div> </div> <div class="contact-item"> <div class="contact-icon"> <i class="fas fa-clock"></i> </div> <div class="contact-text"> <h4>Hours</h4> <p>Monday - Friday: 9am - 8pm<br>Saturday: 9am - 6pm<br>Sunday: 10am - 4pm</p> </div> </div> </div> <h3>Follow Us</h3> <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="contact-form"> <form id="appointmentForm"> <div class="form-group"> <label for="name">Your Name</label> <input type="text" id="name" class="form-control" required> </div> <div class="form-group"> <label for="email">Email Address</label> <input type="email" id="email" class="form-control" required> </div> <div class="form-group"> <label for="phone">Phone Number</label> <input type="tel" id="phone" class="form-control" required> </div> <div class="form-group"> <label for="service">Service Interested In</label> <select id="service" class="form-control" required> <option value="">Select a service</option> <option value="haircut">Haircut & Styling</option> <option value="coloring">Hair Coloring</option> <option value="facial">Facials & Skincare</option> <option value="manicure">Manicure & Pedicure</option> <option value="makeup">Professional Makeup</option> <option value="waxing">Waxing Services</option> </select> </div> <div class="form-group"> <label for="date">Preferred Date</label> <input type="date" id="date" class="form-control" required> </div> <div class="form-group"> <label for="message">Additional Notes</label> <textarea id="message" class="form-control"></textarea> </div> <button type="submit" class="btn">Book Appointment</button> </form> </div> </div> </div> </section> <!-- Footer --> <footer> <div class="container"> <div class="footer-container"> <div class="footer-col"> <h3>About Us</h3> <p>Luxury Salon has been providing premium beauty services since 2008. Our mission is to enhance your natural beauty while providing a relaxing and luxurious experience.</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> </div> </div> <div class="footer-col"> <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="#contact">Contact</a></li> </ul> </div> <div class="footer-col"> <h3>Services</h3> <ul class="footer-links"> <li><a href="#">Haircut & Styling</a></li> <li><a href="#">Hair Coloring</a></li> <li><a href="#">Facials & Skincare</a></li> <li><a href="#">Manicure & Pedicure</a></li> <li><a href="#">Professional Makeup</a></li> <li><a href="#">Waxing Services</a></li> </ul> </div> <div class="footer-col"> <h3>Contact Info</h3> <ul class="footer-contact"> <li> <i class="fas fa-map-marker-alt"></i> <span>123 Beauty Street, Suite 100<br>New York, NY 10001</span> </li> <li> <i class="fas fa-phone-alt"></i> <span><a href="tel:+12125551234">(212) 555-1234</a></span> </li> <li> <i class="fas fa-envelope"></i> <span><a href="mailto:info@luxurysalon.com">info@luxurysalon.com</a></span> </li> </ul> </div> </div> <div class="footer-bottom"> <p>© 2023 Luxury Salon. All Rights Reserved. | Designed with ❤️ for beauty enthusiasts</p> </div> </div> </footer> </body> </html>
CSS
:root { --primary-color: #1a73e8; --secondary-color: #0d47a1; --accent-color: #64b5f6; --light-color: #e3f2fd; --dark-color: #0a2e5a; --text-color: #333; --light-text: #f5f5f5; --shadow: 0 5px 15px rgba(0, 0, 0, 0.1); --transition: all 0.3s ease; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Poppins', sans-serif; line-height: 1.6; color: var(--text-color); overflow-x: hidden; } a { text-decoration: none; color: var(--primary-color); } ul { list-style: none; } img { max-width: 100%; height: auto; display: block; } .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; } .btn { display: inline-block; background: var(--primary-color); color: white; padding: 12px 25px; border: none; border-radius: 50px; cursor: pointer; font-size: 16px; font-weight: 500; transition: var(--transition); box-shadow: var(--shadow); } .btn:hover { background: var(--secondary-color); transform: translateY(-3px); } .btn-outline { background: transparent; border: 2px solid var(--primary-color); color: var(--primary-color); } .btn-outline:hover { background: var(--primary-color); color: white; } .section { padding: 80px 0; } .section-title { text-align: center; margin-bottom: 50px; position: relative; } .section-title h2 { font-size: 2.5rem; color: var(--dark-color); margin-bottom: 15px; position: relative; display: inline-block; } .section-title h2::after { content: ''; position: absolute; width: 70px; height: 4px; background: var(--primary-color); bottom: -10px; left: 50%; transform: translateX(-50%); border-radius: 2px; } .section-title p { font-size: 1.1rem; color: #666; max-width: 700px; margin: 0 auto; } /* Header */ header { background-color: white; box-shadow: var(--shadow); position: fixed; width: 100%; top: 0; z-index: 1000; transition: var(--transition); } header.scrolled { background-color: rgba(255, 255, 255, 0.95); box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); } .header-container { display: flex; justify-content: space-between; align-items: center; padding: 20px 0; } .logo { font-size: 1.8rem; font-weight: 700; color: var(--primary-color); display: flex; align-items: center; } .logo i { margin-right: 10px; font-size: 2rem; } .nav-links { display: flex; } .nav-links li { margin-left: 30px; } .nav-links a { color: var(--text-color); font-weight: 500; transition: var(--transition); position: relative; } .nav-links a::after { content: ''; position: absolute; width: 0; height: 2px; background: var(--primary-color); bottom: -5px; left: 0; transition: var(--transition); } .nav-links a:hover::after { width: 100%; } .nav-links a:hover { color: var(--primary-color); } .hamburger { display: none; cursor: pointer; font-size: 1.5rem; color: var(--primary-color); } /* Hero Section */ .hero { height: 100vh; background: linear-gradient(rgba(10, 46, 90, 0.7), rgba(10, 46, 90, 0.7)), url('https://images.unsplash.com/photo-1595476108010-b4d1f102b1b1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1632&q=80'); background-size: cover; background-position: center; display: flex; align-items: center; text-align: center; color: white; padding-top: 80px; } .hero-content { max-width: 800px; margin: 0 auto; animation: fadeInUp 1s ease; } .hero h1 { font-size: 3.5rem; margin-bottom: 20px; line-height: 1.2; } .hero p { font-size: 1.2rem; margin-bottom: 30px; opacity: 0.9; } .hero-btns { display: flex; justify-content: center; gap: 20px; } /* About Section */ .about { background-color: var(--light-color); } .about-content { display: flex; align-items: center; gap: 50px; } .about-img { flex: 1; border-radius: 10px; overflow: hidden; box-shadow: var(--shadow); animation: fadeInLeft 1s ease; } .about-text { flex: 1; animation: fadeInRight 1s ease; } .about-text h3 { font-size: 2rem; color: var(--dark-color); margin-bottom: 20px; } .about-text p { margin-bottom: 15px; } .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: var(--primary-color); color: white; width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; } /* Services Section */ .services { background-color: white; } .services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; } .service-card { background: white; border-radius: 10px; overflow: hidden; box-shadow: var(--shadow); transition: var(--transition); animation: fadeInUp 1s ease; } .service-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); } .service-img { height: 200px; overflow: hidden; } .service-img img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition); } .service-card:hover .service-img img { transform: scale(1.1); } .service-info { padding: 25px; } .service-info h3 { font-size: 1.5rem; margin-bottom: 15px; color: var(--dark-color); } .service-info p { margin-bottom: 20px; color: #666; } .service-price { display: flex; justify-content: space-between; align-items: center; } .price { font-size: 1.3rem; font-weight: 600; color: var(--primary-color); } /* Team Section */ .team { background-color: var(--light-color); } .team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; } .team-member { background: white; border-radius: 10px; overflow: hidden; box-shadow: var(--shadow); transition: var(--transition); text-align: center; animation: fadeInUp 1s ease; } .team-member:hover { transform: translateY(-10px); } .member-img { height: 300px; overflow: hidden; position: relative; } .member-img img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition); } .team-member:hover .member-img img { transform: scale(1.05); } .social-links { position: absolute; bottom: 20px; left: 0; right: 0; display: flex; justify-content: center; gap: 10px; opacity: 0; transition: var(--transition); } .team-member:hover .social-links { opacity: 1; } .social-links a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: var(--primary-color); color: white; border-radius: 50%; transition: var(--transition); } .social-links a:hover { background: var(--secondary-color); transform: translateY(-3px); } .member-info { padding: 20px; } .member-info h3 { font-size: 1.3rem; margin-bottom: 5px; color: var(--dark-color); } .member-info p { color: var(--primary-color); font-weight: 500; margin-bottom: 15px; } /* Testimonials Section */ .testimonials { background-color: white; } .testimonial-slider { max-width: 800px; margin: 0 auto; position: relative; } .testimonial { background: var(--light-color); padding: 30px; border-radius: 10px; box-shadow: var(--shadow); text-align: center; display: none; animation: fadeIn 1s ease; } .testimonial.active { display: block; } .client-img { width: 100px; height: 100px; border-radius: 50%; overflow: hidden; margin: 0 auto 20px; border: 5px solid var(--primary-color); } .client-img img { width: 100%; height: 100%; object-fit: cover; } .testimonial p { font-style: italic; margin-bottom: 20px; font-size: 1.1rem; } .client-info h4 { font-size: 1.2rem; margin-bottom: 5px; color: var(--dark-color); } .client-info span { color: #666; font-size: 0.9rem; } .slider-controls { display: flex; justify-content: center; margin-top: 30px; gap: 10px; } .slider-dot { width: 12px; height: 12px; border-radius: 50%; background: #ddd; cursor: pointer; transition: var(--transition); } .slider-dot.active { background: var(--primary-color); } /* Gallery Section */ .gallery { background-color: var(--light-color); } .gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; } .gallery-item { position: relative; border-radius: 10px; overflow: hidden; box-shadow: var(--shadow); height: 250px; animation: fadeIn 1s ease; } .gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition); } .gallery-item:hover img { transform: scale(1.1); } .gallery-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(10, 46, 90, 0.7); display: flex; align-items: center; justify-content: center; opacity: 0; transition: var(--transition); } .gallery-item:hover .gallery-overlay { opacity: 1; } .gallery-overlay i { color: white; font-size: 2rem; } /* Contact Section */ .contact { background-color: white; } .contact-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 50px; } .contact-info { animation: fadeInLeft 1s ease; } .contact-info h3 { font-size: 1.8rem; margin-bottom: 20px; color: var(--dark-color); } .contact-details { margin-bottom: 30px; } .contact-item { display: flex; align-items: flex-start; gap: 15px; margin-bottom: 20px; } .contact-icon { background: var(--primary-color); color: white; width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; } .contact-text h4 { font-size: 1.1rem; margin-bottom: 5px; color: var(--dark-color); } .contact-text p, .contact-text a { color: #666; transition: var(--transition); } .contact-text a:hover { color: var(--primary-color); } .social-media { display: flex; gap: 15px; } .social-media a { display: flex; align-items: center; justify-content: center; width: 45px; height: 45px; background: var(--light-color); color: var(--primary-color); border-radius: 50%; font-size: 1.2rem; transition: var(--transition); } .social-media a:hover { background: var(--primary-color); color: white; transform: translateY(-3px); } .contact-form { animation: fadeInRight 1s ease; } .form-group { margin-bottom: 20px; } .form-group label { display: block; margin-bottom: 8px; font-weight: 500; color: var(--dark-color); } .form-control { width: 100%; padding: 12px 15px; border: 1px solid #ddd; border-radius: 5px; font-family: 'Poppins', sans-serif; transition: var(--transition); } .form-control:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.2); } textarea.form-control { min-height: 150px; resize: vertical; } /* Footer */ footer { background-color: var(--dark-color); color: white; padding: 50px 0 20px; } .footer-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; margin-bottom: 40px; } .footer-col h3 { font-size: 1.3rem; margin-bottom: 20px; position: relative; padding-bottom: 10px; } .footer-col h3::after { content: ''; position: absolute; width: 50px; height: 2px; background: var(--primary-color); bottom: 0; left: 0; } .footer-col p { margin-bottom: 15px; opacity: 0.8; } .footer-links li { margin-bottom: 10px; } .footer-links a { color: #ddd; transition: var(--transition); display: inline-block; } .footer-links a:hover { color: var(--accent-color); transform: translateX(5px); } .footer-contact li { margin-bottom: 15px; display: flex; align-items: flex-start; gap: 10px; } .footer-contact i { color: var(--primary-color); margin-top: 5px; } .footer-bottom { text-align: center; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.1); } .footer-bottom p { opacity: 0.7; font-size: 0.9rem; } /* Animations */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInDown { from { opacity: 0; transform: translateY(-30px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInLeft { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } } @keyframes fadeInRight { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } } /* Responsive Styles */ @media (max-width: 992px) { .section-title h2 { font-size: 2.2rem; } .about-content { flex-direction: column; } .about-img, .about-text { width: 100%; } } @media (max-width: 768px) { .section { padding: 60px 0; } .section-title h2 { font-size: 2rem; } .hero h1 { font-size: 2.8rem; } .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: var(--transition); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); } .nav-links.active { left: 0; } .nav-links li { margin: 15px 0; } .hamburger { display: block; } .hero-btns { flex-direction: column; align-items: center; } .hero-btns .btn { width: 100%; max-width: 250px; } .about-features { grid-template-columns: 1fr; } } @media (max-width: 576px) { .section-title h2 { font-size: 1.8rem; } .hero h1 { font-size: 2.2rem; } .hero p { font-size: 1rem; } .service-card, .team-member, .gallery-item { animation: none; } }
JavaScript
// Mobile Navigation const hamburger = document.getElementById('hamburger'); const navLinks = document.getElementById('navLinks'); hamburger.addEventListener('click', () => { navLinks.classList.toggle('active'); hamburger.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', () => { navLinks.classList.remove('active'); hamburger.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 testimonials = document.querySelectorAll('.testimonial'); const dots = document.querySelectorAll('.slider-dot'); let currentSlide = 0; function showSlide(n) { testimonials.forEach(testimonial => testimonial.classList.remove('active')); dots.forEach(dot => dot.classList.remove('active')); currentSlide = (n + testimonials.length) % testimonials.length; testimonials[currentSlide].classList.add('active'); dots[currentSlide].classList.add('active'); } dots.forEach((dot, index) => { dot.addEventListener('click', () => showSlide(index)); }); // Auto slide change setInterval(() => { showSlide(currentSlide + 1); }, 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' }); } }); }); // Form submission const appointmentForm = document.getElementById('appointmentForm'); appointmentForm.addEventListener('submit', function(e) { e.preventDefault(); // Get form values const name = document.getElementById('name').value; const service = document.getElementById('service').value; // Here you would typically send the data to a server // For demo, we'll just show an alert alert(`Thank you, ${name}! Your appointment request for ${service} has been received. We'll contact you shortly to confirm.`); // Reset form this.reset(); }); // Animation on scroll function animateOnScroll() { const elements = document.querySelectorAll('.service-card, .team-member, .gallery-item, .about-img, .about-text, .contact-info, .contact-form'); elements.forEach(element => { const elementPosition = element.getBoundingClientRect().top; const screenPosition = window.innerHeight / 1.3; if (elementPosition < screenPosition) { element.style.opacity = '1'; element.style.transform = 'translateY(0)'; } }); } // Set initial state for animated elements document.querySelectorAll('.service-card, .team-member, .gallery-item').forEach(element => { element.style.opacity = '0'; element.style.transform = 'translateY(30px)'; element.style.transition = 'opacity 0.5s ease, transform 0.5s ease'; }); document.querySelectorAll('.about-img, .contact-info').forEach(element => { element.style.opacity = '0'; element.style.transform = 'translateX(-30px)'; element.style.transition = 'opacity 0.5s ease, transform 0.5s ease'; }); document.querySelectorAll('.about-text, .contact-form').forEach(element => { element.style.opacity = '0'; element.style.transform = 'translateX(30px)'; element.style.transition = 'opacity 0.5s ease, transform 0.5s ease'; }); window.addEventListener('scroll', animateOnScroll); window.addEventListener('load', animateOnScroll);
Output Preview
Desktop
Mobile
Fullscreen