Сайт для обучающей платформы

Проект представляет собой адаптивный веб-сайт, разработанный в соответствии с предоставленным техническим заданием. Основная цель проекта — создать удобный и функциональный интерфейс для пользователей с поддержкой различных устройств и браузеров.

Основные особенности проекта

• Адаптивная вёрстка: Сайт корректно отображается на всех устройствах, начиная с мобильных (320px) и заканчивая десктопными (1440px и выше).
• Методология БЭМ: Использование методологии БЭМ для организации CSS-кода и структуры HTML.
• Препроцессор Sass: Для стилизации используется SCSS-синтаксис.
• Кроссбраузерность: Поддержка современных браузеров, таких как Chrome и Firefox.
• JavaScript-компоненты: Реализованы интерактивные элементы, такие как бургерное меню, слайдеры, модальные окна, аккордеон и другие.

Технические требования

• Сборка проекта: Используется предоставленная сборка без модификаций. Инструкции по настройке и запуску проекта находятся в файле readme.md.
• Шрифты: Используется шрифт Manrope.
• Анимации: Все анимации длятся не более 300 мс.
• Валидация форм: Все формы проходят валидацию перед отправкой данных на сервер.
• Слайдеры: Реализованы слайдеры с различными настройками (зацикленные, с пагинацией, с возможностью перетаскивания и без).

Структура проекта

Шапка

• Логотип и бургерное меню с поддержкой подкатегорий.
• Плавные переходы и интерактивные состояния для всех элементов.

Hero (Promo)

• Адаптивное изображение на весь экран.
• Текстовый блок с поддержкой переполнения.
• Зацикленный слайдер с автоматической высотой и буллетами для навигации.

О проекте

• Модальное окно «Напишите нам» с валидацией полей и маской для телефона.

Программы

• Слайдер с настройками для мобильных, планшетных и десктопных устройств.
• Пагинация в виде скролл-бара.

Как поехать

• Блок с изменяемым количеством пунктов и адаптивным изображением.

Новости и материалы

• Табы для навигации и слайдер с пагинацией, который сдвигает страницу целиком.

Вопросы и ответы

• Аккордеон с возможностью открытия нескольких ответов одновременно.

Отзывы

• Слайдер с ручным переключением отзывов.

Контакты

• Статичная карта с маркером и интерактивными элементами (телефон, email).

Подвал

• Логотип, навигация с якорными ссылками и ссылки на социальные сети.

Используемые технологии

• HTML5, CSS3 (SCSS)
• JavaScript (ES6+)
• Методология БЭМ
• Сборка на основе предоставленного инструмента

Ссылка на сайт: тут