Health Care - Javascript Website Template (Design-3)

---

A modern, responsive, and user-friendly Health Care Website Landing Page built from scratch using HTML and CSS. This project is perfect for learning, portfolio, or as a starting point for healthcare-related web projects.

• Live Demo: https://healthcare-template-3.netlify.app/

---

Table of Contents

• Project Summary
• Features
• Project Structure
• Technologies Used
• How to Run
• Walkthrough & Components
• Customization & Reuse
• Keywords
• Conclusion

---

Project Summary

This project demonstrates how to create a visually appealing and functional healthcare landing page using only HTML and CSS. It includes sections for services, about, doctors, and contact, with a clean, modern design and responsive layout. The project is ideal for beginners and intermediate developers looking to improve their frontend skills.

---

Features

• Responsive design for all devices
• Modern UI with custom fonts and icons
• Service highlights and booking form
• About section and reasons to choose
• Doctors showcase with social links
• Footer with contact and navigation
• Easy to customize and extend

---

Project Structure

HealthCare_22-07-23-main/
│
├── index.html         # Main HTML file
├── styles.css         # Main CSS file
├── assets/            # Image assets
│   ├── about.jpg
│   ├── choose-us.jpg
│   ├── doctor-1.jpg
│   ├── doctor-2.jpg
│   ├── doctor-3.jpg
│   └── header.jpg
└── README.md          # Project documentation

---

Technologies Used

• HTML5: Semantic markup for structure and accessibility
• CSS3: Custom styles, responsive layout, and animations
• Remixicon: Icon library via CDN
• Google Fonts: Poppins font for modern typography

---

How to Run

Quick Start

1. Download or Clone the Repository

   git clone <repo-url>
   cd HealthCare_22-07-23-main

2. Open index.html in Your Browser

   • Double-click index.html or right-click and choose "Open With" your preferred browser.

Using a Local Server (Recommended for Development)

• With Python 3:

  python3 -m http.server 8000

  Then visit http://localhost:8000 in your browser.

• With VS Code Live Server Extension:

  1. Install the "Live Server" extension.
  2. Right-click index.html and select "Open with Live Server".

---

Walkthrough & Components

1. Header & Navigation

• Logo, navigation links, and a "Contact Us" button.
• Responsive navigation bar.

2. Hero Section

• Main headline and description.
• "See Services" button.
• Booking form for appointments.

3. Services Section

• Highlights three main services with icons and descriptions.

4. About Us

• Information about the healthcare provider.
• Accompanied by an image.

5. Why Choose Us

• Lists unique selling points with icons and descriptions.

6. Doctors Section

• Showcases three doctors with images, names, specialties, and social links.

7. Footer

• Contact information, navigation, and social media icons.

---

Customization & Reuse

• Change Images: Replace files in the assets/ folder with your own.
• Edit Content: Update text in index.html for your organization.
• Add Sections: Duplicate and modify existing sections for more features.
• Reuse Styles: Copy styles.css and adapt for other projects.
• Icons: Use Remixicon for additional icons.

Example: Adding a New Service Card

<div class="service__card">
  <span><i class="ri-stethoscope-line"></i></span>
  <h4>New Service</h4>
  <p>Description of the new service.</p>
  <a href="#">Learn More</a>
</div>

---

Keywords

HTML, CSS, Responsive Design, Healthcare Website, Landing Page, Web Design, Frontend, UI/UX, Remixicon, Google Fonts, Modern Web, Portfolio Project

---

Conclusion

This project is a great starting point for anyone looking to build a healthcare landing page or learn modern HTML/CSS techniques. Feel free to customize, extend, and share your own versions. Contributions and feedback are welcome!

---

Happy coding! 😊

Thank you!

---