creation de cards

FencerJudgeFront/src/app/components/essentials/footer/footer.component.html

@@ -4,7 +4,7 @@
       <div class="col-md-4 d-flex align-items-center text-start">
         <img
           src="/assets/Logo/favicon.png"
-          alt="Angular Covid"
+          alt="FencerJudge"
           height="50"
           class="me-2"
         />

FencerJudgeFront/src/app/components/home/home.component.css

@@ -566,3 +566,62 @@
     transform: translateY(-4px);
   }
 }
+
+.weapons-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+  justify-content: center;
+  padding: 20px;
+}
+
+.weapon-card {
+  position: relative;
+  background-size: cover;
+  background-position: center;
+  border-radius: 12px;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
+  max-width: 300px;
+  height: 400px;
+  color: white;
+  text-align: center;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  padding: 20px;
+  background-color: #000;
+}
+.weapon-card::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background-image: inherit;
+  background-size: cover;
+  background-position: center;
+  filter: blur(10px) brightness(1.1); 
+  opacity: 0.7;
+  z-index: 1;
+}
+.weapon-card * {
+  position: relative;
+  z-index: 2;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
+}
+
+.weapon-card img {
+  width: 100%;
+  height: auto;
+  border-radius: 10px;
+  margin-bottom: 15px;
+}
+
+.weapon-card h2 {
+  margin-bottom: 10px;
+  font-size: 1.4em;
+}
+
+.weapon-card p {
+  color: #ffffff;
+  font-size: 0.95em;
+}

FencerJudgeFront/src/app/components/home/home.component.html

@@ -110,5 +110,28 @@
     </div>
   </div>
 </div>
+<div class="weapons-container">
+   <div class="weapon-card" style="background-image: url('./assets/epee_escrime.jpg');">
+    <h2>Épée</h2>
+    <p>Tout le corps est cible valable. Pas de priorité.</p>
+  </div>
+
+  <div class="weapon-card" style="background-image: url('./assets/fleuret_escrime.jpg');">
+    <h2>Fleuret</h2>
+    <p>Cible : torse. La priorité s'applique.</p>
+  </div>
+
+  <div class="weapon-card" style="background-image: url('./assets/sabre_escrime.jpg');">
+    <h2>Sabre</h2>
+    <p>Cible : haut du corps. Priorité en cas de touche simultanée.</p>
+  </div>
+
+  <div class="weapon-card" style="background-image: url('./assets/sabre_laser_escrime.jpg');">
+  <h2>Sabre Laser</h2>
+  <p>Arme moderne d’escrime sportive, inspirée de la science-fiction. Lame lumineuse, règles proches du sabre classique. Discipline visuelle et dynamique.</p>
+</div>
+
+</div>
+
 
 <app-sponsort></app-sponsort>