Corpo

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

Sfida

Facile

In questo progetto, realizzeremo e applicheremo uno stile a un semplice modulo di accesso. Questo progetto ti aiuterà a esercitarti con i concetti chiave di CSS, tra cui:
✅ Centrare perfettamente gli elementi su una pagina web
✅ Applicare uno stile agli elementi dei moduli, come campi di input e pulsanti
✅ Lavorare con bordi, ombre e spaziatura
✅ Lasciare spazio alla creatività nel design

Al termine del progetto, avrai un modulo di accesso con uno stile curato, dall'aspetto moderno e rifinito, simile all'immagine qui sotto.

Applica gli stili al tag <body>. Segui i passaggi qui sotto:

Imposta il colore di sfondo su una tonalità chiara a tua scelta.
Usa Flexbox per centrare il modulo sia orizzontalmente che verticalmente.
Imposta l'altezza della pagina su 100vh affinché il modulo resti centrato anche quando la finestra viene ridimensionata.

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>