WebUniverseЗавдання 1
Виконати завдання як на картинці.
body: відступи margin і padding 0, висота 100vh (висота всього екрану), display: flex, напрямок flex-direction: column, вирівнювання по центру (align-items: center, justify-content: center), фон-зображення background.png, background-size: cover.
h1: колір darkgreen.
.pond: display: flex, flex-wrap: wrap (дозволяє переносити елементи на новий ряд), align-content: start (вирівнювання рядів зверху), align-items: flex-end (елементи по нижньому краю), justify-content: center (центрування по горизонталі), gap 100px, висота 300px, position: relative.
.lotus: ширина 200px, висота 90px, фон-зображення pond.png, background-size: cover.
.house: ширина 270px, висота 200px, фон-зображення house.png, background-size: cover, position: relative (щоб жаба була відносно будинку).
.frog: ширина 100px, position: absolute, bottom 0 (внизу будинку), left 30% (змістили по горизонталі всередині будинку), display: none (спочатку схована).
.house:hover .frog: при наведенні на будинок жаба стає видимою (display: block).
У тілі сторінки:
Заголовок h1 з текстом "Наведи на будинок - вилізе жабка!". Під заголовком розташований контейнер .pond, всередині якого: 7 елементів .lotus та 1 елемент .house. Всередині елемент .house є img з класом .frog - зображення жабки.
h1: колір darkgreen.
.pond: display: flex, flex-wrap: wrap (дозволяє переносити елементи на новий ряд), align-content: start (вирівнювання рядів зверху), align-items: flex-end (елементи по нижньому краю), justify-content: center (центрування по горизонталі), gap 100px, висота 300px, position: relative.
.lotus: ширина 200px, висота 90px, фон-зображення pond.png, background-size: cover.
.house: ширина 270px, висота 200px, фон-зображення house.png, background-size: cover, position: relative (щоб жаба була відносно будинку).
.frog: ширина 100px, position: absolute, bottom 0 (внизу будинку), left 30% (змістили по горизонталі всередині будинку), display: none (спочатку схована).
.house:hover .frog: при наведенні на будинок жаба стає видимою (display: block).
У тілі сторінки:
Заголовок h1 з текстом "Наведи на будинок - вилізе жабка!". Під заголовком розташований контейнер .pond, всередині якого: 7 елементів .lotus та 1 елемент .house. Всередині елемент .house є img з класом .frog - зображення жабки.
Щоб завантажити, клікніть правою кнопкою миші на зображення та оберіть «Зберегти як…».
Фон: 
PNG: 
Завдання 2
Виконати завдання як на картинці.
body: відступи margin і padding 0, display: flex, висота 100vh (ширина всього екрану), ширина 100vw (висота всього екрану).
.hero: flex: 1 (кожна картка займає рівну частину), display: flex; flex-direction: column; по центру (align-items: center), вирівнювання по вертикалі justify-content: center, рамка 2px solid orangered, фон bisque.
img: ширина auto, висота 50%, border-radius 15px, рамка 2px solid orangered, фон rgba(200,150,100,0.5), внутрішній відступ padding 20px.
.name: шрифт 24px, жирний (font-weight: bold), колір orange, зовнішній відступ зверху 15px.
.desc: шрифт 16px, колір brown, зовнішній відступ зверху 10px, текст по центру, внутрішні відступи padding 0 10px.
order: змініть порядок карток у контейнері без переставляння в HTML:
1 картка — другою,
2 картка — третьою,
3 картка — четвертою,
4 картка — першою.
У тілі сторінки:
Чотири картки героїв Crash Bandicoot розташовані по порядку: Coco, Tawna, Crunch, Crash,. Кожна картка (.hero) містить зображення зверху, ім’я (.name) під картинкою та опис (.desc) під іменем. Картки займають рівні частини екрану.
Посилання на картинки:
Coco Bandicoot – https://static.wikia.nocookie.net/crashban/images/d/d1/Transparent_Crash_2_Coco.png/revision/latest?cb=20250212040857
Tawna Bandicoot – https://static.wikia.nocookie.net/crashban/images/2/25/Crash_Bandicoot_PS1_Tawna_Emulator-enhanced_screenshot_crop.png/revision/latest?cb=20230516164825
Crunch Bandicoot – https://static.wikia.nocookie.net/crashban/images/5/56/Crunch_Bandicoot_The_Wrath_of_Cortex.png/revision/latest?cb=20200816015912
Crash Bandicoot – https://static.wikia.nocookie.net/crashban/images/0/03/Crash_1_Crash_Bandicoot.png/revision/latest?cb=20230516213125
Текст:
Coco Bandicoot - Розумна сестра Креша, допомагає винаходами та гаджетами.
Tawna Bandicoot - Смілива і стильна героїня, допомагає Крешу та друзям.
Crunch Bandicoot - Сильний союзник Креша з потужною силою.
Crash Bandicoot - Веселий бандікут, який рятує острів від зла.
.hero: flex: 1 (кожна картка займає рівну частину), display: flex; flex-direction: column; по центру (align-items: center), вирівнювання по вертикалі justify-content: center, рамка 2px solid orangered, фон bisque.
img: ширина auto, висота 50%, border-radius 15px, рамка 2px solid orangered, фон rgba(200,150,100,0.5), внутрішній відступ padding 20px.
.name: шрифт 24px, жирний (font-weight: bold), колір orange, зовнішній відступ зверху 15px.
.desc: шрифт 16px, колір brown, зовнішній відступ зверху 10px, текст по центру, внутрішні відступи padding 0 10px.
order: змініть порядок карток у контейнері без переставляння в HTML:
1 картка — другою,
2 картка — третьою,
3 картка — четвертою,
4 картка — першою.
У тілі сторінки:
Чотири картки героїв Crash Bandicoot розташовані по порядку: Coco, Tawna, Crunch, Crash,. Кожна картка (.hero) містить зображення зверху, ім’я (.name) під картинкою та опис (.desc) під іменем. Картки займають рівні частини екрану.
Посилання на картинки:
Coco Bandicoot – https://static.wikia.nocookie.net/crashban/images/d/d1/Transparent_Crash_2_Coco.png/revision/latest?cb=20250212040857
Tawna Bandicoot – https://static.wikia.nocookie.net/crashban/images/2/25/Crash_Bandicoot_PS1_Tawna_Emulator-enhanced_screenshot_crop.png/revision/latest?cb=20230516164825
Crunch Bandicoot – https://static.wikia.nocookie.net/crashban/images/5/56/Crunch_Bandicoot_The_Wrath_of_Cortex.png/revision/latest?cb=20200816015912
Crash Bandicoot – https://static.wikia.nocookie.net/crashban/images/0/03/Crash_1_Crash_Bandicoot.png/revision/latest?cb=20230516213125
Текст:
Coco Bandicoot - Розумна сестра Креша, допомагає винаходами та гаджетами.
Tawna Bandicoot - Смілива і стильна героїня, допомагає Крешу та друзям.
Crunch Bandicoot - Сильний союзник Креша з потужною силою.
Crash Bandicoot - Веселий бандікут, який рятує острів від зла.
Додатково:
- Створіть контейнер .container висотою 300px і 3 квадрати по 100x100 .box.
Перший квадрат червоний, другий синій, третій зелений.
Використайте flex-direction, щоб:
a) квадрати відображалися горизонтально (рядок),
b) квадрати відображалися вертикально (стовпчик). - Переробіть контейнер .container шириною 300px і додайте ще 2 квадрати (четвертий жовтий, п’ятий фіолетовий).
За допомогою flex-wrap: wrap зробіть так, щоб квадрати, які не поміщаються в ряд, переносилися на наступний ряд.
Спробуйте flex-wrap: nowrap і подивіться різницю. - Спробуйте різні значення align-content: flex-start, center, space-between, щоб побачити, як рядки вирівнюються по вертикалі.
- Задайте елементам різні значення order, щоб:
- зелений став п’ятим,
- червоний третім,
- синій четвертим,
- жовтий другим,
- фіолетовий першим.
Перевірте, як order змінює візуальний порядок, не змінюючи HTML.
build info
- compiler
- 2.0.5.1 · 4054EF9BF6C4510A
- built
- 2026-11-08 14:31:25 UTC