Add working links to all four countries and associated pictures at links

package-lock.json

@@ -1592,6 +1592,14 @@
         "schema-utils": "^2.7.0"
       }
     },
+    "@ng-bootstrap/ng-bootstrap": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/@ng-bootstrap/ng-bootstrap/-/ng-bootstrap-9.1.0.tgz",
+      "integrity": "sha512-5cTxOew6EsENIa/PiIlIlF3MSGanLGD2fyGPyQJc0hU5j9uK+alz2eJXWpeAX3IHLDIaOBfRdCGOrpXkeIUhzQ==",
+      "requires": {
+        "tslib": "^2.0.0"
+      }
+    },
     "@ngtools/webpack": {
       "version": "11.2.9",
       "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-11.2.9.tgz",
@@ -2765,6 +2773,11 @@
       "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=",
       "dev": true
     },
+    "bootstrap": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.0.tgz",
+      "integrity": "sha512-Io55IuQY3kydzHtbGvQya3H+KorS/M9rSNyfCGCg9WZ4pyT/lCxIlpJgG1GXW/PswzC84Tr2fBYi+7+jFVQQBw=="
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",

package.json

@@ -19,6 +19,8 @@
     "@angular/platform-browser": "~11.2.6",
     "@angular/platform-browser-dynamic": "~11.2.6",
     "@angular/router": "~11.2.6",
+    "@ng-bootstrap/ng-bootstrap": "^9.1.0",
+    "bootstrap": "^4.6.0",
     "rxjs": "~6.6.0",
     "tslib": "^2.0.0",
     "zone.js": "~0.11.3"

src-example/app/account/account.component.css

+.input{
+    width: 15em;
+    height: 2em;
+    margin-bottom: 1em;
+}
+  .invalid-text{
+      color:red;
+  }
\ No newline at end of file

src-example/app/account/account.component.html

+<p>account works!</p>
+<div>
+<form [formGroup]="userForm" (ngSubmit)="onSubmit1()">
+
+    <p>Sign up</p>
+  
+    <div>
+        <div>
+            <input type="text" formControlName="firstName"  class="form-control input" placeholder="First name">
+        </div>
+        <div>
+            <input type="text" formControlName="lastName" class="form-control input " placeholder="Last name">
+        </div>
+    </div>
+  
+    <input type="email" formControlName="email"  class="form-control  input" placeholder="E-mail">
+    <div>
+        <button  type="submit">Sign in</button>
+    </div>
+  </form>
+  <div >
+    <ngb-alert  *ngIf="showMessage" type="danger" >{{ invalidEntry }}</ngb-alert>
+    <!-- <div class= "invalid-text" *ngIf="showMessage">
+        {{invalidEntry}}
+    </div> -->
+  </div>
+</div>
\ No newline at end of file

src-example/app/account/account.component.spec.ts

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

src-example/app/account/account.component.ts

+import { Component, OnInit } from '@angular/core';
+import { FormBuilder,Validators } from '@angular/forms';
+
+@Component({
+  selector: 'app-account',
+  templateUrl: './account.component.html',
+  styleUrls: ['./account.component.css']
+})
+export class AccountComponent implements OnInit {
+public userForm;
+public showMessage: boolean = false;
+public invalidEntry = 'Please enter valid name';
+
+  constructor(private formBuilder: FormBuilder) { }
+
+  ngOnInit(): void {
+    this.userForm = this.formBuilder.group({
+      firstName: ['', [Validators.required, Validators.pattern('^[a-zA-Z]+$')]],
+      lastName: ['',[Validators.required, Validators.pattern('^[a-zA-Z]+$')]],
+      email: ['', [Validators.required, Validators.email]]
+    });
+  }
+  onSubmit(){
+    if(this.userForm.valid){
+      alert('User form is valid!!')
+    } else {
+      alert('User form is not valid!!')
+    }
+  }
+  onSubmit1(){
+    if(!this.userForm.valid){
+      this.showMessage = true;
+    } 
+  }
+
+}

src-example/app/app-routing.module.ts

