Updated website

src/ bootstrap.scss

@@ -1 +0,0 @@
-@import "~bootstrap/dist/css/bootstrap.min.css";

src/app/app-routing.module.ts

@@ -1,13 +0,0 @@
-import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-import {HomeComponent} from "./view/home/home.component";
-
-const routes: Routes = [
-  {path: '**', component: HomeComponent}
-];
-
-@NgModule({
-  imports: [RouterModule.forRoot(routes)],
-  exports: [RouterModule]
-})
-export class AppRoutingModule { }

src/app/app.component.html

@@ -1,23 +1,3 @@
-<mat-toolbar>
-  <img src="/assets/logo.png" alt="Logo" class="mr-2" height="46px" width="auto">
-  <span>Pelican Landing</span>
-  <span class="mx-auto"></span>
-  <span>
-    <button mat-button [matMenuTriggerFor]="huntingMenu">Hunting</button>
-    <mat-menu #huntingMenu="matMenu">
-      <button mat-menu-item>Whitetail Dear</button>
-      <button mat-menu-item>Black Bear</button>
-      <button mat-menu-item>Birds & Small Game</button>
-    </mat-menu>
-    <button mat-button>Fishing</button>
-    <button mat-button>Lodging</button>
-  </span>
-</mat-toolbar>
-<router-outlet></router-outlet>
-<footer class="w-100 bg-dark py-3 text-white">
-  <div class="container">
-    <div class="row">
-      <span class="mx-auto">Copyright © Morson's Pelican Landing 2020 | All Rights Reserved</span>
-    </div>
-  </div>
-</footer>
+<app-toolbar></app-toolbar>
+<router-outlet (activate)="scrollToTop()"></router-outlet>
+<app-footer></app-footer>

src/app/app.component.ts

@@ -1,8 +1,15 @@
-import { Component } from '@angular/core';
+import {Component} from '@angular/core';
 
 @Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss']
+	selector: 'app-root',
+	templateUrl: './app.component.html'
 })
-export class AppComponent {}
+export class AppComponent {
+	scrollToTop() {
+		window.scroll({
+			top: 0,
+			left: 0,
+			behavior: 'smooth'
+		});
+	}
+}

src/app/app.module.ts

@@ -1,24 +1,36 @@
-import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
+import {NgModule} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 
-import { AppRoutingModule } from './app-routing.module';
-import { AppComponent } from './app.component';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import {MaterialModule} from "./material..module";
+import {AppRouting} from './app.routing';
+import {AppComponent} from './app.component';
+import {CarouselComponent} from './components/carousel/carousel.component';
+import {ContactComponent} from './components/contact/contact.component';
+import {FooterComponent} from './components/footer/footer.component';
+import {ToolbarComponent} from './components/toolbar/toolbar.component';
+import {MaterialModule} from "./material.module";
+import {ComingSoonComponent} from './view/coming-soon/coming-soon.component';
 import {HomeComponent} from "./view/home/home.component";
+import {NotFoundComponent} from './view/not-found/not-found.component';
 
 @NgModule({
-  declarations: [
-    AppComponent,
-    HomeComponent
-  ],
-  imports: [
-    BrowserModule,
-    AppRoutingModule,
-    BrowserAnimationsModule,
-    MaterialModule
-  ],
-  providers: [],
-  bootstrap: [AppComponent]
+	declarations: [
+		AppComponent,
+		CarouselComponent,
+		ComingSoonComponent,
+		ContactComponent,
+		FooterComponent,
+		HomeComponent,
+		NotFoundComponent,
+		ToolbarComponent,
+	],
+	imports: [
+		BrowserModule,
+		AppRouting,
+		BrowserAnimationsModule,
+		MaterialModule
+	],
+	providers: [],
+	bootstrap: [AppComponent]
 })
-export class AppModule { }
+export class AppModule {}

src/app/app.routing.ts

