Skip to content

Yevdokymenko/goit-markup-hw-08

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Адаптивная верстка, графика | -goit-markup-hw-08

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

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

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

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

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

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

⚠️ СКРИПТ МОБИЛЬНОГО МЕНЮ Полный пример создания мобильного меню с уже написанным скриптом разбери в мастерской.

Разметка «B1» В блоке есть метатег viewport.

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

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

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

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

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

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

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

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