Danh sách phim

Thuộc phần Tạo kiểu với CSS trong hành trình HTML của Coddy. Bài học 74 trên 76.

Thử thách

Dễ

Tạo kiểu cho bốn thẻ phim và xếp chúng thành một cột. Thiết kế cuối cùng sẽ trông tương tự hình bên dưới, nhưng bạn có thể tùy chọn màu sắc.

Thực hiện các bước dưới đây:

Dùng display: flex; flex-direction: column; để xếp các thẻ phim thành một cột.
Dùng justify-content: center; để căn giữa cột theo chiều dọc.
Dùng align-items: center; để căn chỉnh các thẻ cho phù hợp.
Tạo kiểu cho mỗi thẻ phim với kích thước cố định và màu sắc dịu nhẹ.
Thêm một chút margin-bottom và padding cho mỗi hộp phim để tạo khoảng cách giữa chúng và giúp nội dung dễ đọc hơn.
Áp dụng box-sizing: border-box để tránh các vấn đề khoảng cách không mong muốn.
Dùng overflow: auto để xử lý phần văn bản thừa bên trong các thẻ.

Bạn có thể thêm box-shadow, border-radius, font-family và đổi màu chữ tiêu đề để cải thiện thiết kế, giúp giao diện bắt mắt hơn.

Tự làm thử

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