0% found this document useful (0 votes)
15 views4 pages

!DOCTYPE HTML HTML Lang en

The document is an HTML template for City Hospital's website, featuring sections for services, doctors, appointment booking, and contact information. It highlights the hospital's commitment to health with 24/7 emergency services and experienced medical professionals. The layout is designed using Tailwind CSS for a modern and responsive user experience.
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
15 views4 pages

!DOCTYPE HTML HTML Lang en

The document is an HTML template for City Hospital's website, featuring sections for services, doctors, appointment booking, and contact information. It highlights the hospital's commitment to health with 24/7 emergency services and experienced medical professionals. The layout is designed using Tailwind CSS for a modern and responsive user experience.
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

<!

DOCTYPE html><html lang="en">


<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-
scale=1.0" />
<title>City Hospital</title>
<script src="[Link]
</head>
<body class="bg-gray-50 text-gray-800"> <!-- Header --
> <header class="bg-blue-600 text-white">
<div class="max-w-7xl mx-auto flex justify-between items-
center p-4">
<h1 class="text-2xl font-bold">City Hospital</h1>
<nav class="space-x-6 hidden md:block">
<a href="#home" class="hover:underline">Home</a>
<a href="#services" class="hover:underline">Services</a>
<a href="#doctors" class="hover:underline">Doctors</a>
<a href="#appointments"
class="hover:underline">Appointments</a>
<a href="#contact" class="hover:underline">Contact</a>
</nav>
</div>
</header> <!-- Hero Section --> <section id="home"
class="bg-white">
<div class="max-w-7xl mx-auto grid md:grid-cols-2 gap-8
items-center p-10">
<div>
<h2 class="text-4xl font-bold mb-4">Your Health, Our
Priority</h2>
<p class="mb-6">24/7 emergency services, experienced
doctors, and world-class facilities.</p>
<a href="#appointments" class="bg-blue-600 text-white px-
6 py-3 rounded-xl shadow">Book Appointment</a>
</div>
<img src="[Link]
1586773860418-d37222d8fce3" class="rounded-2xl shadow" />
</div>
</section> <!-- Services --> <section id="services" class="py-
16 bg-gray-100">
<div class="max-w-7xl mx-auto">
<h3 class="text-3xl font-bold text-center mb-10">Our
Services</h3>
<div class="grid md:grid-cols-3 gap-6">
<div class="bg-white p-6 rounded-2xl shadow">
<h4 class="font-bold text-xl mb-2">Emergency Care</h4>
<p>Immediate and advanced emergency treatment
24/7.</p>
</div>
<div class="bg-white p-6 rounded-2xl shadow">
<h4 class="font-bold text-xl mb-2">Diagnostics</h4>
<p>MRI, CT Scan, X-Ray, and laboratory services.</p>
</div>
<div class="bg-white p-6 rounded-2xl shadow">
<h4 class="font-bold text-xl mb-2">Surgery</h4>
<p>Modern operation theatres with expert surgeons.</p>
</div>
</div>
</div>
</section> <!-- Doctors --> <section id="doctors" class="py-
16">
<div class="max-w-7xl mx-auto">
<h3 class="text-3xl font-bold text-center mb-10">Our
Doctors</h3>
<div class="grid md:grid-cols-3 gap-6">
<div class="bg-white p-6 rounded-2xl shadow text-center">
<img src="[Link]
1607746882042-944635dfe10e" class="w-32 h-32 mx-auto
rounded-full mb-4" />
<h4 class="font-bold">Dr. A. Sharma</h4>
<p>Cardiologist</p>
</div>
<div class="bg-white p-6 rounded-2xl shadow text-center">
<img src="[Link]
1550831107-1553da8c8464" class="w-32 h-32 mx-auto rounded-
full mb-4" />
<h4 class="font-bold">Dr. P. Verma</h4>
<p>Orthopedic</p>
</div>
<div class="bg-white p-6 rounded-2xl shadow text-center">
<img src="[Link]
1594824476967-48c8b964273f" class="w-32 h-32 mx-auto
rounded-full mb-4" />
<h4 class="font-bold">Dr. R. Khan</h4>
<p>Neurologist</p>
</div>
</div>
</div>
</section> <!-- Appointment --> <section id="appointments"
class="bg-blue-600 text-white py-16">
<div class="max-w-3xl mx-auto text-center">
<h3 class="text-3xl font-bold mb-6">Book an
Appointment</h3>
<form class="bg-white text-gray-800 p-8 rounded-2xl shadow
space-y-4">
<input class="w-full border p-3 rounded" placeholder="Full
Name" />
<input class="w-full border p-3 rounded"
placeholder="Phone Number" />
<input class="w-full border p-3 rounded"
placeholder="Email" />
<select class="w-full border p-3 rounded">
<option>Select Department</option>
<option>Cardiology</option>
<option>Orthopedic</option>
<option>Neurology</option>
</select>
<button class="bg-blue-600 text-white px-6 py-3 rounded-xl
w-full">Submit</button>
</form>
</div>
</section> <!-- Contact --> <section id="contact" class="py-
16">
<div class="max-w-7xl mx-auto grid md:grid-cols-2 gap-8">
<div>
<h3 class="text-3xl font-bold mb-4">Contact Us</h3>
<p>📍 Kingnagar, Karari, Uttar Pradesh, India</p>
<p>📞 +91 98765 43210</p>
<p>✉️info@[Link]</p>
</div>
<iframe class="w-full h-64 rounded-2xl"
src="[Link]
%20karari&t=&z=13&ie=UTF8&iwloc=&output=embed"></
iframe>
</div>
</section> <!-- Footer --> <footer class="bg-gray-900 text-
white text-center p-6">
© 2026 City Hospital. All Rights Reserved.
</footer></body>
☐ </html>

You might also like