Clinic Landing Page Design | QuickCoder

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Nexus Clinic - Futuristic Healthcare</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 
</head>
<body>
    
    <header id="header">
        <div class="container">
            <nav>
                <a href="#" class="logo"><i class="fas fa-heartbeat"></i>Nexus<span>Clinic</span></a>
                <div class="menu-toggle" id="menuToggle">
                    <i class="fas fa-bars"></i>
                </div>
                <ul class="nav-links" id="navLinks">
                    <li><a href="#hero">Home</a></li>
                    <li><a href="#about">About</a></li>
                    <li><a href="#services">Services</a></li>
                    <li><a href="#doctors">Doctors</a></li>
                    <li><a href="#appointment">Appointment</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
            </nav>
        </div>
    </header>

<section id="hero">
        <div class="container">
            <div class="hero-content">
                <h1>Advanced <span>Healthcare</span> For A Better Life</h1>
                <p>Experience futuristic medical care with our cutting-edge technology and expert team. Your health is our priority, and we're committed to providing personalized care for every patient.</p>
                <a href="#appointment" class="btn pulse">Book Appointment</a>
            </div>
            <div class="hero-image"></div>
        </div>
    </section>

<section id="about">
        <div class="container">
            <div class="section-title">
                <h2>About Our Clinic</h2>
            </div>
            <div class="about-content">
                <div class="about-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="Clinic Interior">
                </div>
                <div class="about-text">
                    <h3>We Provide The Best Medical Services</h3>
                    <p>Nexus Clinic is a state-of-the-art medical facility combining advanced technology with compassionate care. Our mission is to revolutionize healthcare by integrating innovative solutions with traditional medical expertise.</p>
                    <p>Founded in 2015, we've grown to become a leader in futuristic healthcare, serving thousands of patients with our unique approach to wellness and treatment.</p>
                    <div class="features">
                        <div class="feature-item">
                            <div class="feature-icon">
                                <i class="fas fa-microscope"></i>
                            </div>
                            <div class="feature-text">
                                <h4>Advanced Technology</h4>
                                <p>Cutting-edge diagnostic and treatment equipment for accurate results.</p>
                            </div>
                        </div>
                        <div class="feature-item">
                            <div class="feature-icon">
                                <i class="fas fa-user-md"></i>
                            </div>
                            <div class="feature-text">
                                <h4>Expert Doctors</h4>
                                <p>Highly qualified specialists with years of experience in their fields.</p>
                            </div>
                        </div>
                        <div class="feature-item">
                            <div class="feature-icon">
                                <i class="fas fa-heart"></i>
                            </div>
                            <div class="feature-text">
                                <h4>Personalized Care</h4>
                                <p>Tailored treatment plans designed for your unique health needs.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section id="services">
        <div class="container">
            <div class="section-title">
                <h2>Our Services</h2>
            </div>
            <div class="services-container">
                <div class="service-card">
                    <div class="service-icon">
                        <i class="fas fa-brain"></i>
                    </div>
                    <div class="service-content">
                        <h3>Neurology Care</h3>
                        <p>Comprehensive neurological evaluations and treatments using the latest diagnostic tools and therapeutic approaches.</p>
                        <a href="#" class="service-link">Learn More <i class="fas fa-arrow-right"></i></a>
                    </div>
                </div>
                <div class="service-card">
                    <div class="service-icon">
                        <i class="fas fa-heartbeat"></i>
                    </div>
                    <div class="service-content">
                        <h3>Cardiology</h3>
                        <p>Advanced cardiac care including preventive cardiology, diagnostic testing, and interventional procedures.</p>
                        <a href="#" class="service-link">Learn More <i class="fas fa-arrow-right"></i></a>
                    </div>
                </div>
                <div class="service-card">
                    <div class="service-icon">
                        <i class="fas fa-dna"></i>
                    </div>
                    <div class="service-content">
                        <h3>Genetic Testing</h3>
                        <p>State-of-the-art genetic screening and counseling to identify potential health risks and conditions.</p>
                        <a href="#" class="service-link">Learn More <i class="fas fa-arrow-right"></i></a>
                    </div>
                </div>
                <div class="service-card">
                    <div class="service-icon">
                        <i class="fas fa-robot"></i>
                    </div>
                    <div class="service-content">
                        <h3>Robotic Surgery</h3>
                        <p>Minimally invasive surgical procedures performed with precision robotic technology for faster recovery.</p>
                        <a href="#" class="service-link">Learn More <i class="fas fa-arrow-right"></i></a>
                    </div>
                </div>
                <div class="service-card">
                    <div class="service-icon">
                        <i class="fas fa-eye"></i>
                    </div>
                    <div class="service-content">
                        <h3>Laser Vision Correction</h3>
                        <p>Advanced laser eye surgery techniques to correct vision problems with remarkable accuracy.</p>
                        <a href="#" class="service-link">Learn More <i class="fas fa-arrow-right"></i></a>
                    </div>
                </div>
                <div class="service-card">
                    <div class="service-icon">
                        <i class="fas fa-x-ray"></i>
                    </div>
                    <div class="service-content">
                        <h3>3D Imaging</h3>
                        <p>High-resolution 3D imaging for precise diagnosis and treatment planning across specialties.</p>
                        <a href="#" class="service-link">Learn More <i class="fas fa-arrow-right"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section id="doctors">
        <div class="container">
            <div class="section-title">
                <h2>Our Specialist Doctors</h2>
            </div>
            <div class="doctors-container">
                <div class="doctor-card">
                    <div class="doctor-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>
                    <div class="doctor-info">
                        <h3>Dr. Sarah Johnson</h3>
                        <p>Neurologist</p>
                        <div class="doctor-social">
                            <a href="#"><i class="fab fa-twitter"></i></a>
                            <a href="#"><i class="fab fa-linkedin"></i></a>
                            <a href="#"><i class="fab fa-instagram"></i></a>
                        </div>
                    </div>
                </div>
                <div class="doctor-card">
                    <div class="doctor-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>
                    <div class="doctor-info">
                        <h3>Dr. Michael Chen</h3>
                        <p>Cardiologist</p>
                        <div class="doctor-social">
                            <a href="#"><i class="fab fa-twitter"></i></a>
                            <a href="#"><i class="fab fa-linkedin"></i></a>
                            <a href="#"><i class="fab fa-instagram"></i></a>
                        </div>
                    </div>
                </div>
                <div class="doctor-card">
                    <div class="doctor-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. Amanda Rodriguez">
                    </div>
                    <div class="doctor-info">
                        <h3>Dr. Amanda Rodriguez</h3>
                        <p>Geneticist</p>
                        <div class="doctor-social">
                            <a href="#"><i class="fab fa-twitter"></i></a>
                            <a href="#"><i class="fab fa-linkedin"></i></a>
                            <a href="#"><i class="fab fa-instagram"></i></a>
                        </div>
                    </div>
                </div>
                <div class="doctor-card">
                    <div class="doctor-image">
                        <img src="https://images.unsplash.com/photo-1527613426441-4da17471b66d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1632&q=80" alt="Dr. David Kim">
                    </div>
                    <div class="doctor-info">
                        <h3>Dr. David Kim</h3>
                        <p>Robotic Surgeon</p>
                        <div class="doctor-social">
                            <a href="#"><i class="fab fa-twitter"></i></a>
                            <a href="#"><i class="fab fa-linkedin"></i></a>
                            <a href="#"><i class="fab fa-instagram"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section id="appointment">
        <div class="container">
            <div class="section-title">
                <h2>Book an Appointment</h2>
            </div>
            <div class="appointment-container">
                <div class="appointment-image">
                    <img src="https://images.unsplash.com/photo-1576091160550-2173dba999ef?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Doctor with tablet">
                </div>
                <div class="appointment-form">
                    <h3>Schedule Your Visit</h3>
                    <form>
                        <div class="form-group">
                            <label for="name">Full Name</label>
                            <input type="text" id="name" class="form-control" placeholder="Your Name" required>
                        </div>
                        <div class="form-group">
                            <label for="email">Email Address</label>
                            <input type="email" id="email" class="form-control" placeholder="Your Email" required>
                        </div>
                        <div class="form-group">
                            <label for="phone">Phone Number</label>
                            <input type="tel" id="phone" class="form-control" placeholder="Your Phone" required>
                        </div>
                        <div class="form-group">
                            <label for="department">Department</label>
                            <select id="department" class="form-control" required>
                                <option value="">Select Department</option>
                                <option value="neurology">Neurology</option>
                                <option value="cardiology">Cardiology</option>
                                <option value="genetics">Genetics</option>
                                <option value="surgery">Robotic Surgery</option>
                                <option value="ophthalmology">Ophthalmology</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="date">Appointment Date</label>
                            <input type="date" id="date" class="form-control" required>
                        </div>
                        <button type="submit" class="btn btn-block">Book Appointment</button>
                    </form>
                </div>
            </div>
        </div>
    </section>

