email component and responsive ui changes

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.scss

@@ -122,6 +122,9 @@ Main page styles
 
 section {
   padding: 3rem 0;
+  h1 {
+    text-align: center;
+  }
   p {
     padding: 3rem 0;
     font-size: 22px;
@@ -152,3 +155,56 @@ p {
     text-align: center;
   }
 }
+
+@media screen and (max-width: 575px) {
+  .jumbotron {
+    .container {
+      min-height: 100vh;
+      h1 {
+        font-size: 2em;
+        margin: 2rem 0;
+        text-align: center;
+      }
+    }
+  }
+
+  section {
+    padding: 1rem 0;
+    h1 {
+      font-size: 2em;
+    }
+    p {
+      padding: 0 0 1rem 0;
+      font-size: 16px;
+      margin: 0;
+    }
+  }
+
+  #mission {
+    ul > li {
+      padding: 2rem 0;
+    }
+    .img-fluid {
+      padding: 0 0 2rem 0;
+    }
+  }
+
+  .jh-card {
+    margin-top: 15px;
+  }
+
+  .asanka-img {
+    height: 150px;
+    display: block;
+    margin: auto;
+    margin-top: 15px;
+    margin-bottom: 30px;
+  }
+
+  .contact-form {
+    margin-top: 0;
+    margin-bottom: 0;
+    width: 100%;
+    padding-top: 3rem;
+  }
+}

src/main/webapp/app/layouts/navbar/navbar.scss

@@ -6,7 +6,7 @@ Navbar
 ========================================================================== */
 
 .jh-navbar {
-  background-color: #353d47;
+  background-color: #222035;
   padding: 0.2em 1em;
   .profile-image {
     margin: -10px 0px;
@@ -47,3 +47,12 @@ Logo styles
     background-size: contain;
   }
 }
+
+/* ==========================================================================
+jumbotron
+========================================================================== */
+
+.hipster {
+  background-position: bottom !important;
+  filter: brightness(1.05);
+}