Тело

Часть раздела Styling with CSS путешествия по HTML на Coddy — урок 50 из 76.

Задание

Легко

В этом проекте мы создадим и стилизуем простую Login Form. Этот проект поможет вам попрактиковаться в ключевых концепциях CSS, включая:
✅ Идеальное центрирование элементов на веб-странице
✅ Стилизацию элементов формы, таких как поля ввода и кнопки
✅ Работу с границами, тенями и отступами
✅ Возможность проявить творческий подход в дизайне

К концу проекта у вас будет стильная форма входа, которая выглядит современно и профессионально, как на изображении ниже.

Примените стили к тегу <body>. Выполните следующие шаги:

Установите background color на любой светлый оттенок по вашему выбору.
Используйте Flexbox, чтобы центрировать форму как по горизонтали, так по вертикали.
Установите height страницы на 100vh, чтобы форма оставалась центрированной даже при изменении размера окна.

Попробуйте сами

<html>
<head>
    <title>Login Form</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <form class="login-form">
        <h2>Login</h2>
        <input type="text" placeholder="Username">
        <input type="password" placeholder="Password">
        <button type="submit">Login</button>
    </form>
</body>
</html>