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 👇

Matériel

Couleurs 🎨

Gris #bbb
Gris foncé #2c3e50
Bleu Facebook #4267B2
Bleu Twitter #1DA1F2
Mauve Instagram #833AB4
Noir TikTok #000

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

  1. 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 ↔️.

  2. Chaque icône doit avoir une taille de 40px, être grise et être centrée horizontalement ↔️ et verticalement ↕️ dans sa pastille.

  3. Attribuez une ombre de 20px décalée de 10px vers le bas de couleur gris foncé à chaque pastille.

  4. Au survole d'une pastille, faite la descendre de 5px. Ajustez aussi son ombre de sorte qu'il ne soit que de 10px et que son décalage de 5px, donnant ainsi l'impression que la pastille est enfoncée.

  5. Finalement, lorsqu'une pastille est survolée, attribuez à son icône la couleur du réseau social lui correspondant.

Notes de cours 📚