Lista de películas

Parte de la sección Estilos con CSS del Journey de HTML de Coddy. Lección 74 de 76.

Desafío

Fácil

Aplica estilos a cuatro tarjetas de películas y colócalas en una columna. El diseño final se parecerá a la imagen de abajo, pero puedes usar tus propios colores.

Sigue los pasos a continuación:

Usa display: flex; flex-direction: column; para apilar las tarjetas de películas en una columna.
Usa justify-content: center; para centrar la columna verticalmente.
Usa align-items: center; para alinear correctamente las tarjetas.
Aplica estilos a cada tarjeta de película con un tamaño fijo y colores suaves.
Añade algo de margin-bottom y padding a cada tarjeta de película para crear espacio entre ellas y mejorar la legibilidad.
Aplica box-sizing: border-box para evitar problemas de espaciado no deseados.
Usa overflow: auto para manejar el texto adicional dentro de las tarjetas.

Si quieres, añade box-shadow, border-radius, font-family y un color diferente para la fuente del encabezado, para mejorar el diseño y hacerlo más atractivo visualmente.

Pruébalo tú mismo

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