added images and styling for country routes

src/app/app.component.css

@@ -5,3 +5,9 @@
     overflow-x: hidden;
     padding: 50px 20px 20px 50px;
 }
+
+.img{
+    height: 350px;
+    width: 350px;
+    padding-left: 5px;
+}
\ No newline at end of file

src/app/app.module.ts

 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
+import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
@@ -24,7 +25,8 @@ import { AccountComponent } from './account/account.component';
   ],
   imports: [
     BrowserModule,
-    AppRoutingModule
+    AppRoutingModule,
+    NgbModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/england/england.component.css

+.img{
+    height: 350px;
+    width: 350px;
+    padding-left: 5px;
+}

src/app/england/england.component.html

 <p>england works!</p>
+
+<div class='imgContainer' >
+    <img  class='img' src='/assets/images/england/england-bridge.jpg' />
+    <img  class='img' src='/assets/images/england/england-parliament.jpg' />
+    <img  class='img' src='/assets/images/england/england-stonehedge.jpg' />
+</div>
+    
\ No newline at end of file

src/app/france/france.component.css

+.img{
+    height: 350px;
+    width: 350px;
+    padding-left: 5px;
+}
\ No newline at end of file

src/app/france/france.component.html

 <p>france works!</p>
+
+<div class='imgContainer' >
+    <img  class='img' src='/assets/images/france/france-cafe.jpg' />
+    <img  class='img' src='/assets/images/france/france-tower.jpg' />
+    <img  class='img' src='/assets/images/france/france-town.jpg' />
+</div>
\ No newline at end of file

src/app/greece/greece.component.css

+.img{
+    height: 350px;
+    width: 350px;
+    padding-left: 5px;
+}
\ No newline at end of file

src/app/greece/greece.component.html

 <p>greece works!</p>
+
+<div class='imgContainer' >
+    <img  class='img' src='/assets/images/greece/greece-beach.jpg' />
+    <img  class='img' src='/assets/images/greece/greece-steps.jpg' />
+    <img  class='img' src='/assets/images/greece/greece-santorini.jpg' />
+</div>
\ No newline at end of file

src/app/header/header.component.html

@@ -2,8 +2,8 @@
     <div class='btnMenu'>
     <button [routerLink]="['/england']">England</button>
     <button  [routerLink]= "['/france']">France</button>
-    <button >Greece</button>
-    <button >Spain</button>
+    <button [routerLink]= "['/greece']">Greece</button>
+    <button [routerLink]= "['/spain']">Spain</button>
     </div>
     <span class='account'>
         <i class="fa fa-user" [routerLink]="['/account']" ></i>

src/app/spain/spain.component.css

+.img{
+    height: 350px;
+    width: 350px;
+    padding-left: 5px;
+}
\ No newline at end of file

src/app/spain/spain.component.html

 <p>spain works!</p>
+
+<div class='imgContainer' >
+    <img  class='img' src='/assets/images/spain/spain-barcelona.jpg' />
+    <img  class='img' src='/assets/images/spain/spain-cathedral.jpg' />
+    <img  class='img' src='/assets/images/spain/spain-dance.jpg' />
+</div>
\ No newline at end of file