GOIT Markup Homework #06 — Responsive Design

This homework focuses on implementing a responsive, mobile-first layout with multiple breakpoints and a fully functional mobile menu. The design is optimized for different devices and screen densities. All styles are written in css/styles.css, with modern-normalize enabled and Prettier used for formatting.

Live Demo: https://kutluhangil.github.io/goit-markup-hw-06/

---

📚 Table of Contents

1. About the Project
2. Acceptance Criteria (Mentor Checklist)
3. Responsiveness Requirements
4. Mobile Menu Requirements
5. Design Approach
6. Project Structure
7. Validation & Formatting
8. How to Run

---

📖 About the Project

• Layout adapts to three breakpoints: 320px, 768px, 1158px.
• Responsive images support x1 and x2 pixel densities.
• Background images adapt via min-resolution media queries.
• Mobile-first CSS approach with min-width queries.
• Fully styled mobile navigation menu with toggle class .is-open.

---

✅ Acceptance Criteria (Mentor Checklist)

A. Project

• A1 — On any device ≥320px wide, no horizontal scrollbars appear.
• A2 — Code formatted with Prettier.
• A3 — All images and text taken from the mockup.
• A4 — modern-normalize is enabled.
• A5 — Code follows guidelines.

---

📱 Responsiveness Requirements

• B1 — Each page includes the <meta name="viewport"> tag.
• B2 — Layout adapts to three breakpoints: 320px, 768px, 1158px.
• B3 — Backgrounds and content bitmaps are responsive and support x1 and x2 densities.
• B4 — Background images are set with min-resolution media queries.
• B5 — Styles follow the mobile-first approach with min-width queries.
• B6 — Styles needed only within a range are wrapped in (min-width) and (max-width) queries.
• B7 — Media queries avoid redundant style duplication.

---

📋 Mobile Menu Requirements

• C1 — All mobile menu elements are implemented.
• C2 — Mobile menu elements are styled.
• C3 — Menu width matches the design.
• C4 — Menu covers the full viewport height.
• C5 — Menu is hidden by default.
• C6 — Adding .is-open makes the menu visible.

---

🎨 Design Approach

• Mobile First — Base styles are defined for mobile, enhanced progressively for tablet and desktop.
• Responsive Images — Bitmap assets exported in both x1 and x2 resolutions.
• Accessible Menu — Mobile menu toggled with a class, spans full screen height.
• Consistent Media Queries — No repeated or conflicting styles.

---

📁 Project Structure

.
├─ index.html
├─ css/
│  └─ styles.css
├─ images/
│  ├─ ... responsive images (x1, x2)
│  └─ ...
└─ README.md

---

🧪 Validation & Formatting

• HTML passes W3C Validator without errors.
• CSS passes W3C CSS Validator.
• Code formatted with Prettier.
• Tested on multiple devices to ensure no horizontal scrollbars.

---

🚀 How to Run

1. Clone the repo and open index.html in a browser.
2. Check the responsive layout at 320px, 768px, 1158px widths.
3. Verify x2 images load on high-density displays.
4. Test mobile menu: add/remove .is-open to the menu container.
5. Publish via GitHub Pages and add the link in the repo’s About section.