<section id="testimonials">
        <div class="container">
            <div class="section-title">
                <h2>Patient Testimonials</h2>
            </div>
            <div class="testimonials-container">
                <div class="testimonial-slide active">
                    <div class="testimonial-content">
                        <p>The care I received at Nexus Clinic was exceptional. The doctors used advanced diagnostic tools that identified my condition immediately, and the treatment plan was tailored perfectly to my needs. The futuristic approach to healthcare here is truly remarkable.</p>
                    </div>
                    <div class="testimonial-author">
                        <div class="author-image">
                            <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Robert Johnson">
                        </div>
                        <div class="author-info">
                            <h4>Robert Johnson</h4>
                            <p>Cardiac Patient</p>
                        </div>
                    </div>
                </div>
                <div class="testimonial-slide">
                    <div class="testimonial-content">
                        <p>After struggling with migraines for years, the neurology team at Nexus Clinic used their cutting-edge technology to pinpoint the exact cause. The treatment has changed my life. The staff is compassionate and the facility is unlike any other medical center I've visited.</p>
                    </div>
                    <div class="testimonial-author">
                        <div class="author-image">
                            <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Sarah Williams">
                        </div>
                        <div class="author-info">
                            <h4>Sarah Williams</h4>
                            <p>Neurology Patient</p>
                        </div>
                    </div>
                </div>
                <div class="testimonial-slide">
                    <div class="testimonial-content">
                        <p>The genetic counseling I received was incredibly thorough and informative. The team explained complex concepts in ways I could understand and helped me make important decisions about my health. The clinic's technology is years ahead of anywhere else.</p>
                    </div>
                    <div class="testimonial-author">
                        <div class="author-image">
                            <img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=688&q=80" alt="Emily Chen">
                        </div>
                        <div class="author-info">
                            <h4>Emily Chen</h4>
                            <p>Genetic Counseling Patient</p>
                        </div>
                    </div>
                </div>
                <div class="testimonial-nav">
                    <button class="active" data-slide="0"></button>
                    <button data-slide="1"></button>
                    <button data-slide="2"></button>
                </div>
            </div>
        </div>
    </section>

