Skip to content

Latest commit

 

History

History
75 lines (61 loc) · 6.92 KB

Readme.md

File metadata and controls

75 lines (61 loc) · 6.92 KB
Raw

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 и выше
  1. Все макеты
  • Логотип на внутренних страницах — это ссылка на главную страницу.
  • Мобильное меню должно быть реализовано двумя способами:
    • реализация без JS;
    • реализация с использованием JS.
  • При реализации без использования JS главное меню в мобильной версии должно быть открыто, а иконка с крестиком — скрыта. Должны быть предусмотрены классы для скрытого и открытого состояний меню.
  • При реализации с использованием JS блок с главным меню в мобильной версии должен открываться при нажатии на иконку «гамбургера». Когда меню открыто, иконка «гамбургера» заменяется на крестик. При нажатии на иконку с крестиком меню закрывается.
  1. Главная
  • В блоках «Предметы интерьера» и «Детские игрушки» ссылкой должен быть не текст, а весь блок. При нажатии должен осуществляться переход на соответствующие разделы каталога (страницы разделов реализовывать не нужно).
  • Кнопка заказа товара недели должна вызывать появление модального окна. Реализовывать появление модального окна необязательно.
  • Блок «Отзывы»: пролистывание отзывов реализовывать не обязательно. Достаточной реализацией будут свёрстанный 1 отзыв и кнопки переключения отзывов.
  • Кнопка в блоке «Отзывы» должна вести на страницу добавления отзыва (страницу добавления отзыва реализовывать не нужно).
  • Блок карты: необходимая реализация — интерактивная карта (карты Google или Яндекса), на карте размещён маркер (может быть как кастомным, так и дефолтным), центр карты соответствует центру блока в макете.
  • Кнопка «Напишите нам» должна вести на страницу с формой обратной связи (страницу с формой обратной связи реализовывать не нужно).
  1. Форма
  • Должны быть реализованы кастомные элементы форм.
  • У полей ввода телефона и почты должны быть указаны соответствующие типы для удобного заполнения с телефона.
  1. Страница каталога
  • Изображение и название товара являются ссылками на страницу с подробным описанием товара (страницу с подробным описанием товара реализовывать не нужно).
  • Иконка корзины должна вызывать появление модального окна. Реализовывать появление модального окна необязательно.
  • В блоке видеоплеера «Процесс производства» необходимо реализовать контейнер для плеера с видеозаписью (скрипт видеоплеера на страницу добавлять не нужно, достаточно добавить только изображение из макета).

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

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

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

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

HTML Academy

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