Верстка з Figma: position та absolute

В уроці Позиціонування ти познайомився з position: relative / absolute / fixed / sticky та z-index. Це одна з найпотужніших технік у CSS — без неї неможливо зробити жодний реальний UI: бейджі на картках, плаваючі кнопки, оверлеї, декоративні фігури, спливаючі підказки.

Тепер час закріпити це на справжньому макеті. Твоє завдання — зверстати набір e-commerce карток товарів за готовим дизайном з Figma. У цьому макеті буквально кожна картка — це школа position: absolute: бейджі знижок, "NEW", кнопка "додати в обране", рейтинги, оверлеї на зображеннях.

Макет у Figma: Free eCommerce Product Cards (Community)

Превью макету Free eCommerce Product Cards — картки товарів з бейджами NEW, іконкою обраного, рейтингом та селектором кольорів

Інфо

Якщо не хочеш реєструватися у Figma — є чудова безкоштовна альтернатива: Penpot. Це open-source редактор дизайну, який працює прямо в браузері й має точно такий самий dev-режим, як у Figma: розміри, кольори, відступи, експорт.

Я вже сконвертував макет у формат Penpot — просто завантаж файл і відкрий його:

⬇️ Завантажити макет (.penpot, 854 KB)
Створи безкоштовний акаунт на design.penpot.app (або відкрий через self-hosted demo)
У дашборді натисни Import file і обери завантажений .penpot файл
Клікай на елементи — справа побачиш CSS-властивості, як у Figma Inspect

Як дістати значення з Figma/Penpot

Малювати нічого не треба — лише читати макет. Ось усе, що знадобиться:

Клікни на елемент — праворуч з'явиться панель з його розмірами, кольорами та шрифтами (у Figma це вкладка Inspect / Dev Mode)
Кольори: клікни на колірний свотч у правій панелі — HEX-код можна скопіювати одним кліком
Відстані: виділи елемент, затисни Alt (Option на Mac) і наведи курсор на сусідній — побачиш відстань між ними в пікселях
Шрифти: у тій самій панелі є font-family, font-size, font-weight — переноси їх у CSS як є
Експорт зображень: виділи елемент → секція Export внизу правої панелі → SVG для іконок, PNG/WebP для фото. Якщо щось не експортується — підстав placeholder з Unsplash або unDraw

Інфо

У файлі кілька варіантів карток товарів. Обери 2-3 різні картки, які тобі подобаються, і зроби з них сторінку-каталог: шапка з логотипом та навігацією, сітка з карток (використай Flexbox із flex-wrap), футер. Головне — всередині кожної картки максимально використати position для бейджів, іконок, рейтингів та інших "плаваючих" елементів.

Завдання

Зверстай сторінку-каталог за макетом так, щоб результат візуально був максимально близьким до дизайну. Головний інструмент — position: relative на картках і position: absolute на всьому, що "плаває" над контентом: бейджі, іконка обраного, мітки кольорів, рейтинги.

Що має бути на сторінці

Семантичний HTML — <header>, <main>, <footer>, <nav>, осмислені alt для зображень
Шапка з логотипом і навігацією
Сітка з кількох карток товарів (бери 2-3 різні картки з макету і повтори їх)
Кольори, шрифти та відступи близькі до макету (виміряй через Inspect / Alt-наведення)

На що звернути увагу при верстці

На картках і всередині них активно використовуй position: relative як "систему координат" для дочірніх елементів
Бейджі ("NEW", знижки), іконку "сердечко", вибір кольорів, рейтинг — позиціонуй через position: absolute
Поекспериментуй із z-index, коли треба, щоб один елемент лежав поверх іншого
Базова розкладка (шапка, сітка карток) — через Flexbox

Не намагайся зробити pixel-perfect — головне, щоб структура, пропорції й позиціонування елементів виглядали як у макеті.

Бонусні завдання

Бонус	Тип	Бали
Sticky header — шапка лишається зверху при скролі (`position: sticky`)	[код]	+5
Floating action button — кнопка "нагору" в правому нижньому куті (`position: fixed`)	[код]	+5
Hover-ефекти — картка піднімається при наведенні, іконка обраного змінює колір, плавні переходи через `transition`	[код]	+5
Responsive — на мобільних картки складаються в одну колонку, шапка адаптується	[скрін]	+5

Як здати

Робота — в публічному GitHub-репозиторії курсу my-web-course, у папці hw-07/
У папці ДЗ — README.md: 2-3 речення що зроблено + як відкрити
Мінімум 3 коміти з осмисленими повідомленнями (не "fix"/"update")
Обов'язково скріншоти в hw-07/screenshots/:
- desktop.png — повна сторінка на ширині ~1440px
- mobile.png — на ширині ~390px (навіть якщо не робив responsive-бонус — покажи, як сторінка виглядає на мобільному)
Надішли посилання на репозиторій (можна одразу на папку hw-07)

Критерії оцінки

Критерій	Тип	Бали
Семантичний HTML (header, main, footer, nav, осмислені alt)	[код]	10
Базова розкладка через Flexbox (шапка, сітка карток із `flex-wrap`)	[код]	20
Грамотне використання `position: relative` + `absolute` для бейджів та плаваючих елементів, `z-index` де потрібно	[код]	30
Візуальна близькість до макету: бейджі в кутах карток, сердечко поверх фото, зірки рейтингу під назвою — звір зі скріншотом макета	[скрін]	20
Скріншоти `desktop.png` та `mobile.png` додано, сторінка виглядає цілісно	[скрін]	10
Якість коду	[код]	10
Разом		100