BananaMaster

6 Як Працюють %, vw та vh у CSS (HTML та CSS, Front End)

Якщо щось забули — натисни для переходу на урок

📘 Практичні Завдання: %, vw, vh

Для кожного завдання створи окремі класи у style.css та застосуй їх до правильних тегів.

📌 Структура файлів: index.html + style.css

✏️ Завдання 1

Відтвори блок. Оціни розмір батьківського на око:

✏️ Завдання 2

Відтвори блок. Оціни розмір батьківського на око:

✏️ Завдання 3

Відтвори вкладені блоки. Оціни розмір батьківського на око:

✏️ Завдання 4

Три дочірні блоки стоять у колонці та ділять висоту батьківського. Оціни розмір батьківського на око:

✏️ Завдання 5

Батьківський залежить від вікна браузера, два дочірніх стоять у колонці. Оціни значення на око:

✏️ Завдання 6

Батьківський залежить від вікна, три дочірніх стоять у колонці. Оціни значення на око:

✏️ Завдання 7

Батьківський залежить від вікна, дочірній залежить від батьківського. Оціни значення на око:

✏️ Завдання 8

Батьківський залежить від вікна, дочірній залежить від батьківського. Оціни значення на око:

✏️ Завдання 9

Три рівні: батьківський від вікна, кожен дочірній від свого батьківського. Оціни значення на око:

✏️ Завдання 10 — 🔥 Бонус

Три дочірніх блоки стоять у колонці всередині батьківського. Оціни значення на око:

📌 Важливо:
Кожен клас пишеться окремо у style.css.
Використовуй тільки HTML та CSS.
Практикуй одиниці: %, vw, vh.