Corps

Fait partie de la section Styling with CSS du Journey HTML de Coddy — leçon 50 sur 76.

Défi

Facile

Dans ce projet, nous allons construire et styliser un simple Login Form. Ce projet vous aidera à pratiquer des concepts clés de CSS, notamment :
✅ Centrer parfaitement des éléments sur une page web
✅ Styliser des éléments de formulaire comme les champs de saisie et les boutons
✅ Travailler avec les bordures, les ombres et l'espacement
✅ Laisser place à la créativité dans le design

À la fin du projet, vous aurez un formulaire de connexion bien stylisé, moderne et soigné, semblable à l'image ci-dessous.

Appliquez des styles à la balise <body>. Suivez les étapes ci-dessous :

Définissez la couleur d'arrière-plan (background color) sur une nuance claire de votre choix.
Utilisez Flexbox pour centrer le formulaire horizontalement et verticalement.
Définissez la hauteur (height) de la page sur 100vh pour que le formulaire reste centré même lors d'un redimensionnement.

Essayez vous-même

<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>