<section id="stats">
        <div class="container">
            <div class="stats-container">
                <div class="stat-item">
                    <div class="stat-number"><span>+</span>5,000</div>
                    <div class="stat-text">Happy Patients</div>
                </div>
                <div class="stat-item">
                    <div class="stat-number"><span>+</span>50</div>
                    <div class="stat-text">Expert Doctors</div>
                </div>
                <div class="stat-item">
                    <div class="stat-number"><span>+</span>20</div>
                    <div class="stat-text">Medical Departments</div>
                </div>
                <div class="stat-item">
                    <div class="stat-number">24/7</div>
                    <div class="stat-text">Emergency Service</div>
                </div>
            </div>
        </div>
    </section>

<section id="contact">
        <div class="container">
            <div class="section-title">
                <h2>Contact Us</h2>
            </div>
            <div class="contact-container">
                <div class="contact-info">
                    <h3>Get In Touch</h3>
                    <p>Have questions about our services or want to schedule an appointment? Reach out to us using the information below or fill out the contact form.</p>
                    <div class="contact-details">
                        <div class="contact-item">
                            <div class="contact-icon">
                                <i class="fas fa-map-marker-alt"></i>
                            </div>
                            <div class="contact-text">
                                <h4>Location</h4>
                                <p>123 Future Street, MedTech District, City 10001</p>
                            </div>
                        </div>
                        <div class="contact-item">
                            <div class="contact-icon">
                                <i class="fas fa-phone-alt"></i>
                            </div>
                            <div class="contact-text">
                                <h4>Phone</h4>
                                <a href="tel:+18005551234">+1 (800) 555-1234</a>
                            </div>
                        </div>
                        <div class="contact-item">
                            <div class="contact-icon">
                                <i class="fas fa-envelope"></i>
                            </div>
                            <div class="contact-text">
                                <h4>Email</h4>
                                <a href="mailto:info@nexusclinic.com">info@nexusclinic.com</a>
                            </div>
                        </div>
                    </div>
                    <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="contact-form">
                    <form>
                        <div class="form-group">
                            <label for="contact-name">Your Name</label>
                            <input type="text" id="contact-name" class="form-control" placeholder="Your Name" required>
                        </div>
                        <div class="form-group">
                            <label for="contact-email">Your Email</label>
                            <input type="email" id="contact-email" class="form-control" placeholder="Your Email" required>
                        </div>
                        <div class="form-group">
                            <label for="contact-subject">Subject</label>
                            <input type="text" id="contact-subject" class="form-control" placeholder="Subject" required>
                        </div>
                        <div class="form-group">
                            <label for="contact-message">Message</label>
                            <textarea id="contact-message" class="form-control" rows="5" placeholder="Your Message" required></textarea>
                        </div>
                        <button type="submit" class="btn btn-block">Send Message</button>
                    </form>
                </div>
            </div>
        </div>
    </section>

