Dental Clinic 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 Clinic</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css"> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet"> <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="icons"> <div id="menu-btn" class="fas fa-bars"></div> <a href="#" class="btn">Book Appointment</a> </div> </div> </header> <!-- Hero Section --> <section class="home" id="home"> <div class="container"> <div class="content"> <h3>Your Perfect Smile Starts Here</h3> <h1>Professional Dental Care For The Whole Family</h1> <p>We provide high-quality dental services with modern technology and a gentle touch.</p> <div class="buttons"> <a href="#" class="btn">Book Appointment</a> <a href="#services" class="btn btn-outline">Our Services</a> </div> </div> <div class="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"> </div> </div> </section> <!-- Appointment Banner --> <section class="appointment-banner"> <div class="container"> <div class="content"> <h3>Need an Emergency Dental Care?</h3> <p>Call us now or book your appointment online</p> </div> <div class="contact-info"> <div class="phone"> <i class="fas fa-phone"></i> <span>+1 (555) 123-4567</span> </div> <a href="#" class="btn">Book Now</a> </div> </div> </section> <!-- About Section --> <section class="about" id="about"> <div class="container"> <div class="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> <div class="content"> <span class="section-subtitle">About Us</span> <h2 class="section-title">We Care About Your Dental Health</h2> <p>BrightSmile Dental Clinic has been serving the community for over 15 years with exceptional dental care. Our team of experienced professionals is dedicated to providing personalized treatment in a comfortable environment.</p> <div class="features"> <div class="feature-box"> <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-box"> <i class="fas fa-user-md"></i> <h3>Expert Dentists</h3> <p>Our team consists of highly qualified and experienced dental specialists.</p> </div> <div class="feature-box"> <i class="fas fa-shield-alt"></i> <h3>Safety First</h3> <p>We follow strict sterilization protocols to ensure patient safety.</p> </div> <div class="feature-box"> <i class="fas fa-smile"></i> <h3>Painless Procedures</h3> <p>Our gentle approach minimizes discomfort during treatments.</p> </div> </div> </div> </div> </section> <!-- Services Section --> <section class="services" id="services"> <div class="container"> <span class="section-subtitle">Our Services</span> <h2 class="section-title">Comprehensive Dental Care</h2> <p class="section-description">We offer a wide range of dental services to meet all your oral health needs.</p> <div class="services-grid"> <div class="service-card"> <div class="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="icon"> <i class="fas fa-teeth"></i> </div> <h3>Cosmetic Dentistry</h3> <p>Teeth whitening, veneers, and bonding 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="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="icon"> <i class="fas fa-implant"></i> </div> <h3>Dental Implants</h3> <p>Permanent solution 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="icon"> <i class="fas fa-tooth"></i> </div> <h3>Root Canal Therapy</h3> <p>Save infected teeth with our gentle and effective root canal treatments.</p> <a href="#" class="read-more">Read More <i class="fas fa-arrow-right"></i></a> </div> <div class="service-card"> <div class="icon"> <i class="fas fa-child"></i> </div> <h3>Pediatric Dentistry</h3> <p>Specialized dental care for children in a fun and friendly environment.</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"> <span class="section-subtitle">Our Team</span> <h2 class="section-title">Meet Our Expert Dentists</h2> <p class="section-description">Our team of highly skilled professionals is dedicated to providing you with the best dental care.</p> <div class="team-slider swiper"> <div class="swiper-wrapper"> <div class="swiper-slide"> <div class="team-member"> <div class="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> <a href="#"><i class="fab fa-instagram"></i></a> </div> </div> <div class="content"> <h3>Dr. Sarah Johnson</h3> <span>General Dentist</span> <p>With over 12 years of experience, Dr. Johnson specializes in preventive dentistry and cosmetic procedures.</p> </div> </div> </div> <div class="swiper-slide"> <div class="team-member"> <div class="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> <a href="#"><i class="fab fa-instagram"></i></a> </div> </div> <div class="content"> <h3>Dr. Michael Chen</h3> <span>Orthodontist</span> <p>Dr. Chen is a board-certified orthodontist with expertise in braces and Invisalign treatments.</p> </div> </div> </div> <div class="swiper-slide"> <div class="team-member"> <div class="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> <a href="#"><i class="fab fa-instagram"></i></a> </div> </div> <div class="content"> <h3>Dr. Emily Rodriguez</h3> <span>Pediatric Dentist</span> <p>Dr. Rodriguez creates a fun and comfortable environment for children's dental visits.</p> </div> </div> </div> <div class="swiper-slide"> <div class="team-member"> <div class="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> <a href="#"><i class="fab fa-instagram"></i></a> </div> </div> <div class="content"> <h3>Dr. James Wilson</h3> <span>Oral Surgeon</span> <p>Specializing in dental implants and complex extractions with minimal discomfort.</p> </div> </div> </div> </div> <div class="swiper-pagination"></div> </div> </div> </section> <!-- Testimonials Section --> <section class="testimonials" id="testimonials"> <div class="container"> <span class="section-subtitle">Testimonials</span> <h2 class="section-title">What Our Patients Say</h2> <p class="section-description">Hear from our satisfied patients about their experiences at BrightSmile Dental Clinic.</p> <div class="testimonial-slider swiper"> <div class="swiper-wrapper"> <div class="swiper-slide"> <div class="testimonial-card"> <div class="rating"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> </div> <p class="testimonial-text">"I was terrified of dentists before visiting BrightSmile. Dr. Johnson was so gentle and understanding. My root canal was completely painless!"</p> <div class="patient-info"> <img src="https://randomuser.me/api/portraits/women/43.jpg" alt="Jennifer L."> <div class="details"> <h4>Jennifer L.</h4> <span>Patient since 2018</span> </div> </div> </div> </div> <div class="swiper-slide"> <div class="testimonial-card"> <div class="rating"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> </div> <p class="testimonial-text">"The Invisalign treatment with Dr. Chen transformed my smile. The entire staff is professional and friendly. Highly recommend!"</p> <div class="patient-info"> <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Robert T."> <div class="details"> <h4>Robert T.</h4> <span>Patient since 2020</span> </div> </div> </div> </div> <div class="swiper-slide"> <div class="testimonial-card"> <div class="rating"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star-half-alt"></i> </div> <p class="testimonial-text">"My kids actually look forward to their dental visits thanks to Dr. Rodriguez. She makes the experience fun and educational."</p> <div class="patient-info"> <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Maria G."> <div class="details"> <h4>Maria G.</h4> <span>Patient since 2019</span> </div> </div> </div> </div> <div class="swiper-slide"> <div class="testimonial-card"> <div class="rating"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> </div> <p class="testimonial-text">"After years of hiding my smile, the veneers I got at BrightSmile gave me my confidence back. Worth every penny!"</p> <div class="patient-info"> <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="David K."> <div class="details"> <h4>David K.</h4> <span>Patient since 2021</span> </div> </div> </div> </div> </div> <div class="swiper-pagination"></div> </div> </div> </section> <!-- Gallery Section --> <section class="gallery" id="gallery"> <div class="container"> <span class="section-subtitle">Gallery</span> <h2 class="section-title">Our Dental Clinic</h2> <p class="section-description">Take a virtual tour of our modern, comfortable dental facility.</p> <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 Clinic"> <div class="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="overlay"> <i class="fas fa-search-plus"></i> </div> </div> <div class="gallery-item"> <img src="https://images.unsplash.com/photo-1564429093195-9f4f7fe425e5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Dental Chair"> <div class="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="Dentist Working"> <div class="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="Waiting Area"> <div class="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 Dental Care"> <div class="overlay"> <i class="fas fa-search-plus"></i> </div> </div> </div> </div> </section> <!-- Blog Section --> <section class="blog" id="blog"> <div class="container"> <span class="section-subtitle">Our Blog</span> <h2 class="section-title">Latest Dental News & Tips</h2> <p class="section-description">Stay informed with our dental health articles and expert advice.</p> <div class="blog-grid"> <article class="blog-card"> <div class="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="Blog Post"> <span class="date">June 15, 2023</span> </div> <div class="content"> <h3><a href="#">The Importance of Regular Dental Checkups</a></h3> <p>Learn why biannual 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-card"> <div class="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="Blog Post"> <span class="date">May 28, 2023</span> </div> <div class="content"> <h3><a href="#">Invisalign vs. Traditional Braces: Which is Right for You?</a></h3> <p>Compare the pros and cons of these orthodontic treatments to make an informed decision.</p> <a href="#" class="read-more">Read More <i class="fas fa-arrow-right"></i></a> </div> </article> <article class="blog-card"> <div class="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="Blog Post"> <span class="date">May 10, 2023</span> </div> <div class="content"> <h3><a href="#">How to Overcome Dental Anxiety</a></h3> <p>Practical tips to help you feel more comfortable during your dental visits.</p> <a href="#" class="read-more">Read More <i class="fas fa-arrow-right"></i></a> </div> </article> </div> <div class="view-all"> <a href="#" class="btn">View All Articles</a> </div> </div> </section> <!-- Contact Section --> <section class="contact" id="contact"> <div class="container"> <div class="content"> <span class="section-subtitle">Contact Us</span> <h2 class="section-title">Schedule Your Visit</h2> <p class="section-description">We're here to answer your questions and help you achieve optimal oral health.</p> <div class="contact-info"> <div class="contact-item"> <div class="icon"> <i class="fas fa-map-marker-alt"></i> </div> <div class="details"> <h3>Location</h3> <p>123 Dental Avenue, Suite 456<br>New York, NY 10001</p> </div> </div> <div class="contact-item"> <div class="icon"> <i class="fas fa-phone-alt"></i> </div> <div class="details"> <h3>Phone</h3> <p>+1 (555) 123-4567</p> <p>+1 (555) 987-6543 (Emergency)</p> </div> </div> <div class="contact-item"> <div class="icon"> <i class="fas fa-envelope"></i> </div> <div class="details"> <h3>Email</h3> <p>info@brightsmile.com</p> <p>appointments@brightsmile.com</p> </div> </div> <div class="contact-item"> <div class="icon"> <i class="fas fa-clock"></i> </div> <div class="details"> <h3>Hours</h3> <p>Monday - Friday: 8:00 AM - 7:00 PM</p> <p>Saturday: 9:00 AM - 4:00 PM</p> <p>Sunday: Emergency Only</p> </div> </div> </div> </div> <div class="form-container"> <form class="contact-form"> <div class="form-group"> <input type="text" placeholder="Your Name" required> </div> <div class="form-group"> <input type="email" placeholder="Your Email" required> </div> <div class="form-group"> <input type="tel" placeholder="Your Phone"> </div> <div class="form-group"> <select required> <option value="" disabled selected>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> <option value="other">Other</option> </select> </div> <div class="form-group"> <textarea placeholder="Your Message" rows="5"></textarea> </div> <button type="submit" class="btn">Send Message</button> </form> </div> </div> </section> <!-- Footer --> <footer class="footer"> <div class="container"> <div class="footer-grid"> <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="#blog">Blog</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> <li><a href="#">Emergency Care</a></li> </ul> </div> <div class="footer-col"> <h3>Newsletter</h3> <p>Subscribe to our newsletter for dental tips and special offers.</p> <form class="newsletter-form"> <input type="email" placeholder="Your Email" required> <button type="submit"><i class="fas fa-paper-plane"></i></button> </form> </div> </div> <div class="footer-bottom"> <p>© 2023 BrightSmile Dental Clinic. All Rights Reserved.</p> <div class="links"> <a href="#">Privacy Policy</a> <a href="#">Terms of Service</a> </div> </div> </div> </footer> <!-- Back to Top Button --> <a href="#home" class="back-to-top" id="backToTop"> <i class="fas fa-arrow-up"></i> </a> <script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script> <script src="https://unpkg.com/scrollreveal"></script> <script src="script.js"></script> </body> </html>
CSS
/* Global Styles */ :root { --primary: #2fa1e6; --primary-dark: #1e88d8; --secondary: #f48fb1; --secondary-dark: #f06292; --accent: #4fc3f7; --text: #333333; --text-light: #666666; --light: #f8f9fa; --white: #ffffff; --gray: #e9ecef; --dark-gray: #adb5bd; --shadow: 0 5px 15px rgba(0, 0, 0, 0.1); --transition: all 0.3s ease; } * { margin: 0; padding: 0; box-sizing: border-box; outline: none; border: none; text-decoration: none; list-style: none; } html { font-size: 62.5%; scroll-behavior: smooth; overflow-x: hidden; } body { font-family: 'Poppins', sans-serif; color: var(--text); background-color: var(--white); overflow-x: hidden; line-height: 1.6; } .container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; } section { padding: 8rem 0; } .btn { display: inline-block; padding: 1.2rem 2.5rem; background-color: var(--primary); color: var(--white); font-size: 1.6rem; font-weight: 500; border-radius: 5rem; cursor: pointer; transition: var(--transition); text-align: center; } .btn:hover { background-color: var(--primary-dark); transform: translateY(-3px); box-shadow: var(--shadow); } .btn-outline { background-color: transparent; border: 1px solid var(--primary); color: var(--primary); } .btn-outline:hover { background-color: var(--primary); color: var(--white); } .section-subtitle { display: block; font-size: 1.6rem; font-weight: 500; color: var(--primary); margin-bottom: 1rem; text-transform: uppercase; letter-spacing: 1px; } .section-title { font-size: 3.5rem; font-weight: 700; color: var(--text); margin-bottom: 1.5rem; line-height: 1.2; } .section-description { font-size: 1.6rem; color: var(--text-light); margin-bottom: 3rem; max-width: 600px; } /* Header Styles */ .header { position: fixed; top: 0; left: 0; right: 0; padding: 2rem 0; background-color: var(--white); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); z-index: 1000; transition: var(--transition); } .header.scrolled { padding: 1.5rem 0; background-color: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); } .header .container { display: flex; align-items: center; justify-content: space-between; } .logo { font-size: 2.5rem; font-weight: 700; color: var(--text); } .logo span { color: var(--primary); } .navbar a { font-size: 1.6rem; color: var(--text); margin: 0 1.5rem; font-weight: 500; transition: var(--transition); position: relative; } .navbar a:hover, .navbar a.active { color: var(--primary); } .navbar a::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 0; height: 2px; background-color: var(--primary); transition: var(--transition); } .navbar a:hover::after, .navbar a.active::after { width: 100%; } .icons { display: flex; align-items: center; gap: 2rem; } #menu-btn { font-size: 2.5rem; color: var(--text); cursor: pointer; display: none; } /* Hero Section */ .home { padding-top: 12rem; background: linear-gradient(to right, #f8f9fa 50%, #ffffff 50%); } .home .container { display: flex; align-items: center; min-height: calc(100vh - 12rem); } .home .content { flex: 1 1 50%; padding-right: 5rem; } .home .content h3 { font-size: 2rem; color: var(--primary); margin-bottom: 1rem; } .home .content h1 { font-size: 5rem; font-weight: 700; color: var(--text); margin-bottom: 2rem; line-height: 1.2; } .home .content p { font-size: 1.6rem; color: var(--text-light); margin-bottom: 3rem; } .home .buttons { display: flex; gap: 2rem; } .home .image { flex: 1 1 50%; position: relative; animation: float 3s ease-in-out infinite; } .home .image img { width: 100%; border-radius: 1rem; box-shadow: var(--shadow); } @keyframes float { 0% { transform: translateY(0); } 50% { transform: translateY(-1.5rem); } 100% { transform: translateY(0); } } /* Appointment Banner */ .appointment-banner { background-color: var(--primary); color: var(--white); padding: 3rem 0; margin-top: -5rem; position: relative; z-index: 1; border-radius: 1rem; box-shadow: var(--shadow); } .appointment-banner .container { display: flex; align-items: center; justify-content: space-between; } .appointment-banner .content h3 { font-size: 2.2rem; margin-bottom: 0.5rem; } .appointment-banner .content p { font-size: 1.6rem; opacity: 0.9; } .appointment-banner .contact-info { display: flex; align-items: center; gap: 3rem; } .appointment-banner .phone { display: flex; align-items: center; gap: 1rem; font-size: 1.8rem; font-weight: 500; } .appointment-banner .phone i { font-size: 2.5rem; } .appointment-banner .btn { background-color: var(--white); color: var(--primary); } .appointment-banner .btn:hover { background-color: var(--gray); color: var(--primary-dark); } /* About Section */ .about .container { display: flex; align-items: center; gap: 5rem; } .about .image { flex: 1 1 50%; position: relative; } .about .image img { width: 100%; border-radius: 1rem; box-shadow: var(--shadow); } .about .content { flex: 1 1 50%; } .about .features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; margin-top: 3rem; } .about .feature-box { padding: 2rem; background-color: var(--light); border-radius: 1rem; transition: var(--transition); } .about .feature-box:hover { transform: translateY(-5px); box-shadow: var(--shadow); } .about .feature-box i { font-size: 3rem; color: var(--primary); margin-bottom: 1.5rem; } .about .feature-box h3 { font-size: 1.8rem; margin-bottom: 1rem; } .about .feature-box p { font-size: 1.4rem; color: var(--text-light); } /* Services Section */ .services { background-color: var(--light); } .services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr)); gap: 3rem; } .service-card { background-color: var(--white); padding: 3rem; border-radius: 1rem; box-shadow: var(--shadow); transition: var(--transition); text-align: center; } .service-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); } .service-card .icon { width: 8rem; height: 8rem; background-color: rgba(47, 161, 230, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 2rem; transition: var(--transition); } .service-card:hover .icon { background-color: var(--primary); color: var(--white); } .service-card .icon i { font-size: 3.5rem; color: var(--primary); transition: var(--transition); } .service-card:hover .icon i { color: var(--white); } .service-card h3 { font-size: 2rem; margin-bottom: 1.5rem; } .service-card p { font-size: 1.5rem; color: var(--text-light); margin-bottom: 2rem; } .read-more { display: inline-flex; align-items: center; font-size: 1.4rem; color: var(--primary); font-weight: 500; transition: var(--transition); } .read-more i { margin-left: 0.5rem; transition: var(--transition); } .read-more:hover { color: var(--primary-dark); } .read-more:hover i { transform: translateX(5px); } /* Team Section */ .team-slider { padding: 3rem; margin: 0 -3rem; } .team-member { background-color: var(--white); border-radius: 1rem; overflow: hidden; box-shadow: var(--shadow); transition: var(--transition); margin-bottom: 3rem; } .team-member:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); } .team-member .image { position: relative; overflow: hidden; height: 30rem; } .team-member .image img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition); } .team-member:hover .image img { transform: scale(1.05); } .team-member .social-links { position: absolute; bottom: -6rem; left: 0; right: 0; display: flex; justify-content: center; gap: 1rem; transition: var(--transition); } .team-member:hover .social-links { bottom: 2rem; } .team-member .social-links a { width: 4rem; height: 4rem; background-color: var(--white); color: var(--primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; transition: var(--transition); } .team-member .social-links a:hover { background-color: var(--primary); color: var(--white); } .team-member .content { padding: 2.5rem; text-align: center; } .team-member .content h3 { font-size: 2rem; margin-bottom: 0.5rem; } .team-member .content span { display: block; font-size: 1.4rem; color: var(--primary); margin-bottom: 1.5rem; } .team-member .content p { font-size: 1.4rem; color: var(--text-light); } .swiper-pagination { position: relative; margin-top: 4rem; } .swiper-pagination-bullet { width: 1.2rem; height: 1.2rem; background-color: var(--dark-gray); opacity: 1; } .swiper-pagination-bullet-active { background-color: var(--primary); } /* Testimonials Section */ .testimonial-slider { padding: 3rem; margin: 0 -3rem; } .testimonial-card { background-color: var(--white); padding: 3rem; border-radius: 1rem; box-shadow: var(--shadow); position: relative; } .testimonial-card::before { content: '\201C'; position: absolute; top: 3rem; left: 3rem; font-size: 8rem; color: rgba(47, 161, 230, 0.1); font-family: sans-serif; line-height: 1; } .testimonial-card .rating { margin-bottom: 2rem; color: #ffc107; font-size: 1.6rem; } .testimonial-card .testimonial-text { font-size: 1.6rem; font-style: italic; color: var(--text); margin-bottom: 3rem; position: relative; z-index: 1; } .testimonial-card .patient-info { display: flex; align-items: center; gap: 1.5rem; } .testimonial-card .patient-info img { width: 6rem; height: 6rem; border-radius: 50%; object-fit: cover; border: 3px solid var(--primary); } .testimonial-card .patient-info .details h4 { font-size: 1.8rem; margin-bottom: 0.5rem; } .testimonial-card .patient-info .details span { font-size: 1.4rem; color: var(--text-light); } /* Gallery Section */ .gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr)); gap: 2rem; } .gallery-item { position: relative; border-radius: 1rem; overflow: hidden; height: 25rem; } .gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition); } .gallery-item:hover img { transform: scale(1.1); } .gallery-item .overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(47, 161, 230, 0.8); display: flex; align-items: center; justify-content: center; opacity: 0; transition: var(--transition); } .gallery-item:hover .overlay { opacity: 1; } .gallery-item .overlay i { font-size: 3rem; color: var(--white); } /* Blog Section */ .blog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr)); gap: 3rem; } .blog-card { background-color: var(--white); border-radius: 1rem; overflow: hidden; box-shadow: var(--shadow); transition: var(--transition); } .blog-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); } .blog-card .image { position: relative; height: 20rem; overflow: hidden; } .blog-card .image img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition); } .blog-card:hover .image img { transform: scale(1.05); } .blog-card .image .date { position: absolute; bottom: 1rem; right: 1rem; background-color: var(--primary); color: var(--white); padding: 0.5rem 1.5rem; border-radius: 5rem; font-size: 1.2rem; font-weight: 500; } .blog-card .content { padding: 2.5rem; } .blog-card .content h3 { font-size: 1.8rem; margin-bottom: 1.5rem; } .blog-card .content h3 a { color: var(--text); transition: var(--transition); } .blog-card .content h3 a:hover { color: var(--primary); } .blog-card .content p { font-size: 1.4rem; color: var(--text-light); margin-bottom: 2rem; } .view-all { text-align: center; margin-top: 5rem; } /* Contact Section */ .contact .container { display: flex; gap: 5rem; } .contact .content { flex: 1 1 50%; } .contact .form-container { flex: 1 1 50%; } .contact-info { display: grid; grid-template-columns: 1fr; gap: 2rem; } .contact-item { display: flex; gap: 2rem; padding: 2rem; background-color: var(--light); border-radius: 1rem; transition: var(--transition); } .contact-item:hover { transform: translateY(-5px); box-shadow: var(--shadow); } .contact-item .icon { width: 5rem; height: 5rem; background-color: var(--primary); color: var(--white); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2rem; } .contact-item .details h3 { font-size: 1.8rem; margin-bottom: 0.5rem; } .contact-item .details p { font-size: 1.4rem; color: var(--text-light); } .contact-form .form-group { margin-bottom: 2rem; } .contact-form input, .contact-form select, .contact-form textarea { width: 100%; padding: 1.5rem; font-size: 1.6rem; background-color: var(--light); border-radius: 0.5rem; transition: var(--transition); } .contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { background-color: var(--white); box-shadow: 0 0 0 2px var(--primary); } .contact-form textarea { resize: vertical; min-height: 15rem; } .contact-form button { width: 100%; } /* Footer */ .footer { background-color: #222; color: var(--white); padding: 8rem 0 0; } .footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr)); gap: 3rem; margin-bottom: 5rem; } .footer-col h3 { font-size: 2rem; margin-bottom: 2rem; position: relative; } .footer-col h3::after { content: ''; position: absolute; bottom: -1rem; left: 0; width: 5rem; height: 2px; background-color: var(--primary); } .footer-col p { font-size: 1.4rem; color: #aaa; margin-bottom: 2rem; } .footer-col .social-links { display: flex; gap: 1.5rem; } .footer-col .social-links a { width: 4rem; height: 4rem; background-color: #333; color: var(--white); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; transition: var(--transition); } .footer-col .social-links a:hover { background-color: var(--primary); } .footer-col ul li { margin-bottom: 1.5rem; } .footer-col ul li a { font-size: 1.4rem; color: #aaa; transition: var(--transition); display: block; } .footer-col ul li a:hover { color: var(--primary); transform: translateX(5px); } .newsletter-form { display: flex; margin-top: 2rem; } .newsletter-form input { flex: 1; padding: 1.2rem; font-size: 1.4rem; background-color: #333; color: var(--white); border-radius: 0.5rem 0 0 0.5rem; } .newsletter-form button { width: 5rem; background-color: var(--primary); color: var(--white); border-radius: 0 0.5rem 0.5rem 0; font-size: 1.6rem; cursor: pointer; transition: var(--transition); } .newsletter-form button:hover { background-color: var(--primary-dark); } .footer-bottom { padding: 2rem 0; border-top: 1px solid #333; text-align: center; } .footer-bottom p { font-size: 1.4rem; color: #aaa; margin-bottom: 1rem; } .footer-bottom .links { display: flex; justify-content: center; gap: 2rem; } .footer-bottom .links a { font-size: 1.4rem; color: #aaa; transition: var(--transition); } .footer-bottom .links a:hover { color: var(--primary); } /* Back to Top Button */ .back-to-top { position: fixed; bottom: 3rem; right: 3rem; width: 5rem; height: 5rem; background-color: var(--primary); color: var(--white); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2rem; z-index: 999; opacity: 0; visibility: hidden; transition: var(--transition); } .back-to-top.active { opacity: 1; visibility: visible; } .back-to-top:hover { background-color: var(--primary-dark); transform: translateY(-5px); } /* Responsive Styles */ @media (max-width: 991px) { html { font-size: 55%; } section { padding: 5rem 0; } .home .content h1 { font-size: 4rem; } .about .container { flex-direction: column; } .contact .container { flex-direction: column; } } @media (max-width: 768px) { #menu-btn { display: inline-block; } .navbar { position: absolute; top: 100%; left: 0; right: 0; background-color: var(--white); padding: 2rem; box-shadow: var(--shadow); clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); transition: var(--transition); } .navbar.active { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } .navbar a { display: block; margin: 2rem 0; text-align: center; } .home .container { flex-direction: column; text-align: center; } .home .content { padding-right: 0; margin-bottom: 5rem; } .home .buttons { justify-content: center; } .appointment-banner .container { flex-direction: column; text-align: center; gap: 2rem; } .appointment-banner .contact-info { flex-direction: column; gap: 2rem; } .section-title { font-size: 3rem; } } @media (max-width: 450px) { html { font-size: 50%; } .home .content h1 { font-size: 3.5rem; } .about .features { grid-template-columns: 1fr; } .services-grid { grid-template-columns: 1fr; } }
JavaScript
document.addEventListener('DOMContentLoaded', function() { // Mobile Menu Toggle const menuBtn = document.querySelector('#menu-btn'); const navbar = document.querySelector('.navbar'); menuBtn.addEventListener('click', () => { navbar.classList.toggle('active'); menuBtn.classList.toggle('fa-times'); }); // Sticky Header on Scroll window.addEventListener('scroll', () => { const header = document.querySelector('.header'); header.classList.toggle('scrolled', window.scrollY > 0); // Back to Top Button const backToTop = document.querySelector('#backToTop'); backToTop.classList.toggle('active', window.scrollY > 300); }); // Close Mobile Menu When Clicking a Link document.querySelectorAll('.navbar a').forEach(link => { link.addEventListener('click', () => { navbar.classList.remove('active'); menuBtn.classList.remove('fa-times'); }); }); // Initialize Swiper Sliders const teamSlider = new Swiper('.team-slider', { slidesPerView: 1, spaceBetween: 20, pagination: { el: '.swiper-pagination', clickable: true, }, breakpoints: { 768: { slidesPerView: 2, }, 992: { slidesPerView: 3, } } }); const testimonialSlider = new Swiper('.testimonial-slider', { slidesPerView: 1, spaceBetween: 20, pagination: { el: '.swiper-pagination', clickable: true, }, breakpoints: { 768: { slidesPerView: 2, } } }); // Scroll Reveal Animations ScrollReveal().reveal('.home .content, .about .image, .section-subtitle, .section-title, .section-description', { origin: 'top', distance: '50px', duration: 1000, delay: 200, opacity: 0, easing: 'ease-in-out', reset: true }); ScrollReveal().reveal('.home .image, .about .content, .service-card, .team-member, .testimonial-card, .gallery-item, .blog-card, .contact .content, .contact .form-container', { origin: 'bottom', distance: '50px', duration: 1000, delay: 200, opacity: 0, easing: 'ease-in-out', reset: true }); ScrollReveal().reveal('.appointment-banner', { origin: 'bottom', distance: '50px', duration: 1000, delay: 400, opacity: 0, easing: 'ease-in-out', reset: true }); // Smooth Scrolling for Anchor Links document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function(e) { e.preventDefault(); const targetId = this.getAttribute('href'); const targetElement = document.querySelector(targetId); if (targetElement) { window.scrollTo({ top: targetElement.offsetTop - 80, behavior: 'smooth' }); } }); }); // Form Submission Handling const contactForm = document.querySelector('.contact-form'); if (contactForm) { contactForm.addEventListener('submit', function(e) { e.preventDefault(); // Get form values const formData = new FormData(this); const data = Object.fromEntries(formData.entries()); // Here you would typically send the data to a server console.log('Form submitted:', data); // Show success message alert('Thank you for your message! We will contact you soon.'); this.reset(); }); } // Newsletter Form Handling const newsletterForm = document.querySelector('.newsletter-form'); if (newsletterForm) { newsletterForm.addEventListener('submit', function(e) { e.preventDefault(); const emailInput = this.querySelector('input[type="email"]'); const email = emailInput.value; // Here you would typically send the email to a server console.log('Newsletter subscription:', email); // Show success message alert('Thank you for subscribing to our newsletter!'); emailInput.value = ''; }); } // 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