fhsons/website
fhsons/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Releases Activity

Update for accessibility

Browse Source
This commit is contained in:
Zakary Timson 2018-07-04 19:12:06 -04:00
parent 6e6841d21f
commit 0cac490f65
5 changed files with 26 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/app.component.html
View File

@ -13,13 +13,13 @@
<div class="collapse navbar-collapse" id="navbar"> <div class="collapse navbar-collapse" id="navbar">
<ul class="navbar-nav mr-auto"> <ul class="navbar-nav mr-auto">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" [routerLink]="['/about']">About</a> <a class="nav-link text-dark" [routerLink]="['/about']">About</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" [routerLink]="['/store']">Store</a> <a class="nav-link text-dark" [routerLink]="['/store']">Store</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" [routerLink]="['/formulaManager']">Formula Manager</a> <a class="nav-link text-dark" [routerLink]="['/formulaManager']">Formula Manager</a>
</li> </li>
</ul> </ul>
<button mat-stroked-button class="ml-auto" color="primary" data-toggle="modal" data-target="#loginModal">Login</button> <button mat-stroked-button class="ml-auto" color="primary" data-toggle="modal" data-target="#loginModal">Login</button>

33
src/app/home/home.component.html
View File

@ -1,7 +1,4 @@
<div class="container-fluid m-0 p-0"> <div class="banner">
<div class="row m-0">
<img src="assets/img/banner.jpg" style="width:100%; height: auto;">
</div>
</div> </div>
<div class="container-fluid m-0 p-0 bg-light"> <div class="container-fluid m-0 p-0 bg-light">
<div class="container py-5"> <div class="container py-5">
@ -10,21 +7,21 @@
<a style="max-width: 20rem" [routerLink]="['/about']"> <a style="max-width: 20rem" [routerLink]="['/about']">
<mat-icon style="font-size: 75px;">help_outline</mat-icon> <mat-icon style="font-size: 75px;">help_outline</mat-icon>
<h3 class="text-dark">About Us</h3> <h3 class="text-dark">About Us</h3>
<p class="text-muted">Learn more about us and our 30+ years experience!</p> <p>Learn more about us and our 30+ years experience!</p>
</a> </a>
</div> </div>
<div class="col-12 col-md-4 text-center"> <div class="col-12 col-md-4 text-center">
<a style="max-width: 20rem" [routerLink]="['/store']"> <a style="max-width: 20rem" [routerLink]="['/store']">
<mat-icon style="font-size: 75px;">local_grocery_store</mat-icon> <mat-icon style="font-size: 75px;">local_grocery_store</mat-icon>
<h3 class="text-dark">Store</h3> <h3 class="text-dark">Store</h3>
<p class="text-muted">Buy equipment, ink and anything else you might need!</p> <p>Buy equipment, ink and anything else you might need!</p>
</a> </a>
</div> </div>
<div class="col-12 col-md-4 text-center"> <div class="col-12 col-md-4 text-center">
<a style="max-width: 20rem" [routerLink]="['/formulaManager']"> <a style="max-width: 20rem" [routerLink]="['/formulaManager']">
<mat-icon style="font-size: 75px;">opacity</mat-icon> <mat-icon style="font-size: 75px;">opacity</mat-icon>
<h3 class="text-dark">Formula Manager</h3> <h3 class="text-dark">Formula Manager</h3>
<p class="text-muted">Check out our browser formula manager!</p> <p>Check out our browser formula manager!</p>
</a> </a>
</div> </div>
</div> </div>
@ -43,42 +40,42 @@
</div> </div>
</div> </div>
<div class="col p-0"> <div class="col p-0">
<img src="/assets/img/shipping.png" style="width: 100%; height: auto"> <img src="/assets/img/shipping.png" alt="Free Shipping" style="width: 100%; height: auto">
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col p-0"> <div class="col p-0">
<div class="row m-0"> <div class="row m-0">
<div class="col p-0"> <div class="col p-0">
<img src="assets/img/partners/m&r.png" style="width: 100%; height: auto"> <img src="assets/img/partners/m&r.png" alt="M&R" style="width: 100%; height: auto">
</div> </div>
<div class="col p-0"> <div class="col p-0">
<img src="assets/img/partners/soba.png" style="width: 100%; height: auto"> <img src="assets/img/partners/soba.png" alt="Soba" style="width: 100%; height: auto">
</div> </div>
<div class="col p-0"> <div class="col p-0">
<img src="assets/img/partners/rhinotech.png" style="width: 100%; height: auto"> <img src="assets/img/partners/rhinotech.png" alt="Rhino Tech" style="width: 100%; height: auto">
</div> </div>
</div> </div>
<div class="row m-0"> <div class="row m-0">
<div class="col p-0"> <div class="col p-0">
<img src="assets/img/partners/chromatex.png" style="width: 100%; height: auto"> <img src="assets/img/partners/chromatex.png" alt="Chromatex" style="width: 100%; height: auto">
</div> </div>
<div class="col p-0"> <div class="col p-0">
<img src="assets/img/partners/actionengineering.png" style="width: 100%; height: auto"> <img src="assets/img/partners/actionengineering.png" alt="Action Engineering" style="width: 100%; height: auto">
</div> </div>
<div class="col p-0"> <div class="col p-0">
<img src="assets/img/partners/bbc.png" style="width: 100%; height: auto"> <img src="assets/img/partners/bbc.png" alt="BBC" style="width: 100%; height: auto">
</div> </div>
</div> </div>
<div class="row m-0"> <div class="row m-0">
<div class="col p-0"> <div class="col p-0">
<img src="assets/img/partners/amrep.png" style="width: 100%; height: auto"> <img src="assets/img/partners/amrep.png" alt="AMREP" style="width: 100%; height: auto">
</div> </div>
<div class="col p-0"> <div class="col p-0">
<img src="assets/img/partners/chromaline.png" style="width: 100%; height: auto"> <img src="assets/img/partners/chromaline.png" alt="Chromaline" style="width: 100%; height: auto">
</div> </div>
<div class="col p-0"> <div class="col p-0">
<img src="assets/img/partners/printersedge.png" style="width: 100%; height: auto"> <img src="assets/img/partners/printersedge.png" alt="Printer's Edge" style="width: 100%; height: auto">
</div> </div>
</div> </div>
</div> </div>
@ -94,6 +91,6 @@
</div> </div>
</div> </div>
<div class="container-fluid px-0" style="width: 100%; height: 400px"> <div class="container-fluid px-0" style="width: 100%; height: 400px">
<iframe style="width: 100%; height: 100%;" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d11529.15485962886!2d-79.6054727!3d43.746101!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x55ebba8b241a8cc!2sFH+%26+Son&#39;s+Mfg+Ltd!5e0!3m2!1sen!2sca!4v1526647428011" <iframe style="width: 100%; height: 100%;" title="Google Maps" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d11529.15485962886!2d-79.6054727!3d43.746101!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x55ebba8b241a8cc!2sFH+%26+Son&#39;s+Mfg+Ltd!5e0!3m2!1sen!2sca!4v1526647428011"
frameborder="0"></iframe> frameborder="0"></iframe>
</div> </div>

6
src/app/home/home.component.scss Normal file
View File

@ -0,0 +1,6 @@
.banner {
width: 100%;
height: 600px;
background: url('/assets/img/banner.jpg') no-repeat fixed center;
background-size: cover;
}

3
src/app/home/home.component.ts
View File

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

BIN
src/assets/img/banner.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 251 KiB

After

Width:  |  Height:  |  Size: 251 KiB