Список фильмов

Часть раздела Стилизация с CSS путешествия по HTML на Coddy. Урок 74 из 76.

Задание

Легко

Оформите четыре карточки фильмов и расположите их в столбец. Итоговый дизайн будет похож на изображение ниже, но вы можете выбрать собственные цвета.

Выполните следующие шаги:

Используйте display: flex; flex-direction: column;, чтобы расположить карточки фильмов в столбец.
Используйте justify-content: center;, чтобы выровнять столбец по вертикали по центру.
Используйте align-items: center;, чтобы правильно выровнять карточки.
Оформите каждую карточку фильма, задав ей фиксированный размер и мягкие цвета.
Добавьте margin-bottom и padding для каждой карточки фильма, чтобы создать между ними промежутки и улучшить читаемость.
Примените box-sizing: border-box, чтобы избежать нежелательных проблем с отступами.
Используйте overflow: auto, чтобы обрабатывать лишний текст внутри карточек.

Для улучшения дизайна и придания ему большей визуальной привлекательности можете добавить box-shadow, border-radius, font-family, а также задать заголовку другой цвет шрифта.

Попробуйте сами

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