Ajout composants card trombinoscope

src/app/app.module.ts

@@ -9,7 +9,8 @@ import * as Components from './components';
   declarations: [
     AppComponent,
     Components.HeaderComponent,
-    Components.PageTrombinoscopeComponent
+    Components.PageTrombinoscopeComponent,
+    Components.TrombinoscopeCardComponent,
   ],
   imports: [
     BrowserModule

src/app/components/header/header.component.scss

@@ -7,12 +7,13 @@ header {
     font-weight: 400;
     letter-spacing: 0.6px;
     margin: 0;
+    padding: 5px 10px;
     text-align: center;
     font-size: 2rem;
     line-height: 4rem;
 
     img {
-      vertical-align: sub;
+      float: left;
     }
   }
 }

src/app/components/index.ts

 export * from './header/header.component';
 export * from './page-trombinoscope/page-trombinoscope.component';
+export * from './trombinoscope-card/trombinoscope-card.component';

src/app/components/page-trombinoscope/page-trombinoscope.component.html

+<main bp="grid 3">
+  <app-trombinoscope-card></app-trombinoscope-card>
+  <app-trombinoscope-card></app-trombinoscope-card>
+  <app-trombinoscope-card></app-trombinoscope-card>
+  <app-trombinoscope-card></app-trombinoscope-card>
+  <app-trombinoscope-card></app-trombinoscope-card>
+  <app-trombinoscope-card></app-trombinoscope-card>
+  <app-trombinoscope-card></app-trombinoscope-card>
+  <app-trombinoscope-card></app-trombinoscope-card>
+  <app-trombinoscope-card></app-trombinoscope-card>
+  <app-trombinoscope-card></app-trombinoscope-card>
+</main>

src/app/components/page-trombinoscope/page-trombinoscope.component.scss

+main {
+  width: 80%;
+  margin: 0 auto;
+  padding-top: 30px;
+  grid-gap: 30px;
+}

src/app/components/trombinoscope-card/trombinoscope-card.component.html

+<div class="card">
+  <h2 bp="text-center">{{ prenom }} {{ nom }}</h2>
+  <img [src]="image">
+</div>

src/app/components/trombinoscope-card/trombinoscope-card.component.scss

+.card {
+  background-color: #ffffff;
+  box-shadow: 0 6px 6px rgba(10, 16, 20, .15), 0 0 52px rgba(10, 16, 20, .12);
+  padding: 30px;
+
+  h2 {
+    font-weight: 500;
+    margin: 0 0 20px;
+  }
+
+  img {
+    width: 100%;
+  }
+}

src/styles.scss

@@ -3,6 +3,7 @@
 html, body {
   margin: 0;
   padding: 0;
+  background-color: #fafafa;
 
   font-family: monospace;
 }