styled footer, about, store page
This commit is contained in:
Andre Mourinho
parent
dc54530028
commit
20e1f22c31
|
|
@ -15,7 +15,7 @@
|
|||
<div class="container">
|
||||
<div class="row pt-4">
|
||||
<div class="col-12">
|
||||
<h2 class="my-4 roboto">Client Reviews</h2>
|
||||
<h1 class="my-4 roboto text-center" style="color:#bbcde8;">Client Reviews</h1>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-4 mb-4">
|
||||
<mat-card class="text-black-50 shadow">
|
||||
|
|
@ -41,7 +41,7 @@
|
|||
Great staff, very friendly, great service
|
||||
</mat-card>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-4 mb-4 mx-auto">
|
||||
<div class="col-md-6 col-lg-4 mb-4">
|
||||
<mat-card class="text-black-50">
|
||||
<a target="_blank" href="https://www.google.com/maps/contrib/111462598285081078982/reviews?hl=en-CA&sa=X&ved=2ahUKEwiklPiAwJjcAhVrxoMKHU8lAtgQvvQBegQIARAi">Jon Weizman</a>
|
||||
<br />
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<!-- Nav -->
|
||||
<nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light">
|
||||
<div class="wrapper">
|
||||
<nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light">
|
||||
<div class="container">
|
||||
<a class="navbar-brand roboto" [routerLink]="['/']">
|
||||
<span class="fh-fade">fh</span>
|
||||
|
|
@ -31,20 +32,23 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</nav>
|
||||
|
||||
<!-- Content -->
|
||||
<div>
|
||||
<!-- Content -->
|
||||
<div>
|
||||
<div style="height: 56px"></div>
|
||||
<router-outlet></router-outlet>
|
||||
</div>
|
||||
|
||||
<div class="push"></div>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer>
|
||||
<div class="container-fluid bg-light">
|
||||
<div class="container-fluid">
|
||||
<div class="container">
|
||||
<div class="d-inline-block py-3">
|
||||
<div class="d-none d-md-inline-block align-top mr-5">
|
||||
<div class="py-3 text-center">
|
||||
<div class="d-none d-md-inline-block align-top mr-5 text-left">
|
||||
<h5>MAIN MENU</h5>
|
||||
<ul style="list-style-type: none; padding-left: 0;">
|
||||
<li>
|
||||
|
|
@ -58,7 +62,7 @@
|
|||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="d-none d-md-inline-block align-top mr-5">
|
||||
<div class="d-none d-md-inline-block align-top mr-5 text-left">
|
||||
<h5>PRODUCTS</h5>
|
||||
<ul style="list-style-type: none; padding-left: 0; columns: 3;">
|
||||
<li *ngFor="let c of categories | async">
|
||||
|
|
@ -66,21 +70,21 @@
|
|||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="align-top d-inline-block">
|
||||
<div class="align-top d-inline-block text-left">
|
||||
<h5>CONTACT</h5>
|
||||
<p>
|
||||
Toll Free: 1-888-422-7737
|
||||
<br> Local: 416-744-2723
|
||||
<br> Fax: 416-744-4078
|
||||
<i class="fas fa-phone mr-2"></i> 416-744-2723
|
||||
<br /><i class="fas fa-fax mr-2"></i> 416-744-4078
|
||||
<br />Toll Free: 1-888-422-7737
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container-fluid" style="background-color: #d3d3d3;">
|
||||
<div class="container-fluid footer-sub">
|
||||
<div class="container text-center">
|
||||
<p class="mb-0 p-2">© 2018 fh & sons. Created By
|
||||
<a href="http://zakscode.com">Zak Timson</a>
|
||||
<p class="mb-0 p-2">© 2018 FH & SONS
|
||||
<br />Designed and developed by: <a href="http://zakscode.com">Zak Timson</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
<div class="container-fluid" style="background-color: #53709f;">
|
||||
<!-- <div class="container-fluid" style="background-color: #53709f;"> -->
|
||||
<div class="container-fluid">
|
||||
<div class="container">
|
||||
<div class="row py-5">
|
||||
<div *ngIf="app.user" class="ml-auto mr-3 mb-3">
|
||||
|
|
@ -18,11 +19,11 @@
|
|||
</nav>
|
||||
|
||||
<ng-container *ngFor="let c of categories | async">
|
||||
<mat-card class="m-3 curs-pointer">
|
||||
<mat-card class="m-2 mx-auto curs-pointer">
|
||||
<div [routerLink]="['/store', c.name]">
|
||||
<img *ngIf="c.image" mat-card-image [src]="c.image" [alt]="c.name" style="width: 200px; height: 200px;">
|
||||
<img *ngIf="c.image" mat-card-image [src]="c.image" [alt]="c.name" style="width: 200px; height: 200px;" class="mx-auto">
|
||||
<mat-divider *ngIf="c.image" class="custom-line"></mat-divider>
|
||||
<mat-card-content class="text-center">
|
||||
<mat-card-content class="text-center" style="max-width:200px">
|
||||
<h5>{{c.name}}</h5>
|
||||
</mat-card-content>
|
||||
</div>
|
||||
|
|
@ -37,12 +38,24 @@
|
|||
</mat-card>
|
||||
</ng-container>
|
||||
|
||||
<ng-container *ngIf="(categories | async)?.length == 0 && (products | async)?.length <= 0">
|
||||
<div class="row w-100">
|
||||
<div class="col-12 p-5">
|
||||
<mat-card class="mx-auto">
|
||||
<mat-card-content>
|
||||
There are currently no products in the {{category}} category. Please check back again later as we are currently updating our website.
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
<ng-container *ngFor="let p of products | async">
|
||||
<mat-card class="m-3 curs-pointer">
|
||||
<mat-card class="m-2 curs-pointer mx-auto">
|
||||
<div [routerLink]="['/products', p.name]">
|
||||
<img *ngIf="p.image" mat-card-image [src]="p.image" [alt]="p.name" style="width: 200px; height: 200px;">
|
||||
<img *ngIf="p.image" mat-card-image [src]="p.image" [alt]="p.name" style="width: 200px; height: 200px;" class="mx-auto">
|
||||
<mat-divider *ngIf="p.image" class="custom-line"></mat-divider>
|
||||
<mat-card-content class="text-center">
|
||||
<mat-card-content class="text-center" style="max-width:200px">
|
||||
<h5>{{p.name}}</h5>
|
||||
</mat-card-content>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12 py-4">
|
||||
<img [src]="product.image" class="float-left img-fluid mb-4">
|
||||
<img [src]="product.image" class="float-left img-fluid mb-4 mr-4">
|
||||
<h2 class="roboto">{{product.name}}</h2>
|
||||
<h5 *ngIf="product.price" class="text-muted">{{product.price | currency}}</h5>
|
||||
<h5 *ngIf="!product.price" class="text-muted">Contact For Price</h5>
|
||||
|
|
|
|||
|
|
@ -75,3 +75,30 @@ mat-list-item:hover {
|
|||
mat-form-field#totalCost .mat-form-field-label-wrapper {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
//sticky footer
|
||||
.wrapper {
|
||||
min-height: 100%;
|
||||
margin-bottom: -312px;
|
||||
}
|
||||
.footer, .push {
|
||||
height: 312px;
|
||||
}
|
||||
footer {
|
||||
background-color: #3c3c3c;
|
||||
color: #c7c7c7;
|
||||
}
|
||||
footer a, footer a:active, footer a:focus {
|
||||
color: #808080;
|
||||
text-decoration: none;
|
||||
}
|
||||
footer a:hover {
|
||||
color: white;
|
||||
}
|
||||
footer h1, footer h2, footer h3, footer h4, footer h5 {
|
||||
color: #507b9c;
|
||||
}
|
||||
.footer-sub {
|
||||
background-color: #292929;
|
||||
color: #808080;
|
||||
}
|
||||
|
|
@ -21,6 +21,7 @@
|
|||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.min.js"></script>
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ" crossorigin="anonymous">
|
||||
|
||||
<!-- Global site tag (gtag.js) - Google Analytics -->
|
||||
<script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user