@@ -0,0 +1,17 @@
+import {NgModule} from '@angular/core';
+import {RouterModule, Routes} from '@angular/router';
+import {ComingSoonComponent} from './view/coming-soon/coming-soon.component';
+import {HomeComponent} from "./view/home/home.component";
+import {NotFoundComponent} from './view/not-found/not-found.component';
+
+const routes: Routes = [
+	{path: '', pathMatch: 'full', component: HomeComponent},
+	{path: 'coming-soon', component: ComingSoonComponent},
+	{path: '**', component: NotFoundComponent}
+];
+
+@NgModule({
+	imports: [RouterModule.forRoot(routes)],
+	exports: [RouterModule]
+})
+export class AppRouting {}

src/app/components/carousel/carousel.component.html

@@ -0,0 +1,14 @@
+<div class="carousel-container"  [style.height]="height">
+	<img *ngIf="background" class="carousel-background" [src]="gallery[index]" alt="background">
+	<img class="carousel-image" [src]="gallery[index]" [alt]="'slide ' + index">
+	<div class="carousel-previous" (click)="previous()">
+		<mat-icon>skip_previous</mat-icon>
+	</div>
+	<div class="carousel-next" (click)="next()">
+		<mat-icon>skip_next</mat-icon>
+	</div>
+	<div class="carousel-pause" (click)="pause = !pause">
+		<mat-icon *ngIf="!pause">pause</mat-icon>
+		<mat-icon *ngIf="pause">play_arrow</mat-icon>
+	</div>
+</div>

src/app/components/carousel/carousel.component.scss

@@ -0,0 +1,106 @@
+.carousel-container {
+	position: relative;
+	width: 100%;
+
+
+	//.carousel-next {
+	//	display: none;
+	//}
+	//.carousel-previous {
+	//	display: none;
+	//}
+	//.carousel-pause {
+	//	display: none;
+	//}
+	//
+	//&:hover {
+	//	.carousel-next {
+	//		display: flex;
+	//	}
+	//	.carousel-previous {
+	//		display: flex;
+	//	}
+	//	.carousel-pause {
+	//		display: flex;
+	//	}
+	//}
+}
+
+.carousel-background {
+	width: 100%;
+	height: 100%;
+	filter: blur(10px);
+	-webkit-filter: blur(10px);
+}
+
+.carousel-image {
+	position: absolute;
+	top: 5%;
+	left: 50%;
+	transform: translate(-50%);
+	height: 90%;
+	width: auto;
+}
+
+.carousel-next {
+	position: absolute;
+	top: calc(50% - 28px);
+	right: 0;
+	height: 56px;
+	width: 56px;
+	color: rgba(255, 255, 255, 0.75);
+	filter: drop-shadow(3px 3px 5px black);
+	cursor: pointer;
+	padding: 1rem;
+	border-radius: 50%;
+	transition: 0.25s;
+
+	&:hover {
+		color: white;
+		background: rgba(0,0,0,0.25);
+		filter: none;
+	}
+}
+
+.carousel-previous {
+	position: absolute;
+	top: calc(50% - 28px);
+	left: 0;
+	height: 56px;
+	width: 56px;
+	color: rgba(255, 255, 255, 0.75);
+	filter: drop-shadow(3px 3px 5px black);
+	cursor: pointer;
+	padding: 1rem;
+	border-radius: 50%;
+	transition: 0.25s;
+
+	&:hover {
+		color: white;
+		background: rgba(0,0,0,0.25);
+		filter: none;
+	}
+}
+
+
+
+.carousel-pause {
+	position: absolute;
+	bottom: 0;
+	left: 50%;
+	height: 56px;
+	width: 56px;
+	transform: translate(-50%, -50%);
+	color: rgba(255, 255, 255, 0.75);
+	filter: drop-shadow(3px 3px 5px black);
+	cursor: pointer;
+	padding: 1rem;
+	border-radius: 50%;
+	transition: 0.25s;
+
+	&:hover {
+		color: white;
+		background: rgba(0,0,0,0.25);
+		filter: none;
+	}
+}

src/app/components/carousel/carousel.component.ts

