Update index.html

Adding roles

cards/index.html

@@ -26,6 +26,87 @@ <h1 class="lead m-0"><a class="text-body text-decoration-none" href="./"><span c
     </header>
     <main role="main">
       <div class="container-fluid">
+        <h2 class="display-6 mt-5">Rôles</h2>
+        <div class="row" id="roles">
+          <div class="col-sm-6 col-md-4 col-lg-3 col-xxl-2 mb-3">
+            <div class="card h-100 shadow border-0">
+              <img src="https://placehold.co/600x400/06d6a0/073b4c/?text=placeholder" class="card-img-top" alt="Project Manager">
+              <div class="card-body">
+                <h3 class="card-title">Project Manager</h3>
+                <p class="card-text">Responsable de la gestion des délais et des ressources, garantissant le bon déroulement du projet dans le respect des critères d’accessibilité.</p>
+              </div>
+              <div class="card-footer d-flex align-items-center justify-content-between">
+                <span class="bi bi-person-badge fs-4" aria-label="Project Manager"></span>
+                <p class="card-text">Supervise l’équipe</p>
+              </div>
+            </div>
+          </div>
+          <div class="col-sm-6 col-md-4 col-lg-3 col-xxl-2 mb-3">
+            <div class="card h-100 shadow border-0">
+              <img src="https://placehold.co/600x400/06d6a0/073b4c/?text=placeholder" class="card-img-top" alt="Développeur">
+              <div class="card-body">
+                <h3 class="card-title">Développeur</h3>
+                <p class="card-text">Crée le code qui rend le site fonctionnel tout en veillant à ce que chaque fonctionnalité soit accessible à tous les utilisateurs.</p>
+              </div>
+              <div class="card-footer d-flex align-items-center justify-content-between">
+                <span class="bi bi-code-slash fs-4" aria-label="Développeur"></span>
+                <p class="card-text">Implémente le code</p>
+              </div>
+            </div>
+          </div>
+          <div class="col-sm-6 col-md-4 col-lg-3 col-xxl-2 mb-3">
+            <div class="card h-100 shadow border-0">
+              <img src="https://placehold.co/600x400/06d6a0/073b4c/?text=placeholder" class="card-img-top" alt="Designer">
+              <div class="card-body">
+                <h3 class="card-title">Designer</h3>
+                <p class="card-text">Crée des interfaces visuelles attrayantes tout en tenant compte des contraintes d’accessibilité, notamment en matière de couleurs et de contraste.</p>
+              </div>
+              <div class="card-footer d-flex align-items-center justify-content-between">
+                <span class="bi bi-palette fs-4" aria-label="Designer"></span>
+                <p class="card-text">Conçoit l’interface</p>
+              </div>
+            </div>
+          </div>
+          <div class="col-sm-6 col-md-4 col-lg-3 col-xxl-2 mb-3">
+            <div class="card h-100 shadow border-0">
+              <img src="https://placehold.co/600x400/06d6a0/073b4c/?text=placeholder" class="card-img-top" alt="Expert Accessibilité">
+              <div class="card-body">
+                <h3 class="card-title">Expert en Accessibilité</h3>
+                <p class="card-text">Évalue les fonctionnalités du site et garantit leur conformité aux normes d'accessibilité, apportant une expertise spécialisée.</p>
+              </div>
+              <div class="card-footer d-flex align-items-center justify-content-between">
+                <span class="bi bi-lightbulb fs-4" aria-label="Expert en Accessibilité"></span>
+                <p class="card-text">Apporte des conseils</p>
+              </div>
+            </div>
+          </div>
+          <div class="col-sm-6 col-md-4 col-lg-3 col-xxl-2 mb-3">
+            <div class="card h-100 shadow border-0">
+              <img src="https://placehold.co/600x400/06d6a0/073b4c/?text=placeholder" class="card-img-top" alt="Testeur">
+              <div class="card-body">
+                <h3 class="card-title">Testeur</h3>
+                <p class="card-text">Teste le site en utilisant différents outils et méthodes pour garantir que toutes les fonctionnalités sont accessibles.</p>
+              </div>
+              <div class="card-footer d-flex align-items-center justify-content-between">
+                <span class="bi bi-bug fs-4" aria-label="Testeur"></span>
+                <p class="card-text">Effectue les tests</p>
+              </div>
+            </div>
+          </div>
+          <div class="col-sm-6 col-md-4 col-lg-3 col-xxl-2 mb-3">
+            <div class="card h-100 shadow border-0">
+              <img src="https://placehold.co/600x400/06d6a0/073b4c/?text=placeholder" class="card-img-top" alt="Manager">
+              <div class="card-body">
+                <h3 class="card-title">Manager</h3>
+                <p class="card-text">Assure la coordination des efforts au sein de l'équipe, en veillant à ce que tous les aspects du projet respectent les exigences d'accessibilité.</p>
+              </div>
+              <div class="card-footer d-flex align-items-center justify-content-between">
+                <span class="bi bi-person-lines-fill fs-4" aria-label="Manager"></span>
+                <p class="card-text">Coordonne le projet</p>
+              </div>
+            </div>
+          </div>
+        </div>
         <h2 class="display-6">Déficiences</h2>
         <div class="row" id="disabilities">
           <div class="col-sm-6 col-md-4 col-lg-3 col-xxl-2 mb-3">
@@ -471,4 +552,4 @@ <h3 class="card-title">Langue de la page</h3>
   </body>
   <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
   <script src="assets/js/digita11y-cards.js"></script>
-</html>
+</html>