Завдання 1
Виконати завдання як на картинці.
body: margin: 0; padding: 0.
.background: width: 100%; height: 100%; position: absolute.
.player1: width: 50px; height: 50px; position: fixed; top: 30%; left: 10%.
.player2: width: 50px; height: 50px; position: fixed; top: 80%; left: 55%.
.player3: width: 50px; height: 50px; position: fixed; top: 35%; left: 70%.
.player4: width: 50px; height: 50px; position: fixed; top: 60%; left: 15%.
.player5: width: 70px; height: 70px; position: fixed; top: 15%; left: 35%.
.player6: width: 75px; height: 75px; position: fixed; top: 75%; left: 90%.
!!! top і left можуть відрізнятись в залежності від розширення вашого екрану. Підберіть % під ваш екран.
У тілі сторінки:
Фонова картинка map.png і шість гравців (player1.png – player6.png), розташовані в різних місцях поверх карти за допомогою position: fixed.
.background: width: 100%; height: 100%; position: absolute.
.player1: width: 50px; height: 50px; position: fixed; top: 30%; left: 10%.
.player2: width: 50px; height: 50px; position: fixed; top: 80%; left: 55%.
.player3: width: 50px; height: 50px; position: fixed; top: 35%; left: 70%.
.player4: width: 50px; height: 50px; position: fixed; top: 60%; left: 15%.
.player5: width: 70px; height: 70px; position: fixed; top: 15%; left: 35%.
.player6: width: 75px; height: 75px; position: fixed; top: 75%; left: 90%.
!!! top і left можуть відрізнятись в залежності від розширення вашого екрану. Підберіть % під ваш екран.
У тілі сторінки:
Фонова картинка map.png і шість гравців (player1.png – player6.png), розташовані в різних місцях поверх карти за допомогою position: fixed.

Щоб завантажити, клікніть правою кнопкою миші на зображення та оберіть «Зберегти як…».
| JPG: |
|
Фон: 
Завдання 2
Виконати завдання як на картинці.
body: фон світло-сірий (lightgray), шрифт Arial.
.game-card: фон white, рамка 2px solid green, відступи зовнішній (margin) 20px, відступи внутрішні (padding) 15px, border-radius: 10px, ширина 700px, text-align: left.
img: висота 210px, відступ зовнішній справа 20px, border-radius: 5px, float:left.
h1: колір #cc0000, відступ зовнішній зверху і знизу 0.
p: шрифт 16px, margin: 5px 0.
.red_text: шрифт 18px, колір тексту red, Arial Black.
a: рамка 2px solid black, border-radius: 5px, текст без підкреслення (text-decoration: none), padding 5px, колір тексту #cc0000;
a:hover: при наведенні фон світло-рожевий (lightpink).
У тілі сторінки:
Одна картка гри Minecraft з зображенням зліва і текстовою інформацією праворуч, кнопка <a> «Грати зараз» під описом. Увесь вміст картки обгорнутий в <div align="center"> для відображення картки посередині сторінки.
Посилання на картинку: https://upload.wikimedia.org/wikipedia/uk/4/48/Minecraft_logo.png
Текст на сторінці:
Minecraft
Популярна гра-пісочниця, де можна будувати будь-що та досліджувати світи.
Рейтинг: 9.5/10
Жанр: Пісочниця, Пригоди
Платформи: PC, Console, Mobile
Грати зараз
.game-card: фон white, рамка 2px solid green, відступи зовнішній (margin) 20px, відступи внутрішні (padding) 15px, border-radius: 10px, ширина 700px, text-align: left.
img: висота 210px, відступ зовнішній справа 20px, border-radius: 5px, float:left.
h1: колір #cc0000, відступ зовнішній зверху і знизу 0.
p: шрифт 16px, margin: 5px 0.
.red_text: шрифт 18px, колір тексту red, Arial Black.
a: рамка 2px solid black, border-radius: 5px, текст без підкреслення (text-decoration: none), padding 5px, колір тексту #cc0000;
a:hover: при наведенні фон світло-рожевий (lightpink).
У тілі сторінки:
Одна картка гри Minecraft з зображенням зліва і текстовою інформацією праворуч, кнопка <a> «Грати зараз» під описом. Увесь вміст картки обгорнутий в <div align="center"> для відображення картки посередині сторінки.
Посилання на картинку: https://upload.wikimedia.org/wikipedia/uk/4/48/Minecraft_logo.png
Текст на сторінці:
Minecraft
Популярна гра-пісочниця, де можна будувати будь-що та досліджувати світи.
Рейтинг: 9.5/10
Жанр: Пісочниця, Пригоди
Платформи: PC, Console, Mobile
Грати зараз

