Матеріал до заліку
Створіть 4 файли:
1) style.css:
body: шрифт Arial, фонова картинка world.gif, фон розтягується (background-size: cover), зовнішні відступи 10px, display: flex, justify-content: center, align-items: center, font-size: 14px.
h2: текст по центру, зовнішній відступ знизу 10px.
form: ширина 320px, фон напівпрозорий сірий (rgba(245,245,245,0.8)), внутрішні відступи 20px, заокруглення 12px, display: flex, flex-direction: column.
fieldset: зовнішній відступ знизу 10px, рамка 2px solid gray, внутрішні відступи 10px, заокруглення 8px.
legend: жирний текст, колір steelblue.
.info: зовнішній відступ 5px 0, ширина 95%, текст по центру, рамка 1px solid lightgray, заокруглення 5px, padding: 5px.
select: ширина 100%, padding 5px, заокруглення 5px, border: 1px solid lightgray.
textarea: висота 60px, padding 8px, рамка 1px solid світло-сіра, заокруглення 5px, resize: none.
.submit: фон steelblue, колір тексту білий, без рамки (border: none;), padding 8px, border-radius 6px, font-size 14px, зовнішній відступ знизу 10px.
.submit:hover: фон червоний.
body: шрифт Arial, фонова картинка world.gif, фон розтягується (background-size: cover), зовнішні відступи 10px, display: flex, justify-content: center, align-items: center, font-size: 14px.
h2: текст по центру, зовнішній відступ знизу 10px.
form: ширина 320px, фон напівпрозорий сірий (rgba(245,245,245,0.8)), внутрішні відступи 20px, заокруглення 12px, display: flex, flex-direction: column.
fieldset: зовнішній відступ знизу 10px, рамка 2px solid gray, внутрішні відступи 10px, заокруглення 8px.
legend: жирний текст, колір steelblue.
.info: зовнішній відступ 5px 0, ширина 95%, текст по центру, рамка 1px solid lightgray, заокруглення 5px, padding: 5px.
select: ширина 100%, padding 5px, заокруглення 5px, border: 1px solid lightgray.
textarea: висота 60px, padding 8px, рамка 1px solid світло-сіра, заокруглення 5px, resize: none.
.submit: фон steelblue, колір тексту білий, без рамки (border: none;), padding 8px, border-radius 6px, font-size 14px, зовнішній відступ знизу 10px.
.submit:hover: фон червоний.
2) index.html:
У тілі сторінки розміщена форма реєстрації мандрівника з h2 «Реєстрація» всередині.
Форма складається з кількох секцій (fieldset), кожна має свій підпис (legend).
- Поле "Дані мандрівника" — містить три обов’язкові (required) поля для введення:
Email, Ім’я, Пароль (усі мають клас .info і вирівняні по центру).
- Поле "Країна відправлення" — випадаючий список (select) з вибором однієї країни.
Варіант "Японія" вимкнений (disabled).
- Поле "Стать" — два перемикачі (radio): Жінка і Чоловік. За замовчуванням обрана стать Чоловік (checked).
- Поле "Послуги" — чотири прапорці (checkbox) для вибору додаткових опцій:
Екскурсії, Страхування, Перекладач, VIP-тур.
Остання опція "VIP-тур" недоступна (disabled).
- Поле для побажань — textarea з підказкою "Додаткові побажання...".
- Кнопка — submit з текстом "Почати подорож", натискання на яку відкриває сторінку world.html.
У тілі сторінки розміщена форма реєстрації мандрівника з h2 «Реєстрація» всередині.
Форма складається з кількох секцій (fieldset), кожна має свій підпис (legend).
- Поле "Дані мандрівника" — містить три обов’язкові (required) поля для введення:
Email, Ім’я, Пароль (усі мають клас .info і вирівняні по центру).
- Поле "Країна відправлення" — випадаючий список (select) з вибором однієї країни.
Варіант "Японія" вимкнений (disabled).
- Поле "Стать" — два перемикачі (radio): Жінка і Чоловік. За замовчуванням обрана стать Чоловік (checked).
- Поле "Послуги" — чотири прапорці (checkbox) для вибору додаткових опцій:
Екскурсії, Страхування, Перекладач, VIP-тур.
Остання опція "VIP-тур" недоступна (disabled).
- Поле для побажань — textarea з підказкою "Додаткові побажання...".
- Кнопка — submit з текстом "Почати подорож", натискання на яку відкриває сторінку world.html.

