Conteneur du formulaire

Fait partie de la section Styling with CSS du Journey HTML de Coddy. Leçon 51 sur 76.

Défi

Facile

Dans cette leçon, nous allons rendre le formulaire plus structuré et visuellement attrayant.

Suivez les étapes ci-dessous :

Appliquez des styles au form container pour le faire ressortir. Écrivez une règle CSS qui cible l'élément avec la classe login-form.
1. Définissez une couleur d'arrière-plan (blanc ou toute couleur qui convient).
2. Ajoutez du padding pour que le contenu ait de l'espace à l'intérieur.
3. Arrondissez les coins.
4. Appliquez un box-shadow pour créer un effet de flottement doux.
5. Ajoutez une bordure (border) autour du formulaire (choisissez n'importe quelle couleur et épaisseur).
Centrez le texte à l'intérieur du formulaire en utilisant la propriété text-align .

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>