| Page | Description |
|---|---|
index.html |
Home page with hero, collection, benefits, and how-it-works sections |
about_us.html |
About page with commitment, quality, and headquarters sections |
Create_a_plan.html |
Interactive plan builder with accordion and order summary |
- HTML5 — semantic markup across 3 pages
- CSS3 — custom styles with nested CSS
- Bootstrap 5.3 — grid system, navbar, accordion, responsive utilities
- Bootstrap Icons — social media and UI icons
- Google Fonts — Barlow + Fraunces font pairing
- Vanilla JavaScript — card selection logic on the plan page
- Fully responsive across mobile, tablet, and desktop
- Interactive plan selector with selected state highlighting
- Sticky sidebar navigation on the Create a Plan page
- Smooth hover effects on buttons, cards, and nav links
- Multi-page routing with consistent header and footer
No setup needed — just open index.html in your browser or visit the GitHub Pages link above.
This project was built as a practical assignment during my frontend development training at Eraasoft, applying real-world concepts including:
- Multi-page HTML structure
- Bootstrap 5 layout and components
- Custom CSS with nested rules
- Responsive design with media queries
- DOM manipulation with JavaScript