page-not-found semble ok

src/app/app.module.ts

@@ -36,6 +36,7 @@ import { HttpClientModule } from '@angular/common/http';
 import { PageAjoutContactComponent } from './pages/page-ajout-contact/page-ajout-contact.component';
 import { PageModifierContactComponent } from './pages/page-modifier-contact/page-modifier-contact.component';
 import { PageCreationTeamComponent } from './pages/page-creation-team/page-creation-team.component';
+import { EmoticonComponent } from './emoticon/emoticon.component';
 
 @NgModule({
   declarations: [
@@ -71,6 +72,7 @@ import { PageCreationTeamComponent } from './pages/page-creation-team/page-creat
     PageAjoutContactComponent,
     PageModifierContactComponent,
     PageCreationTeamComponent,
+    EmoticonComponent,
   ],
   imports: [
     BrowserModule,

src/app/components/humeur/humeur.component.html

@@ -1 +1,6 @@
-<p>humeur works!</p>
+<p>Mon humeur est :</p>
+
+<p>Affichage des items du tableau des humeurs</p>
+
+<app-emoticon> *ngFor ="let tabHumeur of tabHumeur" 
+    [tabHumeur]="tabHumeur"></app-emoticon>

src/app/components/humeur/humeur.component.ts

@@ -7,9 +7,23 @@ import { Component, OnInit } from '@angular/core';
 })
 export class HumeurComponent implements OnInit {
 
-  constructor() { }
+
+
+
+
+
+  constructor() {
+    
+   
+    
+
+   }
 
   ngOnInit(): void {
+
+
+
+
   }
 
 }

src/app/emoticon/emoticon.component.html

@@ -0,0 +1,6 @@
+<p>emoticon des humeurs</p>
+<div *ngFor="let humor of tabHumeur">{{humor.title}}</div>
+<div *ngFor="let humor of tabHumeur"> <img src="{{humor.lien}}" alt="{{humor.title}}"></div>
+
+
+

src/app/emoticon/emoticon.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EmoticonComponent } from './emoticon.component';
+
+describe('EmoticonComponent', () => {
+  let component: EmoticonComponent;
+  let fixture: ComponentFixture<EmoticonComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ EmoticonComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(EmoticonComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/emoticon/emoticon.component.ts

@@ -0,0 +1,26 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-emoticon',
+  templateUrl: './emoticon.component.html',
+  styleUrls: ['./emoticon.component.scss']
+})
+export class EmoticonComponent implements OnInit {
+
+     //declaration du tableau
+     tabHumeur= [
+      { title : "Je pleure", lien : "../../../assets/images/emoticon-pleurer.png"},
+      { title : "Je suis en colère", lien : "../../../assets/images/emoticon-insulter.png"},
+      { title : "Je suis malade", lien : "../../../assets/images/emoticon-vomir.png"}
+    ]
+
+
+  constructor() { }
+
+  ngOnInit(): void {
+
+
+console.log("tab humeurs ==>", this.tabHumeur)
+  }
+
+}

src/app/pages/page-not-found/page-not-found.component.html

@@ -1,12 +1,23 @@
 <app-header></app-header>
 
+
+ 
+
+<!--  <app-humeur></app-humeur>     -->
+
 <div>
  
-<p> Page introuvable</p>
-<a routerLink="" routerLinkActive="!active"><br><br>
-    Je retourne à l'accueil<br><br><br><br><br><br><br><br><br><br><br><br></a>
 
 
+  <div class="ctn-link min-vh-100">
+ <div class="text-center">
+ <p> Page introuvable</p>
+
+
+      <a routerLink="" routerLinkActive="!active">Je retourne à l'accueil</a>
+    </div>
+    
+  </div>
+
 </div>
 
-

src/app/pages/page-not-found/page-not-found.component.scss

@@ -1,22 +1,20 @@
-
+p{
-
+    color: black;
-a.hover {
-    color :rgb(219, 200, 28)
-}
-
-a {
-    color: rgb(32, 114, 45);
-}
-
-div { 
     text-align: center;
+}
+
+
+.ctn-link > div {
+    padding-top: 7em;
+}
+
+
+.min-vh-100  {
     font-weight: bold;
+    background-image: linear-gradient(to left top, #051937, #004d7a, #008793, #e2ebe7, #f8faf5);
+    //max-width: max-content;
   
-// si on préfère une image en fond
-// background-image: url("../../../assets/images/404.jpg");
-// background-size: cover;
 
-background-image: linear-gradient(to left top, #051937, #004d7a, #008793, #e2ebe7, #f8faf5);
 
 }