Личный проект «SUPERGYM»

Проект выполнен во время прохождения этапа акселерации в HTML Academy на «Профессии фронтенд-разработчик» в команде с менеджером и тестировщиками.

• Студент: Николай Дидур.

---

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

1. Стандарты вёрстки: HTML5, CSS3, прогрессивное улучшение.

2. Адаптивность сетки: мобильная, планшетная и десктопная версии. Desktop First. На всех промежуточных разрешениях используется резиновая вёрстка.

3. Используемая методология: БЭМ.

4. Используемые фреймворки: нет.

5. Используемый препроцессор: Sass (SCSS).

6. Используемый инструмент автоматизации: Gulp.

   Для корректной работы сборки необходимо использовать версию Node.js 16.

7. Кроссбраузерность: Chrome, Firefox, Safari.

8. Графика не предоставляется и её необходимо вырезать самостоятельно.

9. Нестандартные шрифты подключены локально. Скачать можно с Google Fonts.

   Примечание: вместо Roboto Condensed с начертанием 500 допустимо использование Roboto Condensed с начертанием 400.
   Также обратите внимание перед стартом реализации вёрстки на использованные дизайнером приёмы по работе с текстовыми компонентами макета. Вместо ожидаемого начертания вы можете заметить утолщение за счёт обводки (например, в заголовке) или иной регистр (например, в локации).

10. JavaScript: минимальная реализация, модальные окна, переключения и так далее.

11. Папка build должна попадать в репозиторий и находится в основной ветке проекта — это необходимо для проведения оперативного тестирования. При тестировании происходит автоматическая подгрузка репозитория из главной ветки.

Верстка должна соответствовать Критериям качества:

Акселератор: Критерии Фронтенд-разработчик

Верстка проекта выполняется согласно базовому техническому заданию:

Базовое Техническое задание к проектам Акселератора

Перед сдачей проекта обязательно проверить проект на соответствие критериям и провести самостоятельное тестирование.

Требования заказчика

1. Брейкопойнты :

   • мобильная версия — 320px - 767px
   • планшетная версия — 768px - 1199px
   • десктопная версия — от 1200 px и выше

2. При клике на кнопку Купить абонемент происходит скролл страницы до раздела Абонементы.

3. Раздел Тренажерный зал.

   • Десктоп версия страницы содержит два абзаца текста, в планшетной и мобильной версии сохраняется только первый абзац.
   • Блок с видео. Обложку видео и кнопку play необходимо стилизовать в соответствии с макетом.
   • При клике на play запускается видео.

4. Раздел Абонементы

   • Это вкладки (табы). Подробные требования к реализации в Базовом техническом задании.
   • Блоки с абонементами при наведении меняют своё состояние. См. стайлгайд.
   • Кнопка Купить абонемент ведёт на страницу — заглушку, потенциальную страницу, которой нет в макете.
   • Стоимость абонементов на 6 и 12 месяцев возможно указать на усмотрение студента.

5. Промо блок Super Games

   • Кнопка Заполнить заявку ведёт на страницу — заглушку, потенциальную страницу, которой нет в макете.

6. Блок Тренеры

   • Слайдер прокручивается бесконечно.
   • Вёрстка и оживление минимум восьми слайдов — обязательна.
   • Допустимо использовать слайды повторно.
   • Информация о тренере отображается:
     • при наведении в десктопной версии;
     • при клике по карточке в мобильной и планшетной версиях.

7. Блок Акции

   • Кнопка Подробнее на страницу — заглушку, потенциальную страницу, которой нет в макете.

8. Блок FAQ

   • Данный блок таб в каждой вкладке которого аккордеон. По умолчанию все вкладки аккордеона должны быть скрыты, выбран первый таб блока «центр».
   • Категории групп вопросов и ответов: Центр, Абонемент, Услуги, Правила.
   • У выпадающих элементов при раскрытии ответа на вопрос через + и скрытии его через — проигрывается анимация плавного выпадения.
   • При выборе категории происходит плавное появление вопросов категории.
   • Пользователь сам раскрывает выпадающий элемент и сам же его закрывает. Одновременно пользователем могут быть открыты все элементы.

9. Блок Отзывы

   • Блок является слайдером. Требования к слайдеру прописаны в Базовом техническом задании.
   • Вёрстка и оживление минимум двух слайдов обязательны.
   • Допустимо использовать слайды повторно.
   • Слайдер «отзывы» не зациклен, то есть после перехода к последнему элементу дальше переключиться нельзя.
   • В начальном положении слайдера — кнопка Назад блокирована, при финальном положении — кнопка Вперёд блокирована.

10. Форма Бесплатное Занятие.

    • Контент полей формы должен проходить валидацию.
    • Поля формы должны очищаться после её отправки.

11. Загрузить проект на GitHub Pages перед тестированием