Lista filmów

Część sekcji Stylizacja za pomocą CSS ścieżki HTML w Coddy. Lekcja 74 z 76.

Wyzwanie

Łatwy

Ostyluj cztery karty filmów i ułóż je w kolumnie. Końcowy projekt będzie podobny do obrazu poniżej, ale możesz użyć własnych kolorów.

Wykonaj poniższe kroki:

Użyj display: flex; flex-direction: column;, aby ułożyć karty filmów w kolumnie.
Użyj justify-content: center;, aby wyśrodkować kolumnę w pionie.
Użyj align-items: center;, aby prawidłowo wyrównać karty.
Ostyluj każdą kartę filmu, nadając jej stały rozmiar i stonowane kolory.
Dodaj nieco margin-bottom i padding do każdego pola filmu, aby utworzyć odstępy między nimi i poprawić czytelność.
Zastosuj box-sizing: border-box, aby zapobiec niepożądanym problemom z odstępami.
Użyj overflow: auto, aby obsłużyć nadmiarowy tekst wewnątrz kart.

Możesz dodać box-shadow, border-radius, font-family oraz inny kolor czcionki nagłówka, aby ulepszyć projekt i nadać mu bardziej atrakcyjny wygląd.

Spróbuj swoich sił

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