HTML
1339 lines
44.8 KB
Harmony Clinic | Modern Healthcare Solutions
Live Preview
Source Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Harmony Clinic | Modern Healthcare Solutions</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;700&display=swap" rel="stylesheet">
<style>
:root {
--primary: #2a7f8d;
--secondary: #ff7e5f;
--accent: #f4e9d8;
--dark: #1a2e35;
--light: #f9f9f9;
--white: #ffffff;
--transition: all 0.3s ease;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
color: var(--dark);
background-color: var(--light);
line-height: 1.6;
overflow-x: hidden;
}
h1, h2, h3, h4 {
font-family: 'Playfair Display', serif;
font-weight: 700;
color: var(--dark);
}
/* Celebration Decorations */
.celebration-dot {
position: absolute;
width: 8px;
height: 8px;
background-color: var(--secondary);
border-radius: 50%;
opacity: 0.6;
}
/* Navigation */
.navbar {
background-color: rgba(255,255,255,0.95);
padding: 1.5rem 3rem;
position: fixed;
width: 100%;
top: 0;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 1000;
box-shadow: 0 2px 20px rgba(0,0,0,0.05);
transition: var(--transition);
}
.navbar.scrolled {
padding: 1rem 3rem;
background-color: rgba(255,255,255,0.98);
}
.logo {
display: flex;
align-items: center;
font-size: 1.8rem;
font-weight: 700;
color: var(--primary);
}
.logo img {
height: 40px;
margin-right: 12px;
}
.nav-links {
list-style: none;
display: flex;
gap: 2.5rem;
}
.nav-links a {
color: var(--dark);
text-decoration: none;
font-weight: 500;
font-size: 1.1rem;
position: relative;
transition: var(--transition);
}
.nav-links a:hover {
color: var(--primary);
}
.nav-links a:after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: -5px;
left: 0;
background-color: var(--primary);
transition: var(--transition);
}
.nav-links a:hover:after {
width: 100%;
}
.cta-button {
background: var(--primary);
color: var(--white);
padding: 0.8rem 1.8rem;
border-radius: 50px;
font-weight: 600;
text-transform: uppercase;
font-size: 0.9rem;
letter-spacing: 1px;
transition: var(--transition);
box-shadow: 0 4px 15px rgba(42,127,141,0.3);
}
.cta-button:hover {
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(42,127,141,0.4);
background: #1f6b77;
}
.menu-toggle {
display: none;
color: var(--dark);
font-size: 1.5rem;
cursor: pointer;
}
/* Hero Section */
.hero {
height: 100vh;
min-height: 800px;
background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)),
url('https://images.unsplash.com/photo-1579684385127-1ef15d508118?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80') center/cover;
display: flex;
align-items: center;
position: relative;
overflow: hidden;
}
.hero-content {
max-width: 1200px;
margin: 0 auto;
padding: 0 3rem;
color: var(--white);
position: relative;
z-index: 10;
}
.hero h1 {
font-size: clamp(2.5rem, 6vw, 4.5rem);
margin-bottom: 1.5rem;
line-height: 1.2;
}
.hero h1 span {
color: var(--secondary);
}
.hero p {
font-size: 1.2rem;
max-width: 600px;
margin-bottom: 2.5rem;
opacity: 0.9;
}
.hero-buttons {
display: flex;
gap: 1.5rem;
}
.btn {
padding: 1rem 2.5rem;
border-radius: 50px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
transition: var(--transition);
display: inline-block;
text-align: center;
font-size: 0.95rem;
}
.btn-primary {
background: var(--secondary);
color: var(--white);
box-shadow: 0 4px 15px rgba(255,126,95,0.4);
}
.btn-primary:hover {
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(255,126,95,0.5);
background: #ff6a45;
}
.btn-secondary {
background: transparent;
color: var(--white);
border: 2px solid var(--white);
}
.btn-secondary:hover {
background: rgba(255,255,255,0.1);
transform: translateY(-3px);
}
/* Celebration Animation */
@keyframes float {
0% { transform: translateY(0px); }
50% { transform: translateY(-15px); }
100% { transform: translateY(0px); }
}
.floating-icon {
position: absolute;
animation: float 3s ease-in-out infinite;
opacity: 0.7;
}
/* Stats Section */
.stats {
background: var(--primary);
padding: 5rem 2rem;
color: var(--white);
position: relative;
overflow: hidden;
}
.stats-container {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 2rem;
text-align: center;
position: relative;
z-index: 2;
}
.stat-item {
padding: 1.5rem;
}
.stat-number {
font-size: 3.5rem;
font-weight: 700;
margin-bottom: 0.5rem;
font-family: 'Playfair Display', serif;
}
.stat-label {
font-size: 1.1rem;
text-transform: uppercase;
letter-spacing: 1px;
opacity: 0.9;
}
/* Services Section */
.services {
padding: 6rem 2rem;
background-color: var(--white);
position: relative;
}
.section-title {
text-align: center;
margin-bottom: 4rem;
}
.section-title h2 {
font-size: 2.5rem;
margin-bottom: 1rem;
position: relative;
display: inline-block;
}
.section-title h2:after {
content: '';
position: absolute;
width: 60px;
height: 3px;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
background: var(--secondary);
}
.section-title p {
color: var(--dark);
max-width: 700px;
margin: 0 auto;
opacity: 0.8;
}
.services-grid {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2.5rem;
}
.service-card {
background: var(--light);
border-radius: 10px;
overflow: hidden;
box-shadow: 0 5px 20px rgba(0,0,0,0.05);
transition: var(--transition);
position: relative;
z-index: 2;
}
.service-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}
.service-icon {
height: 120px;
background: var(--primary);
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
font-size: 3rem;
}
.service-content {
padding: 2rem;
}
.service-content h3 {
font-size: 1.5rem;
margin-bottom: 1rem;
}
.service-content p {
margin-bottom: 1.5rem;
color: var(--dark);
opacity: 0.8;
}
.service-link {
color: var(--primary);
font-weight: 600;
text-decoration: none;
display: inline-flex;
align-items: center;
transition: var(--transition);
}
.service-link i {
margin-left: 0.5rem;
transition: var(--transition);
}
.service-link:hover i {
transform: translateX(5px);
}
/* Doctors Section */
.doctors {
padding: 6rem 2rem;
background-color: var(--accent);
position: relative;
}
.doctors-grid {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2.5rem;
}
.doctor-card {
background: var(--white);
border-radius: 10px;
overflow: hidden;
box-shadow: 0 5px 20px rgba(0,0,0,0.05);
transition: var(--transition);
text-align: center;
}
.doctor-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}
.doctor-image {
height: 320px;
overflow: hidden;
position: relative;
}
.doctor-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--transition);
}
.doctor-card:hover .doctor-image img {
transform: scale(1.05);
}
.doctor-info {
padding: 2rem 1.5rem;
}
.doctor-info h3 {
font-size: 1.5rem;
margin-bottom: 0.5rem;
}
.doctor-info p.specialty {
color: var(--primary);
font-weight: 600;
margin-bottom: 1rem;
}
.doctor-info p.bio {
color: var(--dark);
opacity: 0.8;
margin-bottom: 1.5rem;
}
.doctor-social {
display: flex;
justify-content: center;
gap: 1rem;
}
.doctor-social a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
background: var(--primary);
color: var(--white);
border-radius: 50%;
transition: var(--transition);
}
.doctor-social a:hover {
background: var(--secondary);
transform: translateY(-3px);
}
/* Testimonials Section */
.testimonials {
padding: 6rem 2rem;
background-color: var(--white);
position: relative;
}
.testimonials-slider {
max-width: 1000px;
margin: 0 auto;
position: relative;
}
.testimonial-card {
background: var(--light);
border-radius: 10px;
padding: 3rem;
box-shadow: 0 5px 20px rgba(0,0,0,0.05);
text-align: center;
margin: 0 1rem;
}
.testimonial-text {
font-size: 1.1rem;
font-style: italic;
color: var(--dark);
margin-bottom: 2rem;
position: relative;
}
.testimonial-text:before,
.testimonial-text:after {
content: '"';
font-size: 3rem;
color: var(--primary);
opacity: 0.3;
position: absolute;
}
.testimonial-text:before {
top: -1.5rem;
left: -1rem;
}
.testimonial-text:after {
bottom: -3rem;
right: -1rem;
}
.testimonial-author {
display: flex;
align-items: center;
justify-content: center;
margin-top: 2rem;
}
.author-image {
width: 70px;
height: 70px;
border-radius: 50%;
overflow: hidden;
margin-right: 1rem;
}
.author-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.author-info h4 {
font-size: 1.2rem;
margin-bottom: 0.3rem;
}
.author-info p {
color: var(--primary);
font-size: 0.9rem;
font-weight: 500;
}
/* Appointment Form */
.appointment-form-section {
padding: 6rem 2rem;
background: linear-gradient(rgba(42,127,141,0.9), rgba(42,127,141,0.9)),
url('https://images.unsplash.com/photo-1581595219315-a187dd40c322?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80') center/cover;
color: var(--white);
position: relative;
}
.form-container {
max-width: 800px;
margin: 0 auto;
background: var(--white);
border-radius: 10px;
padding: 3rem;
box-shadow: 0 15px 40px rgba(0,0,0,0.1);
position: relative;
z-index: 2;
}
.form-title {
text-align: center;
margin-bottom: 2.5rem;
color: var(--primary);
}
.form-title h2 {
font-size: 2.2rem;
margin-bottom: 1rem;
}
.form-title p {
color: var(--dark);
opacity: 0.8;
}
.form-group {
margin-bottom: 1.5rem;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
margin-bottom: 1.5rem;
}
label {
display: block;
margin-bottom: 0.5rem;
font-weight: 500;
color: var(--dark);
}
input, select, textarea {
width: 100%;
padding: 1rem;
border: 1px solid #ddd;
border-radius: 5px;
font-family: 'Poppins', sans-serif;
transition: var(--transition);
}
input:focus, select:focus, textarea:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 2px rgba(42,127,141,0.2);
}
textarea {
min-height: 120px;
resize: vertical;
}
.submit-btn {
background: var(--secondary);
color: var(--white);
border: none;
padding: 1rem 2.5rem;
border-radius: 50px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
cursor: pointer;
transition: var(--transition);
display: block;
width: 100%;
margin-top: 1rem;
font-size: 1rem;
}
.submit-btn:hover {
background: #ff6a45;
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(255,126,95,0.4);
}
/* Footer */
.footer {
background-color: var(--dark);
color: var(--white);
padding: 5rem 2rem 2rem;
position: relative;
}
.footer-content {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 3rem;
}
.footer-column h3 {
font-size: 1.3rem;
margin-bottom: 1.5rem;
position: relative;
padding-bottom: 1rem;
}
.footer-column h3:after {
content: '';
position: absolute;
width: 50px;
height: 3px;
bottom: 0;
left: 0;
background-color: var(--secondary);
}
.footer-links {
list-style: none;
}
.footer-links li {
margin-bottom: 0.8rem;
}
.footer-links a {
color: rgba(255,255,255,0.7);
text-decoration: none;
transition: var(--transition);
}
.footer-links a:hover {
color: var(--secondary);
}
.contact-info {
margin-bottom: 1.5rem;
}
.contact-info p {
display: flex;
align-items: flex-start;
margin-bottom: 1rem;
color: rgba(255,255,255,0.7);
}
.contact-info i {
margin-right: 1rem;
color: var(--secondary);
}
.footer-social {
display: flex;
gap: 1rem;
margin-top: 1.5rem;
}
.footer-social a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background-color: rgba(255,255,255,0.1);
border-radius: 50%;
color: var(--white);
transition: var(--transition);
}
.footer-social a:hover {
background-color: var(--secondary);
transform: translateY(-3px);
}
.newsletter-form {
margin-top: 1.5rem;
}
.newsletter-form input {
width: 100%;
padding: 0.8rem 1rem;
border: none;
border-radius: 5px;
margin-bottom: 1rem;
background: rgba(255,255,255,0.1);
color: var(--white);
}
.newsletter-form input::placeholder {
color: rgba(255,255,255,0.7);
}
.newsletter-form button {
width: 100%;
padding: 0.8rem;
background: var(--secondary);
color: var(--white);
border: none;
border-radius: 5px;
font-weight: 600;
cursor: pointer;
transition: var(--transition);
}
.newsletter-form button:hover {
background: #ff6a45;
}
.copyright {
text-align: center;
margin-top: 4rem;
padding-top: 2rem;
border-top: 1px solid rgba(255,255,255,0.1);
color: rgba(255,255,255,0.5);
font-size: 0.9rem;
}
/* Responsive Design */
@media (max-width: 992px) {
.hero {
min-height: 700px;
}
.hero-content {
text-align: center;
}
.hero p {
margin-left: auto;
margin-right: auto;
}
.hero-buttons {
justify-content: center;
}
.form-row {
grid-template-columns: 1fr;
gap: 0;
}
}
@media (max-width: 768px) {
.navbar {
padding: 1.5rem;
}
.menu-toggle {
display: block;
}
.nav-links {
position: fixed;
top: 80px;
left: -100%;
width: 100%;
height: calc(100vh - 80px);
background-color: var(--white);
flex-direction: column;
align-items: center;
justify-content: flex-start;
padding-top: 3rem;
gap: 2rem;
transition: var(--transition);
}
.nav-links.active {
left: 0;
}
.hero {
margin-top: 80px;
min-height: 600px;
}
.hero-buttons {
flex-direction: column;
gap: 1rem;
}
.btn {
width: 100%;
max-width: 300px;
margin: 0 auto;
}
.form-container {
padding: 2rem;
}
}
@media (max-width: 576px) {
.hero h1 {
font-size: 2.5rem;
}
.section-title h2 {
font-size: 2rem;
}
.testimonial-card {
padding: 2rem 1.5rem;
}
.footer-content {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<!-- Navigation -->
<nav class="navbar">
<div class="logo">
<img src="https://via.placeholder.com/40x40" alt="Harmony Clinic Logo">
Harmony Clinic
</div>
<ul class="nav-links">
<li><a href="#home">Home</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#doctors">Doctors</a></li>
<li><a href="#testimonials">Testimonials</a></li>
<li><a href="#appointment">Appointment</a></li>
</ul>
<a href="#appointment" class="cta-button">Book Now</a>
<div class="menu-toggle">
<i class="fas fa-bars"></i>
</div>
</nav>
<!-- Hero Section -->
<section class="hero" id="home">
<div class="hero-content">
<h1>Celebrating <span>Health</span>, Embracing <span>Wellness</span></h1>
<p>Experience compassionate care in our state-of-the-art facility where your health is our greatest celebration.</p>
<div class="hero-buttons">
<a href="#appointment" class="btn btn-primary">Book Appointment</a>
<a href="#services" class="btn btn-secondary">Our Services</a>
</div>
</div>
<!-- Celebration Elements -->
<div class="floating-icon" style="top: 20%; left: 10%;">
<i class="fas fa-heart" style="color: var(--secondary); font-size: 1.5rem;"></i>
</div>
<div class="floating-icon" style="top: 80%; left: 15%;">
<i class="fas fa-plus" style="color: var(--white); font-size: 1.2rem;"></i>
</div>
<div class="floating-icon" style="top: 40%; right: 10%;">
<i class="fas fa-star" style="color: var(--accent); font-size: 1.3rem;"></i>
</div>
</section>
<!-- Stats Section -->
<section class="stats">
<div class="stats-container">
<div class="stat-item">
<div class="stat-number">15+</div>
<div class="stat-label">Specialties</div>
</div>
<div class="stat-item">
<div class="stat-number">98%</div>
<div class="stat-label">Patient Satisfaction</div>
</div>
<div class="stat-item">
<div class="stat-number">24/7</div>
<div class="stat-label">Emergency Care</div>
</div>
<div class="stat-item">
<div class="stat-number">50+</div>
<div class="stat-label">Expert Doctors</div>
</div>
</div>
</section>
<!-- Services Section -->
<section class="services" id="services">
<div class="section-title">
<h2>Our Specialized Services</h2>
<p>Comprehensive healthcare services tailored to meet your individual needs with compassion and excellence.</p>
</div>
<div class="services-grid">
<div class="service-card">
<div class="service-icon">
<i class="fas fa-heartbeat"></i>
</div>
<div class="service-content">
<h3>Cardiology</h3>
<p>Advanced heart care with cutting-edge diagnostic tools and personalized treatment plans.</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-brain"></i>
</div>
<div class="service-content">
<h3>Neurology</h3>
<p>Specialized care for brain and nervous system disorders with innovative therapies.</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-bone"></i>
</div>
<div class="service-content">
<h3>Orthopedics</h3>
<p>Comprehensive musculoskeletal care from sports injuries to joint replacements.</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-baby"></i>
</div>
<div class="service-content">
<h3>Pediatrics</h3>
<p>Gentle, compassionate care for your little ones from birth through adolescence.</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>Ophthalmology</h3>
<p>Vision care and eye health services using the latest diagnostic technologies.</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-tooth"></i>
</div>
<div class="service-content">
<h3>Dentistry</h3>
<p>Complete oral health services in a comfortable, modern dental environment.</p>
<a href="#" class="service-link">Learn more <i class="fas fa-arrow-right"></i></a>
</div>
</div>
</div>
</section>
<!-- Doctors Section -->
<section class="doctors" id="doctors">
<div class="section-title">
<h2>Meet Our Specialists</h2>
<p>Our team of board-certified physicians are dedicated to providing exceptional care with a personal touch.</p>
</div>
<div class="doctors-grid">
<div class="doctor-card">
<div class="doctor-image">
<img src="https://images.unsplash.com/photo-1559839734-2b71ea197ec2?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Dr. Sarah Johnson">
</div>
<div class="doctor-info">
<h3>Dr. Sarah Johnson</h3>
<p class="specialty">Cardiologist</p>
<p class="bio">With over 15 years of experience in interventional cardiology.</p>
<div class="doctor-social">
<a href="#"><i class="fab fa-linkedin-in"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="far fa-envelope"></i></a>
</div>
</div>
</div>
<div class="doctor-card">
<div class="doctor-image">
<img src="https://images.unsplash.com/photo-1594824476967-48c8b964273f?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Dr. Michael Chen">
</div>
<div class="doctor-info">
<h3>Dr. Michael Chen</h3>
<p class="specialty">Neurologist</p>
<p class="bio">Specializing in movement disorders and neurodegenerative diseases.</p>
<div class="doctor-social">
<a href="#"><i class="fab fa-linkedin-in"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="far fa-envelope"></i></a>
</div>
</div>
</div>
<div class="doctor-card">
<div class="doctor-image">
<img src="https://images.unsplash.com/photo-1622253692010-333f2da6031d?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Dr. Priya Patel">
</div>
<div class="doctor-info">
<h3>Dr. Priya Patel</h3>
<p class="specialty">Pediatrician</p>
<p class="bio">Passionate about preventive care and childhood development.</p>
<div class="doctor-social">
<a href="#"><i class="fab fa-linkedin-in"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="far fa-envelope"></i></a>
</div>
</div>
</div>
</div>
</section>
<!-- Testimonials Section -->
<section class="testimonials" id="testimonials">
<div class="section-title">
<h2>Patient Stories</h2>
<p>Hear from our patients about their experiences at Harmony Clinic.</p>
</div>
<div class="testimonials-slider">
<div class="testimonial-card">
<div class="testimonial-text">
<p>The care I received at Harmony Clinic was exceptional. From the moment I walked in, I felt valued as a patient. Dr. Johnson took the time to explain everything and made sure I was comfortable with my treatment plan.</p>
</div>
<div class="testimonial-author">
<div class="author-image">
<img src="https://randomuser.me/api/portraits/women/45.jpg" alt="Jennifer L.">
</div>
<div class="author-info">
<h4>Jennifer L.</h4>
<p>Cardiology Patient</p>
</div>
</div>
</div>
</div>
</section>
<!-- Appointment Form Section -->
<section class="appointment-form-section" id="appointment">
<div class="form-container">
<div class="form-title">
<h2>Book Your Appointment</h2>
<p>Schedule your visit with our specialists today. Our team will contact you to confirm your appointment.</p>
</div>
<form>
<div class="form-row">
<div class="form-group">
<label for="name">Full Name</label>
<input type="text" id="name" placeholder="Your Name" required>
</div>
<div class="form-group">
<label for="email">Email Address</label>
<input type="email" id="email" placeholder="Your Email" required>
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="phone">Phone Number</label>
<input type="tel" id="phone" placeholder="Your Phone Number" required>
</div>
<div class="form-group">
<label for="dob">Date of Birth</label>
<input type="date" id="dob" required>
</div>
</div>
<div class="form-group">
<label for="department">Department</label>
<select id="department" required>
<option value="">Select Department</option>
<option value="cardiology">Cardiology</option>
<option value="neurology">Neurology</option>
<option value="orthopedics">Orthopedics</option>
<option value="pediatrics">Pediatrics</option>
<option value="ophthalmology">Ophthalmology</option>
<option value="dentistry">Dentistry</option>
</select>
</div>
<div class="form-group">
<label for="doctor">Preferred Doctor (Optional)</label>
<select id="doctor">
<option value="">Any Available Doctor</option>
<option value="dr-johnson">Dr. Sarah Johnson</option>
<option value="dr-chen">Dr. Michael Chen</option>
<option value="dr-patel">Dr. Priya Patel</option>
</select>
</div>
<div class="form-row">
<div class="form-group">
<label for="date">Preferred Date</label>
<input type="date" id="date" required>
</div>
<div class="form-group">
<label for="time">Preferred Time</label>
<select id="time" required>
<option value="">Select Time</option>
<option value="morning">Morning (8AM-12PM)</option>
<option value="afternoon">Afternoon (1PM-5PM)</option>
<option value="evening">Evening (5PM-8PM)</option>
</select>
</div>
</div>
<div class="form-group">
<label for="message">Additional Information</label>
<textarea id="message" placeholder="Please share any special requirements or concerns"></textarea>
</div>
<button type="submit" class="submit-btn">Request Appointment</button>
</form>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="footer-content">
<div class="footer-column">
<h3>Harmony Clinic</h3>
<p>Providing compassionate, comprehensive healthcare since 2005. Our mission is to celebrate health and wellness through exceptional patient care.</p>
<div class="footer-social">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-linkedin-in"></i></a>
</div>
</div>
<div class="footer-column">
<h3>Quick Links</h3>
<ul class="footer-links">
<li><a href="#home">Home</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#doctors">Doctors</a></li>
<li><a href="#testimonials">Testimonials</a></li>
<li><a href="#appointment">Appointment</a></li>
</ul>
</div>
<div class="footer-column">
<h3>Services</h3>
<ul class="footer-links">
<li><a href="#">Cardiology</a></li>
<li><a href="#">Neurology</a></li>
<li><a href="#">Orthopedics</a></li>
<li><a href="#">Pediatrics</a></li>
<li><a href="#">Emergency Care</a></li>
</ul>
</div>
<div class="footer-column">
<h3>Contact Us</h3>
<div class="contact-info">
<p><i class="fas fa-map-marker-alt"></i> 123 Wellness Blvd, Health City, HC 54321</p>
<p><i class="fas fa-phone"></i> (123) 456-7890</p>
<p><i class="fas fa-envelope"></i> info@harmonyclinic.com</p>
<p><i class="fas fa-clock"></i> Mon-Fri: 8:00 AM - 8:00 PM<br>Sat-Sun: 9:00 AM - 5:00 PM</p>
</div>
<div class="newsletter-form">
<h4>Health Newsletter</h4>
<input type="email" placeholder="Your Email Address">
<button type="submit">Subscribe</button>
</div>
</div>
</div>
<div class="copyright">
<p>© 2025 Harmony Clinic. All Rights Reserved. | <a href="#">Privacy Policy</a> | <a href="#">Terms of Service</a></p>
</div>
</footer>
<script>
// Mobile Menu Toggle
const menuToggle = document.querySelector('.menu-toggle');
const navLinks = document.querySelector('.nav-links');
menuToggle.addEventListener('click', () => {
navLinks.classList.toggle('active');
});
// Close mobile menu when clicking a link
document.querySelectorAll('.nav-links a').forEach(link => {
link.addEventListener('click', () => {
navLinks.classList.remove('active');
});
});
// 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'
});
}
});
});
// Navbar scroll effect
window.addEventListener('scroll', function() {
const navbar = document.querySelector('.navbar');
if (window.scrollY > 50) {
navbar.classList.add('scrolled');
} else {
navbar.classList.remove('scrolled');
}
});
// Create celebration dots
function createDots() {
const colors = ['var(--primary)', 'var(--secondary)', 'var(--accent)'];
const container = document.querySelector('.hero');
for (let i = 0; i < 20; i++) {
const dot = document.createElement('div');
dot.classList.add('celebration-dot');
// Random positioning
const posX = Math.random() * 100;
const posY = Math.random() * 100;
// Random size
const size = Math.random() * 6 + 4;
// Random color
const color = colors[Math.floor(Math.random() * colors.length)];
dot.style.left = `${posX}%`;
dot.style.top = `${posY}%`;
dot.style.width = `${size}px`;
dot.style.height = `${size}px`;
dot.style.backgroundColor = color;
// Random animation
const duration = Math.random() * 5 + 3;
const delay = Math.random() * 5;
dot.style.animation = `float ${duration}s ease-in-out ${delay}s infinite`;
container.appendChild(dot);
}
}
// Simple testimonial slider
let currentTestimonial = 0;
const testimonials = [
{
text: "The care I received at Harmony Clinic was exceptional. From the moment I walked in, I felt valued as a patient. Dr. Johnson took the time to explain everything and made sure I was comfortable with my treatment plan.",
name: "Jennifer L.",
title: "Cardiology Patient",
image: "https://randomuser.me/api/portraits/women/45.jpg"
},
{
text: "After struggling with migraines for years, Dr. Chen diagnosed my condition accurately and provided treatment that changed my life. The staff was always kind and professional.",
name: "Robert K.",
title: "Neurology Patient",
image: "https://randomuser.me/api/portraits/men/32.jpg"
},
{
text: "Dr. Patel has been our family pediatrician for 5 years. She's wonderful with children and always makes time to answer our questions thoroughly. We trust her completely.",
name: "The Nguyen Family",
title: "Pediatrics Patients",
image: "https://randomuser.me/api/portraits/women/65.jpg"
}
];
function updateTestimonial() {
const testimonial = testimonials[currentTestimonial];
const testimonialCard = document.querySelector('.testimonial-card');
testimonialCard.innerHTML = `
<div class="testimonial-text">
<p>${testimonial.text}</p>
</div>
<div class="testimonial-author">
<div class="author-image">
<img src="${testimonial.image}" alt="${testimonial.name}">
</div>
<div class="author-info">
<h4>${testimonial.name}</h4>
<p>${testimonial.title}</p>
</div>
</div>
`;
currentTestimonial = (currentTestimonial + 1) % testimonials.length;
}
// Initialize
document.addEventListener('DOMContentLoaded', function() {
createDots();
updateTestimonial();
setInterval(updateTestimonial, 5000);
});
</script>
</body>
</html>