Avatars

Author: vincent-pochet

css/style.css

@@ -406,20 +406,8 @@ html[lang="fr"] [data-lang="en"] {
   width: 96px;
   height: 96px;
   border-radius: 50%;
-  background-color: var(--color-accent);
   margin: 0 auto 1.25rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-}
-
-.team-card__avatar::after {
-  content: attr(data-initials);
-  font-size: 1.5rem;
-  font-weight: 700;
-  color: var(--color-white);
-  letter-spacing: 1px;
+  object-fit: cover;
 }
 
 .team-card__name {

index.html

@@ -196,7 +196,7 @@ <h2 class="section__title" data-lang="fr">Notre Équipe</h2>
       <div class="team__grid">
         <!-- Vincent Pochet -->
         <div class="team-card fade-in">
-          <div class="team-card__avatar" data-initials="VP"></div>
+          <img class="team-card__avatar" src="https://www.gravatar.com/avatar/7ef3f7957cb2c48b02ee8a05b30ad675?s=192" alt="Vincent Pochet" />
           <h3 class="team-card__name">Vincent Pochet</h3>
           <div class="team-card__links">
             <a href="https://www.linkedin.com/in/vincentpochet" aria-label="LinkedIn" class="team-card__social">
@@ -213,7 +213,7 @@ <h3 class="team-card__name">Vincent Pochet</h3>
 
         <!-- Romain Sempé -->
         <div class="team-card fade-in">
-          <div class="team-card__avatar" data-initials="RS"></div>
+          <img class="team-card__avatar" src="https://www.gravatar.com/avatar/63a0fd4da2bee65e054973d8af9cb4da?s=192" alt="Romain Sempé" />
           <h3 class="team-card__name">Romain Sempé</h3>
           <div class="team-card__links">
             <a href="https://www.linkedin.com/in/rsempe/" aria-label="LinkedIn" class="team-card__social">
@@ -227,7 +227,7 @@ <h3 class="team-card__name">Romain Sempé</h3>
 
         <!-- François Chabloz -->
         <div class="team-card fade-in">
-          <div class="team-card__avatar" data-initials="FC"></div>
+          <img class="team-card__avatar" src="https://ca.slack-edge.com/T0B3PV7BM-U0B4BK9D5-9315d37a1582-512" alt="François Chabloz" />
           <h3 class="team-card__name">François Chabloz</h3>
           <div class="team-card__links">
             <a href="https://github.com/chab" aria-label="GitHub" class="team-card__social">