<footer>
        <div class="container">
            <div class="footer-container">
                <div class="footer-col">
                    <h4>About Us</h4>
                    <p>Nexus Clinic is a pioneer in futuristic healthcare, combining advanced technology with compassionate care to deliver exceptional medical services.</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">
                    <h4>Quick Links</h4>
                    <ul class="footer-links">
                        <li><a href="#hero">Home</a></li>
                        <li><a href="#about">About Us</a></li>
                        <li><a href="#services">Services</a></li>
                        <li><a href="#doctors">Doctors</a></li>
                        <li><a href="#appointment">Appointment</a></li>
                        <li><a href="#contact">Contact</a></li>
                    </ul>
                </div>
                <div class="footer-col">
                    <h4>Services</h4>
                    <ul class="footer-links">
                        <li><a href="#">Neurology Care</a></li>
                        <li><a href="#">Cardiology</a></li>
                        <li><a href="#">Genetic Testing</a></li>
                        <li><a href="#">Robotic Surgery</a></li>
                        <li><a href="#">Laser Vision Correction</a></li>
                        <li><a href="#">3D Imaging</a></li>
                    </ul>
                </div>
                <div class="footer-col">
                    <h4>Newsletter</h4>
                    <p>Subscribe to our newsletter for the latest health tips and clinic updates.</p>
                    <form>
                        <div class="form-group">
                            <input type="email" class="form-control" placeholder="Your Email" required>
                        </div>
                        <button type="submit" class="btn">Subscribe</button>
                    </form>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2023 Nexus Clinic. All Rights Reserved. Designed with <i class="fas fa-heart" style="color: var(--primary);"></i> for your health.</p>
            </div>
        </div>
    </footer>

</body>
</html>

CSS

:root {
            --primary: #FFD700;
            --primary-dark: #FFC000;
            --primary-light: #FFF200;
            --secondary: #111;
            --text: #333;
            --light: #f8f9fa;
            --dark: #212529;
        }

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

body {
            overflow-x: hidden;
            color: var(--text);
            background-color: #f5f5f5;
        }

/* Header/Navigation */
        header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 1000;
            background-color: rgba(255, 255, 255, 0.95);
            box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
        }

.scrolled {
            background-color: rgba(255, 215, 0, 0.95) !important;
            box-shadow: 0 5px 20px rgba(255, 215, 0, 0.2);
        }

.container {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 0;
        }

.logo {
            font-size: 28px;
            font-weight: 800;
            color: var(--primary);
            text-decoration: none;
            display: flex;
            align-items: center;
        }

.logo span {
            color: var(--secondary);
        }

.logo i {
            margin-right: 10px;
            font-size: 32px;
        }

.nav-links {
            display: flex;
            list-style: none;
        }

.nav-links li {
            margin-left: 30px;
        }