@@ -0,0 +1,69 @@
+import {AfterViewInit, Component, OnDestroy} from '@angular/core';
+
+@Component({
+	selector: 'app-carousel',
+	templateUrl: './carousel.component.html',
+	styleUrls: ['./carousel.component.scss']
+})
+export class CarouselComponent implements OnDestroy, AfterViewInit {
+	private timer?: any;
+
+	background = true;
+	gallery: string[] = [
+		'/assets/gallery/sign.jpg',
+		'/assets/gallery/0e2343c77df8a7a889ac415c8e7a7e21.jpg',
+		'/assets/gallery/2a291f871aa431321815427bd0da7b47.jpg',
+		'/assets/gallery/3daf84c720d7cc1a1cee552ed8aaa950.png',
+		'/assets/gallery/005aaf842df485a2aa84cdf1126b3b99.jpg',
+		'/assets/gallery/29b2858c929dad50084105625c1fdb42.jpg',
+		'/assets/gallery/47ac8b23a14218a2d34c1e18aae21294.png',
+		'/assets/gallery/53be6420ddf84d8b03a23150f019244b.jpg',
+		'/assets/gallery/64d63ff7fabb405e8dfc828a99ac5624.jpg',
+		'/assets/gallery/65cd4315aa7657a49801b9295cdae2c3.jpg',
+		'/assets/gallery/94ded0778bb59e7e0bf88f6dc888ef4c.jpg',
+		'/assets/gallery/845ee7532bd7d36722961fb323bfa1dd.jpg',
+		'/assets/gallery/976d7cb341f7cec8744b622564a47f39.jpg',
+		'/assets/gallery/1661a1bb4e41da05e0ed5a6a5392e65a.jpg',
+		'/assets/gallery/419966f0afc5e2304e7d0356cd9ebcd0.jpg',
+		'/assets/gallery/509028fb06297b1265e4fe411db6aa02.jpg',
+		'/assets/gallery/a9c0fd0475a0668048c650847d01d89a.jpg',
+		'/assets/gallery/ac030ea1880bad81fb310963f260879c.jpg',
+		'/assets/gallery/ac719df5a9c457b7681f03563135867d.jpg',
+		'/assets/gallery/b0fb7922a80370e24cc556278937f368.jpg',
+		'/assets/gallery/b07494f26cafee254851a171cdfcea39.jpg',
+		'/assets/gallery/bf0f928b4c1e91c0c6c06ea8e61412cf.jpg',
+		'/assets/gallery/de3817da3a00e0706a73e6385a9aa361.jpg',
+		'/assets/gallery/dfa230c49c1c737ffdaf46875431212c.jpg',
+		'/assets/gallery/e2d1fd95e5a6c36a83b7fc602419b8c6.jpg',
+		'/assets/gallery/e312d84b034d5fd307a5e4b48ac7fead.jpg',
+		'/assets/gallery/f851220bb22cf91b4041695d930c3af0.jpg',
+	];
+	speed = 5000;
+	pause = false;
+	index = 0 ?? ~~(Math.random() * this.gallery.length);
+	height = '300px';
+
+	ngAfterViewInit() {
+		this.timer = setInterval(() => {
+			if(!this.pause) this.next(false);
+		}, this.speed);
+	}
+
+	ngOnDestroy() {
+		if(this.timer) {
+			clearInterval(this.timer);
+			this.timer = null;
+		}
+	}
+
+	next(pause = true) {
+		this.pause = pause;
+		this.index++;
+		if(this.index >= this.gallery.length) this.index = 0;
+	}
+
+	previous(pause = true) {
+		this.pause = pause;
+		this.index = this.index > 0 ? this.index - 1 : this.gallery.length - 1;
+	}
+}

src/app/components/contact/contact.component.html

@@ -0,0 +1,34 @@
+<form class="mx-auto w-100">
+	<div>
+		<mat-form-field appearance="fill" class="w-100">
+			<mat-label>Name</mat-label>
+			<input matInput>
+		</mat-form-field>
+	</div>
+	<div>
+		<mat-form-field appearance="fill" class="w-100">
+			<mat-label>Email</mat-label>
+			<input matInput>
+		</mat-form-field>
+	</div>
+	<div>
+		<mat-form-field appearance="fill" class="w-100">
+			<mat-label>Subject</mat-label>
+			<input matInput>
+		</mat-form-field>
+	</div>
+	<div>
+		<mat-form-field appearance="fill" class="w-100">
+			<mat-label>Message</mat-label>
+			<textarea matInput rows="8"></textarea>
+		</mat-form-field>
+	</div>
+	<div class="d-flex justify-content-between align-items-center">
+		<div>
+			<mat-checkbox color="primary">Send me a copy</mat-checkbox>
+		</div>
+		<div>
+			<button class="btn btn-outline-secondary rounded-pill px-4 mt-3">Send</button>
+		</div>
+	</div>
+</form>

