GOIT Markup Homework #04 — Decorative Effects

This homework focuses on decorative UI effects: SVG sprite icons, layered background images, shadows, interactive overlays, and smooth transitions. All styles live in css/styles.css, and all assets are stored in images/. The project follows semantic HTML and design guidelines.

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

---

📚 Table of Contents

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

---

📖 About the Project

• All images are placed in images/; vector icons are combined into a single SVG sprite: images/icons.svg.
• All SVGs are optimized and exported correctly (select the group when exporting).
• Styles are authored in a single file: css/styles.css.
• File names use lowercase Latin letters and hyphens only (no spaces, uppercase, or special chars).
• Source code is formatted with Prettier and normalized with modern-normalize.
• Content and assets strictly match the mockup.

---

✅ Acceptance Criteria (Mentor Checklist)

A. Project

• A1 — Project root contains an images/ folder with all assets.
• A2 — All vector icons are combined into images/icons.svg (SVG sprite).
• A3 — All SVGs are optimized.
• A4 — Project root contains a css/ folder with styles.
• A5 — All styles are in css/styles.css.
• A6 — File names contain no uppercase, spaces, or special characters.
• A7 — Source code formatted with Prettier.
• A8 — All images and text match the mockup.
• A9 — modern-normalize is enabled.
• A10 — Styles are written in css/styles.css (single entry point).
• A11 — Code follows the style guidelines.

---

🧩 Markup Rules

• B1 — All icons use SVG vector graphics.
• B2 — SVGs are exported correctly (export the group, not individual paths).
• B3 — Icons from the sprite are embedded via <svg> + <use href="images/icons.svg#icon-id">.
• B4 — Icons are added to the Advantages section (a separate, titleless list section near “Our Team”).
• B5 — Social icons are added in the Our Team section.
• B7 — Social icons are also present in the footer.
• B8 — All layout elements are properly marked up in HTML.
• B9 — Semantic tags are used according to their meaning.

---

🎨 Design & Decorative Effects

• C1 — A large layered background image is used under the header with gradient/fade effects.
• C2 — The header’s background image must not stretch beyond its native width (1440px).
• C3 — Cards in the Our Team section have a persistent box-shadow.
• C4 — Cards in the Our Portfolio section show a shadow on hover.
• C5 — Icons change state (e.g., color) on hover/focus if specified by the design.
• C6 — All hover/focus effects (color, background, shadow) use transitions: 250ms and cubic-bezier(0.4, 0, 0.2, 1).
• C7 — Transitions explicitly list animated properties (no all).
• C8 — In the main navigation, the active page link is underlined using the ::after pseudo-element.
• C9 — Portfolio cards display a text overlay on hover.
• C10 — The blue overlay on portfolio cards is anchored to the bottom.
• C11 — Pseudo-elements (::before/::after) must not contain textual content in content:—they are decorative only.

---

📁 Project Structure

.
├─ index.html
├─ css/
│  └─ styles.css
├─ images/
│  ├─ icons.svg   ← SVG sprite
│  └─ ...         ← raster/vector assets
└─ README.md

---

🧪 Validation & Formatting

• Use Prettier for consistent formatting.
• Enable modern-normalize (CDN or local).
• Check that all decorative effects match the mockup (shadows, overlays, gradients, transitions).
• Confirm semantic HTML and correct <svg>/<use> usage for the sprite.

---

🚀 How to Run

1. Open index.html in your browser.
2. Ensure css/styles.css is linked and images/icons.svg is referenced by IDs used in <use>.
3. Publish via GitHub Pages (Settings → Pages) and place the live link in the repo’s About → Website.

---

Tip: Keep transitions intentional (list properties explicitly), use SVG sprites for performance, and ensure overlays and shadows precisely match the mockup.