Skip to content

Create home.html for CuriFix Hospital website #8787

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
n4ku7 wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Create home.html for CuriFix Hospital website #8787

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
121 changes: 121 additions & 0 deletions home.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,121 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CuriFix Hospital | Caring for Life</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-50 text-gray-800">

<!-- Navbar -->
<header class="bg-white shadow-md fixed w-full z-50">
<nav class="container mx-auto flex justify-between items-center py-4 px-6">
<h1 class="text-2xl font-bold text-blue-600">🏥 CuriFix Hospital</h1>
<ul class="flex space-x-6 text-gray-700 font-medium">
<li><a href="#home" class="hover:text-blue-600">Home</a></li>
<li><a href="#about" class="hover:text-blue-600">About</a></li>
<li><a href="#departments" class="hover:text-blue-600">Departments</a></li>
<li><a href="#doctors" class="hover:text-blue-600">Doctors</a></li>
<li><a href="#contact" class="hover:text-blue-600">Contact</a></li>
</ul>
</nav>
</header>

<!-- Hero Section -->
<section id="home" class="pt-32 pb-20 bg-blue-50">
<div class="container mx-auto flex flex-col md:flex-row items-center px-6">
<div class="md:w-1/2">
<h2 class="text-4xl md:text-5xl font-bold text-blue-700 mb-4">
Compassionate Care, Advanced Medicine
</h2>
<p class="text-lg text-gray-600 mb-6">
We bring together world-class technology and a dedicated team of professionals to provide exceptional healthcare services for you and your family.
</p>
<a href="#contact" class="bg-blue-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-blue-700 transition">
Book an Appointment
</a>
</div>
<div class="md:w-1/2 mt-10 md:mt-0">
<img src="https://cdn.pixabay.com/photo/2016/11/29/06/18/blur-1867485_1280.jpg" alt="Hospital" class="rounded-xl shadow-lg">
</div>
</div>
</section>

<!-- About Section -->
<section id="about" class="py-20">
<div class="container mx-auto px-6 text-center">
<h2 class="text-3xl font-bold text-blue-700 mb-6">About Us</h2>
<p class="max-w-3xl mx-auto text-gray-600 leading-relaxed">
At CuriFix Hospital, we believe that healthcare should be accessible, personalized, and compassionate.
Our hospital combines cutting-edge medical technology with a patient-first approach.
Whether it's a routine check-up or a complex procedure, we are here to care for you every step of the way.
</p>
</div>
</section>

<!-- Departments Section -->
<section id="departments" class="bg-blue-50 py-20">
<div class="container mx-auto px-6 text-center">
<h2 class="text-3xl font-bold text-blue-700 mb-8">Our Departments</h2>
<div class="grid md:grid-cols-3 gap-8">
<div class="bg-white p-6 rounded-xl shadow hover:shadow-lg transition">
<h3 class="text-xl font-semibold text-blue-600 mb-2">Cardiology</h3>
<p class="text-gray-600 text-sm">Expert cardiac care and diagnostics with advanced equipment and skilled specialists.</p>
</div>
<div class="bg-white p-6 rounded-xl shadow hover:shadow-lg transition">
<h3 class="text-xl font-semibold text-blue-600 mb-2">Neurology</h3>
<p class="text-gray-600 text-sm">Comprehensive care for neurological disorders with modern facilities and expert doctors.</p>
</div>
<div class="bg-white p-6 rounded-xl shadow hover:shadow-lg transition">
<h3 class="text-xl font-semibold text-blue-600 mb-2">Pediatrics</h3>
<p class="text-gray-600 text-sm">Dedicated child healthcare, ensuring safety, comfort, and accurate treatment for kids.</p>
</div>
</div>
</div>
</section>

<!-- Doctors Section -->
<section id="doctors" class="py-20">
<div class="container mx-auto px-6 text-center">
<h2 class="text-3xl font-bold text-blue-700 mb-8">Meet Our Doctors</h2>
<div class="grid md:grid-cols-3 gap-8">
<div class="bg-white p-6 rounded-xl shadow hover:shadow-lg transition">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Doctor" class="mx-auto rounded-full w-24 h-24 mb-4">
<h3 class="text-lg font-semibold text-blue-600">Dr. Rahul Verma</h3>
<p class="text-gray-600 text-sm">Cardiologist</p>
</div>
<div class="bg-white p-6 rounded-xl shadow hover:shadow-lg transition">
<img src="https://randomuser.me/api/portraits/women/45.jpg" alt="Doctor" class="mx-auto rounded-full w-24 h-24 mb-4">
<h3 class="text-lg font-semibold text-blue-600">Dr. Neha Sharma</h3>
<p class="text-gray-600 text-sm">Neurologist</p>
</div>
<div class="bg-white p-6 rounded-xl shadow hover:shadow-lg transition">
<img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Doctor" class="mx-auto rounded-full w-24 h-24 mb-4">
<h3 class="text-lg font-semibold text-blue-600">Dr. Aisha Khan</h3>
<p class="text-gray-600 text-sm">Pediatrician</p>
</div>
</div>
</div>
</section>

<!-- Contact Section -->
<section id="contact" class="bg-blue-600 py-20 text-white">
<div class="container mx-auto px-6 text-center">
<h2 class="text-3xl font-bold mb-6">Contact Us</h2>
<p class="mb-4">📍 123 Health Street, City, India</p>
<p class="mb-4">📞 +91 98765 43210</p>
<p class="mb-8">✉️ [email protected]</p>
<a href="mailto:[email protected]" class="bg-white text-blue-700 px-6 py-3 rounded-lg font-medium hover:bg-gray-100 transition">
Send Email
</a>
</div>
</section>

<!-- Footer -->
<footer class="bg-gray-800 text-gray-300 py-6 text-center">
<p>© 2025 CuriFix Hospital. All rights reserved.</p>
</footer>

</body>
</html>