src/app/components/contact/contact.component.ts

@@ -0,0 +1,7 @@
+import {Component} from '@angular/core';
+
+@Component({
+	selector: 'app-contact',
+	templateUrl: './contact.component.html'
+})
+export class ContactComponent { }

src/app/components/footer/footer.component.html

@@ -0,0 +1,63 @@
+<footer class="w-100 text-white app-footer">
+	<div class="bg-dark p-3">
+		<div class="d-flex flex-column flex-sm-row flex-md-wrap justify-content-around mx-auto cap-width">
+			<div>
+				<h4>Address</h4>
+				<ul>
+					<li>9061 ON-621,</li>
+					<li>Morson, ON P0W 1J0,</li>
+					<li>Canada</li>
+				</ul>
+			</div>
+			<div>
+				<h4>Contact Us</h4>
+				<ul>
+					<li>Phone: <a href="tel:18074885511" target="_blank">+1 (807) 488-5511</a></li>
+					<li>Toll Free: <a href="tel:18886908070" target="_blank">+1 (888) 690-8070</a></li>
+					<li>Email: <a href="mailto:pelicanlanding2002@gmail.com">pelicanlanding2002&#64;gmail.com</a></li>
+					<li>Social Media:
+						<a href="https://www.facebook.com/MorsonsPelicanLanding" target="_blank">Facebook</a></li>
+				</ul>
+			</div>
+			<div>
+				<h4>Resources</h4>
+				<ul>
+					<li>
+						<a href="https://www.canada.ca/en/border-services-agency/services/arrivecan.html" target="_blank">Arrive Canada</a>
+					</li>
+					<li>
+						<a href="https://www.cbsa-asfc.gc.ca/travel-voyage/menu-eng.html" target="_blank">Border Crossing</a> /
+						<a href="https://www.rcmp-grc.gc.ca/wam/media/2347/original/d369a605ac3363b569af5ea5dc40c88d.pdf" target="_blank">Firearms</a>
+					</li>
+					<li>Regulations:
+						<a href="https://www.ontario.ca/files/2023-05/mnrf-2023-hunting-regulations-summary-en-2023-05-03.pdf" target="_blank">Hunting</a> /
+						<a href="https://www.ontario.ca/files/2023-12/mnrf-2024-ontario-fishing-regulations-summary-en-2023-12-11-v2.pdf" target="_blank">Fishing</a>
+					</li>
+					<li>Weather:
+						<a href="https://www.accuweather.com/en/ca/morson/p0w/daily-weather-forecast/54891" target="_blank">Morson</a> /
+						<a href="https://weather.gc.ca/marine/forecast_e.html?mapID=09&siteID=08100" target="_blank">Marine</a>
+					</li>
+				</ul>
+			</div>
+			<div>
+				<h4>Sitemap</h4>
+				<ul>
+					<li><a routerLink="/">Home</a></li>
+					<li><a routerLink="/coming-soon">Restaurant</a></li>
+					<li><a routerLink="/coming-soon">Hunting</a></li>
+					<li><a routerLink="/coming-soon">Fishing</a></li>
+					<li><a routerLink="/coming-soon">Lodging</a></li>
+				</ul>
+			</div>
+		</div>
+	</div>
+	<div style="background: #282d31" class="p-3">
+		<div class="row">
+			<p class="mx-auto text-center mb-0">
+				Copyright © Morson's Pelican Landing 2023 | All Rights Reserved
+				<br/>
+				Created By <a href="https://zakscode.com" target="_blank">Zak Timson</a>
+			</p>
+		</div>
+	</div>
+</footer>

