Changes to Home Page Formatting

package.json

@@ -36,6 +36,7 @@
     "stripe-angular": "0.5.0",
     "swagger-ui": "2.2.10",
     "tslib": "1.10.0",
+    "yarn": "^1.19.1",
     "zone.js": "0.9.1"
   },
   "devDependencies": {

src/main/webapp/app/home/email/email.component.html

@@ -50,7 +50,7 @@ <h3>Drop Us a Message</h3>
                         </div>
                     </div>
                 </div>
-                <div class="col-12">
+                <div class="col-12 text-center">
                     <button [disabled]="!contactForm.valid" mat-raised-button color="primary" type="submit"
                             name="btnSubmit" value="">Send Message
                     </button>

src/main/webapp/app/home/email/email.component.ts

@@ -7,68 +7,68 @@ import { MatSnackBar } from '@angular/material';
 import { JhiAlertService } from 'ng-jhipster';
 
 @Component({
-    selector: 'jhi-email',
-    templateUrl: './email.component.html',
-    styleUrls: ['./email.scss']
+  selector: 'jhi-email',
+  templateUrl: './email.component.html',
+  styleUrls: ['./email.component.scss']
 })
 export class EmailComponent implements OnInit {
-    contactForm = this.fb.group({
-        contactName: ['', Validators.required],
-        contactEmail: ['', [Validators.required, Validators.email]],
-        contactPhone: [''],
-        contactMsg: ['', Validators.required]
-    });
-
-    get contactName() {
-        return this.contactForm.get('contactName');
-    }
+  contactForm = this.fb.group({
+    contactName: ['', Validators.required],
+    contactEmail: ['', [Validators.required, Validators.email]],
+    contactPhone: [''],
+    contactMsg: ['', Validators.required]
+  });
 
-    get contactEmail() {
-        return this.contactForm.get('contactEmail');
-    }
+  get contactName() {
+    return this.contactForm.get('contactName');
+  }
 
-    get contactPhone() {
-        return this.contactForm.get('contactPhone');
-    }
+  get contactEmail() {
+    return this.contactForm.get('contactEmail');
+  }
 
-    get contactMsg() {
-        return this.contactForm.get('contactMsg');
-    }
+  get contactPhone() {
+    return this.contactForm.get('contactPhone');
+  }
 
-    onSubmit() {
-        this.sendRequest().subscribe(
-            () => {
-                this._snackBar.open('Thanks for writing to us! We will get back to you soon!', null, {
-                    duration: 5000,
-                    panelClass: ['contact-form-snack-bar']
-                });
-                this.contactForm.reset();
-            },
-            err => {
-                this.onError(err.message);
-            }
-        );
-    }
+  get contactMsg() {
+    return this.contactForm.get('contactMsg');
+  }
 
-    sendRequest(): Observable<any> {
-        return this.http.post<any>('https://usebasin.com/f/b5ed73d03aa5', this.contactForm.value, {
-            headers: new HttpHeaders({
-                Accept: 'application/json'
-            }),
-            observe: 'response'
+  onSubmit() {
+    this.sendRequest().subscribe(
+      () => {
+        this._snackBar.open('Thanks for writing to us! We will get back to you soon!', null, {
+          duration: 5000,
+          panelClass: ['contact-form-snack-bar']
         });
-    }
+        this.contactForm.reset();
+      },
+      err => {
+        this.onError(err.message);
+      }
+    );
+  }
+
+  sendRequest(): Observable<any> {
+    return this.http.post<any>('https://usebasin.com/f/b5ed73d03aa5', this.contactForm.value, {
+      headers: new HttpHeaders({
+        Accept: 'application/json'
+      }),
+      observe: 'response'
+    });
+  }
 
-    constructor(
-        private fb: FormBuilder,
-        private http: HttpClient,
-        private _snackBar: MatSnackBar,
-        private jhiAlertService: JhiAlertService
-    ) {}
+  constructor(
+    private fb: FormBuilder,
+    private http: HttpClient,
+    private _snackBar: MatSnackBar,
+    private jhiAlertService: JhiAlertService
+  ) {}
 
-    ngOnInit() {}
+  ngOnInit() {}
 
-    private onError(errorMessage: string) {
-        this.jhiAlertService.error(errorMessage, null, null);
-    }
+  private onError(errorMessage: string) {
+    this.jhiAlertService.error(errorMessage, null, null);
+  }
 }

src/main/webapp/app/home/home.component.html

@@ -21,7 +21,7 @@ <h1 class="display-3">Welcome to Python-Sinhala!</h1>
                     <img class="img-fluid" src="../../content/images/book_for_education.svg" alt="Affordable">
                 </div>
                 <div class="col-md-6 col-12 order-md-1">
-                    <h1 class="display-5">Accessible without Bounds...</h1>
+                    <h1 class="display-4">Accessible without Bounds...</h1>
                     <p>We want to make education accessible to everyone; and commit to make our courses accessible to
                         everyone in all parts of Sri-Lanka now and always.</p>
                 </div>
@@ -31,7 +31,7 @@ <h1 class="display-5">Accessible without Bounds...</h1>
                     <img class="img-fluid" src="../../content/images/non-profit.svg" alt="Non-Profit">
                 </div>
                 <div class="col-md-6">
-                    <h1 class="display-5">Not For Profit...</h1>
+                    <h1 class="display-4">Not For Profit...</h1>
                     <p>We are a non-profit organizaiton incorporated in British Columbia and only sell our courses for the minimum amount of money needed to cover
                         bandwidth and operational costs.</p>
                 </div>
@@ -41,7 +41,7 @@ <h1 class="display-5">Not For Profit...</h1>
                     <img class="img-fluid" src="../../content/images/deal_handshakes.svg" alt="Expand">
                 </div>
                 <div class="col-md-6 col-12 order-md-1">
-                    <h1 class="display-5">Think Big, Strive for More...</h1>
+                    <h1 class="display-4">Think Big, Strive for More...</h1>
                     <p>We aspire to cover all subjects related to the standardized examination curriculum in Sri-Lanka
                         and strive to make partnerships more tutors and educational institutions that
                         share our goal.</p>
@@ -50,7 +50,7 @@ <h1 class="display-5">Think Big, Strive for More...</h1>
         </ul>
     </div>
 </section>
-<section class="background_outer_div">
+<section id="ourCommitment" class="background_outer_div">
     <div class="d-none d-md-block">
         <img class="background_ani kenburns-bottom" src="../../content/images/books_background.jpg" alt="books">
     </div>