CarePlus Health Mockup

A clean, responsive, and accessible healthcare mock website built as a portfolio piece. This project demonstrates modern web development best practices using pure HTML, CSS, and JavaScript without relying on heavy frameworks or libraries.

🎨 Design Theme

The application is styled using a Natural Tones aesthetic (inspired by Lumina Health), featuring:

• Earthy color palette (Sage, Cream, Earth, Moss)
• Clean, sans-serif typography (Helvetica Neue, Arial)
• Soft shadows and rounded corners
• Minimalist and professional layout

✨ Features

• Zero Dependencies: Built entirely with vanilla HTML, CSS, and JavaScript.
• Mobile-First Responsive Design: Fluid layout that adapts perfectly from mobile phones to large desktop screens using CSS Grid and Flexbox.
• Accessibility (a11y): Includes semantic HTML tags, a "Skip to main content" link for keyboard navigation, and proper ARIA attributes.
• Interactive Mobile Menu: Custom vanilla JavaScript implementation for the mobile navigation toggle.

📁 File Structure

The project consists of exactly three core files:

• index.html - The semantic HTML structure and content.
• style.css - Custom CSS styling, CSS variables for theming, and media queries for responsiveness.
• script.js - Vanilla JavaScript handling the mobile menu interactions.

🚀 How to Run

Since this is a static website with no build tools or package managers required, running it is incredibly simple:

1. Download or clone the repository.
2. Open the index.html file directly in any modern web browser.
3. (Optional) Use a local server like VS Code's "Live Server" extension for hot-reloading during development.

🛠️ Technologies Used

• HTML5
• CSS3 (Variables, Flexbox, Grid, Media Queries)
• Vanilla JavaScript (ES6+)