Liste de films

Fait partie de la section Styling with CSS du Journey HTML de Coddy — leçon 74 sur 76.

Défi

Facile

Stylez quatre cartes de film et disposez-les en colonne. Le design final ressemblera à l'image ci-dessous, mais n'hésitez pas à appliquer vos propres couleurs.

Suivez les étapes ci-dessous :

Utilisez display: flex; flex-direction: column; pour empiler les cartes de film en colonne.
Utilisez justify-content: center; pour centrer la colonne verticalement.
Utilisez align-items: center; pour aligner correctement les cartes.
Stylez chaque carte de film avec une taille fixe et des couleurs douces.
Ajoutez du margin-bottom et du padding pour chaque boîte de film afin de créer de l'espacement entre elles et d'améliorer la lisibilité.
Appliquez box-sizing: border-box pour éviter les problèmes d'espacement indésirables.
Utilisez overflow: auto pour gérer le texte supplémentaire à l'intérieur des cartes.

N'hésitez pas à ajouter box-shadow, border-radius, font-family, et une couleur de police différente pour le titre afin d'améliorer le design et de le rendre plus attrayant visuellement.

Essayez vous-même

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