src/app/components/footer/footer.component.scss

@@ -0,0 +1,14 @@
+.app-footer {
+	ul {
+		list-style: none !important;
+		padding: 0 !important;
+
+		li {
+			color: #fff9;
+
+			&:hover {
+				color: #fff9;
+			}
+		}
+	}
+}

src/app/components/footer/footer.component.ts

@@ -0,0 +1,8 @@
+import {Component} from '@angular/core';
+
+@Component({
+	selector: 'app-footer',
+	templateUrl: './footer.component.html',
+	styleUrls: ['./footer.component.scss']
+})
+export class FooterComponent {}

src/app/components/toolbar/toolbar.component.html

@@ -0,0 +1,14 @@
+<mat-toolbar class="d-print-none">
+	<img routerLink="/" class="curs-pointer" src="/assets/logo.png" alt="Logo" height="46px" width="auto">
+	<button mat-button routerLink="/" class="d-flex align-items-center">
+
+		<h1 class="d-none d-sm-inline">Pelican Landing</h1>
+	</button>
+	<span class="mx-auto"></span>
+	<span>
+		<button mat-button routerLink="/coming-soon">Restaurant</button>
+	    <button mat-button routerLink="/coming-soon">Hunting</button>
+	    <button mat-button routerLink="/coming-soon">Fishing</button>
+	    <button mat-button routerLink="/coming-soon">Lodging</button>
+    </span>
+</mat-toolbar>

src/app/components/toolbar/toolbar.component.ts

@@ -0,0 +1,7 @@
+import {Component} from '@angular/core';
+
+@Component({
+	selector: 'app-toolbar',
+	templateUrl: './toolbar.component.html'
+})
+export class ToolbarComponent { }

src/app/material..module.ts

@@ -1,16 +0,0 @@
-import {NgModule} from "@angular/core";
-import {MatToolbarModule} from "@angular/material/toolbar";
-import {MatMenuModule} from "@angular/material/menu";
-import {MatButtonModule} from "@angular/material/button";
-
-let modules = [
-  MatButtonModule,
-  MatMenuModule,
-  MatToolbarModule
-];
-
-@NgModule({
-  imports: modules,
-  exports: modules
-})
-export class MaterialModule {}

src/app/material.module.ts

@@ -0,0 +1,24 @@
+import {NgModule} from "@angular/core";
+import {MatButtonModule} from "@angular/material/button";
+import {MatCheckboxModule} from '@angular/material/checkbox';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatIconModule} from '@angular/material/icon';
+import {MatInputModule} from '@angular/material/input';
+import {MatMenuModule} from "@angular/material/menu";
+import {MatToolbarModule} from "@angular/material/toolbar";
+
+let modules = [
+	MatButtonModule,
+	MatCheckboxModule,
+	MatFormFieldModule,
+	MatIconModule,
+	MatInputModule,
+	MatMenuModule,
+	MatToolbarModule,
+];
+
+@NgModule({
+	imports: modules,
+	exports: modules
+})
+export class MaterialModule {}

src/app/view/coming-soon/coming-soon.component.html

@@ -0,0 +1,7 @@
+<div class="bg-white p-5">
+	<div class="m-5 p-5 text-center">
+		<h1 style="font-size: 4em">Coming Soon</h1>
+		<h2 class="mt-3">This page is under development</h2>
+		<button class="btn btn-outline-secondary rounded-pill px-4 mt-3" (click)="back()">Back</button>
+	</div>
+</div>

src/app/view/coming-soon/coming-soon.component.ts

@@ -0,0 +1,13 @@
+import {Component} from '@angular/core';
+
+declare var navigation: any;
+
+@Component({
+	selector: 'app-coming-soon',
+	templateUrl: './coming-soon.component.html'
+})
+export class ComingSoonComponent {
+	back() {
+		navigation.back();
+	}
+}

src/app/view/home/home.component.html

@@ -1,7 +1,49 @@
 <div class="w-100">
-  <img src="/assets/background.png" alt="Banner" width="100%" height="auto">
-  <img src="/assets/logo.png" style="position: absolute; left: 50vw; top: 50vh; transform: translate(-50%, -50%)" width="auto" height="auto">
-</div>
-<div class="p-3">
-
+	<img src="/assets/background.png" alt="Banner" width="100%" height="400px">
+	<h1></h1>
 </div>
