ztimson/pelican-landing
ztimson/pelican-landing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Releases Activity

More styling
All checks were successful
Build Website / Build NPM Project (push) Successful in 54s
Details
Build Website / Tag Version (push) Successful in 8s
Details
Build Website / Build & Push Dockerfile (push) Successful in 1m12s
Details

Browse Source
This commit is contained in:
Zakary Timson 2024-01-08 15:10:37 -05:00
parent 326ac584fe
commit e3a14e210f
4 changed files with 54 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/app/components/carousel/carousel.component.html
View File

@ -1,11 +1,10 @@
<div class="carousel-container" [style.height]="height"> <div class="carousel-container" [style.height]="height" style="background: #282d31">
<img *ngIf="background" class="carousel-background" [src]="gallery[index]" alt="background">
<img class="carousel-image" [src]="gallery[index]" [alt]="'slide ' + index"> <img class="carousel-image" [src]="gallery[index]" [alt]="'slide ' + index">
<div class="carousel-previous" (click)="previous()"> <div class="carousel-previous" (click)="previous()">
<mat-icon>skip_previous</mat-icon> <mat-icon>keyboard_arrow_left</mat-icon>
</div> </div>
<div class="carousel-next" (click)="next()"> <div class="carousel-next" (click)="next()">
<mat-icon>skip_next</mat-icon> <mat-icon>keyboard_arrow_right</mat-icon>
</div> </div>
<div class="carousel-pause" (click)="pause = !pause"> <div class="carousel-pause" (click)="pause = !pause">
<mat-icon *ngIf="!pause">pause</mat-icon> <mat-icon *ngIf="!pause">pause</mat-icon>

2
src/app/components/carousel/carousel.component.ts
View File

