Skip to content

VladislavSerKir/landing-cycling

Repository files navigation

Проект: Велоспорт

2022-09-17_22-13-27

Хотите покататься по горным серпантинам на большой скорости, любуясь потрясающими пейзажами? Тогда вам сюда. У нас есть выбор трасс по уровню сложности и типу покрытия, подходящие группы велосипедов выбираются автоматически. Так же перед непосредственным заездом вы можете потренироваться на наших трассах или используя приложение Starva подобрать свой индивидуальный план тренировок.

Реализация и технологии в проекте

Для написания проекта использовался сборщик Webpack. В нем установлено все необходимые модули и пакеты для верстки на препроцессоре SCSS

  • В частности sass-loader для работы Webpack с препроцессором SCSS
  • Для работы webpack с CSS стилями использовался плагин css-loader, а для трансформации и добавления вендорных префиксов для разных браузеров использовался postcss-loader
  • Для написания структуры стилей использовалась БЭМ методология
  • Транспиляция JS кода в старый синтаксис осуществляется при помощи Babel. Для крайних случаев была добавлена библиотека полифилов core-js.

Реализация

Страница сверстана адаптивно с 320 до 1440px. На странице реализовано переключение темного/светлого режима, переключатели находятся в главном меню и в блоке footer. В шапке сайта располагается навигационное меню в виде списка ссылок которое при разрешении меньше 500px трансформируется в раскрывающиеся по кнопке меню.

Запись экрана 2022-09-17 в 22 21 25 (1)

В блоке с описанием трасс есть возможность как переключать их с помощью кнопок вперед, назад, так их непосредственного выбора в блоке о велосипедах. Подходящие велосипеды выбираюся согласно выбранной трассе. Данные о трассах и велосипедах представлены в виде объекта, который предположительно приходит с бэкенда.

Запись экрана 2022-09-17 в 22 37 45

В футере располагается форма для подписки на рассылку с динамической валидацией на JS.

Запись экрана 2022-09-17 в 22 44 53

Технологии

html5 CSS JavaScript Webpack Figma

Установка, настройка

Проект, развернутый на Github: GitHub Pages

  • Установка зависимостей: npm install
  • Режим разработки: npm run dev
  • Сформировать проект для последующего размещения на ресурсах: npm run build
  • Сформировать заново проект для отображения на GitHub pages: npm run deploy

Написать мне

github telegram