+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { EnglandComponent} from './england/england.component';
+import { FranceComponent} from './france/france.component';
+import {AccountComponent} from './account/account.component';
+
+const routes: Routes = [
+  {path:'england', component: EnglandComponent},
+  {path:'france', component: FranceComponent},
+  {path:'account', component: AccountComponent}
+];
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule]
+})
+export class AppRoutingModule { }

src-example/app/app.component.css

+.dynamic-container{
+    margin-top: 35px;
+    height: calc(100vh-70px);
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding: 50px 20px 20px 50px;
+}
\ No newline at end of file

src-example/app/app.component.html

+
+  <header></header>
+<div class='content' role='main'>
+  <div class='dynamic-container col-md-10 col-xl-10'>
+    <router-outlet></router-outlet>
+  </div>
+</div>
+<footer></footer>
+<!-- <router-outlet></router-outlet> -->
\ No newline at end of file

src-example/app/app.component.spec.ts

+import { TestBed } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        RouterTestingModule
+      ],
+      declarations: [
+        AppComponent
+      ],
+    }).compileComponents();
+  });
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it(`should have as title 'myApp'`, () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app.title).toEqual('myApp');
+  });
+
+  it('should render title', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.nativeElement;
+    expect(compiled.querySelector('.content span').textContent).toContain('myApp app is running!');
+  });
+});

src-example/app/app.component.ts

+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
+})
+export class AppComponent {
+  title = 'myApp';
+}

src-example/app/app.module.ts

+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { ReactiveFormsModule } from '@angular/forms';
+import { NgbModule} from '@ng-bootstrap/ng-bootstrap';
+import { RouterModule } from '@angular/router';
+import { AppRoutingModule } from './app-routing.module';
+import { AppComponent } from './app.component';
+import { HeaderComponent } from './header/header.component';
+import { FooterComponent } from './footer/footer.component';
+import { HomeComponent } from './home/home.component';
+import { EnglandComponent } from './england/england.component';
+import { FranceComponent } from './france/france.component';
+import { AccountComponent } from './account/account.component';
+
+@NgModule({
+  declarations: [
+    AppComponent,
+    HeaderComponent,
+    FooterComponent,
+    HomeComponent,
+    EnglandComponent,
+    FranceComponent,
+    AccountComponent,
+  
+  ],
+  imports: [
+    BrowserModule,
+    ReactiveFormsModule,
+    AppRoutingModule,
+    NgbModule,
+  ],
+  providers: [],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }

src-example/app/england/england.component.css

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

src-example/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>

src-example/app/england/england.component.spec.ts

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

src-example/app/england/england.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-england',
+  templateUrl: './england.component.html',
+  styleUrls: ['./england.component.css']
+})
+export class EnglandComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src-example/app/footer/footer.component.css

+.footer{
+    height: 5rem;
+    background: #6fb7f1;
+    bottom: 0;
+    right: 0;
+    left: 0;
+    position:fixed;
+}
+ul {
+    font-family: Arial, Verdana;
+    font-size: 14px;
+    margin: 0 auto;
+    padding: 0;
+    margin-top: 20px;
+    /* width:600px; */
+    list-style: none;
+}
+
+    ul li {
+        display: block;
+        position: relative;
+        float: left;
+        padding-left: 20px;;
+    }
+

src-example/app/footer/footer.component.html

+<div class='footer'>
+    <ul>
+        <li>About Us</li>
+        <li>Careers</li>
+        <li>Contact Us</li>
+    </ul>
+</div>
\ No newline at end of file

src-example/app/footer/footer.component.spec.ts

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

src-example/app/footer/footer.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'footer',
+  templateUrl: './footer.component.html',
+  styleUrls: ['./footer.component.css']
+})
+export class FooterComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src-example/app/france/france.component.css

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

src-example/app/france/france.component.html

+<p>france works!</p>
+<div class='imgContainer'>
+    <img  class='img' src='/assets/images/france/france-tower.jpg' />
+    <img  class='img' src='/assets/images/france/france-town.jpg' />
+    <img  class='img' src='/assets/images/france/france-cafe.jpg' />
+</div>
+
+
+  

src-example/app/france/france.component.spec.ts

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

