/goit-markup-hw-08

HW-08 (adaptability / responsive)

Primary LanguageHTML

goit-markup-hw-08

Домашнее задание

  • Создай репозиторий goit-markup-hw-08.
  • Склонируй созданный репозиторий и скопируй в него файлы предыдущей работы.
  • Выполни вёрстку адаптивной версии всех страниц и элементов макета домашнего задания #8.
  • Настрой GitHub Pages и добавь ссылку на живую страницу в шапку GitHub-репозитория.

Критерии приёма работы наставником

Проект

«A1» Используется методология BEM.

«A2» Ипользуется препроцессов SASS.

«A3» В файлах index.html и portfolio.html подключен минифицированный файл стилей main.min.css из папки css.

«A4» При просмотре страницы на любом устройстве шириной от 320px, не появляется горизонтальная полоса прокрутки.

«A5» Скрипт мобильного меню подключен в HTML отдельным файлом mobile-menu.js.

Разметка

«B1» У всех страниц в блоке <head> есть метатег viewport.

«B2» Все фоновые и контентные растровые изображения - отзывчивые, и поддерживают экраны с плотностью x1 и x2.

«B3» Для отзывчивых контентных изображений использован элемент <img> с атрибутом srcset и дескриптором x.

«B4» Для отзывчивых фоновых изображений использованы медиа-фукцнии min-device-pixel-ratio и min-resolution.

«B5» Выполнена разметка мобильного меню.

Оформление

«C1» При написании стилей использован Mobile First подход и медиа-функция (min-width: ).

«C2» Стили необходимые только в определённом промежутке, закрыты в медиа-запросы (min-width: ) and (max-width: ) или только (max-width: ).

«C3» В медиа-запросах отсутствует лишнее дублирование стилей.

«C4» Вёрстка выполнена относительно трёх точек перелома: 480px, 768px и 1200px.

«C5» Выполнено оформление мобильного меню.