🏋️ Fitness Guide — Landing Page

A clean, responsive landing page for a fictional fitness platform built using pure HTML5 and CSS3. Developed as part of my frontend development self-study journey.

---

🛠️ Built With

• HTML5 — Semantic structure and layout
• CSS3 — Styling, Flexbox, hover effects, transitions
• No frameworks, no libraries — pure vanilla HTML & CSS

---

✨ Features

• Responsive navigation header with logo and nav links
• Four content sections presented as hover-animated cards
• Flexbox-based card grid layout (2 columns on desktop, 1 on mobile)
• Smooth card hover effects using CSS transform and box-shadow
• Fully responsive design with media queries for mobile screens (≤768px)
• Clean footer with copyright notice

---

📁 Project Structure

Landing-page/
├── index.html       # Main HTML structure
├── style.css        # All styling and responsive rules
└── fitness_logo.png # Logo image

---

🚀 How to Run

No setup or installation needed.

1. Clone the repository:

   git clone https://github.com/code-runner006/Landing-page.git

2. Open index.html in any browser:

   cd Landing-page
   start index.html      # Windows
   open index.html       # macOS

That's it — no dependencies, no build step.

---

📱 Responsive Behavior

Screen Size	Layout
Desktop (> 768px)	2-column card grid
Mobile (≤ 768px)	Single column, stacked header

---

🧠 What I Learned

• Structuring a multi-section webpage with semantic HTML
• Flexbox for both header layout and card grid arrangement
• CSS transitions for smooth hover animations
• Writing responsive media queries for mobile compatibility
• Consistent visual design using color palette and spacing