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

Fixed cards

Browse Source
This commit is contained in:
Zakary Timson 2018-07-11 22:10:18 -04:00
parent 4e736b198a
commit 3d0997422f
2 changed files with 35 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,30 +4,39 @@
<div class="container py-5"> <div class="container py-5">
<div class="row py-5"> <div class="row py-5">
<div class="col-12 col-md-4 text-center"> <div class="col-12 col-md-4 text-center">
<a style="max-width: 20rem" [routerLink]="['/about']"> <a class="no-underline" style="max-width: 20rem" [routerLink]="['/about']">
<mat-icon style="font-size: 75px;">help_outline</mat-icon> <mat-card class="dark-hover" style="min-height: 320px;">
<h3 class="text-dark">About Us</h3> <mat-icon class="my-5" style="transform: scale(4); color: #87a9cd;">help_outline</mat-icon>
<p>Learn more about us and our 30+ years experience!</p> <h3 class="text-dark mb-4">About Us</h3>
<mat-divider></mat-divider>
<p class="text-black-50 mt-5">Learn more about us and our 30+ years experience!</p>
</mat-card>
</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 class="no-underline" style="max-width: 20rem" [routerLink]="['/store']">
<mat-icon style="font-size: 75px;">local_grocery_store</mat-icon> <mat-card class="dark-hover" style="min-height: 320px;">
<h3 class="text-dark">Store</h3> <mat-icon class="my-5" style="transform: scale(4); color: #87a9cd;">local_grocery_store</mat-icon>
<p>Buy equipment, ink and anything else you might need!</p> <h3 class="text-dark mb-4">Store</h3>
<mat-divider></mat-divider>
<p class="text-black-50 mt-5">Buy equipment, ink and anything else you might need!</p>
</mat-card>
</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 class="no-underline" style="max-width: 20rem" [routerLink]="['/formulaManager']">
<mat-icon style="font-size: 75px;">opacity</mat-icon> <mat-card class="dark-hover" style="min-height: 320px;">
<h3 class="text-dark">Formula Manager</h3> <mat-icon class="my-5" style="transform: scale(4); color: #87a9cd;">opacity</mat-icon>
<p>Check out our browser formula manager!</p> <h3 class="text-dark mb-4">Formula Manager</h3>
<mat-divider></mat-divider>
<p class="text-black-50 mt-5">Check out our browser formula manager!</p>
</mat-card>
</a> </a>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="container-fluid"> <div class="container-fluid pb-5">
<div class="row"> <div class="row">
<div class="col p-0" style="position: relative"> <div class="col p-0" style="position: relative">
<div class="d-inline-block" style="position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%)"> <div class="d-inline-block" style="position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%)">

13
src/assets/css/base.scss
View File

@ -12,6 +12,19 @@ body {
padding: 0; padding: 0;
} }
a,
a:hover,
u,
u:hover,
.no-underline,
.no-underline:hover {
text-decoration: none;
}
.dark-hover:hover {
background-color: #f0f0f0;
}
.rainbow { .rainbow {
background: linear-gradient(to top, black, black, yellow, magenta, blue, blue); background: linear-gradient(to top, black, black, yellow, magenta, blue, blue);
-webkit-background-clip: text; -webkit-background-clip: text;