GOIT Markup Homework #05 — Forms & Modal

This homework implements accessible forms (newsletter in footer + application form inside a modal) and a fully styled modal dialog with a backdrop. All styles live in css/styles.css, assets in images/, icons in an SVG sprite (images/icons.svg). The project uses semantic HTML, modern-normalize, and Prettier.

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

---

📚 Table of Contents

1. About the Project
2. Acceptance Criteria (Mentor Checklist)
3. Modal Window Requirements
4. Forms Requirements
5. Design & Interactions
6. Project Structure
7. Validation & Formatting
8. How to Run

---

📖 About the Project

• Footer newsletter subscription form with labeled inputs, placeholder text, and submit button.
• Modal dialog containing an application form. Dialog opens by toggling is-open on the backdrop.
• SVG sprite (images/icons.svg) holds all inline icons, including form/checkbox icons.
• Focus/hover visual states and smooth transitions specified by the style guide.

---

✅ Acceptance Criteria (Mentor Checklist)

A. Project

• A1 — All styles are written in a single file: css/styles.css.
• A2 — Source code is formatted with Prettier.
• A3 — All images and text are taken from the layout.
• A4 — modern-normalize is enabled.
• A5 — Code follows the guidelines.

---

🪟 Modal Window Requirements

• B1 — Backdrop (semi-transparent dark overlay) is styled.
• B2 — Backdrop covers 100% of viewport width & height and is fixed.
• B3 — Modal dialog is fully styled.
• B4 — Modal is vertically & horizontally centered within the backdrop.
• B5 — A styled close button is placed at the top-right of the modal.
• B6 — By default, backdrop and modal are hidden.
• B7 — Adding .is-open to the backdrop makes both backdrop and modal visible.

---

📝 Forms Requirements

• C1 — All layout elements are properly marked up in HTML.
• C2 — Semantic tags are used according to meaning.
• C3 — Footer newsletter form (and its elements) is fully marked up.
• C4 — Application form inside the modal (and all elements) is fully marked up.
• C5 — Every input has a name attribute.
• C6 — name values clearly describe the purpose of each field.
• C7 — Each input is associated with a <label> (via for/id).
• C8 — If the layout shows hint text, inputs have placeholder attributes.
• C9 — The email input includes placeholder="E-mail".
• C10 — Submit buttons have type="submit".
• C11 — Any new form icons are added to the SVG sprite (images/icons.svg).

---

🎨 Design & Interactions

• D1 — Footer newsletter form elements are fully styled.
• D2 — Modal’s application form elements are fully styled.
• D3 — On input focus, the border and icon color change (as per design).
• D4 — The legal-agreement checkbox’s native control is visually hidden.
• D5 — The custom checkbox is designed using an SVG checkmark from the sprite.
• D6 — All hover/focus transitions use 250ms and cubic-bezier(0.4, 0, 0.2, 1), with explicit properties (no all).

---

📁 Project Structure

.
├─ index.html
├─ css/
│  └─ styles.css
├─ images/
│  ├─ icons.svg      ← SVG sprite (form icons, checkbox tick, etc.)
│  └─ ...            ← raster/vector assets
└─ README.md

---

🧪 Validation & Formatting

• Format with Prettier.
• Enable modern-normalize (CDN or local).
• Ensure every input has a label and descriptive name.
• Check keyboard focus states for all interactive controls (accessibility).
• Verify transitions and focus/hover styles match the mockup.

---

🚀 How to Run

1. Open index.html in your browser.
2. Ensure css/styles.css is linked and images/icons.svg contains used icon IDs.
3. Toggle the modal by adding/removing .is-open on the backdrop element.
4. Publish via GitHub Pages (Settings → Pages) and add the live link in the repo’s About section.

---

Tips: Keep labels explicitly bound to inputs, hide native checkbox accessibly (not display:none), and animate only intended properties for performance.