Desafío: Crea un Componente de Tarjeta Moderna

Practique y mejore el atractivo visual de la página web. La tarea incluye:

• Añadir una sombra al elemento div con el nombre de clase card. Los valores de sombra especificados son

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

• Añadir una imagen de fondo al elemento div con el nombre de clase card. El enlace de la imagen es el siguiente:

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

• Centrar la imagen de fondo dentro de la tarjeta.

• Para añadir una sombra a un elemento, utilice la propiedad box-shadow con el valor especificado. En este caso, el valor es rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px.
• Para establecer una imagen como fondo utilizando la propiedad background-image, emplee la sintaxis url("correct path"). Dentro de los paréntesis, abra comillas e indique la ruta de la imagen. En esta tarea, la ruta correcta es: url("https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/css-fundamentals/decorative-effects/challenge-background.png").
• Para determinar la posición de la imagen de fondo, utilice la propiedad background-position. En este caso, establezca el valor center para la propiedad.

Lo que has construido

Has estilizado páginas web usando CSS, añadiendo colores, espaciado, diseño y componentes visuales.

Lo que falta

Tus páginas se ven bien, pero siguen siendo estáticas. Los usuarios no pueden interactuar con ellas.

Lo que sigue

Para agregar comportamiento e interactividad, necesitas JavaScript. A continuación, comenzarás a trabajar con JavaScript y harás que tus páginas sean dinámicas.