Mishka

Верстка магазина вещей ручной работы для дома «Mishka»: главная, каталог товаров, вязание на заказ.

Ссылки

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

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

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

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

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

Техническое задание

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

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

2. Все макеты

• Логотип на внутренних страницах — это ссылка на главную страницу.
• Мобильное меню должно быть реализовано двумя способами:
  • реализация без JS;
  • реализация с использованием JS.
• При реализации без использования JS главное меню в мобильной версии должно быть открыто, а иконка с крестиком — скрыта. Должны быть предусмотрены классы для скрытого и открытого состояний меню.
• При реализации с использованием JS блок с главным меню в мобильной версии должен открываться при нажатии на иконку «гамбургера». Когда меню открыто, иконка «гамбургера» заменяется на крестик. При нажатии на иконку с крестиком меню закрывается.

3. Главная

• В блоках «Предметы интерьера» и «Детские игрушки» ссылкой должен быть не текст, а весь блок. При нажатии должен осуществляться переход на соответствующие разделы каталога (страницы разделов реализовывать не нужно).
• Кнопка заказа товара недели должна вызывать появление модального окна. Реализовывать появление модального окна необязательно.
• Блок «Отзывы»: пролистывание отзывов реализовывать не обязательно. Достаточной реализацией будут свёрстанный 1 отзыв и кнопки переключения отзывов.
• Кнопка в блоке «Отзывы» должна вести на страницу добавления отзыва (страницу добавления отзыва реализовывать не нужно).
• Блок карты: необходимая реализация — интерактивная карта (карты Google или Яндекса), на карте размещён маркер (может быть как кастомным, так и дефолтным), центр карты соответствует центру блока в макете.
• Кнопка «Напишите нам» должна вести на страницу с формой обратной связи (страницу с формой обратной связи реализовывать не нужно).

4. Форма

• Должны быть реализованы кастомные элементы форм.
• У полей ввода телефона и почты должны быть указаны соответствующие типы для удобного заполнения с телефона.

5. Страница каталога

• Изображение и название товара являются ссылками на страницу с подробным описанием товара (страницу с подробным описанием товара реализовывать не нужно).
• Иконка корзины должна вызывать появление модального окна. Реализовывать появление модального окна необязательно.
• В блоке видеоплеера «Процесс производства» необходимо реализовать контейнер для плеера с видеозаписью (скрипт видеоплеера на страницу добавлять не нужно, достаточно добавить только изображение из макета).

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

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

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

• Установка зависимостей - npm ci
• Сборка проекта - npm run build
• Запуск линтеров и валидаторов - npm run lint
• Запуск локального сервера - npm start

---

Репозиторий создан для обучения на профессиональном онлайн‑курсе «HTML и CSS. Адаптивная вёрстка и автоматизация» от HTML Academy.