WebUniverseЗавдання 1
Виконати завдання як на картинці.
body: без відступів (margin:0; padding:0;), висота 100vh, display: flex, по центру екрану (justify-content, align-items), фон wheat.
.gallery: display: flex, ширина 100vw, без проміжків (gap: 0).
.emoji: flex: 1 (рівні частини), display: flex, вирівнювання по центру (justify-content, align-items).
img: висота 200px, ширина 200px.
У тілі сторінки:
Створіть контейнер з класом .gallery.
Усередині нього розмістіть 5 елементів із класом .emoji, у кожному з яких буде зображення смайлика.
Зробіть так, щоб усі смайлики стояли в одному ряду і були розташовані рівномірно по ширині екрана.
.gallery: display: flex, ширина 100vw, без проміжків (gap: 0).
.emoji: flex: 1 (рівні частини), display: flex, вирівнювання по центру (justify-content, align-items).
img: висота 200px, ширина 200px.
У тілі сторінки:
Створіть контейнер з класом .gallery.
Усередині нього розмістіть 5 елементів із класом .emoji, у кожному з яких буде зображення смайлика.
Зробіть так, щоб усі смайлики стояли в одному ряду і були розташовані рівномірно по ширині екрана.
Щоб завантажити, клікніть правою кнопкою миші на зображення та оберіть «Зберегти як…».
| PNG: |
|
Завдання 2
Виконати завдання як на картинці.
body: шрифт "Comic Sans MS", фон світло-фіолетовий (lavender), текст по центру (text-align: center).
h1: колір purple.
.heroes: display: flex; вирівнювання елементів по центру (align-items: center), вирівнювання карток по центру (justify-content: center), gap: 20px.
.hero: фон білий, рамка 7px outset purple, border-radius 15px, ширина 200px, внутрішні відступи padding 10px.
.hero:hover: фон змінюється на plum.
img: висота 100px, ширина auto, border-radius 10px, рамка 1px solid purple.
.name: жирний шрифт (font-weight: bold), колір darkmagenta, зовнішній відступ зверху 5px.
.desc: шрифт 14px, зовнішній відступ зверху 5px.
У тілі сторінки:
Заголовок h1 “Обери свого героя зі світу Spyro”. П’ять карток героїв які складаються з div, розміщені в одному div (.heroes). Кожна картка містить зображення героя, ім’я (.name) і опис (.desc) під ним. При наведенні на картку змінюється фон.
Посилання на картинки:
Spyro the Dragon – https://static.wikia.nocookie.net/spyro/images/4/47/Spyro_PS1_original.jpg/revision/latest?cb=20190330094953
Sheila – https://static.wikia.nocookie.net/spyro/images/5/51/Sheila_PS1.jpg/revision/latest?cb=20180821091927
Sgt Byrd – https://static.wikia.nocookie.net/spyro/images/f/f3/Sgt_Byrd_PS1.jpg/revision/latest?cb=20181112213233
Bentley – https://static.wikia.nocookie.net/spyro/images/e/e7/Bentley_PS1.jpg/revision/latest?cb=20181119071056
Agent 9 – https://static.wikia.nocookie.net/spyro/images/7/7d/Agent_9_PS1.jpg/revision/latest?cb=20181011180557
h1: колір purple.
.heroes: display: flex; вирівнювання елементів по центру (align-items: center), вирівнювання карток по центру (justify-content: center), gap: 20px.
.hero: фон білий, рамка 7px outset purple, border-radius 15px, ширина 200px, внутрішні відступи padding 10px.
.hero:hover: фон змінюється на plum.
img: висота 100px, ширина auto, border-radius 10px, рамка 1px solid purple.
.name: жирний шрифт (font-weight: bold), колір darkmagenta, зовнішній відступ зверху 5px.
.desc: шрифт 14px, зовнішній відступ зверху 5px.
У тілі сторінки:
Заголовок h1 “Обери свого героя зі світу Spyro”. П’ять карток героїв які складаються з div, розміщені в одному div (.heroes). Кожна картка містить зображення героя, ім’я (.name) і опис (.desc) під ним. При наведенні на картку змінюється фон.
Посилання на картинки:
Spyro the Dragon – https://static.wikia.nocookie.net/spyro/images/4/47/Spyro_PS1_original.jpg/revision/latest?cb=20190330094953
Sheila – https://static.wikia.nocookie.net/spyro/images/5/51/Sheila_PS1.jpg/revision/latest?cb=20180821091927
Sgt Byrd – https://static.wikia.nocookie.net/spyro/images/f/f3/Sgt_Byrd_PS1.jpg/revision/latest?cb=20181112213233
Bentley – https://static.wikia.nocookie.net/spyro/images/e/e7/Bentley_PS1.jpg/revision/latest?cb=20181119071056
Agent 9 – https://static.wikia.nocookie.net/spyro/images/7/7d/Agent_9_PS1.jpg/revision/latest?cb=20181011180557
Додатково:
- Створіть меню улюбленого кафе або ресторану, як у завданні з героями. Використайте 3–4 страви або напої.
- Додайте фонове зображення закладу, щоб фон відображав атмосферу кафе.
- Вирівняйте всі елементи меню по центру екрану за допомогою display: flex і justify-content: center.
- Додайте ефект наведення (hover): при наведенні на кнопку «Замовити» змінюється її колір.
- Додайте короткий опис кожної страви або напою, щоб користувач бачив, що саме він замовляє.
- Використайте різні кольори та рамки для кожної картки, щоб вони виглядали цікаво і яскраво.
build info
- compiler
- 2.0.5.1 · 4054EF9BF6C4510A
- built
- 2026-11-08 14:31:25 UTC