+<section class="bg-white p-5 text-center cap-width">
+	<h2 class="mb-5">About Us</h2>
+	<p class="mb-5">Pelican Landing is a family run year-round hunting & fishing lodge. It's located on the beautiful southern shores of Lake of Woods and offers the outdoors-man a tailor made experience.  With both road and water access this resort can meet the needs of the angler, hunter, or nature enthusiast. Our goal at Pelican Landing is to make your stay with us a memorable, relaxing experience that you will want to repeat.</p>
+	<app-carousel></app-carousel>
+</section>
+<section class="pt-5 text-center" style="background: #f1f1f1">
+	<h2>Services</h2>
+	<div class="d-flex justify-content-around flex-wrap cap-width py-5">
+		<div class="card p-3 text-center mb-5" style="width: 225px">
+			<mat-icon class="mx-auto my-3" style="width: 64px; height: 64px; font-size: 64px">restaurant</mat-icon>
+			<h3>Restaurant</h3>
+			<p class="mb-0">Our on site restaurant is the best around. Open 11am - 8pm</p>
+			<br>
+			<a routerLink="/coming-soon" class="my-2 d-flex align-content-center justify-content-center">Menu <mat-icon>keyboard_double_arrow_right</mat-icon></a>
+		</div>
+		<div class="card p-3 text-center mb-5" style="width: 225px">
+			<mat-icon class="mx-auto my-3" style="width: 64px; height: 64px; font-size: 64px">gps_fixed</mat-icon>
+			<h3>Hunting</h3>
+			<p class="mb-0">We offer guided tours to hunt black bear, white tail dear, birds & small game</p>
+			<br>
+			<a routerLink="/coming-soon" class="my-2 d-flex align-content-center justify-content-center">More <mat-icon>keyboard_double_arrow_right</mat-icon></a>
+		</div>
+		<div class="card p-3 text-center mb-5" style="width: 225px">
+			<mat-icon class="mx-auto my-3" style="width: 64px; height: 64px; font-size: 64px">phishing</mat-icon>
+			<h3>Fishing</h3>
+			<p class="mb-0">We offer guided tours to fish for walleye, pike, crappie, bass, trout, sturgeon & muskie</p>
+			<a routerLink="/coming-soon" class="my-2 d-flex align-content-center justify-content-center">More <mat-icon>keyboard_double_arrow_right</mat-icon></a>
+		</div>
+		<div class="card p-3 text-center mb-5" style="width: 225px">
+			<mat-icon class="mx-auto my-3" style="width: 64px; height: 64px; font-size: 64px">cottage</mat-icon>
+			<h3>Lodging</h3>
+			<p class="mb-0">Reserve a cottage or RV parking spot. Package with a hunting/fishing trip for more savings</p>
+			<a routerLink="/coming-soon" class="my-2 d-flex align-content-center justify-content-center">Rates <mat-icon>keyboard_double_arrow_right</mat-icon></a>
+		</div>
+	</div>
+</section>
+<section class="bg-white p-5 text-center">
+	<h2 class="mb-5">Contact Us</h2>
+	<div class="mx-auto" style="max-width: 750px">
+		<app-contact></app-contact>
+	</div>
+</section>
+<section style="background: #343a40">
+	<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d20901.5656209322!2d-94.3342870256971!3d49.0924225740941!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x52bc2793e70efc57%3A0x6f173b50ef0787ba!2sPelican%20Landing!5e0!3m2!1sen!2sca!4v1702654257180!5m2!1sen!2sca" width="100%" height="300" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
+</section>

src/app/view/home/home.component.ts

@@ -1,8 +1,7 @@
-import { Component } from '@angular/core';
+import {Component} from '@angular/core';
 
 @Component({
-  selector: 'app-root',
-  templateUrl: './home.component.html',
-  styleUrls: ['./home.component.scss']
+	selector: 'app-root',
+	templateUrl: './home.component.html'
 })
 export class HomeComponent {}

