Elenco di film

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

Sfida

Facile

Stilizza quattro schede di film e disponile in una colonna. Il design finale sarà simile all’immagine qui sotto, ma puoi scegliere liberamente i tuoi colori.

Segui i passaggi qui sotto:

Usa display: flex; flex-direction: column; per disporre le schede dei film in una colonna.
Usa justify-content: center; per centrare verticalmente la colonna.
Usa align-items: center; per allineare correttamente le schede.
Stilizza ogni scheda di film con dimensioni fisse e colori tenui.
Aggiungi un po’ di margin-bottom e padding a ogni riquadro del film per creare spazio tra loro e migliorare la leggibilità.
Applica box-sizing: border-box per evitare problemi di spaziatura indesiderati.
Usa overflow: auto per gestire il testo in eccesso all’interno delle schede.

Sentiti libero di aggiungere box-shadow, border-radius, font-family e un colore diverso per il titolo, per migliorare il design e renderlo più accattivante.

Provalo tu

<html>
    <head>
        <title>Movies</title>
        <link rel="stylesheet" href="styles.css">  
    </head>
    <body>
        <div class="movies">
            <div class="movie">
                <h2>King Kong (2005)</h2>
                <p>A filmmaker and his crew travel to Skull Island, where they encounter King Kong.</p>
            </div>
            <div class="movie">
                <h2>Inception (2010)</h2>
                <p>A thief who enters dreams to steal secrets faces his toughest mission yet.</p>
            </div>
            <div class="movie">
                <h2>The Matrix (1999)</h2>
                <p>A hacker learns the truth about reality and joins the fight against machines.</p>
            </div>
            <div class="movie">
                <h2>Casablanca (1942)</h2>
                <p>A nightclub owner is reunited with his lost love during World War II.</p>
            </div>
        </div>
    </body>
</html>