Filmliste

Teil des Abschnitts Styling mit CSS der HTML-Journey von Coddy. Lektion 74 von 76.

Aufgabe

Einfach

Gestalte vier Filmkarten und ordne sie untereinander an. Das endgültige Design wird dem Bild unten ähneln, aber du kannst gerne eigene Farben verwenden.

Führe die folgenden Schritte aus:

Verwende display: flex; flex-direction: column;, um die Filmkarten untereinander anzuordnen.
Verwende justify-content: center;, um die Spalte vertikal zu zentrieren.
Verwende align-items: center;, um die Karten richtig auszurichten.
Gestalte jede Filmkarte mit einer festen Größe und sanften Farben.
Füge für jede Filmbox etwas margin-bottom und padding hinzu, um Abstand zwischen den Boxen zu schaffen und die Lesbarkeit zu verbessern.
Wende box-sizing: border-box an, um unerwünschte Abstandsprobleme zu vermeiden.
Verwende overflow: auto, um zusätzlichen Text in den Karten zu handhaben.

Du kannst gerne box-shadow, border-radius, font-family und eine andere Schriftfarbe für die Überschrift hinzufügen, um das Design aufzuwerten und optisch ansprechender zu gestalten.

Probier es selbst

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