src/app/view/not-found/not-found.component.html

@@ -0,0 +1,7 @@
+<div class="bg-white p-5">
+	<div class="card my-5 mx-auto p-5 text-center" style="max-width: 400px">
+		<h1 style="font-size: 4em">404</h1>
+		<h2 class="mt-3">Page not found</h2>
+		<button class="btn btn-outline-secondary rounded-pill px-4 mt-3" (click)="back()">Back</button>
+	</div>
+</div>

src/app/view/not-found/not-found.component.ts

@@ -0,0 +1,13 @@
+import {Component} from '@angular/core';
+
+declare var navigation: any;
+
+@Component({
+	selector: 'app-not-found',
+	templateUrl: './not-found.component.html'
+})
+export class NotFoundComponent {
+	back() {
+		navigation.back();
+	}
+}

src/environments/environment.ts

@@ -1,16 +1,3 @@
-// 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/index.html

@@ -1,18 +1,18 @@
 <!doctype html>
 <html lang="en">
 <head>
-  <base href="/">
-  <title>Pelican Landing</title>
+	<base href="/">
+	<title>Pelican Landing</title>
 
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, user-scalable=no">
 
-  <link rel="icon" type="image/png" href="/assets/logo.png">
-  <link href="" rel="stylesheet">
+	<link rel="icon" type="image/png" href="/assets/logo.png">
+	<link href="" rel="stylesheet">
 </head>
 <body class="mat-typography">
-  <app-root>
-    <img src="/assets/logo.png" alt="Pelican Landing" style="position: absolute; left: 50vw; top: 50vh; transform: translate(-50%, -50%);">
-  </app-root>
+<app-root>
+	<img src="/assets/logo.png" alt="Pelican Landing" style="position: absolute; left: 50vw; top: 50vh; transform: translate(-50%, -50%);">
+</app-root>
 </body>
 </html>

src/main.ts

@@ -1,12 +1,5 @@
-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/material.scss

@@ -1,22 +0,0 @@
-@import '~@angular/material/theming';
-@include mat-core();
-
-$pelican-landing-primary: mat-palette($mat-indigo);
-$pelican-landing-accent: mat-palette($mat-pink, A200, A100, A400);
-
-$pelican-landing-warn: mat-palette($mat-red);
-
-$pelican-landing-theme: mat-light-theme((
-  color: (
-    primary: $pelican-landing-primary,
-    accent: $pelican-landing-accent,
-    warn: $pelican-landing-warn,
-  )
-));
-
-@include angular-material-theme($pelican-landing-theme);
-
-mat-toolbar {
-  position: absolute;
-  background-color: rgba(255, 255, 255, 0.25) !important;
-}

src/polyfills.ts

@@ -1,63 +0,0 @@
-/**
- * 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
- */
-
-/** IE10 and 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/styles.scss

@@ -1,7 +1,45 @@
-@import url(https://fonts.googleapis.com/icon?family=Material+Icons|Roboto:300,400,500);
+// Theme ================================================================
+@use '@angular/material' as mat;
+@import "bootstrap/dist/css/bootstrap.min.css";
+@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500|Material+Icons");
 
-@import './ bootstrap';
-@import './material';
+@include mat.core();
+$my-theme: mat.define-light-theme((
+	color: (
+		primary: mat.define-palette(mat.$blue-palette),
+		accent: mat.define-palette(mat.$pink-palette, A200),
+	),
+	typography: mat.define-typography-config(),
+	density: 0,
+));
+@include mat.all-component-themes($my-theme);
+
+// Globals ==============================================================
+
+html, body {
+	margin: 0;
+	padding: 0;
+	width: 100%;
+	height: 100%;
+	font-family: Roboto, "Helvetica Neue", sans-serif;
+}
+
+.cap-width {
+	margin-left: auto;
+	margin-right: auto;
+	max-width: 1200px;
+}
+
+.curs-pointer {
+	cursor: pointer;
+}
+
+.logo {
+	color: #000000;
+
+	&:hover {
+		color: #555555;
+		text-decoration: none;
+	}
+}
 
-html, body { height: 100%; }
-body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }