Film Listesi

Coddy'nin HTML Journey'sinin Styling with CSS bölümünün bir parçası — ders 74 / 76.

Görev

Kolay

Dört film kartını stillendirin ve bunları bir sütun halinde düzenleyin. Nihai tasarım aşağıdaki resme benzer görünecektir, ancak kendi renklerinizi uygulamaktan çekinmeyin.

Aşağıdaki adımları izleyin:

Film kartlarını bir sütun halinde üst üste dizmek için display: flex; flex-direction: column; kullanın.
Sütunu dikey olarak ortalamak için justify-content: center; kullanın.
Kartları düzgün bir şekilde hizalamak için align-items: center; kullanın.
Her film kartını sabit bir boyut ve yumuşak renklerle stillendirin.
Aralarında boşluk oluşturmak ve okunabilirliği artırmak için her film kutusuna biraz margin-bottom ve padding ekleyin.
İstenmeyen boşluk sorunlarını önlemek için box-sizing: border-box uygulayın.
Kartların içindeki fazla metni yönetmek için overflow: auto kullanın.

Tasarımı geliştirmek ve daha görsel olarak çekici hale getirmek için box-shadow, border-radius, font-family ve başlık için farklı bir yazı tipi rengi eklemekten çekinmeyin.

Kendin dene

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