SUPERGYM

Верстка и программирование главной страницы сайта фитнес-центра SUPERGYM

Ссылки

• Деплой
• Репозиторий
• Макет

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

• HTML5
• методология BEM
• CSS3, SCSS
• Flexbox, Grid Layout
• JavaScript
• Gulp
• Node.js

В проекте реализованы

• семантическая, кросс-браузерная и адаптивная верстка по BEM
• оптимизация и ретинизация графики, использование SVG, CSS анимации
• интерактивные блоки (слайдеры, табы, форма с валидацией)
• библиотека swiper.js
• более 90 баллов за показатели производительности, доступности и SEO в Google Lighthouse
• поддержка различных версий браузеров (Chrome, Firefox, Safari) и операционных систем (Android, IOS)
• автоматизация сборки проекта
• проект проходит проверку на валидность w3c-validator
• код соответствует правилам Stylelint и Eslint
• проект соответствует макету по Piхel Perfect

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

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

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

2. Главный блок

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

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

• Десктоп версия страницы содержит 2 абзаца текста, в планшетной и мобильной версии сохраняется только первый абзац.
• Блок с видео. Обложку видео и кнопку play необходимо стилизовать в соответствии с макетом.
• При клике на play запускается видео — https://www.youtube.com/watch?v=9TZXsZItgdw

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

• Это вкладки (табы).
• Блоки с абонементами при наведении меняют своё оформление.
• Кнопка Купить абонемент ведет на потенциальную страницу, которой нет в макете.
• Стоимость абонементов на 6 и 12 месяцев предусмотреть самостоятельно.

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

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

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

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

7. Блок "Акции"

• Кнопки Подробнее ведут на потенциальные страницы, которых нет в макете.

8. Блок "Отзывы"

• Это слайдер.
• Вёрстка и оживление минимум двух слайдов — обязательна.
• Слайды можно сделать одинаковыми.
• Этот слайдер не зациклен, то есть при переходе к последнему элементу дальше переключиться нельзя.
• В начальном положении этого слайдера — кнопка “назад” блокирована, при финальном положении — кнопка “вперёд” блокирована.

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

• Форма должна иметь валидацию.

Краткая инструкция по работе

Для начала работы у вас должент быть установлен Node.js

Основные команды для работы

• Установка - npm i
• Запуск локального сервера без минификаций - npm start
• Запуск локального сервера c минификациями,
  данный вариант не используется в разработке,
  он нужен только для тестов производительности
  на локальном хосте - npm run dev
• Сборка проекта, минификация скриптов
  и оптимизация изображений перед деплоем на прод - npm run build
• Запуск тестирования на соответствия кодгайдам - npm test
• Создание webp изображений в директории source - npm run webp

Вся разработка ведётся в директории source

Итоговый код попадает в директорию build