/goit-markup-hw-08

Educational tasks 📚 HW-08 | Adaptive layout

Primary LanguageHTML

Створи репозиторій 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» Виконано оформлення мобільного меню.