src-example/app/france/france.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-france',
+  templateUrl: './france.component.html',
+  styleUrls: ['./france.component.css']
+})
+export class FranceComponent implements OnInit {
+ 
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src-example/app/header/header.component.css

+.header{
+    background: #6fb7f1;
+    height: 4em;
+    position: fixed;
+    top: 0;
+    right: 0;
+    left: 0;
+}
+h3{
+    text-align: center;
+}
+.btn{
+    margin-top: 30px;
+    margin-left: 10px
+}
+.btnMenu{
+    margin-top:20px;
+    margin-left: 20px;
+    display:inline-block;
+}
+.account{
+    position:absolute;
+    right:10px;
+    margin-top: 30px;
+}
\ No newline at end of file

src-example/app/header/header.component.html

+<div class='header'>
+    <div class='btnMenu'>
+    <button [routerLink]="['/england']">England</button>
+    <button  [routerLink]= "['/france']" routerLinkActive="active">France</button>
+    <button >Greece</button>
+    <button >Spain</button>
+    </div>
+    <span class='account'>
+        <i class="fa fa-user" [routerLink]="['/account']" ></i>
+    </span>
+</div>
+

src-example/app/header/header.component.spec.ts

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

src-example/app/header/header.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'header',
+  templateUrl: './header.component.html',
+  styleUrls: ['./header.component.css']
+})
+export class HeaderComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src-example/app/home/home.component.css

+.dynamic-container{
+    margin-top: 35px;
+    height: calc(100vh-70px);
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding: 50px 20px 20px 50px;
+}
\ No newline at end of file

src-example/app/home/home.component.html

+
+
+
+<!-- <header></header>
+<div class='content' role='main'>
+  <div class='dynamic-container col-md-10 col-xl-10'>
+    <router-outlet></router-outlet>
+  </div>
+</div>
+<footer></footer> -->
\ No newline at end of file

src-example/app/home/home.component.spec.ts

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

src-example/app/home/home.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-home',
+  templateUrl: './home.component.html',
+  styleUrls: ['./home.component.css']
+})
+export class HomeComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src-example/environments/environment.prod.ts

+export const environment = {
+  production: true
+};

src-example/environments/environment.ts

+// This file can be replaced during build by using the `fileReplacements` array.
+// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
+// The list of file replacements can be found in `angular.json`.
+
+export const environment = {
+  production: false
+};
+
+/*
+ * For easier debugging in development mode, you can import the following file
+ * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
+ *
+ * This import should be commented out in production mode because it will have a negative impact
+ * on performance if an error is thrown.
+ */
+// import 'zone.js/dist/zone-error';  // Included with Angular CLI.

src-example/index.html

+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>MyApp</title>
+  <base href="/">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.1/css/all.css" crossorigin="anonymous">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css"   crossorigin="anonymous">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+<body>
+  <app-root></app-root>
+</body>
+</html>

src-example/main.ts

+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule)
+  .catch(err => console.error(err));

src-example/polyfills.ts

+/***************************************************************************************************
+ * Load `$localize` onto the global scope - used if i18n tags appear in Angular templates.
+ */
+import '@angular/localize/init';
+/**
+ * This file includes polyfills needed by Angular and is loaded before the app.
+ * You can add your own extra polyfills to this file.
+ *
+ * This file is divided into 2 sections:
+ *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
+ *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
+ *      file.
+ *
+ * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
+ * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
+ * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
+ *
+ * Learn more in https://angular.io/guide/browser-support
+ */
+
+/***************************************************************************************************
+ * BROWSER POLYFILLS
+ */
+
+/**
+ * IE11 requires the following for NgClass support on SVG elements
+ */
+// import 'classlist.js';  // Run `npm install --save classlist.js`.
+
+/**
+ * Web Animations `@angular/platform-browser/animations`
+ * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
+ * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
+ */
+// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
+
+/**
+ * By default, zone.js will patch all possible macroTask and DomEvents
+ * user can disable parts of macroTask/DomEvents patch by setting following flags
+ * because those flags need to be set before `zone.js` being loaded, and webpack
+ * will put import in the top of bundle, so user need to create a separate file
+ * in this directory (for example: zone-flags.ts), and put the following flags
+ * into that file, and then add the following code before importing zone.js.
+ * import './zone-flags';
+ *
+ * The flags allowed in zone-flags.ts are listed here.
+ *
+ * The following flags will work for all browsers.
+ *
+ * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
+ * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
+ * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
+ *
+ *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
+ *  with the following flag, it will bypass `zone.js` patch for IE/Edge
+ *
+ *  (window as any).__Zone_enable_cross_context_check = true;
+ *
+ */
+
+/***************************************************************************************************
+ * Zone JS is required by default for Angular itself.
+ */
+import 'zone.js/dist/zone';  // Included with Angular CLI.
+
+
+/***************************************************************************************************
+ * APPLICATION IMPORTS
+ */