.nav-links a {
            text-decoration: none;
            color: var(--secondary);
            font-weight: 600;
            font-size: 16px;
            transition: color 0.3s ease;
            position: relative;
        }

.nav-links a:hover {
            color: var(--primary);
        }

.nav-links a::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 0;
            height: 2px;
            background-color: var(--primary);
            transition: width 0.3s ease;
        }

.nav-links a:hover::after {
            width: 100%;
        }

.menu-toggle {
            display: none;
            cursor: pointer;
            font-size: 24px;
            color: var(--secondary);
        }

/* Hero Section */
        #hero {
            height: 100vh;
            display: flex;
            align-items: center;
            background: linear-gradient(135deg, rgba(255, 215, 0, 0.1) 0%, rgba(255, 255, 255, 1) 100%);
            position: relative;
            overflow: hidden;
        }

.hero-content {
            width: 50%;
            padding-right: 50px;
            z-index: 2;
        }

.hero-content h1 {
            font-size: 48px;
            font-weight: 800;
            margin-bottom: 20px;
            color: var(--secondary);
            line-height: 1.2;
        }

.hero-content h1 span {
            color: var(--primary);
        }

.hero-content p {
            font-size: 18px;
            color: var(--text);
            margin-bottom: 30px;
            line-height: 1.6;
        }

.btn {
            display: inline-block;
            padding: 12px 30px;
            background-color: var(--primary);
            color: var(--secondary);
            border: none;
            border-radius: 50px;
            font-size: 16px;
            font-weight: 600;
            text-decoration: none;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 5px 15px rgba(255, 215, 0, 0.3);
        }

.btn:hover {
            background-color: var(--primary-dark);
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(255, 215, 0, 0.4);
        }

.hero-image {
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 50%;
            height: 80%;
            background-image: url('https://images.unsplash.com/photo-1579684385127-1ef15d508118?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=880&q=80');
            background-size: cover;
            background-position: center;
            border-radius: 20px 0 0 20px;
            box-shadow: -10px 10px 30px rgba(0, 0, 0, 0.1);
            animation: float 6s ease-in-out infinite;
        }

@keyframes float {
            0% { transform: translateY(-50%) translateX(0); }
            50% { transform: translateY(-50%) translateX(-10px); }
            100% { transform: translateY(-50%) translateX(0); }
        }

/* About Section */
        #about {
            padding: 100px 0;
            background-color: white;
        }

.section-title {
            text-align: center;
            margin-bottom: 60px;
        }

.section-title h2 {
            font-size: 36px;
            font-weight: 800;
            color: var(--secondary);
            position: relative;
            display: inline-block;
        }

.section-title h2::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 4px;
            background-color: var(--primary);
            border-radius: 2px;
        }

.about-content {
            display: flex;
            align-items: center;
            gap: 50px;
        }

.about-image {
            flex: 1;
            position: relative;
            height: 500px;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
        }

.about-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }

.about-image:hover img {
            transform: scale(1.05);
        }

.about-text {
            flex: 1;
        }

.about-text h3 {
            font-size: 28px;
            font-weight: 700;
            margin-bottom: 20px;
            color: var(--secondary);
        }

.about-text p {
            font-size: 16px;
            line-height: 1.8;
            margin-bottom: 20px;
            color: var(--text);
        }

.features {
            margin-top: 30px;
        }

.feature-item {
            display: flex;
            align-items: flex-start;
            margin-bottom: 20px;
        }

.feature-icon {
            width: 50px;
            height: 50px;
            background-color: var(--primary-light);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 20px;
            flex-shrink: 0;
            color: var(--secondary);
            font-size: 20px;
        }

.feature-text h4 {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 5px;
            color: var(--secondary);
        }

.feature-text p {
            font-size: 14px;
            margin-bottom: 0;
        }

/* Services Section */
        #services {
            padding: 100px 0;
            background-color: #f9f9f9;
        }

.services-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            margin-top: 50px;
        }

.service-card {
            background-color: white;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
            transition: all 0.3s ease;
            position: relative;
            z-index: 1;
        }

.service-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 40px rgba(255, 215, 0, 0.2);
        }

