Форма регистрации

Создайте форму, показанную на рис. 1. Ширина формы и полей ввода меняется вместе с шириной окна браузера.

Рис. 1

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Форма регистрации</title> <style> body { font-family: Arial, Verdana, sans-serif; /* Семейство шрифта */ } section { background: #eef8fa; /* Цвет фона */ } h2, footer { background: #e3efef; /* Цвет фона */ padding: 1rem; /* Поля вокруг текста */ } h2 { font-weight: normal; /* Начертание */ margin: 0; /* Убираем отступы по умолчанию */ } footer { text-align: right; /* Кнопка справа */ } form { padding: 1rem 1rem 0; /* Поля */ border-top: 1px solid #d0dcdc; /* Линия сверху */ border-bottom: 1px solid #d0dcdc; /* Линия снизу */ } input { width: 100%; /* На всю ширину */ padding: 0.8rem; /* Поля вокруг текста */ box-sizing: border-box; /* Ширина не учитывает padding */ margin-bottom: 1rem; /* Расстояние между полями */ border: 1px solid #d0dcdc; /* Параметры рамки */ } button { background: #54b5e0; /* Цвет кнопки */ color: #fff; /* Белый цвет текста */ border: none; /* Убираем рамку */ padding: 0.5rem 1.5rem; /* Поля вокруг текста */ } </style> </head> <body> <section> <h2>Регистрация</h2> <form action="/example/handler.php"> <input type="email" placeholder="Электронная почта"> <input type="password" placeholder="Пароль"> <input type="password" placeholder="Подтвердите пароль"> </form> <footer><button>Дальше</button></footer> </section> </body> </html>
Как научиться разрабатывать сайты