Modifs Paul Catégories

src/app/card-category/card-category.component.html

@@ -1,7 +1,8 @@
-<div class="card" style="width: 18rem;">
-    <img class="card-img-top" src="..." alt="Card image cap">
-    <div class="card-body">
-      <h5 class="card-title">{{ categoryData.libelle }}</h5>
-      <a href="#" class="btn btn-primary">Go somewhere</a>
+<div class="container shadow p-0 mb-5 bg-body rounded rounded  m-5 rounded-top "  style="width: 18rem;" >
+    <img class="card-img-top " src="assets/ImagesCategory/{{ categoryData.libelle }}.png" alt="Card image cap">
+    <div class="card-body rounded-bottom">
+      
+     
+      <a href="#" class="btn">{{ categoryData.libelle }}</a>
     </div>
   </div>

src/app/card-category/card-category.component.scss

@@ -0,0 +1,15 @@
+
+@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
+
+
+.card-body{
+    background-color: #CE0000;
+}
+
+.btn{
+    display: block;
+    color: #fff;
+    width: 100%;
+    font-size: 1.5em;
+    font-weight: bold;
+}

src/app/pages/home-page/home-page.component.html

@@ -1,3 +1,5 @@
-<div *ngFor="let category of listCategories">
+<div class="parent d-flex justify-content-center align-items-center flex-wrap flex-row  ">
+    <div *ngFor="let category of listCategories">
     <app-card-category [categoryData]="category"></app-card-category>
+    </div>
 </div>

src/styles.scss

@@ -1,3 +1,5 @@
 /* You can add global styles to this file, and also import other style files */
 @import '~bootstrap/scss/bootstrap.scss';
 // le tilde agit comme un raccourci vers le node_modules
+
+@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');