src-example/styles.css

+/* You can add global styles to this file, and also import other style files */
+/* .img{
+    height: 400px;
+    width: 400px;
+    padding-left: 5px;
+} */

src-example/test.ts

+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/dist/zone-testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: {
+  context(path: string, deep?: boolean, filter?: RegExp): {
+    keys(): string[];
+    <T>(id: string): T;
+  };
+};
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);

src/app/account/account.component.css

+.input{
+    width: 15em;
+    height: 2em;
+    margin-bottom: 1em;
+}
+  .invalid-text{
+      color:red;
+  }
\ No newline at end of file

src/app/account/account.component.html

+<p>account works!</p>
+<div>
+<!-- <form [formGroup]="userForm" (ngSubmit)="onSubmit1()"> -->
+<form>
+    <p>Sign up</p>
+  
+    <div>
+        <div>
+            <input type="text" formControlName="firstName"  class="form-control input" placeholder="First name">
+        </div>
+        <div>
+            <input type="text" formControlName="lastName" class="form-control input " placeholder="Last name">
+        </div>
+    </div>
+  
+    <input type="email" formControlName="email"  class="form-control  input" placeholder="E-mail">
+    <div>
+        <button  type="submit">Sign in</button>
+    </div>
+  </form>
+  <div >
+    <ngb-alert  *ngIf="showMessage" type="danger" >{{ invalidEntry }}</ngb-alert>
+    <!-- <div class= "invalid-text" *ngIf="showMessage">
+        {{invalidEntry}}
+    </div> -->
+  </div>
+</div>
\ No newline at end of file

src/app/account/account.component.spec.ts

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

src/app/account/account.component.ts

+import { Component, OnInit } from '@angular/core';
+import { FormBuilder,Validators } from '@angular/forms';
+
+@Component({
+  selector: 'account',
+  templateUrl: './account.component.html',
+  styleUrls: ['./account.component.css']
+})
+export class AccountComponent implements OnInit {
+public userForm;
+public showMessage: boolean = false;
+public invalidEntry = 'Please enter valid name';
+
+  constructor(private formBuilder: FormBuilder) { }
+
+  ngOnInit(): void {
+    this.userForm = this.formBuilder.group({
+      firstName: ['', [Validators.required, Validators.pattern('^[a-zA-Z]+$')]],
+      lastName: ['',[Validators.required, Validators.pattern('^[a-zA-Z]+$')]],
+      email: ['', [Validators.required, Validators.email]]
+    });
+  }
+  onSubmit(){
+    if(this.userForm.valid){
+      alert('User form is valid!!')
+    } else {
+      alert('User form is not valid!!')
+    }
+  }
+  onSubmit1(){
+    if(!this.userForm.valid){
+      this.showMessage = true;
+    } 
+  }
+
+}

src/app/app-routing.module.ts

 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
+import { EnglandComponent} from './england/england.component';
+import { FranceComponent} from './france/france.component';
+import {AccountComponent} from './account/account.component';
+import { GreeceComponent } from './greece/greece.component';
+import { SpainComponent } from './spain/spain.component';
 
-const routes: Routes = [];
+const routes: Routes = [
+  {path:'england', component: EnglandComponent},
+  {path:'france', component: FranceComponent},
+  {path:'account', component: AccountComponent},
+  {path:'greece', component: GreeceComponent},
+  {path:'spain', component: SpainComponent}
+];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],
   exports: [RouterModule]
 })
-export class AppRoutingModule { }
+export class AppRoutingModule { }
\ No newline at end of file

src/app/app.component.css

