Daftar Film

Termasuk bagian Menata dengan CSS dalam perjalanan HTML di Coddy. Pelajaran 74 dari 76.

Tantangan

Mudah

Atur gaya empat kartu film dan susun dalam satu kolom. Desain akhirnya akan terlihat mirip dengan gambar di bawah, tetapi kamu bebas menggunakan warna pilihanmu.

Ikuti langkah-langkah berikut:

Gunakan display: flex; flex-direction: column; untuk menyusun kartu film dalam satu kolom.
Gunakan justify-content: center; untuk menengahkan kolom secara vertikal.
Gunakan align-items: center; untuk menyelaraskan kartu dengan tepat.
Atur gaya setiap kartu film dengan ukuran tetap dan warna lembut.
Tambahkan margin-bottom dan padding pada setiap kotak film untuk memberi jarak di antaranya dan meningkatkan keterbacaan.
Terapkan box-sizing: border-box untuk mencegah masalah jarak yang tidak diinginkan.
Gunakan overflow: auto untuk menangani teks tambahan di dalam kartu.

Kamu bebas menambahkan box-shadow, border-radius, font-family, dan warna font yang berbeda untuk judul agar desainnya lebih menarik secara visual.

Coba sendiri

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