Завдання 1
Виконати завдання як на картинці.
body: display: flex; justify-content: center; text-align: center.
form: фон silver, шрифт cursive, рамка 2px solid black, border-radius 15px, ширина 300px.
input: ширина 250px.
кнопка «Увійти»: ширина 150px, висота 25px, фон жовтий, відступи зверху і знизу 10px, шрифт cursive, border-radius 15px.
кнопка «Увійти»:hover: фон червоний, колір тексту білий.
У тілі сторінки:
Заголовок h1 «Авторизація» над формою, у формі 4 поля для введення: ім’я, прізвище, пароль, повтор пароля. Кнопка «Увійти» під полями з ефектом при наведенні (hover).
form: фон silver, шрифт cursive, рамка 2px solid black, border-radius 15px, ширина 300px.
input: ширина 250px.
кнопка «Увійти»: ширина 150px, висота 25px, фон жовтий, відступи зверху і знизу 10px, шрифт cursive, border-radius 15px.
кнопка «Увійти»:hover: фон червоний, колір тексту білий.
У тілі сторінки:
Заголовок h1 «Авторизація» над формою, у формі 4 поля для введення: ім’я, прізвище, пароль, повтор пароля. Кнопка «Увійти» під полями з ефектом при наведенні (hover).

Завдання 2
Виконати завдання як на картинці.
body: шрифт Arial; фон #fafafa; display: flex; justify-content: center; align-items: center; висота 100vh.
основний div: display: flex; align-items: center.
h1: колір mediumvioletred; шрифт "Monotype Corsiva"; розмір 40px.
img: висота 570px.
.left: margin 20px.
form: border-radius 8px; padding 20px; ширина 280px; text-align: center; font-size 14px.
input, button: ширина 90%; висота 35px; margin 6px 0; border-radius 5px; border 1px solid lightgray; padding-left 8px.
button: фон mediumblue; колір тексту білий; border none; font-weight bold.
кнопка «Увійти»: фон mediumvioletred; колір тексту білий; border none; font-weight bold.
a: текст без підкреслення.
У тілі сторінки:
Основний div містить зліва картинку Instagram (картинка розташована у div з класом left) та справа форму.
Форма включає: заголовок h1 «Instagram», поля для введення номеру телефону/email та пароля, кнопки «Увійти» та «Увійти через Facebook», два hr між «АБО», посилання «Забули пароль?».
основний div: display: flex; align-items: center.
h1: колір mediumvioletred; шрифт "Monotype Corsiva"; розмір 40px.
img: висота 570px.
.left: margin 20px.
form: border-radius 8px; padding 20px; ширина 280px; text-align: center; font-size 14px.
input, button: ширина 90%; висота 35px; margin 6px 0; border-radius 5px; border 1px solid lightgray; padding-left 8px.
button: фон mediumblue; колір тексту білий; border none; font-weight bold.
кнопка «Увійти»: фон mediumvioletred; колір тексту білий; border none; font-weight bold.
a: текст без підкреслення.
У тілі сторінки:
Основний div містить зліва картинку Instagram (картинка розташована у div з класом left) та справа форму.
Форма включає: заголовок h1 «Instagram», поля для введення номеру телефону/email та пароля, кнопки «Увійти» та «Увійти через Facebook», два hr між «АБО», посилання «Забули пароль?».

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

Завдання 3
Виконати завдання як на картинці.
body: text-align: center.
form: display: inline-block; фон lightgray; рамка 2px solid mediumvioletred; ширина 300px.
textarea: resize: none; ширина 200px; висота 120px.
У тілі сторінки:
Заголовок h1 «Оформлення замовлення» над формою.
У формі h3 «Ваші контактні дані» і поля:
- Прізвище (input type="text", placeholder, required)
- Ім’я (input type="text", placeholder, required)
- Країна замовлення (input type="text", placeholder, disabled)
- Обраний товар (input type="text", placeholder, readonly)
- Опис товару (textarea, readonly)
- Коментар до замовлення (textarea для введення)
- Кнопки: «Продовжити» (submit) і «Очистити» (reset).
Форма розташована по центру, усі поля вертикально одне під одним.
form: display: inline-block; фон lightgray; рамка 2px solid mediumvioletred; ширина 300px.
textarea: resize: none; ширина 200px; висота 120px.
У тілі сторінки:
Заголовок h1 «Оформлення замовлення» над формою.
У формі h3 «Ваші контактні дані» і поля:
- Прізвище (input type="text", placeholder, required)
- Ім’я (input type="text", placeholder, required)
- Країна замовлення (input type="text", placeholder, disabled)
- Обраний товар (input type="text", placeholder, readonly)
- Опис товару (textarea, readonly)
- Коментар до замовлення (textarea для введення)
- Кнопки: «Продовжити» (submit) і «Очистити» (reset).
Форма розташована по центру, усі поля вертикально одне під одним.

Додатково:
- Створіть замовлення по своєму улюбленому закладі харчування, як у завданні №2.
- Додайте фонове зображення цього закладу.
- Обов’язково вирівняйте елементи по центру за допомогою display: flex; justify-content: center;.
- Зробіть ефект наведення (hover): при наведенні на кнопку «Замовити» змінюється її колір.
build info
- compiler
- 2.0.5.1 · 4054EF9BF6C4510A
- built
- 2026-11-08 14:31:25 UTC
WebUniverse