Lista de películas

Parte de la sección Styling with CSS del Journey de HTML de Coddy — lección 74 de 76.

Desafío

Fácil

Estiliza cuatro tarjetas de películas y organízalas en una columna. El diseño final se verá similar a la imagen de abajo, pero siéntete libre de aplicar 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 las tarjetas correctamente.
Estiliza cada tarjeta de película con un tamaño fijo y colores suaves.
Añade algo de margin-bottom y padding para cada caja de película para crear espacio entre ellas y mejorar la legibilidad.
Aplica box-sizing: border-box para prevenir problemas de espaciado no deseados.
Usa overflow: auto para manejar el texto extra dentro de las tarjetas.

Siéntete libre de añadir box-shadow, border-radius, font-family, y un color de fuente diferente para el encabezado para mejorar el diseño y hacerlo visualmente más atractivo.

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>