https://github.com/viktorsvertoka/goit-markup-hw-06
HTML5 & CSS3 Homework📕 📘
https://github.com/viktorsvertoka/goit-markup-hw-06
css3 gitignore goit goit-markup-hw-06 html5 javascript prettier readme
Last synced: 6 months ago
JSON representation
HTML5 & CSS3 Homework📕 📘
- Host: GitHub
- URL: https://github.com/viktorsvertoka/goit-markup-hw-06
- Owner: ViktorSvertoka
- Created: 2023-07-20T09:29:14.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2023-12-03T17:55:45.000Z (almost 2 years ago)
- Last Synced: 2024-04-14T06:32:27.647Z (over 1 year ago)
- Topics: css3, gitignore, goit, goit-markup-hw-06, html5, javascript, prettier, readme
- Language: HTML
- Homepage: https://viktorsvertoka.github.io/goit-markup-hw-06/
- Size: 13 MB
- Stars: 5
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Домашнє завдання № 6
- Створи репозиторій `goit-markup-hw-06`.
- Склонуй створений репозиторій і скопіюй в нього файли попередньої роботи.
- Виконай верстку адаптивної версії усіх сторінок та елементів макета
[**домашнього завдання #6**]().
- Налаштуй `GitHub Pages` і додай посилання на живу сторінку в шапку
GitHub-репозиторія.
## Критерії приймання роботи наставником
Для здачі домашнього завдання достатньо зробити адаптивну верстку головної
сторінки (`index.html`). Виконання адаптивної верстки сторінки портфорліо
(`portfolio.html`) не обов'язкове для здачі домашнього завдання.
### Проект
**`«A1»`** При перегляді сторінки на будь-якому пристрої шириною від `320px`, не
з'являється горизонтальна смуга прокручування.
**`«A2»`** Скрипт мобільного меню підключений в HTML окремим файлом
`mobile-menu.js`.
**`«A3»`** Повний приклад створення мобільного меню з уже написаним скриптом
розбери у [**майстерні**](https://github.com/goitacademy/mobile-menu-workshop).
## Розмітка
**`«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»`** Верстка виконана щодо трьох точок перелому: 428px, 768px і 1158px.
**`«C5»`** Виконано оформлення мобільного меню.
# Web Studio
---
---
---
---
---
---