Верстка з 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 — повернись до ДЗ #8, там є детальний міні-гайд по Inspect-панелі, експорту зображень і копіюванню кольорів.
У файлі кілька варіантів карток товарів. Обери 2-3 різні картки, які тобі подобаються, і зроби з них сторінку-каталог: шапка з логотипом та навігацією, сітка з карток (використай Flexbox із flex-wrap), футер. Головне — всередині кожної картки максимально використати position для бейджів, іконок, рейтингів та інших "плаваючих" елементів.
Завдання
Зверстай сторінку-каталог за макетом так, щоб результат візуально був максимально близьким до дизайну. Головний інструмент — position: relative на картках і position: absolute на всьому, що "плаває" над контентом: бейджі, іконка обраного, мітки кольорів, рейтинги.
Що має бути на сторінці
- Семантичний HTML —
<header>,<main>,<footer>,<nav>, осмисленіaltдля зображень - Шапка з логотипом і навігацією
- Сітка з кількох карток товарів (бери 2-3 різні картки з макету і повтори їх)
- Кольори, шрифти та відступи близькі до Figma (виміряй через Inspect / Alt-наведення)
На що звернути увагу при верстці
- На картках і всередині них активно використовуй
position: relativeяк "систему координат" для дочірніх елементів - Бейджі ("NEW", знижки), іконку "сердечко", вибір кольорів, рейтинг — позиціонуй через
position: absolute - Поекспериментуй із
z-index, коли треба, щоб один елемент лежав поверх іншого - Базова розкладка (шапка, сітка карток) — через Flexbox
Не намагайся зробити pixel-perfect — головне, щоб структура, пропорції й позиціонування елементів виглядали як у макеті.
Бонусні завдання
- Sticky header — шапка лишається зверху при скролі (
position: sticky) - Floating action button — кнопка "нагору" в правому нижньому куті (
position: fixed) - Hover-ефекти — картка піднімається при наведенні, іконка обраного змінює колір, плавні переходи через
transition - Responsive — на мобільних картки складаються в одну колонку, шапка адаптується
Критерії оцінки
| Критерій | Бали |
|---|---|
| Семантичний HTML | 15 |
| Базова розкладка через Flexbox (шапка, сітка карток) | 20 |
Грамотне використання position: relative + absolute для бейджів та плаваючих елементів | 35 |
| Візуальна близькість до макету (кольори, шрифти, відступи) | 20 |
| Чистий, організований CSS | 10 |
| Бонус: sticky header / fixed FAB / hover / responsive | +20 |