Last_update

src/app/activity-cards/activity-cards.component.css

+a:hover {
+    text-decoration: none;
+    background-color:#c8563a;
+    transition: 0.7s;
+    color: black;
+
+}
+
+a {
+    text-decoration: none;
+    color: black;
+
+}
+

src/app/activity-cards/activity-cards.component.html

-<div class="d-flex justify-content-center">
+<div class="d-flex justify-content-center p-3 mt-4">
     <h1>Activités près de chez vous</h1>
 </div>
+<div class="container">
+<div class="mw-100" style="height: 40px"></div>
     <div class="container">
         <div class="row justify-content-center">
-    <div class="col-sm card m-3 p-3" style="width: 18rem;">
+    <a routerLink="replaceWithComponentYves/sport" class="col-sm card m-3 p-3 align-items-center" style="width: 18rem;">
         <img src="/assets/images/sport.png" class="card-img-top" alt="sport">
         <div class="card-body">
           <h5 class="card-title">SPORTS</h5>
           <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
-          <a href="#" class="btn btn-primary">Check activities</a>
-        </div>
         </div>
-    <div class="col-sm card m-3 p-3" style="width: 18rem;">
+    </a>
+    <a routerLink="replaceWithComponentYves/conference" class="col-sm card m-3 p-3 align-items-center" style="width: 18rem;">
         <img src="/assets/images/conference.png" class="card-img-top" alt="conference">
         <div class="card-body">
           <h5 class="card-title">CONFERENCES</h5>
           <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
-          <a href="#" class="btn btn-primary">Go somewhere</a>
-        </div>
         </div>
-    <div class="col-sm card m-3 p-3" style="width: 18rem;">
+    </a>
+    <a routerLink="replaceWithComponentYves/afterwork" class="col-sm card m-3 p-3 align-items-center" style="width: 18rem;">
         <img src="/assets/images/afterwork.png" class="card-img-top" alt="afterwork">
         <div class="card-body">
           <h5 class="card-title">AFTERWORKS</h5>
           <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
-          <a href="#" class="btn btn-primary">Go somewhere</a>
         </div>
+    </a>
     </div>
 </div>
+
+<div class="mw-100" style="height: 40px"></div>
+<div class="container">
+<button routerLink="/" class="btn btn-primary" type="submit">Return home</button>
+</div>
 </div>
\ No newline at end of file

src/app/activity-cards/activity-cards.component.ts

@@ -6,5 +6,5 @@ import { Component } from '@angular/core';
   styleUrls: ['./activity-cards.component.css']
 })
 export class ActivityCardsComponent {
-
   }
+

src/app/app-routing.module.ts

 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
+import { ActivityCardsComponent } from './activity-cards/activity-cards.component';
 
-const routes: Routes = [];
+const routes: Routes = [
+  {path:"ActivityCards", component:ActivityCardsComponent}
+];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],

src/app/app.component.html

-<app-activity-cards></app-activity-cards>
\ No newline at end of file
+<router-outlet></router-outlet>
\ No newline at end of file