Тело

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

Задание

Легко

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

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

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

Задай цвет фона светлого оттенка на свой выбор.
Используй Flexbox, чтобы расположить форму по центру по горизонтали и вертикали.
Задай странице высоту 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>