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 styliser un simple formulaire de connexion. Ce projet vous aidera à mettre en pratique des concepts CSS clés, notamment :
✅ Centrer parfaitement les éléments sur une page web
✅ Styliser les éléments d’un formulaire, comme les champs de saisie et les boutons
✅ Travailler avec les bordures, les ombres et l’espacement
✅ Laisser place à la créativité dans la conception

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

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

Définissez la couleur d’arrière-plan sur 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 fenêtre est redimensionnée.

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>