Верстка макета из Figma, Tailwind
Верстка
Бюджет: 7000 руб.
Цель
Адаптивная (mobile-first) верстка лендинга по макету из Figma.
Стек и методология
- CSS: Tailwind CSS
- Классы: БЭМ
- JS: Vanilla JS (единственный main.js)
Адаптивность
- mobile-first
- гамбургер-меню в мобильной версии (открытие/закрытие по кнопке)
Интерактивность
- Меню: фиксация верхнего меню при прокрутке
- FAQ: разворачивание подробного текста
- “Дополнительное образование”: разворачивание подробного текста
- Реализовать на чистом JS
- реакция интерактивных элементов при наведении мыши (показано в UI-kit)
Разметка и ссылки
- Семантические теги (<header>, <section>, <footer>…)
- Кнопки — это ссылки <a href="#">…</a>
Стиль и переменные
- Цвета - CSS-переменные в :root
- Tailwind-утилиты для отступов, шрифтов и прочего
Футер
- Верстать только вариант с категориями и ссылками
Иконки, изображения и карта
- Карту вставить как статичную картинку через `<img>`
- SVG-иконки — хранить в /assets/icons/, подключать через `<img>` или `<use>`
- Фото-блоки:
- фон — отдельным слоем в CSS
- основной PNG с прозрачным фоном — поверх
Структура проекта
/index.html
/css/
style.css
/js/
main.js
/assets/
icons/ ← .svg
images/ ← .png, карта, фоновые изображения
Критерии приёмки
- Соответствие макету
- Работоспособность интерактивных элементов
- Семантическая, валидная HTML/CSS
- Нет inline-стилей и встроенных SVG