Завдання 3
Виконати завдання як на картинці.
body: фон світло-блакитний (lightblue), шрифт Courier New, text-align: center.
h2: text-align: center, колір #181855, відступ зовнішній зверху 20px.
.row: відступ зовнішній знизу 20px.
.skin-card: фон white, рамка 3px solid #181855, ширина 220px, текст вирівняний по центру, зовнішній відступ 10px, border-radius 10px, display: inline-block.
img: ширина 220px, висота авто.
p: фон #181855, колір тексту goldenrod, шрифт 16px, жирний шрифт, margin 0, padding 10px 5px.
У тілі сторінки:
Заголовок h2 «Топ найпопулярніших скінів Fortnite», два ряди карток (по три картки в першому і другому ряді). Рядки з класом row. Кожна картка містить зображення скіна та підпис з назвою і рідкістю. Кожен блок (з картинкою і даними про персонажа) з класом skin-card.
Посилання на картинки:
Midas – https://static.wikia.nocookie.net/fortnite/images/e/ea/Midas_-_Outfit_-_Fortnite.png/revision/latest?cb=20210317171749
Lynx – https://static.wikia.nocookie.net/fortnite/images/8/87/Lynx_%28v31.30%29_-_Outfit_-_Fortnite.png/revision/latest?cb=20241008144552
Drift – https://static.wikia.nocookie.net/fortnite/images/3/32/Drift_%28New%29_-_Outfit_-_Fortnite.png/revision/latest?cb=20191006170630
Peely – https://static.wikia.nocookie.net/fortnite/images/f/fc/Peely_%28v30.00%29_-_Outfit_-_Fortnite.png/revision/latest?cb=20240524202045
Aura – https://static.wikia.nocookie.net/fortnite/images/7/7b/Aura_%28v30.00%29_-_Outfit_-_Fortnite.png/revision/latest?cb=20240524204317
Raven – https://static.wikia.nocookie.net/fortnite/images/d/d9/Raven_%28v33.20%29_-_Outfit_-_Fortnite.png/revision/latest?cb=20250118154216
h2: text-align: center, колір #181855, відступ зовнішній зверху 20px.
.row: відступ зовнішній знизу 20px.
.skin-card: фон white, рамка 3px solid #181855, ширина 220px, текст вирівняний по центру, зовнішній відступ 10px, border-radius 10px, display: inline-block.
img: ширина 220px, висота авто.
p: фон #181855, колір тексту goldenrod, шрифт 16px, жирний шрифт, margin 0, padding 10px 5px.
У тілі сторінки:
Заголовок h2 «Топ найпопулярніших скінів Fortnite», два ряди карток (по три картки в першому і другому ряді). Рядки з класом row. Кожна картка містить зображення скіна та підпис з назвою і рідкістю. Кожен блок (з картинкою і даними про персонажа) з класом skin-card.
Посилання на картинки:
Midas – https://static.wikia.nocookie.net/fortnite/images/e/ea/Midas_-_Outfit_-_Fortnite.png/revision/latest?cb=20210317171749
Lynx – https://static.wikia.nocookie.net/fortnite/images/8/87/Lynx_%28v31.30%29_-_Outfit_-_Fortnite.png/revision/latest?cb=20241008144552
Drift – https://static.wikia.nocookie.net/fortnite/images/3/32/Drift_%28New%29_-_Outfit_-_Fortnite.png/revision/latest?cb=20191006170630
Peely – https://static.wikia.nocookie.net/fortnite/images/f/fc/Peely_%28v30.00%29_-_Outfit_-_Fortnite.png/revision/latest?cb=20240524202045
Aura – https://static.wikia.nocookie.net/fortnite/images/7/7b/Aura_%28v30.00%29_-_Outfit_-_Fortnite.png/revision/latest?cb=20240524204317
Raven – https://static.wikia.nocookie.net/fortnite/images/d/d9/Raven_%28v33.20%29_-_Outfit_-_Fortnite.png/revision/latest?cb=20250118154216

Додатково:
- Створіть картки фруктів (<div class="fruit-card">) з рамкою, padding і margin.
- Додайте зображення фруктів в картку та підпис <p> з назвою фрукта.
- Вирівняйте картки по центру.
- Зробіть hover-ефект: при наведенні змінюйте колір фону або рамки картки.
- Виділіть один фрукт: інший колір рамки або фону, щоб він відрізнявся від інших.
build info
- compiler
- 2.0.5.1 · 4054EF9BF6C4510A
- built
- 2026-11-08 14:31:25 UTC
WebUniverse




