Corps

Fait partie de la section Style avec CSS du Journey HTML de Coddy. Leçon 50 sur 76.

Défi

Facile

Dans ce projet, nous allons créer et mettre en forme un simple formulaire de connexion. Ce projet vous aidera à vous exercer aux principaux concepts CSS, notamment :
✅ Centrer parfaitement les éléments sur une page Web
✅ Mettre en forme les éléments d’un formulaire, comme les champs de saisie et les boutons
✅ Travailler avec les bordures, les ombres et l’espacement
✅ Laisser libre cours à votre créativité dans la conception

À la fin du projet, vous aurez un formulaire de connexion bien mis en forme, à l’aspect 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 avec une teinte claire de votre choix.
Utilisez Flexbox pour centrer le formulaire horizontalement et verticalement.
Définissez la hauteur de la page sur 100vh afin que le formulaire reste centré même lorsque la taille de la fenêtre change.

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>