Car Washing Center 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>Sparkle Auto Wash - Premium Car Cleaning Services</title> <link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> </head> <body> <!-- Header/Navigation --> <header class="header"> <div class="container"> <div class="logo"> <i class="fas fa-car"></i> <span>Sparkle Auto Wash</span> </div> <nav class="navbar"> <ul> <li><a href="#home">Home</a></li> <li><a href="#services">Services</a></li> <li><a href="#pricing">Pricing</a></li> <li><a href="#about">About</a></li> <li><a href="#testimonials">Testimonials</a></li> <li><a href="#gallery">Gallery</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#booking" class="btn">Book Now</a></li> </ul> </nav> <div class="mobile-menu-btn"> <i class="fas fa-bars"></i> </div> </div> </header> <!-- Hero Section --> <section id="home" class="hero"> <div class="container"> <div class="hero-content"> <h1>Premium Car Wash & Detailing Services</h1> <p>Give your car the care it deserves with our professional cleaning services</p> <div class="hero-buttons"> <a href="#booking" class="btn btn-primary">Book Now</a> <a href="#services" class="btn btn-secondary">Our Services</a> </div> </div> </div> </section> <!-- Services Section --> <section id="services" class="services"> <div class="container"> <h2 class="section-title">Our Services</h2> <p class="section-subtitle">We offer a range of services to keep your vehicle looking its best</p> <div class="services-grid"> <div class="service-card"> <div class="service-icon"> <i class="fas fa-spray-can"></i> </div> <h3>Basic Wash</h3> <p>Exterior wash, wheel cleaning, and window cleaning for a quick refresh.</p> </div> <div class="service-card"> <div class="service-icon"> <i class="fas fa-tint"></i> </div> <h3>Deluxe Wash</h3> <p>Includes basic wash plus wax application and interior vacuuming.</p> </div> <div class="service-card"> <div class="service-icon"> <i class="fas fa-star"></i> </div> <h3>Premium Detail</h3> <p>Full interior and exterior detailing with paint protection.</p> </div> <div class="service-card"> <div class="service-icon"> <i class="fas fa-air-freshener"></i> </div> <h3>Interior Cleaning</h3> <p>Deep cleaning of seats, carpets, and all interior surfaces.</p> </div> </div> </div> </section> <!-- Pricing Section --> <section id="pricing" class="pricing"> <div class="container"> <h2 class="section-title">Our Pricing</h2> <p class="section-subtitle">Affordable packages for every need</p> <div class="pricing-grid"> <div class="pricing-card"> <h3>Basic Wash</h3> <div class="price">$15</div> <ul class="features"> <li>Exterior hand wash</li> <li>Wheel cleaning</li> <li>Window cleaning</li> <li>Tire dressing</li> </ul> <a href="#booking" class="btn">Book Now</a> </div> <div class="pricing-card popular"> <div class="popular-badge">Most Popular</div> <h3>Deluxe Wash</h3> <div class="price">$35</div> <ul class="features"> <li>Everything in Basic</li> <li>Hand wax application</li> <li>Interior vacuuming</li> <li>Dashboard cleaning</li> <li>Air freshener</li> </ul> <a href="#booking" class="btn btn-primary">Book Now</a> </div> <div class="pricing-card"> <h3>Premium Detail</h3> <div class="price">$85</div> <ul class="features"> <li>Everything in Deluxe</li> <li>Full interior detailing</li> <li>Clay bar treatment</li> <li>Paint protection</li> <li>Leather conditioning</li> </ul> <a href="#booking" class="btn">Book Now</a> </div> </div> </div> </section> <!-- About Section --> <section id="about" class="about"> <div class="container"> <div class="about-content"> <h2 class="section-title">About Sparkle Auto Wash</h2> <p>Founded in 2010, Sparkle Auto Wash has been providing top-quality car cleaning services to thousands of satisfied customers. Our team of trained professionals uses eco-friendly products and the latest techniques to ensure your vehicle gets the best care possible.</p> <div class="about-stats"> <div class="stat"> <div class="stat-number">12+</div> <div class="stat-label">Years Experience</div> </div> <div class="stat"> <div class="stat-number">15K+</div> <div class="stat-label">Happy Customers</div> </div> <div class="stat"> <div class="stat-number">100%</div> <div class="stat-label">Satisfaction Guarantee</div> </div> </div> <a href="#contact" class="btn btn-primary">Learn More</a> </div> <div class="about-image"> <img src="https://images.unsplash.com/photo-1598515214211-89d3c7349c2b?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Car wash team"> </div> </div> </section> <!-- Testimonials Section --> <section id="testimonials" class="testimonials"> <div class="container"> <h2 class="section-title">What Our Customers Say</h2> <p class="section-subtitle">Don't just take our word for it</p> <div class="testimonials-slider"> <div class="testimonial active"> <div class="quote">"The best car wash in town! My car has never looked better. The attention to detail is incredible."</div> <div class="author"> <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Michael Johnson"> <div class="author-info"> <div class="name">Michael Johnson</div> <div class="title">Regular Customer</div> </div> </div> </div> <div class="testimonial"> <div class="quote">"I've tried many car washes, but Sparkle Auto Wash is in a league of its own. Worth every penny!"</div> <div class="author"> <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Sarah Williams"> <div class="author-info"> <div class="name">Sarah Williams</div> <div class="title">New Customer</div> </div> </div> </div> <div class="testimonial"> <div class="quote">"The premium detailing service brought my 10-year-old car back to life. It looks brand new!"</div> <div class="author"> <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="David Chen"> <div class="author-info"> <div class="name">David Chen</div> <div class="title">Satisfied Customer</div> </div> </div> </div> <div class="slider-controls"> <button class="prev"><i class="fas fa-chevron-left"></i></button> <div class="dots"> <span class="dot active"></span> <span class="dot"></span> <span class="dot"></span> </div> <button class="next"><i class="fas fa-chevron-right"></i></button> </div> </div> </div> </section> <!-- Gallery Section --> <section id="gallery" class="gallery"> <div class="container"> <h2 class="section-title">Our Work Gallery</h2> <p class="section-subtitle">See the transformation we create</p> <div class="gallery-grid"> <div class="gallery-item"> <img src="https://images.unsplash.com/photo-1552519507-da3b142c6e3d?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Car washing"> <div class="overlay"> <i class="fas fa-search-plus"></i> </div> </div> <div class="gallery-item"> <img src="https://images.unsplash.com/photo-1503736334956-4c8f8e92946d?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Car detailing"> <div class="overlay"> <i class="fas fa-search-plus"></i> </div> </div> <div class="gallery-item"> <img src="https://images.unsplash.com/photo-1607860108855-64acf2078ed9?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Interior cleaning"> <div class="overlay"> <i class="fas fa-search-plus"></i> </div> </div> <div class="gallery-item"> <img src="https://images.unsplash.com/photo-1605559424843-9e4c228bf1c2?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Wheel cleaning"> <div class="overlay"> <i class="fas fa-search-plus"></i> </div> </div> </div> </div> </section> <!-- Booking Section --> <section id="booking" class="booking"> <div class="container"> <div class="booking-image"> <img src="https://images.unsplash.com/photo-1601362840469-51e4d8d58785?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Car wash bay"> </div> <div class="booking-form"> <h2 class="section-title">Book Your Wash</h2> <p class="section-subtitle">Schedule an appointment today</p> <form id="appointmentForm"> <div class="form-group"> <input type="text" id="name" placeholder="Your Name" required> </div> <div class="form-group"> <input type="email" id="email" placeholder="Your Email" required> </div> <div class="form-group"> <input type="tel" id="phone" placeholder="Your Phone" required> </div> <div class="form-group"> <select id="service" required> <option value="">Select Service</option> <option value="basic">Basic Wash</option> <option value="deluxe">Deluxe Wash</option> <option value="premium">Premium Detail</option> <option value="interior">Interior Cleaning</option> </select> </div> <div class="form-group"> <input type="date" id="date" required> </div> <div class="form-group"> <input type="time" id="time" required> </div> <button type="submit" class="btn btn-primary">Book Appointment</button> </form> </div> </div> </section> <!-- Contact Section --> <section id="contact" class="contact"> <div class="container"> <h2 class="section-title">Contact Us</h2> <p class="section-subtitle">We'd love to hear from you</p> <div class="contact-content"> <div class="contact-info"> <div class="info-item"> <i class="fas fa-map-marker-alt"></i> <div class="info-content"> <h3>Location</h3> <p>123 Auto Lane, Carville, CV 12345</p> </div> </div> <div class="info-item"> <i class="fas fa-phone-alt"></i> <div class="info-content"> <h3>Phone</h3> <p>(555) 123-4567</p> </div> </div> <div class="info-item"> <i class="fas fa-envelope"></i> <div class="info-content"> <h3>Email</h3> <p>info@sparkleautowash.com</p> </div> </div> <div class="info-item"> <i class="fas fa-clock"></i> <div class="info-content"> <h3>Hours</h3> <p>Mon-Fri: 8AM - 6PM<br>Sat-Sun: 9AM - 5PM</p> </div> </div> </div> <div class="contact-map"> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3022.215573291234!2d-73.9878449241646!3d40.74844097138985!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c259a9b3117469%3A0xd134e199a405a163!2sEmpire%20State%20Building!5e0!3m2!1sen!2sus!4v1629990000000!5m2!1sen!2sus" width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy"></iframe> </div> </div> </div> </section> <!-- Footer --> <footer class="footer"> <div class="container"> <div class="footer-content"> <div class="footer-about"> <div class="logo"> <i class="fas fa-car"></i> <span>Sparkle Auto Wash</span> </div> <p>Providing premium car cleaning services since 2010. We use eco-friendly products and the latest techniques to make your car shine.</p> <div class="social-links"> <a href="#"><i class="fab fa-facebook-f"></i></a> <a href="#"><i class="fab fa-twitter"></i></a> <a href="#"><i class="fab fa-instagram"></i></a> <a href="#"><i class="fab fa-youtube"></i></a> </div> </div> <div class="footer-links"> <h3>Quick Links</h3> <ul> <li><a href="#home">Home</a></li> <li><a href="#services">Services</a></li> <li><a href="#pricing">Pricing</a></li> <li><a href="#about">About Us</a></li> <li><a href="#contact">Contact</a></li> </ul> </div> <div class="footer-links"> <h3>Services</h3> <ul> <li><a href="#services">Basic Wash</a></li> <li><a href="#services">Deluxe Wash</a></li> <li><a href="#services">Premium Detail</a></li> <li><a href="#services">Interior Cleaning</a></li> <li><a href="#services">Wax Application</a></li> </ul> </div> <div class="footer-newsletter"> <h3>Newsletter</h3> <p>Subscribe to get updates on special offers.</p> <form id="newsletterForm"> <input type="email" placeholder="Your Email" required> <button type="submit" class="btn">Subscribe</button> </form> </div> </div> <div class="footer-bottom"> <p>© 2023 Sparkle Auto Wash. All Rights Reserved.</p> <div class="footer-legal"> <a href="#">Privacy Policy</a> <a href="#">Terms of Service</a> </div> </div> </div> </footer> <script src="script.js"></script> </body> </html>
CSS
/* Base Styles */ :root { --primary-color: #3498db; --secondary-color: #2ecc71; --dark-color: #2c3e50; --light-color: #ecf0f1; --danger-color: #e74c3c; --success-color: #2ecc71; --warning-color: #f39c12; --gray-color: #95a5a6; --white-color: #ffffff; --black-color: #000000; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; line-height: 1.6; color: var(--dark-color); background-color: var(--white-color); } a { text-decoration: none; color: inherit; } ul { list-style: none; } img { max-width: 100%; } .container { width: 90%; max-width: 1200px; margin: 0 auto; padding: 0 15px; } .btn { display: inline-block; padding: 10px 20px; background-color: var(--primary-color); color: var(--white-color); border-radius: 5px; font-weight: 600; transition: all 0.3s ease; border: none; cursor: pointer; } .btn:hover { background-color: #2980b9; transform: translateY(-2px); } .btn-primary { background-color: var(--primary-color); } .btn-secondary { background-color: var(--secondary-color); } .btn-secondary:hover { background-color: #27ae60; } .section-title { font-size: 2.5rem; margin-bottom: 1rem; text-align: center; color: var(--dark-color); } .section-subtitle { font-size: 1.1rem; color: var(--gray-color); text-align: center; margin-bottom: 3rem; } /* Header Styles */ .header { background-color: var(--white-color); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); position: fixed; width: 100%; top: 0; left: 0; z-index: 1000; transition: all 0.3s ease; } .header.scrolled { background-color: rgba(255, 255, 255, 0.95); box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1); } .header .container { display: flex; justify-content: space-between; align-items: center; padding: 15px 0; } .logo { display: flex; align-items: center; font-size: 1.5rem; font-weight: 700; color: var(--dark-color); } .logo i { margin-right: 10px; color: var(--primary-color); } .navbar ul { display: flex; } .navbar ul li { margin-left: 30px; } .navbar ul li a { font-weight: 600; transition: color 0.3s ease; } .navbar ul li a:hover { color: var(--primary-color); } .mobile-menu-btn { display: none; font-size: 1.5rem; cursor: pointer; } /* Hero Section */ .hero { height: 100vh; background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://images.unsplash.com/photo-1502877338535-766e1452684a?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80') no-repeat center center/cover; color: var(--white-color); display: flex; align-items: center; text-align: center; padding-top: 80px; } .hero-content { max-width: 800px; margin: 0 auto; } .hero h1 { font-size: 3.5rem; margin-bottom: 1.5rem; line-height: 1.2; } .hero p { font-size: 1.2rem; margin-bottom: 2rem; opacity: 0.9; } .hero-buttons { display: flex; justify-content: center; gap: 20px; } /* Services Section */ .services { padding: 100px 0; background-color: var(--light-color); } .services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; margin-top: 50px; } .service-card { background-color: var(--white-color); padding: 30px; border-radius: 10px; text-align: center; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); transition: transform 0.3s ease, box-shadow 0.3s ease; } .service-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); } .service-icon { width: 80px; height: 80px; background-color: var(--primary-color); color: var(--white-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; font-size: 2rem; } .service-card h3 { font-size: 1.5rem; margin-bottom: 15px; color: var(--dark-color); } .service-card p { color: var(--gray-color); } /* Pricing Section */ .pricing { padding: 100px 0; } .pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; margin-top: 50px; } .pricing-card { background-color: var(--white-color); padding: 40px 30px; border-radius: 10px; text-align: center; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); position: relative; transition: transform 0.3s ease; } .pricing-card.popular { border: 2px solid var(--primary-color); transform: scale(1.05); } .popular-badge { position: absolute; top: -15px; right: 20px; background-color: var(--primary-color); color: var(--white-color); padding: 5px 15px; border-radius: 20px; font-size: 0.8rem; font-weight: 600; } .pricing-card h3 { font-size: 1.5rem; margin-bottom: 20px; color: var(--dark-color); } .price { font-size: 2.5rem; font-weight: 700; color: var(--primary-color); margin-bottom: 25px; } .price::before { content: '$'; font-size: 1.5rem; vertical-align: super; margin-right: 5px; } .features { margin-bottom: 30px; } .features li { padding: 10px 0; border-bottom: 1px solid #eee; } .features li:last-child { border-bottom: none; } /* About Section */ .about { padding: 100px 0; background-color: var(--light-color); } .about .container { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; } .about-image img { border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); } .about-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 30px 0; } .stat { text-align: center; padding: 20px; background-color: var(--white-color); border-radius: 10px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); } .stat-number { font-size: 2rem; font-weight: 700; color: var(--primary-color); margin-bottom: 5px; } .stat-label { font-size: 0.9rem; color: var(--gray-color); } /* Testimonials Section */ .testimonials { padding: 100px 0; background-color: var(--white-color); } .testimonials-slider { max-width: 800px; margin: 0 auto; position: relative; } .testimonial { text-align: center; padding: 40px; background-color: var(--light-color); border-radius: 10px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); display: none; } .testimonial.active { display: block; } .quote { font-size: 1.2rem; font-style: italic; margin-bottom: 30px; color: var(--dark-color); position: relative; } .quote::before, .quote::after { content: '"'; font-size: 2rem; color: var(--primary-color); opacity: 0.3; position: absolute; } .quote::before { top: -20px; left: -10px; } .quote::after { bottom: -40px; right: -10px; } .author { display: flex; align-items: center; justify-content: center; } .author img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; margin-right: 15px; } .author-info { text-align: left; } .name { font-weight: 700; color: var(--dark-color); } .title { font-size: 0.9rem; color: var(--gray-color); } .slider-controls { display: flex; justify-content: center; align-items: center; margin-top: 30px; gap: 20px; } .slider-controls button { background: none; border: none; font-size: 1.5rem; color: var(--primary-color); cursor: pointer; transition: color 0.3s ease; } .slider-controls button:hover { color: var(--dark-color); } .dots { display: flex; gap: 10px; } .dot { width: 12px; height: 12px; border-radius: 50%; background-color: #ddd; cursor: pointer; transition: background-color 0.3s ease; } .dot.active { background-color: var(--primary-color); } /* Gallery Section */ .gallery { padding: 100px 0; background-color: var(--light-color); } .gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-top: 50px; } .gallery-item { position: relative; border-radius: 10px; overflow: hidden; height: 250px; } .gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .gallery-item:hover img { transform: scale(1.1); } .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease; } .gallery-item:hover .overlay { opacity: 1; } .overlay i { color: var(--white-color); font-size: 2rem; } /* Booking Section */ .booking { padding: 100px 0; background-color: var(--white-color); } .booking .container { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; } .booking-image img { border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); } .booking-form { background-color: var(--light-color); padding: 40px; border-radius: 10px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); } .form-group { margin-bottom: 20px; } .form-group input, .form-group select { width: 100%; padding: 12px 15px; border: 1px solid #ddd; border-radius: 5px; font-size: 1rem; transition: border-color 0.3s ease; } .form-group input:focus, .form-group select:focus { outline: none; border-color: var(--primary-color); } /* Contact Section */ .contact { padding: 100px 0; background-color: var(--light-color); } .contact-content { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; margin-top: 50px; } .contact-info { display: grid; grid-template-columns: 1fr; gap: 30px; } .info-item { display: flex; align-items: flex-start; gap: 20px; } .info-item i { font-size: 1.5rem; color: var(--primary-color); margin-top: 5px; } .info-content h3 { font-size: 1.2rem; margin-bottom: 5px; color: var(--dark-color); } .info-content p { color: var(--gray-color); } .contact-map { height: 100%; min-height: 400px; border-radius: 10px; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); } /* Footer */ .footer { background-color: var(--dark-color); color: var(--white-color); padding: 80px 0 0; } .footer-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 40px; margin-bottom: 60px; } .footer-about .logo { color: var(--white-color); margin-bottom: 20px; } .footer-about p { opacity: 0.8; margin-bottom: 20px; } .social-links { display: flex; gap: 15px; } .social-links a { width: 40px; height: 40px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.1); display: flex; align-items: center; justify-content: center; transition: background-color 0.3s ease; } .social-links a:hover { background-color: var(--primary-color); } .footer-links h3 { font-size: 1.2rem; margin-bottom: 20px; position: relative; padding-bottom: 10px; } .footer-links h3::after { content: ''; position: absolute; left: 0; bottom: 0; width: 50px; height: 2px; background-color: var(--primary-color); } .footer-links ul li { margin-bottom: 10px; } .footer-links ul li a { opacity: 0.8; transition: opacity 0.3s ease; } .footer-links ul li a:hover { opacity: 1; color: var(--primary-color); } .footer-newsletter h3 { font-size: 1.2rem; margin-bottom: 20px; position: relative; padding-bottom: 10px; } .footer-newsletter h3::after { content: ''; position: absolute; left: 0; bottom: 0; width: 50px; height: 2px; background-color: var(--primary-color); } .footer-newsletter p { opacity: 0.8; margin-bottom: 20px; } .footer-newsletter input { width: 100%; padding: 12px 15px; border: none; border-radius: 5px; margin-bottom: 10px; font-size: 1rem; } .footer-newsletter button { width: 100%; } .footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.1); padding: 20px 0; display: flex; justify-content: space-between; align-items: center; } .footer-legal { display: flex; gap: 20px; } .footer-legal a { opacity: 0.8; transition: opacity 0.3s ease; } .footer-legal a:hover { opacity: 1; color: var(--primary-color); } /* Responsive Styles */ @media (max-width: 992px) { .about .container, .booking .container, .contact-content { grid-template-columns: 1fr; } .about-image, .booking-image { order: -1; } .section-title { font-size: 2rem; } } @media (max-width: 768px) { .navbar { position: fixed; top: 80px; left: -100%; width: 80%; height: calc(100vh - 80px); background-color: var(--white-color); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); transition: left 0.3s ease; padding: 30px; } .navbar.active { left: 0; } .navbar ul { flex-direction: column; } .navbar ul li { margin: 15px 0; } .mobile-menu-btn { display: block; } .hero h1 { font-size: 2.5rem; } .hero-buttons { flex-direction: column; gap: 15px; } .footer-content { grid-template-columns: 1fr; } .footer-bottom { flex-direction: column; text-align: center; gap: 15px; } .footer-legal { justify-content: center; } } @media (max-width: 576px) { .hero h1 { font-size: 2rem; } .hero p { font-size: 1rem; } .section-title { font-size: 1.8rem; } .section-subtitle { font-size: 1rem; } .pricing-card.popular { transform: none; } .about-stats { grid-template-columns: 1fr; } }
JavaScript
document.addEventListener('DOMContentLoaded', function() { // Mobile Menu Toggle const mobileMenuBtn = document.querySelector('.mobile-menu-btn'); const navbar = document.querySelector('.navbar'); mobileMenuBtn.addEventListener('click', function() { navbar.classList.toggle('active'); this.querySelector('i').classList.toggle('fa-times'); this.querySelector('i').classList.toggle('fa-bars'); }); // Close mobile menu when clicking on a link const navLinks = document.querySelectorAll('.navbar ul li a'); navLinks.forEach(link => { link.addEventListener('click', function() { navbar.classList.remove('active'); mobileMenuBtn.querySelector('i').classList.remove('fa-times'); mobileMenuBtn.querySelector('i').classList.add('fa-bars'); }); }); // Header Scroll Effect const header = document.querySelector('.header'); window.addEventListener('scroll', function() { if (window.scrollY > 100) { header.classList.add('scrolled'); } else { header.classList.remove('scrolled'); } }); // 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' }); } }); }); // Testimonial Slider const testimonials = document.querySelectorAll('.testimonial'); const dots = document.querySelectorAll('.dot'); const prevBtn = document.querySelector('.prev'); const nextBtn = document.querySelector('.next'); let currentIndex = 0; function showTestimonial(index) { testimonials.forEach(testimonial => testimonial.classList.remove('active')); dots.forEach(dot => dot.classList.remove('active')); testimonials[index].classList.add('active'); dots[index].classList.add('active'); currentIndex = index; } dots.forEach((dot, index) => { dot.addEventListener('click', () => showTestimonial(index)); }); prevBtn.addEventListener('click', () => { currentIndex = (currentIndex - 1 + testimonials.length) % testimonials.length; showTestimonial(currentIndex); }); nextBtn.addEventListener('click', () => { currentIndex = (currentIndex + 1) % testimonials.length; showTestimonial(currentIndex); }); // Auto-rotate testimonials let testimonialInterval = setInterval(() => { currentIndex = (currentIndex + 1) % testimonials.length; showTestimonial(currentIndex); }, 5000); // Pause auto-rotation on hover const slider = document.querySelector('.testimonials-slider'); slider.addEventListener('mouseenter', () => { clearInterval(testimonialInterval); }); slider.addEventListener('mouseleave', () => { testimonialInterval = setInterval(() => { currentIndex = (currentIndex + 1) % testimonials.length; showTestimonial(currentIndex); }, 5000); }); // Form Submissions const appointmentForm = document.getElementById('appointmentForm'); const newsletterForm = document.getElementById('newsletterForm'); if (appointmentForm) { appointmentForm.addEventListener('submit', function(e) { e.preventDefault(); // Here you would typically send the form data to a server alert('Appointment booked successfully! We will contact you shortly to confirm.'); this.reset(); }); } if (newsletterForm) { newsletterForm.addEventListener('submit', function(e) { e.preventDefault(); // Here you would typically send the form data to a server alert('Thank you for subscribing to our newsletter!'); this.reset(); }); } // Gallery Lightbox (simplified) const galleryItems = document.querySelectorAll('.gallery-item'); galleryItems.forEach(item => { item.addEventListener('click', function() { // In a real implementation, you would open a lightbox/modal here alert('Image clicked! This would open a larger view in a real implementation.'); }); }); // Current Year for Footer const yearSpan = document.querySelector('.footer-bottom p'); if (yearSpan) { const currentYear = new Date().getFullYear(); yearSpan.textContent = yearSpan.textContent.replace('2023', currentYear); } });
Output Preview
Desktop
Mobile
Fullscreen
