Lista de Filmes

Parte da seção Styling with CSS do Journey de HTML da Coddy — lição 74 de 76.

Desafio

Fácil

Estilize quatro cartões de filmes e organize-os em uma coluna. O design final será semelhante à imagem abaixo, mas sinta-se à vontade para aplicar suas próprias cores.

Siga os passos abaixo:

Use display: flex; flex-direction: column; para empilhar os cartões de filmes em uma coluna.
Use justify-content: center; para centralizar a coluna verticalmente.
Use align-items: center; para alinhar os cartões adequadamente.
Estilize cada cartão de filme com um tamanho fixo e cores suaves.
Adicione um pouco de margin-bottom e padding para cada caixa de filme para criar espaçamento entre elas e melhorar a legibilidade.
Aplique box-sizing: border-box para evitar problemas de espaçamento indesejados.
Use overflow: auto para lidar com o texto extra dentro dos cartões.

Sinta-se à vontade para adicionar box-shadow, border-radius, font-family e uma cor de fonte diferente para o cabeçalho para aprimorar o design e torná-lo mais visualmente atraente.

Experimente você mesmo

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