Задача
Сверстать адаптивный одностраничный сайт (либо отдельный блок) по макету из Figma. Макет включает версию для ПК, планшета и телефона.
Технические требования к разработке
- Фреймворк: Bootstrap 5 в полной версии (не только сетка ".grid"). Использовать все необходимые компоненты: модальные окна, табы (вкладки), навигацию, формы.
- Фотогалерея: Реализовать Lightbox (увеличение фото при клике).
- SEO: Не использовать HTML-теги
h1...h6. Заменять их на специальные классы Bootstrap (например, class="h1"), сохраняя семантику и стили. - Контент: Блок с кнопкой «Подробнее»: изначально текст свёрнут в одну строку. По клику контент раскрывается, текст кнопки меняется с «Развернуть ...chevron-down...» на «Свернуть ...chevron-up...».
Навигация
- Главное меню должно перестраиваться в мобильное. Ссылки не дублируются в коде.
- Выпадающее меню (десктоп): Открывается по наведению, ссылка кликается и переводит на страницу, прописанную в href.
- Мобильное меню: Выпадающий список открывается по нажатию на иконку (шеврон вниз), сама ссылка также кликабельна и ведёт пользователя по ссылке.
- Триггер "Каталог": По наведению происходит выезд (либо открытие меню), при этом иконка на кнопке меняется с "бургера" на "крестик". Клик - переход по ссылке.
Визуальные элементы
- Иконки: Все SVG-иконки подключать только через тег <img src="" ... >.
- Слайдер: Использовать слайдер (карусель) для демонстрации изображений товаров (или корпоративной витрины, зависел от содержимого макета).