Завдання 1
Переписати текст, та виконати завдання як на картинці.
body: фон lightcyan, шрифт Arial, текст по центру (text-align: center).
.card: ширина 300px, внутрішні відступи padding 20px, рамка 2px solid gray, фон white.
img: плаває праворуч (float: right), ширина 100px, висота auto, border-radius 50%, зовнішній відступ зліва 15px.
.name: колір темно-синій (darkblue).
У тілі сторінки:
Картка героя (div з класом card) поміщена всередину <div align="center"> для вирівнювання по центру, містить зображення героя справа, заголовок h2 з ім’ям (span з класом name), два абзаци p з рівнем і класом героя.
.card: ширина 300px, внутрішні відступи padding 20px, рамка 2px solid gray, фон white.
img: плаває праворуч (float: right), ширина 100px, висота auto, border-radius 50%, зовнішній відступ зліва 15px.
.name: колір темно-синій (darkblue).
У тілі сторінки:
Картка героя (div з класом card) поміщена всередину <div align="center"> для вирівнювання по центру, містить зображення героя справа, заголовок h2 з ім’ям (span з класом name), два абзаци p з рівнем і класом героя.

Щоб завантажити, клікніть правою кнопкою миші на зображення та оберіть «Зберегти як…».
PNG: 
Завдання 2
Переписати текст, та виконати завдання як на картинці.
body: шрифт 'Comic Sans MS', текст по центру (text-align: center), margin і padding 0, фонова картинка arena.png з розтягуванням на весь екран (background-size: cover).
h1: колір #333, margin-top 30px.
.arena: display flex, вирівнювання по горизонталі (justify-content: center) та по верху (align-items: start), відстань між картками gap 30px, margin-top 50px.
.hero: відносне позиціювання (position: relative), фон білий, рамка 3px solid чорна, border-radius 15px, padding 10px, ширина 120px, висота auto.
.hero img: ширина 100px, висота auto.
.name: жирний шрифт (font-weight: bold), margin-top 5px, font-size 18px.
.desc: шрифт 12px, колір #555, margin-top 3px.
.dwarf: border-color: #4da6ff.
.orc: border-color: #ff4d4d.
.elf: border-color: #4dff88.
У тілі сторінки:
Заголовок h1 «Герої на арені» розташований по центру. Під ним блок .arena, який містить три картки героїв (.hero):
1. Гном – картка з синьою рамкою (.dwarf), містить зображення гнома, ім’я «Гном» (.name) і опис «Міцний майстер бойової сокири» (.desc).
2. Орк – картка з червоною рамкою (.orc), містить зображення орка, ім’я «Орк» (.name) і опис «Дика сила, що не знає страху» (.desc).
3. Ельф – картка з зеленою рамкою (.elf), містить зображення ельфа, ім’я «Ельф» (.name) і опис «Швидкий і влучний стрілець» (.desc).
h1: колір #333, margin-top 30px.
.arena: display flex, вирівнювання по горизонталі (justify-content: center) та по верху (align-items: start), відстань між картками gap 30px, margin-top 50px.
.hero: відносне позиціювання (position: relative), фон білий, рамка 3px solid чорна, border-radius 15px, padding 10px, ширина 120px, висота auto.
.hero img: ширина 100px, висота auto.
.name: жирний шрифт (font-weight: bold), margin-top 5px, font-size 18px.
.desc: шрифт 12px, колір #555, margin-top 3px.
.dwarf: border-color: #4da6ff.
.orc: border-color: #ff4d4d.
.elf: border-color: #4dff88.
У тілі сторінки:
Заголовок h1 «Герої на арені» розташований по центру. Під ним блок .arena, який містить три картки героїв (.hero):
1. Гном – картка з синьою рамкою (.dwarf), містить зображення гнома, ім’я «Гном» (.name) і опис «Міцний майстер бойової сокири» (.desc).
2. Орк – картка з червоною рамкою (.orc), містить зображення орка, ім’я «Орк» (.name) і опис «Дика сила, що не знає страху» (.desc).
3. Ельф – картка з зеленою рамкою (.elf), містить зображення ельфа, ім’я «Ельф» (.name) і опис «Швидкий і влучний стрілець» (.desc).

Щоб завантажити, клікніть правою кнопкою миші на зображення та оберіть «Зберегти як…».
Фон: 
PNG: 


Завдання 3
Виконайте завдання на свій розсуд, дотримуючись умов.
body: шрифт Arial, фонова картинка background.png, зовніші відступи 10px, display: flex, justify-content: center, align-items: center, gap 20px, font-size 14px.
h2: заголовок «Реєстрація», текст по центру (text-align: center;).
.side-images: бічні блоки з картинками героїв, display: flex, flex-direction: column, gap 10px.
img: ширина 200px, висота авто, рамка 2px solid чорна,
a:focus img: border 2px solid червоний.
form: ширина 320px, фон білий, padding 20px, border-radius 12px, display: flex, flex-direction: column, align-items: left.
fieldset: margin-bottom 10px, border 2px solid #555, padding 10px.
legend: жирний текст.
.info: зовніші відступи 5px 0, ширина 95%, внутрішні відступи 5px, текст по центру.
select: ширина 100%.
textarea: height 60px, padding 10px, resize: none.
У тілі сторінки:
Посередині форма реєстрації з полями: ім’я, пароль, стать (radio), навички (checkbox), вік (radio), країна (select), textarea для опису героя і кнопка submit «Створити героя». Ліворуч і праворуч від форми по 2 картинки героїв, кожна всередині посилання.
h2: заголовок «Реєстрація», текст по центру (text-align: center;).
.side-images: бічні блоки з картинками героїв, display: flex, flex-direction: column, gap 10px.
img: ширина 200px, висота авто, рамка 2px solid чорна,
a:focus img: border 2px solid червоний.
form: ширина 320px, фон білий, padding 20px, border-radius 12px, display: flex, flex-direction: column, align-items: left.
fieldset: margin-bottom 10px, border 2px solid #555, padding 10px.
legend: жирний текст.
.info: зовніші відступи 5px 0, ширина 95%, внутрішні відступи 5px, текст по центру.
select: ширина 100%.
textarea: height 60px, padding 10px, resize: none.
У тілі сторінки:
Посередині форма реєстрації з полями: ім’я, пароль, стать (radio), навички (checkbox), вік (radio), країна (select), textarea для опису героя і кнопка submit «Створити героя». Ліворуч і праворуч від форми по 2 картинки героїв, кожна всередині посилання.

Щоб завантажити, клікніть правою кнопкою миші на зображення та оберіть «Зберегти як…».
Фон: 
| PNG: |
|
build info
- compiler
- 2.0.5.1 · 4054EF9BF6C4510A
- built
- 2026-11-08 14:31:25 UTC
WebUniverse