@ -40,7 +40,7 @@ export class CarouselComponent implements OnDestroy, AfterViewInit {
speed = 5000; speed = 5000;
pause = false; pause = false;
index = 0 ?? ~~(Math.random() * this.gallery.length); index = 0 ?? ~~(Math.random() * this.gallery.length);
height = '300px'; height = '500px';
ngAfterViewInit() { ngAfterViewInit() {
this.timer = setInterval(() => { this.timer = setInterval(() => {

13
src/app/components/footer/footer.component.html
View File

@ -22,17 +22,22 @@
<h4>Resources</h4> <h4>Resources</h4>
<ul> <ul>
<li> <li>
<a href="https://www.canada.ca/en/border-services-agency/services/arrivecan.html" target="_blank">Arrive Canada</a> Border:
<a href="https://www.cbsa-asfc.gc.ca/travel-voyage/menu-eng.html" target="_blank">Canada</a> /
<a href="https://www.cbp.gov/travel/us-citizens" target="_blank">USA</a>
</li> </li>
<li> <li>
<a href="https://www.cbsa-asfc.gc.ca/travel-voyage/menu-eng.html" target="_blank">Border Crossing</a> / Declarations:
<a href="https://www.canada.ca/en/border-services-agency/services/arrivecan.html" target="_blank">ArriveCan</a> /
<a href="https://www.rcmp-grc.gc.ca/wam/media/2347/original/d369a605ac3363b569af5ea5dc40c88d.pdf" target="_blank">Firearms</a> <a href="https://www.rcmp-grc.gc.ca/wam/media/2347/original/d369a605ac3363b569af5ea5dc40c88d.pdf" target="_blank">Firearms</a>
</li> </li>
<li>Regulations: <li>
Regulations:
<a href="https://www.ontario.ca/files/2023-05/mnrf-2023-hunting-regulations-summary-en-2023-05-03.pdf" target="_blank">Hunting</a> / <a href="https://www.ontario.ca/files/2023-05/mnrf-2023-hunting-regulations-summary-en-2023-05-03.pdf" target="_blank">Hunting</a> /
<a href="https://www.ontario.ca/files/2023-12/mnrf-2024-ontario-fishing-regulations-summary-en-2023-12-11-v2.pdf" target="_blank">Fishing</a> <a href="https://www.ontario.ca/files/2023-12/mnrf-2024-ontario-fishing-regulations-summary-en-2023-12-11-v2.pdf" target="_blank">Fishing</a>
</li> </li>
<li>Weather: <li>
Weather:
<a href="https://www.accuweather.com/en/ca/morson/p0w/daily-weather-forecast/54891" target="_blank">Morson</a> / <a href="https://www.accuweather.com/en/ca/morson/p0w/daily-weather-forecast/54891" target="_blank">Morson</a> /
<a href="https://weather.gc.ca/marine/forecast_e.html?mapID=09&siteID=08100" target="_blank">Marine</a> <a href="https://weather.gc.ca/marine/forecast_e.html?mapID=09&siteID=08100" target="_blank">Marine</a>
</li> </li>

31
src/app/view/home/home.component.html
View File

@ -1,12 +1,12 @@
<!-- Banner --> <!-- Banner -->
<div style="height: 75vh; width: 100%; background: url('/assets/islands.png') no-repeat fixed bottom; background-size: cover;"> <div style="height: 75vh; width: 100%; background: url('/assets/islands.png') no-repeat fixed bottom; background-size: cover;">
<img src="/assets/sign.jpg" style="width: min(424px, 75%); height: auto; position: absolute; left: 50%; top: 37.5vh; transform: translate(-50%, -50%); filter: drop-shadow(10px 10px 15px black)"> <img src="/assets/sign.jpg" alt="Logo" style="width: min(424px, 75%); height: auto; position: absolute; left: 50%; top: 37.5vh; transform: translate(-50%, -50%); filter: drop-shadow(10px 10px 15px black)">
</div> </div>
<!-- Services --> <!-- Services -->
<section class="py-5 bg-white" style="background: url('/assets/texture.png') repeat;"> <section class="py-5 bg-white" style="background: url('/assets/texture.png') repeat;">
<div class="py-5 cap-width text-center "> <div class="py-5 cap-width text-center ">
<h2 class="mb-5">Services</h2> <h2 class="mb-5">Services</h2>
<div class="d-flex justify-content-around justify-content-lg-between flex-wrap cap-width"> <div class="d-flex justify-content-around flex-wrap cap-width">
<div class="card p-4 text-center mb-5 text-white" style="width: 250px; background: url('/assets/spring.png') no-repeat; background-size: cover;"> <div class="card p-4 text-center mb-5 text-white" style="width: 250px; background: url('/assets/spring.png') no-repeat; background-size: cover;">
<mat-icon class="mx-auto my-3" style="width: 64px; height: 64px; font-size: 64px">restaurant</mat-icon> <mat-icon class="mx-auto my-3" style="width: 64px; height: 64px; font-size: 64px">restaurant</mat-icon>
<h3>Restaurant</h3> <h3>Restaurant</h3>
@ -40,7 +40,7 @@
<section class="py-5 bg-white"> <section class="py-5 bg-white">
<div class="py-5 cap-width d-flex flex-column flex-wrap flex-md-row align-items-center justify-content-around"> <div class="py-5 cap-width d-flex flex-column flex-wrap flex-md-row align-items-center justify-content-around">
<div class="m-5"> <div class="m-5">
<img src="/assets/resturant.png" style="width: 200px; height: auto;"> <img src="/assets/resturant.png" alt="Restaurant icon" style="width: 200px; height: auto;">
</div> </div>
<div class="m-5" style="flex: 1 0 0"> <div class="m-5" style="flex: 1 0 0">
<h2 class="mb-0">Restaurant</h2> <h2 class="mb-0">Restaurant</h2>
@ -51,8 +51,6 @@
</div> </div>
<div class="m-5"> <div class="m-5">
<h3 class="mb-0 text-muted" style="font-size: 1.1rem">Hours:</h3> <h3 class="mb-0 text-muted" style="font-size: 1.1rem">Hours:</h3>
{{day}}
{{day == 1}}
<table style="line-height: 1em" class="text-muted"> <table style="line-height: 1em" class="text-muted">
<tr [style.font-weight]="day == 0 ? 'bold' : 'normal'"><td>Sunday</td><td>11 am - 8 pm</td></tr> <tr [style.font-weight]="day == 0 ? 'bold' : 'normal'"><td>Sunday</td><td>11 am - 8 pm</td></tr>
<tr [style.font-weight]="day == 1 ? 'bold' : 'normal'"><td>Monday</td><td>11 am - 8 pm</td></tr> <tr [style.font-weight]="day == 1 ? 'bold' : 'normal'"><td>Monday</td><td>11 am - 8 pm</td></tr>
@ -65,25 +63,27 @@
</div> </div>
</div> </div>
</section> </section>
<!-- Resources --> <!-- Divider -->
<div style="height: 60vh; width: 100%; background: url('/assets/pelican.png') no-repeat fixed center; background-size: cover;"> <div class="py-5" style="height: 50vh; width: 100%; background: url('/assets/pelican.png') no-repeat fixed center; background-size: cover;"></div>
</div>
<!-- About --> <!-- About -->
<section class="w-100 p-5 text-center cap-width"> <section class="py-5">
<div class="py-5 px-3 cap-width text-center">
<h2 class="mb-5">About Us</h2> <h2 class="mb-5">About Us</h2>
<p class="mb-5">Pelican Landing is a family run, year-round, hunting & fishing lodge. It's located on the beautiful southern shores of Lake of Woods and offers the outdoorsman a tailor made experience. With both road and water access this resort can meet the needs of the angler, hunter, or nature enthusiast. Our goal at Pelican Landing is to make your stay with us a memorable & relaxing experience that you will want to repeat.</p> <p class="mb-4">Pelican Landing is a family run, year-round, hunting & fishing lodge. With local guides to help to you navigate the beautiful southern shores of Lake of Woods you are assured to have a successful hunting or fishing trip. Pelican landing offers a multitude of amenities and packages to give any outdoorsman the perfect tailor made experience.</p>
<p class="mb-5">Amenities include: boats, boat-launch, cabins, guides, on-site restaurant & shore-side lunches. With both road and water access this resort can meet the needs of the angler, hunter, or nature enthusiast. Our goal at Pelican Landing is to make your stay with us a memorable & relaxing experience that you will want to repeat.</p>
<app-carousel></app-carousel> <app-carousel></app-carousel>
</div>
</section> </section>
<!-- Contact --> <!-- Contact -->
<section class="p-5 text-center" style="background: url('/assets/texture.png') repeat;"> <section class="py-5" style="background: url('/assets/texture.png') repeat;">
<div class="py-5 px-3 cap-width text-center">
<h2 class="mb-5">Contact Us</h2> <h2 class="mb-5">Contact Us</h2>
<div class="d-flex flex-column-reverse flex-md-row justify-content-center cap-width"> <div class="d-flex flex-column-reverse flex-md-row justify-content-center cap-width">
<div style="flex: 2 0 0;"> <div style="flex: 2 0 0;">
<app-contact></app-contact> <app-contact></app-contact>
</div> </div>
<div> <div class="px-3">
<div class="d-block d-md-none my-4 border-top border-dark" style="height: 1px; width: 100%;"></div> <div class="d-block d-md-none my-5 border-top border-dark" style="height: 1px; width: 100%;"></div>
<div class="d-none d-md-block mx-4 border-end border-dark" style="height: 100%; width: 1px;"></div> <div class="d-none d-md-block mx-4 border-end border-dark" style="height: 100%; width: 1px;"></div>
</div> </div>
<div class="d-flex flex-column text-center text-md-start" style="flex: 1 0 0;"> <div class="d-flex flex-column text-center text-md-start" style="flex: 1 0 0;">
@ -107,7 +107,8 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</section> </section>
<section style="background: #343a40"> <section style="background: #343a40">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d20901.5656209322!2d-94.3342870256971!3d49.0924225740941!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x52bc2793e70efc57%3A0x6f173b50ef0787ba!2sPelican%20Landing!5e0!3m2!1sen!2sca!4v1702654257180!5m2!1sen!2sca" width="100%" height="450px" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe> <iframe title="map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d20901.5656209322!2d-94.3342870256971!3d49.0924225740941!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x52bc2793e70efc57%3A0x6f173b50ef0787ba!2sPelican%20Landing!5e0!3m2!1sen!2sca!4v1702654257180!5m2!1sen!2sca" width="100%" height="450px" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</section> </section>