Щоб завантажити, клікніть правою кнопкою миші на зображення та оберіть «Зберегти як…».
Фон:
3) world.css:
body: padding 0, margin 0, висота 100vh, display: flex, justify-content: center, align-items: center, фонова картинка water.jpg, background-size: cover.
.map: позиція relative, ширина 1000px, висота 600px, фонова картинка World_map.png, background-size: contain, без повтору (background-repeat: no-repeat), заокруглення 15px, рамка 10px double wheat, фон rgb(135,205,235,0.8).
a: позиція absolute, без підкреслення.
img: ширина 40px, висота 40px,
img:hover: рамка 2px solid червона, border-radius 50%.
Позиції іконок (позиції приблизні, за потреби регулюйте top та left):
Париж — top 32%, left 42%
Токіо — top 35%, left 77%
Нью-Йорк — top 39%, left 23%
Каїр — top 42%, left 50%
Ріо-де-Жанейро — top 65%, left 30%
Україна — top 32%, left 49%
body: padding 0, margin 0, висота 100vh, display: flex, justify-content: center, align-items: center, фонова картинка water.jpg, background-size: cover.
.map: позиція relative, ширина 1000px, висота 600px, фонова картинка World_map.png, background-size: contain, без повтору (background-repeat: no-repeat), заокруглення 15px, рамка 10px double wheat, фон rgb(135,205,235,0.8).
a: позиція absolute, без підкреслення.
img: ширина 40px, висота 40px,
img:hover: рамка 2px solid червона, border-radius 50%.
Позиції іконок (позиції приблизні, за потреби регулюйте top та left):
Париж — top 32%, left 42%
Токіо — top 35%, left 77%
Нью-Йорк — top 39%, left 23%
Каїр — top 42%, left 50%
Ріо-де-Жанейро — top 65%, left 30%
Україна — top 32%, left 49%
4) world.html:
У тілі сторінки: блок div (.map) - фонова карта світу.
На ній 6 посилань-іконок (у вигляді картинок):
Париж, Токіо, Нью-Йорк, Каїр, Ріо-де-Жанейро, Україна.
Кожна іконка відкриває статтю у Вікіпедії в новій вкладці (обов’язкова наявність target=”_blank”).
Посилання:
Париж — https://uk.wikipedia.org/wiki/Париж
Токіо — https://uk.wikipedia.org/wiki/Токіо
Нью-Йорк — https://uk.wikipedia.org/wiki/Нью-Йорк
Каїр — https://uk.wikipedia.org/wiki/Каїр
Ріо-де-Жанейро — https://uk.wikipedia.org/wiki/Ріо-де-Жанейро
Україна — https://uk.wikipedia.org/wiki/Україна
У тілі сторінки: блок div (.map) - фонова карта світу.
На ній 6 посилань-іконок (у вигляді картинок):
Париж, Токіо, Нью-Йорк, Каїр, Ріо-де-Жанейро, Україна.
Кожна іконка відкриває статтю у Вікіпедії в новій вкладці (обов’язкова наявність target=”_blank”).
Посилання:
Париж — https://uk.wikipedia.org/wiki/Париж
Токіо — https://uk.wikipedia.org/wiki/Токіо
Нью-Йорк — https://uk.wikipedia.org/wiki/Нью-Йорк
Каїр — https://uk.wikipedia.org/wiki/Каїр
Ріо-де-Жанейро — https://uk.wikipedia.org/wiki/Ріо-де-Жанейро
Україна — https://uk.wikipedia.org/wiki/Україна

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