Dental Care 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>BrightSmile Dental Care</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <link rel="stylesheet" href="styles.css"> </head> <body> <!-- Header/Navigation --> <header class="header"> <div class="container"> <a href="#" class="logo">Bright<span>Smile</span></a> <nav class="navbar"> <a href="#home">Home</a> <a href="#about">About</a> <a href="#services">Services</a> <a href="#team">Team</a> <a href="#testimonials">Testimonials</a> <a href="#gallery">Gallery</a> <a href="#blog">Blog</a> <a href="#contact">Contact</a> </nav> <div class="menu-btn"> <div class="bar"></div> <div class="bar"></div> <div class="bar"></div> </div> </div> </header> <!-- Hero Section --> <section class="hero" id="home"> <div class="container"> <div class="hero-content"> <h1 class="hero-title">Your Perfect Smile Starts Here</h1> <p class="hero-subtitle">Professional dental care with a gentle touch. We make dental visits comfortable and stress-free.</p> <div class="hero-buttons"> <a href="#contact" class="btn btn-primary">Book Appointment</a> <a href="#services" class="btn btn-secondary">Our Services</a> </div> </div> <div class="hero-image"> <img src="https://images.unsplash.com/photo-1588776814546-1ffcf47267a5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Smiling dentist with patient"> </div> </div> <div class="hero-shapes"> <div class="shape-1"></div> <div class="shape-2"></div> <div class="shape-3"></div> </div> </section> <!-- About Section --> <section class="about" id="about"> <div class="container"> <div class="about-image"> <img src="https://images.unsplash.com/photo-1530026186672-2cd00ffc50fe?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Dental clinic"> <div class="experience-badge"> <span class="number">15+</span> <span class="text">Years Experience</span> </div> </div> <div class="about-content"> <h2 class="section-title">About Our Clinic</h2> <p class="section-subtitle">We provide the highest quality dental care with the latest technology</p> <p class="about-text">BrightSmile Dental Care has been serving the community for over 15 years. Our team of experienced professionals is dedicated to providing personalized care in a comfortable environment.</p> <div class="about-features"> <div class="feature"> <i class="fas fa-tooth"></i> <h3>Modern Equipment</h3> <p>We use the latest dental technology for precise diagnosis and treatment.</p> </div> <div class="feature"> <i class="fas fa-user-md"></i> <h3>Expert Dentists</h3> <p>Our team consists of highly qualified and experienced dental professionals.</p> </div> </div> <a href="#services" class="btn btn-primary">Learn More</a> </div> </div> </section> <!-- Services Section --> <section class="services" id="services"> <div class="container"> <div class="section-header"> <h2 class="section-title">Our Dental Services</h2> <p class="section-subtitle">Comprehensive care for your oral health needs</p> </div> <div class="services-grid"> <div class="service-card"> <div class="service-icon"> <i class="fas fa-tooth"></i> </div> <h3>General Dentistry</h3> <p>Routine checkups, cleanings, fillings, and preventive care to maintain your oral health.</p> <a href="#" class="read-more">Read More <i class="fas fa-arrow-right"></i></a> </div> <div class="service-card"> <div class="service-icon"> <i class="fas fa-teeth"></i> </div> <h3>Cosmetic Dentistry</h3> <p>Teeth whitening, veneers, and other treatments to enhance your smile's appearance.</p> <a href="#" class="read-more">Read More <i class="fas fa-arrow-right"></i></a> </div> <div class="service-card"> <div class="service-icon"> <i class="fas fa-teeth-open"></i> </div> <h3>Orthodontics</h3> <p>Braces and aligners to correct misaligned teeth and improve your bite.</p> <a href="#" class="read-more">Read More <i class="fas fa-arrow-right"></i></a> </div> <div class="service-card"> <div class="service-icon"> <i class="fas fa-implant"></i> </div> <h3>Dental Implants</h3> <p>Permanent solutions for missing teeth that look and function like natural teeth.</p> <a href="#" class="read-more">Read More <i class="fas fa-arrow-right"></i></a> </div> <div class="service-card"> <div class="service-icon"> <i class="fas fa-tooth"></i> </div> <h3>Root Canal Therapy</h3> <p>Painless treatment to save infected teeth and relieve discomfort.</p> <a href="#" class="read-more">Read More <i class="fas fa-arrow-right"></i></a> </div> <div class="service-card"> <div class="service-icon"> <i class="fas fa-child"></i> </div> <h3>Pediatric Dentistry</h3> <p>Specialized care for children to establish good oral health habits early.</p> <a href="#" class="read-more">Read More <i class="fas fa-arrow-right"></i></a> </div> </div> </div> </section> <!-- Team Section --> <section class="team" id="team"> <div class="container"> <div class="section-header"> <h2 class="section-title">Meet Our Dentists</h2> <p class="section-subtitle">Our team of experienced dental professionals</p> </div> <div class="team-slider"> <div class="team-member"> <div class="member-image"> <img src="https://images.unsplash.com/photo-1559839734-2b71ea197ec2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Dr. Sarah Johnson"> <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-linkedin-in"></i></a> </div> </div> <div class="member-info"> <h3>Dr. Sarah Johnson</h3> <p>General Dentist</p> </div> </div> <div class="team-member"> <div class="member-image"> <img src="https://images.unsplash.com/photo-1622253692010-333f2da6031d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1528&q=80" alt="Dr. Michael Chen"> <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-linkedin-in"></i></a> </div> </div> <div class="member-info"> <h3>Dr. Michael Chen</h3> <p>Orthodontist</p> </div> </div> <div class="team-member"> <div class="member-image"> <img src="https://images.unsplash.com/photo-1594824476967-48c8b964273f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Dr. Emily Rodriguez"> <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-linkedin-in"></i></a> </div> </div> <div class="member-info"> <h3>Dr. Emily Rodriguez</h3> <p>Pediatric Dentist</p> </div> </div> <div class="team-member"> <div class="member-image"> <img src="https://images.unsplash.com/photo-1582750433449-648ed127bb54?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Dr. James Wilson"> <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-linkedin-in"></i></a> </div> </div> <div class="member-info"> <h3>Dr. James Wilson</h3> <p>Oral Surgeon</p> </div> </div> </div> <div class="slider-controls"> <button class="prev-btn"><i class="fas fa-chevron-left"></i></button> <button class="next-btn"><i class="fas fa-chevron-right"></i></button> </div> </div> </section> <!-- Testimonials Section --> <section class="testimonials" id="testimonials"> <div class="container"> <div class="section-header"> <h2 class="section-title">Patient Testimonials</h2> <p class="section-subtitle">What our patients say about us</p> </div> <div class="testimonials-slider"> <div class="testimonial"> <div class="quote-icon"> <i class="fas fa-quote-left"></i> </div> <p class="testimonial-text">"I've been coming to BrightSmile for years. The staff is always friendly and professional, and Dr. Johnson makes every visit comfortable. My teeth have never been healthier!"</p> <div class="patient-info"> <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Jennifer Smith"> <div> <h4>Jennifer Smith</h4> <p>Regular Patient</p> </div> </div> </div> <div class="testimonial"> <div class="quote-icon"> <i class="fas fa-quote-left"></i> </div> <p class="testimonial-text">"After avoiding dentists for years due to anxiety, I finally found BrightSmile. They were so understanding and made me feel at ease. Now I actually look forward to my checkups!"</p> <div class="patient-info"> <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Robert Johnson"> <div> <h4>Robert Johnson</h4> <p>New Patient</p> </div> </div> </div> <div class="testimonial"> <div class="quote-icon"> <i class="fas fa-quote-left"></i> </div> <p class="testimonial-text">"The cosmetic dentistry work I had done at BrightSmile completely transformed my smile. I can't stop smiling now! The results were better than I ever imagined."</p> <div class="patient-info"> <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Amanda Lee"> <div> <h4>Amanda Lee</h4> <p>Cosmetic Patient</p> </div> </div> </div> </div> <div class="testimonial-dots"></div> </div> </section> <!-- Gallery Section --> <section class="gallery" id="gallery"> <div class="container"> <div class="section-header"> <h2 class="section-title">Our Dental Gallery</h2> <p class="section-subtitle">See our work and facilities</p> </div> <div class="gallery-grid"> <div class="gallery-item"> <img src="https://images.unsplash.com/photo-1588776814546-1ffcf47267a5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Dental Procedure"> <div class="gallery-overlay"> <i class="fas fa-search-plus"></i> </div> </div> <div class="gallery-item"> <img src="https://images.unsplash.com/photo-1588776814546-1ffcf47267a5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Dental Clinic"> <div class="gallery-overlay"> <i class="fas fa-search-plus"></i> </div> </div> <div class="gallery-item"> <img src="https://images.unsplash.com/photo-1530026186672-2cd00ffc50fe?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Dental Equipment"> <div class="gallery-overlay"> <i class="fas fa-search-plus"></i> </div> </div> <div class="gallery-item"> <img src="https://images.unsplash.com/photo-1588776814546-1ffcf47267a5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Smiling Patient"> <div class="gallery-overlay"> <i class="fas fa-search-plus"></i> </div> </div> <div class="gallery-item"> <img src="https://images.unsplash.com/photo-1588776814546-1ffcf47267a5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Dental X-ray"> <div class="gallery-overlay"> <i class="fas fa-search-plus"></i> </div> </div> <div class="gallery-item"> <img src="https://images.unsplash.com/photo-1588776814546-1ffcf47267a5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Child at Dentist"> <div class="gallery-overlay"> <i class="fas fa-search-plus"></i> </div> </div> </div> </div> </section> <!-- Blog Section --> <section class="blog" id="blog"> <div class="container"> <div class="section-header"> <h2 class="section-title">Latest Dental News</h2> <p class="section-subtitle">Stay informed about oral health</p> </div> <div class="blog-posts"> <article class="blog-post"> <div class="post-image"> <img src="https://images.unsplash.com/photo-1588776814546-1ffcf47267a5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Oral Hygiene"> <div class="post-date"> <span>15</span> <span>Jun</span> </div> </div> <div class="post-content"> <h3><a href="#">The Importance of Regular Dental Checkups</a></h3> <p>Learn why regular dental visits are crucial for maintaining oral health and preventing serious issues...</p> <a href="#" class="read-more">Read More <i class="fas fa-arrow-right"></i></a> </div> </article> <article class="blog-post"> <div class="post-image"> <img src="https://images.unsplash.com/photo-1588776814546-1ffcf47267a5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Teeth Whitening"> <div class="post-date"> <span>02</span> <span>Jul</span> </div> </div> <div class="post-content"> <h3><a href="#">Teeth Whitening: Professional vs. At-Home</a></h3> <p>Compare the effectiveness and safety of professional teeth whitening versus at-home treatments...</p> <a href="#" class="read-more">Read More <i class="fas fa-arrow-right"></i></a> </div> </article> <article class="blog-post"> <div class="post-image"> <img src="https://images.unsplash.com/photo-1588776814546-1ffcf47267a5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Child at Dentist"> <div class="post-date"> <span>22</span> <span>May</span> </div> </div> <div class="post-content"> <h3><a href="#">Preparing Your Child for Their First Dental Visit</a></h3> <p>Tips to help make your child's first dental experience positive and anxiety-free...</p> <a href="#" class="read-more">Read More <i class="fas fa-arrow-right"></i></a> </div> </article> </div> </div> </section> <!-- Contact Section --> <section class="contact" id="contact"> <div class="container"> <div class="contact-content"> <div class="contact-info"> <h2 class="section-title">Contact Us</h2> <p class="section-subtitle">We'd love to hear from you</p> <div class="info-item"> <i class="fas fa-map-marker-alt"></i> <div> <h3>Address</h3> <p>123 Dental Avenue, Smile City, SC 12345</p> </div> </div> <div class="info-item"> <i class="fas fa-phone-alt"></i> <div> <h3>Phone</h3> <p>(123) 456-7890</p> </div> </div> <div class="info-item"> <i class="fas fa-envelope"></i> <div> <h3>Email</h3> <p>info@brightsmile.com</p> </div> </div> <div class="info-item"> <i class="fas fa-clock"></i> <div> <h3>Working Hours</h3> <p>Monday - Friday: 8:00 AM - 6:00 PM</p> <p>Saturday: 9:00 AM - 3:00 PM</p> </div> </div> </div> <div class="contact-form"> <form id="appointmentForm"> <h3>Book an Appointment</h3> <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="general">General Dentistry</option> <option value="cosmetic">Cosmetic Dentistry</option> <option value="orthodontics">Orthodontics</option> <option value="implants">Dental Implants</option> <option value="pediatric">Pediatric Dentistry</option> </select> </div> <div class="form-group"> <textarea id="message" rows="4" placeholder="Your Message"></textarea> </div> <button type="submit" class="btn btn-primary">Book Now</button> </form> </div> </div> </div> </section> <!-- Newsletter Section --> <section class="newsletter"> <div class="container"> <div class="newsletter-content"> <h2>Subscribe to Our Newsletter</h2> <p>Stay updated with our latest news and dental health tips</p> <form class="newsletter-form"> <input type="email" placeholder="Your Email Address" required> <button type="submit" class="btn btn-primary">Subscribe</button> </form> </div> </div> </section> <!-- Footer --> <footer class="footer"> <div class="container"> <div class="footer-content"> <div class="footer-col"> <h3>BrightSmile</h3> <p>Providing exceptional dental care with compassion and expertise since 2008.</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-linkedin-in"></i></a> </div> </div> <div class="footer-col"> <h3>Quick Links</h3> <ul> <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="#contact">Contact</a></li> </ul> </div> <div class="footer-col"> <h3>Services</h3> <ul> <li><a href="#">General Dentistry</a></li> <li><a href="#">Cosmetic Dentistry</a></li> <li><a href="#">Orthodontics</a></li> <li><a href="#">Dental Implants</a></li> <li><a href="#">Pediatric Dentistry</a></li> </ul> </div> <div class="footer-col"> <h3>Contact Info</h3> <ul> <li><i class="fas fa-map-marker-alt"></i> 123 Dental Avenue, Smile City</li> <li><i class="fas fa-phone-alt"></i> (123) 456-7890</li> <li><i class="fas fa-envelope"></i> info@brightsmile.com</li> <li><i class="fas fa-clock"></i> Mon-Fri: 8:00 AM - 6:00 PM</li> </ul> </div> </div> <div class="footer-bottom"> <p>© 2023 BrightSmile Dental Care. All Rights Reserved.</p> <div class="footer-links"> <a href="#">Privacy Policy</a> <a href="#">Terms of Service</a> </div> </div> </div> </footer> <!-- Back to Top Button --> <a href="#" class="back-to-top"><i class="fas fa-arrow-up"></i></a> <!-- Scripts --> <script src="script.js"></script> </body> </html>
CSS
/* Google Fonts */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap'); /* Variables */ :root { --primary-color: #2d9cdb; --secondary-color: #2bb673; --accent-color: #f2994a; --dark-color: #333333; --light-color: #f8f9fa; --gray-color: #6c757d; --white-color: #ffffff; --black-color: #000000; --box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); --transition: all 0.3s ease; } /* Base Styles */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: 'Poppins', sans-serif; color: var(--dark-color); line-height: 1.6; overflow-x: hidden; background-color: var(--light-color); } h1, h2, h3, h4, h5, h6 { font-family: 'Playfair Display', serif; font-weight: 600; line-height: 1.2; } a { text-decoration: none; color: inherit; transition: var(--transition); } 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; padding: 12px 30px; border-radius: 50px; font-weight: 500; text-transform: capitalize; transition: var(--transition); border: none; cursor: pointer; font-size: 16px; } .btn-primary { background-color: var(--primary-color); color: var(--white-color); } .btn-primary:hover { background-color: #2387c0; transform: translateY(-3px); box-shadow: var(--box-shadow); } .btn-secondary { background-color: var(--secondary-color); color: var(--white-color); } .btn-secondary:hover { background-color: #239d60; transform: translateY(-3px); box-shadow: var(--box-shadow); } .section-title { font-size: 2.5rem; margin-bottom: 15px; position: relative; display: inline-block; } .section-title::after { content: ''; position: absolute; bottom: -10px; left: 0; width: 60px; height: 4px; background-color: var(--primary-color); border-radius: 2px; } .section-subtitle { font-size: 1.1rem; color: var(--gray-color); margin-bottom: 30px; } .section-header { text-align: center; margin-bottom: 50px; } /* Header Styles */ .header { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; padding: 20px 0; transition: var(--transition); } .header.scrolled { background-color: var(--white-color); box-shadow: var(--box-shadow); padding: 15px 0; } .logo { font-size: 1.8rem; font-weight: 700; color: var(--dark-color); } .logo span { color: var(--primary-color); } .navbar { display: flex; gap: 30px; } .navbar a { font-weight: 500; position: relative; } .navbar a::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 0; height: 2px; background-color: var(--primary-color); transition: var(--transition); } .navbar a:hover::after, .navbar a.active::after { width: 100%; } .menu-btn { display: none; cursor: pointer; flex-direction: column; justify-content: space-between; width: 30px; height: 21px; } .menu-btn .bar { width: 100%; height: 3px; background-color: var(--dark-color); transition: var(--transition); } .menu-btn.active .bar:nth-child(1) { transform: translateY(9px) rotate(45deg); } .menu-btn.active .bar:nth-child(2) { opacity: 0; } .menu-btn.active .bar:nth-child(3) { transform: translateY(-9px) rotate(-45deg); } /* Hero Section Styles */ .hero { padding: 150px 0 100px; position: relative; overflow: hidden; } .hero .container { display: flex; align-items: center; justify-content: space-between; gap: 50px; } .hero-content { flex: 1; max-width: 600px; } .hero-title { font-size: 3.5rem; margin-bottom: 20px; line-height: 1.2; animation: fadeInUp 1s ease; } .hero-subtitle { font-size: 1.2rem; margin-bottom: 30px; color: var(--gray-color); animation: fadeInUp 1s ease 0.2s forwards; opacity: 0; } .hero-buttons { display: flex; gap: 20px; animation: fadeInUp 1s ease 0.4s forwards; opacity: 0; } .hero-image { flex: 1; animation: fadeInRight 1s ease; } .hero-image img { border-radius: 10px; box-shadow: var(--box-shadow); } .hero-shapes { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; overflow: hidden; } .shape-1 { position: absolute; top: -50px; right: -50px; width: 300px; height: 300px; background-color: rgba(45, 156, 219, 0.1); border-radius: 50%; animation: pulse 4s infinite; } .shape-2 { position: absolute; bottom: -100px; left: -100px; width: 400px; height: 400px; background-color: rgba(43, 182, 115, 0.1); border-radius: 50%; animation: pulse 4s infinite 1s; } .shape-3 { position: absolute; top: 50%; right: 50%; width: 200px; height: 200px; background-color: rgba(242, 153, 74, 0.1); border-radius: 50%; animation: pulse 4s infinite 2s; } /* About Section Styles */ .about { padding: 100px 0; } .about .container { display: flex; align-items: center; gap: 50px; } .about-image { flex: 1; position: relative; } .about-image img { border-radius: 10px; box-shadow: var(--box-shadow); } .experience-badge { position: absolute; bottom: -30px; right: -30px; background-color: var(--primary-color); color: var(--white-color); padding: 20px; border-radius: 10px; text-align: center; box-shadow: var(--box-shadow); animation: bounce 2s infinite; } .experience-badge .number { font-size: 2.5rem; font-weight: 700; display: block; line-height: 1; } .experience-badge .text { font-size: 1rem; display: block; } .about-content { flex: 1; } .about-text { margin-bottom: 30px; color: var(--gray-color); } .about-features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-bottom: 30px; } .feature { padding: 20px; border-radius: 10px; background-color: var(--white-color); box-shadow: var(--box-shadow); transition: var(--transition); } .feature:hover { transform: translateY(-5px); } .feature i { font-size: 2rem; color: var(--primary-color); margin-bottom: 15px; } .feature h3 { font-size: 1.2rem; margin-bottom: 10px; } .feature p { color: var(--gray-color); font-size: 0.9rem; } /* Services Section Styles */ .services { padding: 100px 0; background-color: var(--white-color); } .services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; } .service-card { background-color: var(--light-color); border-radius: 10px; padding: 30px; text-align: center; transition: var(--transition); box-shadow: var(--box-shadow); } .service-card:hover { transform: translateY(-10px); background-color: var(--primary-color); color: var(--white-color); } .service-card:hover p { color: rgba(255, 255, 255, 0.8); } .service-card:hover .read-more { color: var(--white-color); } .service-icon { width: 80px; height: 80px; background-color: var(--white-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; transition: var(--transition); } .service-card:hover .service-icon { background-color: rgba(255, 255, 255, 0.2); } .service-icon i { font-size: 2rem; color: var(--primary-color); } .service-card:hover .service-icon i { color: var(--white-color); } .service-card h3 { margin-bottom: 15px; font-size: 1.5rem; } .service-card p { margin-bottom: 20px; color: var(--gray-color); transition: var(--transition); } .read-more { display: inline-flex; align-items: center; gap: 5px; font-weight: 500; color: var(--primary-color); } .service-card:hover .read-more { color: var(--white-color); } /* Team Section Styles */ .team { padding: 100px 0; background-color: var(--light-color); } .team-slider { display: flex; gap: 30px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; padding-bottom: 30px; margin-bottom: 30px; } .team-slider::-webkit-scrollbar { height: 8px; } .team-slider::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 10px; } .team-slider::-webkit-scrollbar-thumb { background: var(--primary-color); border-radius: 10px; } .team-member { min-width: 300px; scroll-snap-align: start; background-color: var(--white-color); border-radius: 10px; overflow: hidden; box-shadow: var(--box-shadow); transition: var(--transition); } .team-member:hover { transform: translateY(-10px); } .member-image { position: relative; height: 350px; overflow: hidden; } .member-image img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition); } .team-member:hover .member-image img { transform: scale(1.1); } .social-links { position: absolute; bottom: -50px; left: 0; width: 100%; display: flex; justify-content: center; gap: 15px; padding: 15px 0; background-color: rgba(45, 156, 219, 0.8); transition: var(--transition); } .team-member:hover .social-links { bottom: 0; } .social-links a { width: 35px; height: 35px; background-color: var(--white-color); color: var(--primary-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: var(--transition); } .social-links a:hover { background-color: var(--primary-color); color: var(--white-color); } .member-info { padding: 20px; text-align: center; } .member-info h3 { margin-bottom: 5px; font-size: 1.3rem; } .member-info p { color: var(--gray-color); } .slider-controls { display: flex; justify-content: center; gap: 15px; } .slider-controls button { width: 40px; height: 40px; border-radius: 50%; background-color: var(--primary-color); color: var(--white-color); border: none; cursor: pointer; transition: var(--transition); display: flex; align-items: center; justify-content: center; } .slider-controls button:hover { background-color: var(--secondary-color); transform: scale(1.1); } /* Testimonials Section Styles */ .testimonials { padding: 100px 0; background-color: var(--white-color); } .testimonials-slider { display: flex; gap: 30px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; padding-bottom: 30px; margin-bottom: 30px; } .testimonials-slider::-webkit-scrollbar { height: 8px; } .testimonials-slider::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 10px; } .testimonials-slider::-webkit-scrollbar-thumb { background: var(--primary-color); border-radius: 10px; } .testimonial { min-width: 350px; scroll-snap-align: start; background-color: var(--light-color); border-radius: 10px; padding: 30px; box-shadow: var(--box-shadow); } .quote-icon { font-size: 2rem; color: var(--primary-color); margin-bottom: 20px; } .testimonial-text { font-style: italic; margin-bottom: 25px; color: var(--gray-color); } .patient-info { display: flex; align-items: center; gap: 15px; } .patient-info img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; } .patient-info h4 { margin-bottom: 5px; } .patient-info p { color: var(--gray-color); font-size: 0.9rem; } .testimonial-dots { display: flex; justify-content: center; gap: 10px; } .testimonial-dots .dot { width: 12px; height: 12px; border-radius: 50%; background-color: #ccc; cursor: pointer; transition: var(--transition); } .testimonial-dots .dot.active { background-color: var(--primary-color); transform: scale(1.2); } /* Gallery Section Styles */ .gallery { padding: 100px 0; 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; height: 250px; box-shadow: var(--box-shadow); } .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-color: rgba(45, 156, 219, 0.8); display: flex; align-items: center; justify-content: center; opacity: 0; transition: var(--transition); } .gallery-item:hover .gallery-overlay { opacity: 1; } .gallery-overlay i { font-size: 2.5rem; color: var(--white-color); } /* Blog Section Styles */ .blog { padding: 100px 0; background-color: var(--white-color); } .blog-posts { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 30px; } .blog-post { background-color: var(--light-color); border-radius: 10px; overflow: hidden; box-shadow: var(--box-shadow); transition: var(--transition); } .blog-post:hover { transform: translateY(-10px); } .post-image { position: relative; height: 250px; overflow: hidden; } .post-image img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition); } .blog-post:hover .post-image img { transform: scale(1.1); } .post-date { position: absolute; top: 20px; right: 20px; background-color: var(--primary-color); color: var(--white-color); padding: 10px 15px; border-radius: 5px; text-align: center; line-height: 1; } .post-date span:first-child { font-size: 1.5rem; font-weight: 700; display: block; } .post-date span:last-child { font-size: 0.9rem; text-transform: uppercase; } .post-content { padding: 25px; } .post-content h3 { margin-bottom: 15px; font-size: 1.3rem; } .post-content h3 a:hover { color: var(--primary-color); } .post-content p { margin-bottom: 20px; color: var(--gray-color); } /* Contact Section Styles */ .contact { padding: 100px 0; background-color: var(--light-color); } .contact-content { display: flex; gap: 50px; } .contact-info { flex: 1; } .info-item { display: flex; gap: 20px; margin-bottom: 30px; } .info-item i { font-size: 1.5rem; color: var(--primary-color); margin-top: 5px; } .info-item h3 { margin-bottom: 10px; font-size: 1.2rem; } .info-item p { color: var(--gray-color); } .contact-form { flex: 1; background-color: var(--white-color); padding: 40px; border-radius: 10px; box-shadow: var(--box-shadow); } .contact-form h3 { font-size: 1.5rem; margin-bottom: 20px; } .form-group { margin-bottom: 20px; } .form-group input, .form-group select, .form-group textarea { width: 100%; padding: 12px 15px; border: 1px solid #ddd; border-radius: 5px; font-family: 'Poppins', sans-serif; font-size: 1rem; transition: var(--transition); } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--primary-color); outline: none; box-shadow: 0 0 0 3px rgba(45, 156, 219, 0.2); } .form-group textarea { resize: vertical; min-height: 120px; } /* Newsletter Section Styles */ .newsletter { padding: 60px 0; background-color: var(--primary-color); color: var(--white-color); text-align: center; } .newsletter h2 { font-size: 2rem; margin-bottom: 15px; } .newsletter p { margin-bottom: 30px; font-size: 1.1rem; opacity: 0.9; } .newsletter-form { display: flex; max-width: 600px; margin: 0 auto; } .newsletter-form input { flex: 1; padding: 15px 20px; border: none; border-radius: 50px 0 0 50px; font-size: 1rem; } .newsletter-form input:focus { outline: none; } .newsletter-form button { border-radius: 0 50px 50px 0; padding: 15px 30px; } /* Footer Styles */ .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: 50px; } .footer-col h3 { font-size: 1.5rem; margin-bottom: 25px; position: relative; padding-bottom: 10px; } .footer-col h3::after { content: ''; position: absolute; bottom: 0; left: 0; width: 50px; height: 2px; background-color: var(--primary-color); } .footer-col p { margin-bottom: 20px; opacity: 0.8; } .social-links { display: flex; gap: 15px; } .social-links a { width: 40px; height: 40px; background-color: rgba(255, 255, 255, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: var(--transition); } .social-links a:hover { background-color: var(--primary-color); transform: translateY(-5px); } .footer-col ul li { margin-bottom: 15px; } .footer-col ul li a:hover { color: var(--primary-color); padding-left: 5px; } .footer-col ul li i { margin-right: 10px; color: var(--primary-color); } .footer-bottom { padding: 20px 0; border-top: 1px solid rgba(255, 255, 255, 0.1); text-align: center; } .footer-bottom p { opacity: 0.8; margin-bottom: 10px; } .footer-links { display: flex; justify-content: center; gap: 20px; } .footer-links a:hover { color: var(--primary-color); } /* Back to Top Button */ .back-to-top { position: fixed; bottom: 30px; right: 30px; width: 50px; height: 50px; background-color: var(--primary-color); color: var(--white-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; box-shadow: var(--box-shadow); opacity: 0; visibility: hidden; transition: var(--transition); z-index: 999; } .back-to-top.active { opacity: 1; visibility: visible; } .back-to-top:hover { background-color: var(--secondary-color); transform: translateY(-5px); } /* Animations */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInRight { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-20px); } 60% { transform: translateY(-10px); } } /* Responsive Styles */ @media (max-width: 992px) { .hero .container { flex-direction: column; } .hero-content { text-align: center; margin-bottom: 50px; } .hero-buttons { justify-content: center; } .about .container { flex-direction: column; } .about-image { margin-bottom: 50px; } .contact-content { flex-direction: column; } .contact-info { margin-bottom: 50px; } } @media (max-width: 768px) { .navbar { position: fixed; top: 80px; left: -100%; width: 100%; height: calc(100vh - 80px); background-color: var(--white-color); flex-direction: column; align-items: center; justify-content: center; gap: 30px; transition: var(--transition); } .navbar.active { left: 0; } .menu-btn { display: flex; } .section-title { font-size: 2rem; } .hero-title { font-size: 2.5rem; } .hero-buttons { flex-direction: column; gap: 15px; } .about-features { grid-template-columns: 1fr; } .footer-content { grid-template-columns: 1fr; } .footer-col { text-align: center; } .footer-col h3::after { left: 50%; transform: translateX(-50%); } .social-links { justify-content: center; } } @media (max-width: 576px) { .section-title { font-size: 1.8rem; } .hero-title { font-size: 2rem; } .hero-subtitle { font-size: 1rem; } .btn { padding: 10px 20px; } .experience-badge { right: 0; } }
JavaScript
document.addEventListener('DOMContentLoaded', function() { // Mobile Menu Toggle const menuBtn = document.querySelector('.menu-btn'); const navbar = document.querySelector('.navbar'); menuBtn.addEventListener('click', function() { menuBtn.classList.toggle('active'); navbar.classList.toggle('active'); }); // Close mobile menu when clicking a link document.querySelectorAll('.navbar a').forEach(link => { link.addEventListener('click', () => { menuBtn.classList.remove('active'); navbar.classList.remove('active'); }); }); // Header scroll effect window.addEventListener('scroll', function() { const header = document.querySelector('.header'); header.classList.toggle('scrolled', window.scrollY > 50); }); // Back to top button const backToTopBtn = document.querySelector('.back-to-top'); window.addEventListener('scroll', function() { if (window.pageYOffset > 300) { backToTopBtn.classList.add('active'); } else { backToTopBtn.classList.remove('active'); } }); backToTopBtn.addEventListener('click', function(e) { e.preventDefault(); window.scrollTo({top: 0, behavior: 'smooth'}); }); // Team Slider const teamSlider = document.querySelector('.team-slider'); const prevBtn = document.querySelector('.prev-btn'); const nextBtn = document.querySelector('.next-btn'); let isDragging = false; let startPos = 0; let currentTranslate = 0; let prevTranslate = 0; let animationID; let currentIndex = 0; teamSlider.addEventListener('mousedown', dragStart); teamSlider.addEventListener('touchstart', dragStart); teamSlider.addEventListener('mousemove', drag); teamSlider.addEventListener('touchmove', drag); teamSlider.addEventListener('mouseup', dragEnd); teamSlider.addEventListener('mouseleave', dragEnd); teamSlider.addEventListener('touchend', dragEnd); // Disable context menu teamSlider.addEventListener('contextmenu', (e) => { e.preventDefault(); }); prevBtn.addEventListener('click', () => { if (currentIndex > 0) { currentIndex--; setPositionByIndex(); } }); nextBtn.addEventListener('click', () => { const maxIndex = teamSlider.childElementCount - 1; if (currentIndex < maxIndex) { currentIndex++; setPositionByIndex(); } }); function dragStart(e) { if (e.type === 'touchstart') { startPos = e.touches[0].clientX; } else { startPos = e.clientX; e.preventDefault(); } isDragging = true; animationID = requestAnimationFrame(animation); teamSlider.classList.add('grabbing'); } function drag(e) { if (isDragging) { const currentPosition = e.type === 'touchmove' ? e.touches[0].clientX : e.clientX; const diff = currentPosition - startPos; currentTranslate = prevTranslate + diff; } } function dragEnd() { cancelAnimationFrame(animationID); isDragging = false; teamSlider.classList.remove('grabbing'); const movedBy = currentTranslate - prevTranslate; if (movedBy < -100 && currentIndex < teamSlider.childElementCount - 1) { currentIndex++; } if (movedBy > 100 && currentIndex > 0) { currentIndex--; } setPositionByIndex(); } function animation() { setSliderPosition(); if (isDragging) requestAnimationFrame(animation); } function setPositionByIndex() { const slideWidth = teamSlider.children[0].offsetWidth + 30; // 30px gap currentTranslate = currentIndex * -slideWidth; prevTranslate = currentTranslate; setSliderPosition(); } function setSliderPosition() { teamSlider.style.transform = `translateX(${currentTranslate}px)`; } // Testimonials Slider const testimonialsSlider = document.querySelector('.testimonials-slider'); const testimonialDots = document.querySelector('.testimonial-dots'); const testimonials = document.querySelectorAll('.testimonial'); // Create dots testimonials.forEach((_, index) => { const dot = document.createElement('div'); dot.classList.add('dot'); if (index === 0) dot.classList.add('active'); dot.addEventListener('click', () => { goToTestimonial(index); }); testimonialDots.appendChild(dot); }); let testimonialIndex = 0; const testimonialWidth = testimonials[0].offsetWidth + 30; // 30px gap function goToTestimonial(index) { testimonialIndex = index; testimonialsSlider.style.transform = `translateX(-${testimonialIndex * testimonialWidth}px)`; // Update dots document.querySelectorAll('.testimonial-dots .dot').forEach((dot, i) => { dot.classList.toggle('active', i === testimonialIndex); }); } // Auto slide testimonials let testimonialInterval = setInterval(() => { testimonialIndex = (testimonialIndex + 1) % testimonials.length; goToTestimonial(testimonialIndex); }, 5000); // Pause auto slide on hover testimonialsSlider.addEventListener('mouseenter', () => { clearInterval(testimonialInterval); }); testimonialsSlider.addEventListener('mouseleave', () => { testimonialInterval = setInterval(() => { testimonialIndex = (testimonialIndex + 1) % testimonials.length; goToTestimonial(testimonialIndex); }, 5000); }); // Smooth scroll 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' }); } }); }); // Animate elements on scroll const animateOnScroll = function() { const elements = document.querySelectorAll('.service-card, .team-member, .blog-post, .gallery-item, .feature'); elements.forEach(element => { const elementPosition = element.getBoundingClientRect().top; const windowHeight = window.innerHeight; if (elementPosition < windowHeight - 100) { element.classList.add('animated'); } }); }; window.addEventListener('scroll', animateOnScroll); animateOnScroll(); // Run once on page load // Form submission const appointmentForm = document.getElementById('appointmentForm'); if (appointmentForm) { appointmentForm.addEventListener('submit', function(e) { e.preventDefault(); // Get form values const name = document.getElementById('name').value; const email = document.getElementById('email').value; const phone = document.getElementById('phone').value; const service = document.getElementById('service').value; const message = document.getElementById('message').value; // Here you would typically send this data to a server console.log('Appointment booked:', {name, email, phone, service, message}); // Show success message alert('Thank you for booking an appointment! We will contact you shortly to confirm.'); // Reset form appointmentForm.reset(); }); } // Newsletter form const newsletterForm = document.querySelector('.newsletter-form'); if (newsletterForm) { newsletterForm.addEventListener('submit', function(e) { e.preventDefault(); const email = this.querySelector('input[type="email"]').value; // Here you would typically send this data to a server console.log('Newsletter subscription:', {email}); // Show success message alert('Thank you for subscribing to our newsletter!'); // Reset form this.reset(); }); } // Gallery lightbox (would need additional HTML/CSS for full implementation) const galleryItems = document.querySelectorAll('.gallery-item'); galleryItems.forEach(item => { item.addEventListener('click', function() { // In a real implementation, this would open a lightbox with the full image console.log('Gallery item clicked:', this.querySelector('img').src); }); }); });
Output Preview
Desktop
Mobile
Fullscreen
