Адаптивность сетки: отображено на макете. Контейнер фиксированной ширины.
Вёрстка не должна ломаться при изменении масштаба страницы.
Используемая методология: БЭМ.
Используемые фреймворки: нет.
Используемый препроцессор: Sass (SCSS-синтаксис).
Кроссбраузерность: Chrome, Firefox.
Шрифт Manrope
JavaScript: необходимо реализовать компоненты
1/Hero (Promo)
Изображение занимает весь экран.
Блок с текстом:
Всегда находится снизу на одинаковом расстоянии.
Блок должен быть готов к двойному переполнению текстами.
Блок может съезжать вниз при добавлении текста из DevTools, но должен нормально работать при изменении текста в исходном HTML-файле.
Слайдер:
Зациклен (прокручивается бесконечно).
Умеет рассчитывать высоту автоматически.
На десктопное ширине отключена возможность перетаскивание слайдов мышкой (allowTouchMove).
Буллеты являются интерактивными для переключения слайдов.
2/Программы
Слайдер.
Не имеет автозапуска.
Не зациклен.
Мобильная версия: показывается 1 слайд.
Планшетная версия: показывается 2 слайда.
Десктопная версия: показывается 3 слайда. Отключена возможность перетаскивание слайдов мышкой (allowTouchMove).
Элемент с иконкой стрелки переводит на другую страницу.
Элементы со стрелками, начиная с планшета, «показать предыдущий слайд» и «показать следующий слайд» перелистывают по одному слайду.
Элемент «Все программы» переводит на другую страницу.
Пагинация реализована в виде скролл-бара
3/Новости и материалы
Навигация:
Элементы навигации — табы.
Мобильная версия: имеет прокрутку для пунктов навигации, которые ушли за экран.
Каждый пункт навигации интерактивный. Реализация переключения и смены контента не требуется.
Слайдер:
Сдвигает страницу целиком
Не имеет автозапуска.
Не зациклен.
На одной странице показывается несколько слайдов.
Первый слайд на каждой странице всегда большой.
Элементы со стрелками «показать предыдущий» и «показать следующий» и пагинация перелистывают по одной странице на всех разрешениях.
Кнопки пагинации позволяют перейти к произвольному слайду.
4/Вопросы и ответы
По умолчанию у аккордеона должен быть открыт третий ответ, как и в макете.
Одновременно могут быть открыты несколько ответов.
Интерактивной частью блока является весь вопрос, например «Кто организатор? Какие сроки у программы?», а не только иконка с +.
5/Отзывы
Слайдер: Не имеет автозапуска. Не зациклен.
Элементы со стрелками «показать предыдущий слайд» и «показать следующий слайд» перелистывают по одному отзыву на всех разрешениях.
Пожаловаться
