WebUniverseЗавдання 1
Виконати завдання як на картинці.
body: display: flex; justify-content: center; align-items: center; фон lightcyan; шрифт Arial; розмір тексту 14px.
form: фон білий; рамка 2px solid lightskyblue; border-radius 10px; ширина 300px; вирівнювання тексту по центру; внутрішній відступ 20px.
fieldset: рамка 1px solid lightblue; border-radius 5px; внутрішній відступ 10px; текст вирівняний зліва.
select: ширина 100%.
button: фон goldenrod, колір тексту білий, border-radius 5px, без рамки, шрифт жирний, відступ зовнішній 5px auto.
У тілі сторінки:
Заголовок h2 «Оберіть свій смак морозива». У формі чотири блоки:
- «Інформація про вас» — поле введення імені.
- «Тип морозива» — вибір одного варіанту (шоколадне, ванільне, полуничне).
- «Додаткові топінги» — вибір кількох варіантів (шоколадна крихта, горіхи, льодяники - останній недоступний).
- «Оберіть улюблені фрукти» — список із кількома варіантами, можна вибрати кілька (за замовчуванням — банан).
Унизу дві кнопки — «Зберегти вибір» і «Очистити форму».
form: фон білий; рамка 2px solid lightskyblue; border-radius 10px; ширина 300px; вирівнювання тексту по центру; внутрішній відступ 20px.
fieldset: рамка 1px solid lightblue; border-radius 5px; внутрішній відступ 10px; текст вирівняний зліва.
select: ширина 100%.
button: фон goldenrod, колір тексту білий, border-radius 5px, без рамки, шрифт жирний, відступ зовнішній 5px auto.
У тілі сторінки:
Заголовок h2 «Оберіть свій смак морозива». У формі чотири блоки:
- «Інформація про вас» — поле введення імені.
- «Тип морозива» — вибір одного варіанту (шоколадне, ванільне, полуничне).
- «Додаткові топінги» — вибір кількох варіантів (шоколадна крихта, горіхи, льодяники - останній недоступний).
- «Оберіть улюблені фрукти» — список із кількома варіантами, можна вибрати кілька (за замовчуванням — банан).
Унизу дві кнопки — «Зберегти вибір» і «Очистити форму».
Завдання 2
Виконати завдання як на картинці.
body: шрифт Arial; відступи зовнішні 20px; текст вирівняний по центру; фон linen.
.characters: display: flex; justify-content: center; відступ зовнішній знизу 20px.
.hero: display: flex; flex-direction: column; align-items: center.
img: ширина 120px; автоматична висота; відступ зовнішній 10px; рамка 2px solid black.
button:focus + img: рамка зображення стає червоною (2px solid red) при фокусі на кнопці.
fieldset: ширина 300px; відступ зовнішній 15px auto; текст вирівняний зліва.
button: відступ зовнішній зверху 10px.
У тілі сторінки:
Заголовок h1 «Обери свого героя».
Три герої, розміщені в один ряд — космонавт, боєць, будівельник. Під кожним кнопка з його ім’ям, при натисканні рамка навколо зображення стає червоною. Всі три героя в одному блоці (class="characters"), кожен герой повинен мати свій блок (class="hero") з картинкою та кнопкою.
Нижче форма з двома розділами:
- «Оберіть скіли для героя» — кілька чекбоксів (швидкість, сила, кмітливість, створення порталів).
- «Виберіть стиль гри» — варіанти радіокнопок (онлайн, офлайн, кооперативна).
У кінці кнопка «Відправити».
.characters: display: flex; justify-content: center; відступ зовнішній знизу 20px.
.hero: display: flex; flex-direction: column; align-items: center.
img: ширина 120px; автоматична висота; відступ зовнішній 10px; рамка 2px solid black.
button:focus + img: рамка зображення стає червоною (2px solid red) при фокусі на кнопці.
fieldset: ширина 300px; відступ зовнішній 15px auto; текст вирівняний зліва.
button: відступ зовнішній зверху 10px.
У тілі сторінки:
Заголовок h1 «Обери свого героя».
Три герої, розміщені в один ряд — космонавт, боєць, будівельник. Під кожним кнопка з його ім’ям, при натисканні рамка навколо зображення стає червоною. Всі три героя в одному блоці (class="characters"), кожен герой повинен мати свій блок (class="hero") з картинкою та кнопкою.
Нижче форма з двома розділами:
- «Оберіть скіли для героя» — кілька чекбоксів (швидкість, сила, кмітливість, створення порталів).
- «Виберіть стиль гри» — варіанти радіокнопок (онлайн, офлайн, кооперативна).
У кінці кнопка «Відправити».
Щоб завантажити, клікніть правою кнопкою миші на зображення та оберіть «Зберегти як…».
| PNG: |
|
Додатково:
- Створіть сторінку з формою вибору улюбленого героя (з гри, фільму або аніме).
- Додайте фонове зображення світу, у якому живе герой (наприклад, космос, ліс, місто).
- Додайте поле введення імені користувача та вибір статі героя (чоловік / жінка / інше).
- Створіть список вибору типу героя (воїн, маг, стрілець, хакер, ельф тощо).
- Додайте вибір здібностей героя — кілька чекбоксів (швидкість, сила, магія, розум, невидимість).
- Використайте обов’язково radio, checkbox, select і option.
build info
- compiler
- 2.0.5.1 · 4054EF9BF6C4510A
- built
- 2026-11-08 14:31:25 UTC