.service-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(255, 215, 0, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
            z-index: -1;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

.service-card:hover::before {
            opacity: 1;
        }

.service-icon {
            height: 200px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 60px;
            color: var(--primary);
            background-color: rgba(255, 215, 0, 0.1);
        }

.service-content {
            padding: 30px;
        }

.service-content h3 {
            font-size: 22px;
            font-weight: 700;
            margin-bottom: 15px;
            color: var(--secondary);
        }

.service-content p {
            font-size: 15px;
            line-height: 1.6;
            margin-bottom: 20px;
            color: var(--text);
        }

.service-link {
            display: inline-flex;
            align-items: center;
            color: var(--primary);
            font-weight: 600;
            text-decoration: none;
            transition: all 0.3s ease;
        }

.service-link i {
            margin-left: 5px;
            transition: transform 0.3s ease;
        }

.service-link:hover {
            color: var(--primary-dark);
        }

.service-link:hover i {
            transform: translateX(5px);
        }

/* Doctors Section */
        #doctors {
            padding: 100px 0;
            background-color: white;
        }

.doctors-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 30px;
            margin-top: 50px;
        }

.doctor-card {
            background-color: #f9f9f9;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
            transition: all 0.3s ease;
            text-align: center;
        }

.doctor-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 40px rgba(255, 215, 0, 0.2);
        }

.doctor-image {
            height: 300px;
            overflow: hidden;
        }

.doctor-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }

.doctor-card:hover .doctor-image img {
            transform: scale(1.1);
        }

.doctor-info {
            padding: 25px;
        }

.doctor-info h3 {
            font-size: 20px;
            font-weight: 700;
            margin-bottom: 5px;
            color: var(--secondary);
        }

.doctor-info p {
            font-size: 15px;
            color: var(--primary);
            margin-bottom: 15px;
        }

.doctor-social {
            display: flex;
            justify-content: center;
            gap: 15px;
        }

.doctor-social a {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 35px;
            height: 35px;
            background-color: rgba(255, 215, 0, 0.2);
            border-radius: 50%;
            color: var(--primary);
            transition: all 0.3s ease;
        }

.doctor-social a:hover {
            background-color: var(--primary);
            color: white;
            transform: translateY(-3px);
        }

/* Appointment Section */
        #appointment {
            padding: 100px 0;
            background: linear-gradient(135deg, rgba(255, 215, 0, 0.1) 0%, rgba(255, 255, 255, 1) 100%);
        }

.appointment-container {
            display: flex;
            align-items: center;
            gap: 50px;
        }

.appointment-image {
            flex: 1;
            position: relative;
            height: 500px;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
        }

.appointment-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

.appointment-form {
            flex: 1;
            background-color: white;
            padding: 40px;
            border-radius: 20px;
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
        }

.appointment-form h3 {
            font-size: 28px;
            font-weight: 700;
            margin-bottom: 20px;
            color: var(--secondary);
        }

.form-group {
            margin-bottom: 20px;
        }

.form-group label {
            display: block;
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 8px;
            color: var(--secondary);
        }

.form-control {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-size: 15px;
            transition: all 0.3s ease;
        }

.form-control:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.2);
            outline: none;
        }

.btn-block {
            display: block;
            width: 100%;
        }

/* Testimonials Section */
        #testimonials {
            padding: 100px 0;
            background-color: white;
        }

.testimonials-container {
            max-width: 800px;
            margin: 50px auto 0;
            position: relative;
        }

.testimonial-slide {
            background-color: #f9f9f9;
            padding: 40px;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
            text-align: center;
            display: none;
        }

.testimonial-slide.active {
            display: block;
            animation: fadeIn 0.5s ease;
        }

@keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

.testimonial-content {
            font-size: 18px;
            line-height: 1.8;
            color: var(--text);
            margin-bottom: 30px;
            position: relative;
        }

.testimonial-content::before,
        .testimonial-content::after {
            content: '"';
            font-size: 40px;
            color: var(--primary);
            opacity: 0.3;
            position: absolute;
        }

.testimonial-content::before {
            top: -20px;
            left: -10px;
        }

.testimonial-content::after {
            bottom: -40px;
            right: -10px;
        }

