Défi : Créer un Composant Carte Moderne

Exercice de mise en pratique pour améliorer l’aspect visuel de la page web. Les consignes sont les suivantes :

• Ajouter une ombre au div ayant la classe card. Les valeurs d’ombre spécifiées sont :

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

• Ajouter une image d’arrière-plan au div avec la classe card. Le lien de l’image est fourni :

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

• Centrer l’image d’arrière-plan à l’intérieur de la carte.

• Pour ajouter une ombre à un élément, utiliser la propriété box-shadow avec la valeur spécifiée. Dans ce cas, la valeur est rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px.
• Pour définir une image comme arrière-plan à l’aide de la propriété background-image, utiliser la syntaxe url("correct path"). Entre parenthèses, ouvrir les guillemets et indiquer le chemin de l’image. Pour cet exercice, le chemin correct est : url("https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/css-fundamentals/decorative-effects/challenge-background.png").
• Pour définir la position de l’image d’arrière-plan, utiliser la propriété background-position. Dans ce cas, la valeur à appliquer est center.

Ce que vous avez construit

Vous avez stylisé des pages web en utilisant CSS, en ajoutant des couleurs, des espacements, des mises en page et des composants visuels.

Ce qui manque

Vos pages sont esthétiques, mais elles restent statiques. Les utilisateurs ne peuvent pas interagir avec elles.

Prochaine étape

Pour ajouter du comportement et de l'interactivité, il vous faut JavaScript. Ensuite, vous commencerez à travailler avec JavaScript pour rendre vos pages dynamiques.