GOIT Markup Homework #03 — Block Model & Flexbox

This homework focuses on the CSS block (box) model and Flexbox while keeping semantic HTML, clean structure, and consistent spacing. The project introduces a shared .container utility, section spacing, a header bottom border, and list-based layouts aligned with the design.

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

---

📚 Table of Contents

1. About the Project
2. Acceptance Criteria (Mentor Checklist)
3. Design & Layout Rules
4. Project Structure
5. Validation & Formatting
6. How to Run

---

📖 About the Project

• Images live in images/, styles in css/styles.css.
• Global resets for h1…h6, p, ul with a modern normalizer (modern-normalize).
• Common .container (width: 1158px) centers and constrains content.
• Sections are stacked like a book (no external margins), each using a shared .section with 120px top/bottom padding.
• Flexbox is used where appropriate (header, nav, horizontal lists inside sections).

---

✅ Acceptance Criteria (Mentor Checklist)

A. Project

• A1 — Project root contains an images/ folder with all images.
• A2 — Project root contains a css/ folder with a stylesheet.
• A3 — All styles are in a single file: css/styles.css.
• A4 — File names use only lowercase Latin letters and hyphens (no spaces, uppercase, or transliteration).
• A5 — Source code is formatted with Prettier.
• A6 — All images and text content are taken from the layout.
• A7 — modern-normalize is enabled.
• A8 — Code follows the provided guidelines.

B. Design & Layout (Block Model / Flexbox)

• B1 — Allow global resets using tag selectors for h1…h6, p, and ul.
• B2 — Elements must not have exterior margins that break container layout.
• B3 — Use margin for vertical gaps between adjacent elements.
• B4 — Use padding to create inner spacing between content and borders.
• B5 — All margin and padding values must exactly match the design.
• B6 — Provide a shared .container utility for centering & max width.
• B8 — .container width is 1158px to match the layout.
• B9 — .container wraps main regions (header, footer, sections).
• B10 — Use Flexbox only where needed (e.g., header layout, nav, horizontal lists in sections).
• B11 — Final rendered sizes in the browser match the design.
• B12 — No fixed heights; height is determined by content.
• B13 — Header includes a subtle bottom border (zoom the design to see it).
• B14 — Sections stack like a book without external margins.
• B15 — All sections use the same .section class with 120px top & bottom padding.
• B16 — Portfolio cards in the “Our Portfolio” section have a bottom-only border.

---

📁 Project Structure

.
├─ index.html
├─ css/
│  └─ styles.css
├─ images/
│  ├─ ...
└─ README.md

---

🧪 Validation & Formatting

• Use Prettier for code formatting.
• Enable modern-normalize (via CDN or local copy).
• Check spacing, borders, and sizes against the layout precisely.

---

🚀 How to Run

1. Clone the repo and open index.html in your browser.
2. Ensure paths to css/styles.css and assets in images/ are correct.
3. Publish via GitHub Pages (Settings → Pages) and add the live link to the repo’s About → Website.

---

Tip: Be strict with the box model: margins create outer gaps between components; padding creates inner spacing. Use Flexbox intentionally for horizontal alignment; don’t force heights.