https://www.figma.com/design/vRufQsGXMr0o0mFn68xo84/Untitled?node-id=0-1&t=zgC8aFE0VHxSp1nV-1 пример темы в Figma. Пароль thing-silver-horse-leaves
## 1. Цель проекта
Сверстать один адаптивный HTML-шаблон лендинга онлайн-сервиса, который может отображаться в 5 визуальных темах (условно: Тема 1, Тема 2, Тема 3, Тема 4, Тема 5). Все темы используют **единую структуру страниц и единый UX** (порядок блоков, поведение элементов, логика интерфейса одинаковы), но отличаются **UI-оформлением**: цветовой палитрой, фоновыми изображениями/паттернами, шрифтами и логотипом.
Дизайн-макет (пример одной темы, по которому оцениваются остальные 4): Figma-файл, предоставленный заказчиком.
---
## 2. Объём работ
1. Вёрстка единого набора страниц шаблона (перечень страниц уточняется по макету; ориентировочно: главная, внутренние информационные страницы, страница тарифов/подписки и т.п. — по структуре Figma-файла).
2. Реализация 5 тем оформления для этого набора страниц.
3. Демонстрационный переключатель тем — отдельный элемент интерфейса (например, в шапке или в виде демо-панели), позволяющий на живых HTML-страницах переключаться между всеми 5 темами без перезагрузки данных, чтобы наглядно показать разницу в оформлении.
4. Адаптивная вёрстка для трёх основных диапазонов: desktop (≥1200px), tablet (768–1199px), mobile (до 767px). Точки перелома (breakpoints) финально сверяются с Figma-макетом.
5. Реализация бургер-меню для мобильной и (при наличии в макете) планшетной версии: анимация открытия/закрытия, блокировка скролла фона при открытом меню, доступность (закрытие по клику вне меню и по Esc).
---
## 3. Технические требования
### 3.1 Препроцессор
- Вёрстка стилей — на **SCSS** (предпочтительно) либо LESS — по согласованию.
- Обязательное использование переменных препроцессора для всего, что отличается между темами: цвета, шрифты, отступы/радиусы, если они варьируются, пути к фоновым изображениям и логотипам.
### 3.2 Архитектура тем и наследование
- Общая логика: один базовый набор стилей (общая структура, отступы, сетка, поведение компонентов) + отдельный слой переопределений для каждой темы.
- Рекомендуемый подход:
- `styles/base/` — базовые стили, миксины, общая типографика, сетка, компоненты без привязки к цвету;
- `styles/themes/_theme-1.scss`, `_theme-2.scss`, `_theme-3.scss`, `_theme-4.scss`, `_theme-5.scss` — файлы с переменными конкретной темы (цвета, шрифты, фоны, логотип);
- переключение темы — через модификатор на корневом элементе (например, класс `theme-1` на `<html>` или `<body>`) и/или через CSS custom properties, переопределяемые на уровне темы.
- Использовать методологию именования классов **БЭМ** (Блок–Элемент–Модификатор) для всех компонентов.
- Общие компоненты (кнопки, карточки, header, footer, бургер-меню и т.д.) выносятся в переиспользуемые миксины/партиалы, чтобы изменения вносились в одном месте и наследовались во всех темах.
### 3.3 Шрифты и логотипы
- Для тем, где различаются шрифты — подключение через `@font-face` с фолбэками, вынесенными в переменные темы.
- Логотипы каждой темы — отдельные файлы (SVG предпочтительно), путь задаётся через переменную/атрибут темы.
### 3.4 Адаптивность
- Резиновая (флюидная) сетка с использованием flexbox/grid.
- Все интерактивные элементы, изображения, шрифты — корректно масштабируются на всех точках перелома.
- Ориентир по breakpoints (уточнить по факту при наличии в Figma отдельных мобильных/планшетных фреймов):
- Desktop: от 1200px
- Tablet: 768–1199px
- Mobile: до 767px
### 3.5 Бургер-меню
- Иконка-переключатель (гамбургер ↔ крест) с анимацией трансформации.
- Меню выезжает/раскрывается (по макету — уточнить направление и тип анимации: overlay на весь экран, sidebar, dropdown).
- Скролл основной страницы блокируется, пока меню открыто.
- Клавиатурная доступность: фокус остаётся внутри меню, закрытие по Esc.
### 3.6 Общий код и качество вёрстки
- Семантическая HTML5-разметка.
- Валидность вёрстки (без ошибок в валидаторе W3C по ключевым страницам).
- Оптимизация изображений (форматы WebP/SVG где уместно, ленивая загрузка `loading="lazy"` для некритичных изображений).
- Кроссбраузерность: последние версии Chrome, Firefox, Safari, Edge; отдельно — актуальные мобильные Safari/Chrome.
- Чистая структура файлов проекта (разделение HTML / SCSS (или LESS) / JS / ассеты), README с инструкцией по сборке.
---
## 4. Демонстрационная часть (результат для приёмки)
1. Набор HTML-страниц с возможностью **живого переключения между 5 темами** прямо в браузере (без пересборки), чтобы заказчик мог наглядно оценить все варианты оформления на одном и том же контенте/структуре.
2. Работающее бургер-меню на всех темах и на всех адаптивных версиях.
3. Исходники SCSS/LESS с понятной архитектурой (база + темы), пригодные для дальнейшей интеграции в CMS/фреймворк.
🏷️ Work_feed
