Filmliste

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

Aufgabe

Einfach

Gestalte vier Filmkarten und ordne sie in einer Spalte an. Das endgültige Design wird dem untenstehenden Bild ähneln, aber du kannst gerne deine eigenen Farben verwenden.

Befolge die untenstehenden Schritte:

Verwende display: flex; flex-direction: column;, um die Filmkarten in einer Spalte zu stapeln.
Verwende justify-content: center;, um die Spalte vertikal zu zentrieren.
Verwende align-items: center;, um die Karten ordnungsgemäß auszurichten.
Gestalte jede Filmkarte mit einer festen Größe und sanften Farben.
Füge jeder Filmbox etwas margin-bottom und padding hinzu, um Abstände zwischen ihnen 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 innerhalb der 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 zu verbessern und es 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>