.testimonial-author {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

.author-image {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            overflow: hidden;
            margin-bottom: 15px;
            border: 3px solid var(--primary);
        }

.author-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

.author-info h4 {
            font-size: 18px;
            font-weight: 700;
            margin-bottom: 5px;
            color: var(--secondary);
        }

.author-info p {
            font-size: 14px;
            color: var(--primary);
        }

.testimonial-nav {
            display: flex;
            justify-content: center;
            margin-top: 30px;
            gap: 10px;
        }

.testimonial-nav button {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            border: none;
            background-color: #ddd;
            cursor: pointer;
            transition: all 0.3s ease;
        }

.testimonial-nav button.active {
            background-color: var(--primary);
            transform: scale(1.2);
        }

/* Stats Section */
        #stats {
            padding: 80px 0;
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
            color: white;
        }

.stats-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 30px;
            text-align: center;
        }

.stat-item {
            padding: 30px;
        }

.stat-number {
            font-size: 48px;
            font-weight: 800;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

.stat-number span {
            font-size: 40px;
            margin-right: 5px;
        }

.stat-text {
            font-size: 18px;
            font-weight: 600;
        }

/* Contact Section */
        #contact {
            padding: 100px 0;
            background-color: white;
        }

.contact-container {
            display: flex;
            gap: 50px;
        }

.contact-info {
            flex: 1;
        }

.contact-info h3 {
            font-size: 28px;
            font-weight: 700;
            margin-bottom: 20px;
            color: var(--secondary);
        }

.contact-info p {
            font-size: 16px;
            line-height: 1.8;
            margin-bottom: 30px;
            color: var(--text);
        }

.contact-details {
            margin-bottom: 40px;
        }

.contact-item {
            display: flex;
            align-items: flex-start;
            margin-bottom: 20px;
        }

.contact-icon {
            width: 50px;
            height: 50px;
            background-color: rgba(255, 215, 0, 0.1);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 20px;
            flex-shrink: 0;
            color: var(--primary);
            font-size: 20px;
        }

.contact-text h4 {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 5px;
            color: var(--secondary);
        }

.contact-text p, .contact-text a {
            font-size: 15px;
            color: var(--text);
            text-decoration: none;
            transition: color 0.3s ease;
        }

.contact-text a:hover {
            color: var(--primary);
        }

.social-links {
            display: flex;
            gap: 15px;
        }

.social-links a {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 45px;
            height: 45px;
            background-color: rgba(255, 215, 0, 0.1);
            border-radius: 50%;
            color: var(--primary);
            font-size: 18px;
            transition: all 0.3s ease;
        }

.social-links a:hover {
            background-color: var(--primary);
            color: white;
            transform: translateY(-3px);
        }

.contact-form {
            flex: 1;
            background-color: #f9f9f9;
            padding: 40px;
            border-radius: 20px;
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.05);
        }

/* Footer */
        footer {
            background-color: var(--secondary);
            color: white;
            padding: 70px 0 20px;
        }

.footer-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 40px;
            margin-bottom: 50px;
        }

.footer-col h4 {
            font-size: 20px;
            font-weight: 700;
            margin-bottom: 25px;
            position: relative;
        }

.footer-col h4::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: -10px;
            width: 50px;
            height: 2px;
            background-color: var(--primary);
        }

.footer-col p {
            font-size: 15px;
            line-height: 1.8;
            margin-bottom: 20px;
            color: #bbb;
        }

.footer-links {
            list-style: none;
        }

.footer-links li {
            margin-bottom: 15px;
        }

.footer-links a {
            color: #bbb;
            text-decoration: none;
            font-size: 15px;
            transition: all 0.3s ease;
            display: block;
        }

.footer-links a:hover {
            color: var(--primary);
            transform: translateX(5px);
        }

.footer-bottom {
            text-align: center;
            padding-top: 20px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
        }

.footer-bottom p {
            font-size: 14px;
            color: #bbb;
        }

/* Animations */
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }

.pulse {
            animation: pulse 2s infinite;
        }

/* Responsive Styles */
        @media (max-width: 992px) {
            .hero-content {
                width: 60%;
            }
            
            .hero-image {
                width: 40%;
            }
            
            .about-content, .appointment-container, .contact-container {
                flex-direction: column;
            }
            
            .about-image, .appointment-image {
                height: 400px;
                width: 100%;
            }
        }