+.dynamic-container{
+    margin-top: 35px;
+    height: calc(100vh-70px);
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding: 50px 20px 20px 50px;
+}
\ 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';
+import { HeaderComponent } from './header/header.component';
+import { FooterComponent } from './footer/footer.component';
+import { EnglandComponent } from './england/england.component';
+import { FranceComponent } from './france/france.component';
+import { SpainComponent } from './spain/spain.component';
+import { GreeceComponent } from './greece/greece.component';
+import { AccountComponent } from './account/account.component';
+import { HomeComponent } from './home/home.component';
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
+    HeaderComponent,
+    FooterComponent,
+    EnglandComponent,
+    FranceComponent,
+    SpainComponent,
+    GreeceComponent,
+    AccountComponent,
+    HomeComponent
   ],
   imports: [
     BrowserModule,
-    AppRoutingModule
+    AppRoutingModule,
+    NgbModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/england/england.component.css

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

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>

src/app/england/england.component.spec.ts

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

src/app/england/england.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-england',
+  templateUrl: './england.component.html',
+  styleUrls: ['./england.component.css']
+})
+export class EnglandComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/footer/footer.component.css

+.footer{
+    height: 5rem;
+    background: #6fb7f1;
+    bottom: 0;
+    right: 0;
+    left: 0;
+    position:fixed;
+}
+ul {
+    font-family: Arial, Verdana;
+    font-size: 14px;
+    margin: 0 auto;
+    padding: 0;
+    margin-top: 20px;
+    /* width:600px; */
+    list-style: none;
+}
+
+    ul li {
+        display: block;
+        position: relative;
+        float: left;
+        padding-left: 20px;;
+    }

src/app/footer/footer.component.html

+<div class='footer'>
+    <ul>
+        <li>About Us</li>
+        <li>Careers</li>
+        <li>Contact Us</li>
+    </ul>
+</div>
\ No newline at end of file

src/app/footer/footer.component.spec.ts

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

src/app/footer/footer.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'footer',
+  templateUrl: './footer.component.html',
+  styleUrls: ['./footer.component.css']
+})
+export class FooterComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

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/france/france.component.spec.ts

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

src/app/france/france.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-france',
+  templateUrl: './france.component.html',
+  styleUrls: ['./france.component.css']
+})
+export class FranceComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

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/greese-santorini.jpg'/>
+</div>
\ No newline at end of file

src/app/greece/greece.component.spec.ts

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

src/app/greece/greece.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-greece',
+  templateUrl: './greece.component.html',
+  styleUrls: ['./greece.component.css']
+})
+export class GreeceComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/header/header.component.css

+.header{
+    background: #6fb7f1;
+    height: 4em;
+    position: fixed;
+    top: 0;
+    right: 0;
+    left: 0;
+}
+h3{
+    text-align: center;
+}
+.btn{
+    margin-top: 30px;
+    margin-left: 10px
+}
+.btnMenu{
+    margin-top:20px;
+    margin-left: 20px;
+    display:inline-block;
+}
+.account{
+    position:absolute;
+    right:10px;
+    margin-top: 30px;
+}
\ No newline at end of file

src/app/header/header.component.html

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

src/app/header/header.component.spec.ts

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

src/app/header/header.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'header',
+  templateUrl: './header.component.html',
+  styleUrls: ['./header.component.css']
+})
+export class HeaderComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/home/home.component.css

+.dynamic-container{
+    margin-top: 35px;
+    height: calc(100vh-70px);
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding: 50px 20px 20px 50px;
+}
\ No newline at end of file

src/app/home/home.component.html

+<!-- <header></header>
+<div class='content' role='main'>
+  <div class='dynamic-container col-md-10 col-xl-10'>
+    <router-outlet></router-outlet>
+  </div>
+</div>
+<footer></footer> -->
\ No newline at end of file

src/app/home/home.component.spec.ts

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

src/app/home/home.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-home',
+  templateUrl: './home.component.html',
+  styleUrls: ['./home.component.css']
+})
+export class HomeComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

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

src/app/spain/spain.component.spec.ts

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

src/app/spain/spain.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-spain',
+  templateUrl: './spain.component.html',
+  styleUrls: ['./spain.component.css']
+})
+export class SpainComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}