added material io component card

package.json

@@ -22,6 +22,7 @@
     "@angular/platform-browser": "^6.0.3",
     "@angular/platform-browser-dynamic": "^6.0.3",
     "@angular/router": "^6.0.3",
+    "@material/card": "^0.41.0",
     "bootstrap": "^4.1.3",
     "core-js": "^2.5.4",
     "font-awesome": "^4.7.0",

src/app/app.module.ts

@@ -4,6 +4,8 @@ import { FormsModule } from '@angular/forms';
 import { HttpModule } from '@angular/http';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { MatButtonModule, MatCheckboxModule } from '@angular/material';
+import { MatCardModule } from '@angular/material/card';
+import { MatDividerModule } from '@angular/material/divider';
 
 import { AppRoutingModule } from './app-routing/app-routing.module';
 
@@ -62,7 +64,9 @@ import { HomeComponent } from './content/image-container/home/home.component';
     AppRoutingModule,
     BrowserAnimationsModule,
     MatButtonModule,
-    MatCheckboxModule
+    MatCheckboxModule,
+    MatCardModule,
+    MatDividerModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/content/header/tools/tools.component.scss

@@ -35,3 +35,6 @@ div.navbar-collapse li {
 .nav-link {
     padding: .7rem 0.5rem;
 }
+
+ul.nav { display: flex;}
+ul.nav li { margin: auto; }

src/app/content/image-container/image-container.component.scss

@@ -14,3 +14,7 @@ p {
 .box:nth-of-type(n + 4) { 
     order: 1; 
 }
+
+:host {
+    margin: auto;
+}

src/app/content/image-container/image/image.component.html

@@ -1,4 +1,4 @@
-<div class="card">
+<!-- <div class="card">
   <img class="card-img-top" src="{{image.imageUrl}}" alt="Card image cap">
   <div class="card-body">
     <h5 class="card-title">{{image.imageTitle}}</h5>
@@ -13,4 +13,21 @@
     <a href="#" class="card-link">Card link</a>
     <a href="#" class="card-link">Another link</a>
   </div>
-</div>
+</div> -->
+
+<mat-card class="card">
+  <mat-card-header>
+    <div mat-card-avatar class="header-image"></div>
+    <mat-card-title>{{image.imageTitle}}</mat-card-title>
+    <mat-card-subtitle>Nature</mat-card-subtitle>
+  </mat-card-header>
+  <img mat-card-image src="{{image.imageUrl}}" alt="Photo of a Shiba Inu">
+  <mat-card-content>
+    <p>{{image.imageDescription}}</p>
+  </mat-card-content>
+  <mat-card-actions>
+    <button mat-button>LIKE</button>
+    <button mat-button>SHARE</button>
+  </mat-card-actions>
+</mat-card>
+<mat-divider></mat-divider>

src/app/content/image-container/image/image.component.scss

@@ -1,11 +1,23 @@
 //OVERWRITES
 :host {
-    margin: 0 20px;
+    margin: 0 1em;
     overflow: auto;
+}
+// .card {
+//     width: 20rem;
+//     margin: 20px auto;
+//     overflow: auto
+// }
 
-}
 .card {
-    width: 20rem;
+    max-width: 400px;
-    margin: 20px auto;
+}
-    overflow: auto
+  
+.header-image {
+    background-image: url('https://material.angular.io/assets/img/examples/shiba1.jpg');
+    background-size: cover;
+}
+
+mat-divider {
+    margin: 1em 0;
 }