@media (max-width: 768px) {
            .menu-toggle {
                display: block;
            }
            
            .nav-links {
                position: fixed;
                top: 80px;
                left: -100%;
                width: 100%;
                height: calc(100vh - 80px);
                background-color: white;
                flex-direction: column;
                align-items: center;
                padding: 40px 0;
                transition: all 0.5s ease;
                box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            }
            
            .nav-links.active {
                left: 0;
            }
            
            .nav-links li {
                margin: 15px 0;
            }
            
            #hero {
                flex-direction: column;
                height: auto;
                padding: 150px 0 80px;
            }
            
            .hero-content {
                width: 100%;
                padding-right: 0;
                text-align: center;
                margin-bottom: 50px;
            }
            
            .hero-image {
                position: relative;
                top: auto;
                right: auto;
                transform: none;
                width: 100%;
                height: 400px;
                border-radius: 20px;
                animation: none;
            }
            
            .section-title h2 {
                font-size: 30px;
            }
            
            .service-card, .doctor-card {
                max-width: 350px;
                margin: 0 auto;
            }
        }

@media (max-width: 576px) {
            .hero-content h1 {
                font-size: 36px;
            }
            
            .btn {
                padding: 10px 25px;
            }
            
            .section-title h2 {
                font-size: 26px;
            }
            
            .about-image, .appointment-image {
                height: 300px;
            }
            
            .stats-container {
                grid-template-columns: 1fr 1fr;
            }
            
            .stat-number {
                font-size: 36px;
            }
            
            .stat-text {
                font-size: 16px;
            }
        }

JavaScript

// Mobile Menu Toggle
        const menuToggle = document.getElementById('menuToggle');
        const navLinks = document.getElementById('navLinks');
        
        menuToggle.addEventListener('click', () => {
            navLinks.classList.toggle('active');
        });
        
        // Close mobile menu when clicking on a link
        document.querySelectorAll('.nav-links a').forEach(link => {
            link.addEventListener('click', () => {
                navLinks.classList.remove('active');
            });
        });
        
        // Header scroll effect
        const header = document.getElementById('header');
        window.addEventListener('scroll', () => {
            if (window.scrollY > 100) {
                header.classList.add('scrolled');
            } else {
                header.classList.remove('scrolled');
            }
        });
        
        // Testimonial slider
        const testimonialSlides = document.querySelectorAll('.testimonial-slide');
        const testimonialNav = document.querySelectorAll('.testimonial-nav button');
        
        testimonialNav.forEach((button, index) => {
            button.addEventListener('click', () => {
                // Remove active class from all slides and buttons
                testimonialSlides.forEach(slide => slide.classList.remove('active'));
                testimonialNav.forEach(btn => btn.classList.remove('active'));
                
                // Add active class to clicked button and corresponding slide
                button.classList.add('active');
                testimonialSlides[index].classList.add('active');
            });
        });
        
        // Auto-rotate testimonials
        let currentSlide = 0;
        function rotateTestimonials() {
            testimonialSlides.forEach(slide => slide.classList.remove('active'));
            testimonialNav.forEach(btn => btn.classList.remove('active'));
            
            currentSlide = (currentSlide + 1) % testimonialSlides.length;
            
            testimonialSlides[currentSlide].classList.add('active');
            testimonialNav[currentSlide].classList.add('active');
        }
        
        setInterval(rotateTestimonials, 5000);
        
        // Animation on scroll
        function animateOnScroll() {
            const elements = document.querySelectorAll('.service-card, .doctor-card, .about-image, .appointment-image, .feature-item, .stat-item');
            
            elements.forEach(element => {
                const elementPosition = element.getBoundingClientRect().top;
                const screenPosition = window.innerHeight / 1.3;
                
                if (elementPosition < screenPosition) {
                    element.style.opacity = '1';
                    element.style.transform = 'translateY(0)';
                }
            });
        }
        
        // Set initial state for animated elements
        document.querySelectorAll('.service-card, .doctor-card, .about-image, .appointment-image, .feature-item, .stat-item').forEach(element => {
            element.style.opacity = '0';
            element.style.transform = 'translateY(20px)';
            element.style.transition = 'all 0.6s ease';
        });
        
        window.addEventListener('scroll', animateOnScroll);
        window.addEventListener('load', animateOnScroll);

Clinic Landing Page Design Preview

Download Options