Aller au contenu

Box-shadow - Réseaux Sociaux

Pour cet exercice, vous devez compléter le CSS d’une barre de pastilles permettant d’accéder à divers réseaux sociaux.

Aperçu du résultat 👇 Capture d’écran, le 2024-11-05 à 17 53 14

Matériel

Pen de départ

Couleurs 🎨

Blanc

#fff

Gris

#bbbbbb

Gris foncé

#2c3e50

Chaque icône que vous voyez dans le Pen de départ est en fait un caractère texte provenant de la librairie Font Awesome. Lorsque cette librairie est chargée dans un projet, elle agit comme une police de texte permettant d'afficher certaines icônes à partir de classes CSS spécifiques.

Requis

  • Faites en sorte que chaque icône affiche une à côté de l'autre dans des pastilles blanches ⚪️ de 80x80px ayant une marge de 10px horizontalement ↔️.
  • Chaque icône doit avoir une taille de 40px, être grise et être centrée horizontalement ↔️ et verticalement ↕️ dans sa pastille.
  • Attribuez une ombre de 20px décalée de 10px vers le bas de couleur gris foncé à chaque pastille.

Notes de cours

icon (42)
Box Shadow
Ombrage d'un élément.