Contenitore del modulo

Fa parte della sezione Stilizzare con CSS del percorso HTML di Coddy. Lezione 51 di 76.

Sfida

Facile

In questa lezione renderemo il modulo più strutturato e gradevole alla vista.

Segui i passaggi seguenti:

Applica degli stili al contenitore del modulo per farlo risaltare. Scrivi una regola CSS che selezioni l'elemento con la classe login-form.
1. Imposta un colore di sfondo (bianco o qualsiasi colore che ti sembri adatto).
2. Aggiungi padding in modo che il contenuto abbia spazio all'interno.
3. Arrotonda gli angoli.
4. Applica una box-shadow per creare un delicato effetto sospeso.
5. Aggiungi un bordo intorno al modulo (scegli qualsiasi colore e spessore).
Centra il testo all'interno del modulo usando la proprietà text-align .

Provalo tu

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