Desafio: Criar um Componente de Cartão Moderno

Vamos praticar e aprimorar o apelo visual da página web. A tarefa inclui:

• Adicionar uma sombra ao elemento div com o nome de classe card. Os valores de sombra especificados são

rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px

• Adicionar uma imagem de fundo ao elemento div com o nome de classe card. O link da imagem é fornecido:

   https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/css-fundamentals/decorative-effects/challenge-background.png

• Centralizar a imagem de fundo dentro do card.

• Para adicionar uma sombra a um elemento, utilize a propriedade box-shadow com o valor especificado. Neste caso, o valor é rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px.
• Para definir uma imagem como fundo usando a propriedade background-image, utilize a sintaxe url("correct path"). Dentro dos parênteses, abra aspas e especifique o caminho da imagem. Nesta tarefa, o caminho correto é fornecido: url("https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/css-fundamentals/decorative-effects/challenge-background.png").
• Para determinar a posição da imagem de fundo, utilize a propriedade background-position. Neste cenário, defina o valor como center para a propriedade.

O que você construiu

Você estilizou páginas da web usando CSS, adicionando cores, espaçamento, layout e componentes visuais.

O que está faltando

Suas páginas estão visualmente agradáveis, mas ainda são estáticas. Os usuários não podem interagir com elas.

O que vem a seguir

Para adicionar comportamento e interatividade, é necessário JavaScript. Em seguida, você começará a trabalhar com JavaScript para tornar suas páginas dinâmicas.