Завдання 1
Виконати завдання як на картинці.
.house (контейнер будинку): позиціонування відносне (position: relative), висота 300px.
.roof (дах будинку): абсолютне позиціонування (position: absolute), червоний трикутник (border-left: 120px solid transparent; border-right: 120px solid transparent; border-bottom: 100px solid #cc3333).
.wall (основна стіна): фон світло-жовтий (#ffcc66), рамка 2px solid #aa8800, абсолютне позиціонування (position: absolute;), top: 100px, ширина 240px, висота 200px.
.door (двері): фон коричневого кольору (#996633), рамка 2px solid #664422, абсолютне позиціонування (position: absolute;), bottom: 0, left: 150px, ширина 60px, висота 100px.
.window (вікно): фон синього кольору (#66ccff), рамка 2px solid #3399ff, абсолютне позиціонування (position: absolute;), top: 150px, left: 50px, ширина 60px, висота 60px.
У тілі сторінки:
Заголовок “Мій будинок”, блок-контейнер .house, всередині якого розташовані 4 блоки: дах (.roof), основна стіна (.wall), двері (.door) та вікно (.window).
!!! Кожен внутрішній блок позиціонується абсолютно відносно контейнера .house
.roof (дах будинку): абсолютне позиціонування (position: absolute), червоний трикутник (border-left: 120px solid transparent; border-right: 120px solid transparent; border-bottom: 100px solid #cc3333).
.wall (основна стіна): фон світло-жовтий (#ffcc66), рамка 2px solid #aa8800, абсолютне позиціонування (position: absolute;), top: 100px, ширина 240px, висота 200px.
.door (двері): фон коричневого кольору (#996633), рамка 2px solid #664422, абсолютне позиціонування (position: absolute;), bottom: 0, left: 150px, ширина 60px, висота 100px.
.window (вікно): фон синього кольору (#66ccff), рамка 2px solid #3399ff, абсолютне позиціонування (position: absolute;), top: 150px, left: 50px, ширина 60px, висота 60px.
У тілі сторінки:
Заголовок “Мій будинок”, блок-контейнер .house, всередині якого розташовані 4 блоки: дах (.roof), основна стіна (.wall), двері (.door) та вікно (.window).
!!! Кожен внутрішній блок позиціонується абсолютно відносно контейнера .house

Завдання 2
Переписати текст, та виконати завдання як на картинці.
.game-container (контейнер для всіх ігрових карток): текст вирівняний по центру (text-align: center).
.game (окремий блок для кожної гри): display: inline-block, ширина 200px, висота автоматична (height: auto), фон світло-зелений (#ccffcc), рамка 2px solid #339933, текст всередині по центру (text-align: center).
img: картинка гри, ширина 150px, висота 150px.
p (опис гри): текст вирівняний по центру.
У тілі сторінки:
h2 “Мої улюблені ігри” з вирівнюванням по центру (align="center"). Три картки ігор (Among Us, Lego Jurassic World, Minecraft), кожна містить заголовок, картинку та опис, розташовані в один рядок завдяки display: inline-block (за бажанням, можна добавити vertical-align: top, для вирівнювання по верху).
Посилання на картинки:
Among Us – https://upload.wikimedia.org/wikipedia/en/9/9a/Among_Us_cover_art.jpg
Lego Jurassic World – https://upload.wikimedia.org/wikipedia/en/0/0e/Lego_Jurassic_World_cover.png
Minecraft – https://upload.wikimedia.org/wikipedia/uk/4/48/Minecraft_logo.png
Опис:
Among Us - Гра про космічний корабель і виявлення зрадника.
Lego Jurassic World - Пригодницька відеогра на основі чотирьох фільмів франшизи «Парк Юрського періоду».
Minecraft - Гра про будівництво світу з блоків і виживання.
.game (окремий блок для кожної гри): display: inline-block, ширина 200px, висота автоматична (height: auto), фон світло-зелений (#ccffcc), рамка 2px solid #339933, текст всередині по центру (text-align: center).
img: картинка гри, ширина 150px, висота 150px.
p (опис гри): текст вирівняний по центру.
У тілі сторінки:
h2 “Мої улюблені ігри” з вирівнюванням по центру (align="center"). Три картки ігор (Among Us, Lego Jurassic World, Minecraft), кожна містить заголовок, картинку та опис, розташовані в один рядок завдяки display: inline-block (за бажанням, можна добавити vertical-align: top, для вирівнювання по верху).
Посилання на картинки:
Among Us – https://upload.wikimedia.org/wikipedia/en/9/9a/Among_Us_cover_art.jpg
Lego Jurassic World – https://upload.wikimedia.org/wikipedia/en/0/0e/Lego_Jurassic_World_cover.png
Minecraft – https://upload.wikimedia.org/wikipedia/uk/4/48/Minecraft_logo.png
Опис:
Among Us - Гра про космічний корабель і виявлення зрадника.
Lego Jurassic World - Пригодницька відеогра на основі чотирьох фільмів франшизи «Парк Юрського періоду».
Minecraft - Гра про будівництво світу з блоків і виживання.

Додатково:
- Змініть колір даху будинку на будь-який інший колір.
- Пересуньте будинок ближче до центру сторінки.
- Додайте димар над дахом, використавши новий блок <div class="chimney"> з position: absolute.
- Спробуйте змінити колір стін при наведенні курсора за допомогою псевдокласу :hover.
- Додайте ще одне вікно та використайте top і left, щоб розташувати вікно на ваш розсуд.
- Додайте сонце над дахом, використавши новий блок <div class="sun"> з position: fixed. Для створення круглого блоку використайте border-radius: 50%.
build info
- compiler
- 2.0.5.1 · 4054EF9BF6C4510A
- built
- 2026-11-08 14:31:25 UTC
WebUniverse