Updates
This commit is contained in:
0
src/app/components/banner/banner.component.html
Normal file
0
src/app/components/banner/banner.component.html
Normal file
0
src/app/components/banner/banner.component.ts
Normal file
0
src/app/components/banner/banner.component.ts
Normal file
51
src/app/components/footer/footer.component.html
Normal file
51
src/app/components/footer/footer.component.html
Normal file
@ -0,0 +1,51 @@
|
||||
<footer>
|
||||
<div class="p-2" style="background: #333">
|
||||
<div class="mx-auto d-flex justify-content-around" style="max-width: 800px">
|
||||
<div>
|
||||
<h2 class="sitemap-header">Home</h2>
|
||||
<ul class="m-0">
|
||||
<li><a routerLink="/">About</a></li>
|
||||
<li><a routerLink="/">Gallery</a></li>
|
||||
<li><a routerLink="/">Contact</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="sitemap-header">Learn</h2>
|
||||
<ul class="m-0">
|
||||
<li><a routerLink="/">Legio XXX</a></li>
|
||||
<li><a routerLink="/">Legion Structure</a></li>
|
||||
<li><a routerLink="/">Legion Camp</a></li>
|
||||
<li><a routerLink="/">Legion Headquarters</a></li>
|
||||
<li><a routerLink="/">Legionairy Equipment</a></li>
|
||||
<li><a routerLink="/">Legionairy Training</a></li>
|
||||
<li><a routerLink="/">Resources</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="sitemap-header">Events</h2>
|
||||
<ul class="m-0">
|
||||
<li><a routerLink="/">Castra Aestiva</a></li>
|
||||
<li><a routerLink="/">Castra Hiberna</a></li>
|
||||
<li><a routerLink="/">Callendar</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="sitemap-header">Members</h2>
|
||||
<ul class="m-0">
|
||||
<li><a routerLink="/">Getting Started</a></li>
|
||||
<li><a routerLink="/">Rules & Regulations</a></li>
|
||||
<li><a routerLink="/">Approved Vendors</a></li>
|
||||
<li><a routerLink="/">Kit Assembly</a></li>
|
||||
<li><a routerLink="/">Kit Maintinance</a></li>
|
||||
<li><a routerLink="/">Login/Register</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="py-2 text-center">
|
||||
<p class="m-0">
|
||||
Copyright © Legio XXX 2022 | All Rights Reserved<br>
|
||||
Created by <a href="https://zakscode.com" target="_blank">Zak Timson</a>
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
16
src/app/components/footer/footer.component.scss
Normal file
16
src/app/components/footer/footer.component.scss
Normal file
@ -0,0 +1,16 @@
|
||||
.sitemap-header {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: rgba(255, 255, 255, 0.55);
|
||||
}
|
||||
a:visited:hover, a:hover { color: rgba(255, 255, 255, 0.75); }
|
||||
a:visited { color: rgba(255, 255, 255, 0.55); }
|
||||
}
|
8
src/app/components/footer/footer.component.ts
Normal file
8
src/app/components/footer/footer.component.ts
Normal file
@ -0,0 +1,8 @@
|
||||
import {Component} from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'xxx-footer',
|
||||
templateUrl: './footer.component.html',
|
||||
styleUrls: ['./footer.component.scss']
|
||||
})
|
||||
export class FooterComponent { }
|
55
src/app/components/navbar/navbar.component.html
Normal file
55
src/app/components/navbar/navbar.component.html
Normal file
@ -0,0 +1,55 @@
|
||||
<mat-toolbar>
|
||||
<mat-toolbar-row>
|
||||
<div>
|
||||
<a class="navbar-brand d-flex align-items-center" href="#">
|
||||
<img src="assets/img/capricorn.png" alt="Capricorn" height="45" width="45">
|
||||
<div class="px-2">LEGIO · XXX</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex-grow-1"></div>
|
||||
<div *ngIf="!hamburger">
|
||||
<a href="#about"><button mat-button class="navbar-button">About</button></a>
|
||||
<a href="#gallery"><button mat-button class="navbar-button">Gallery</button></a>
|
||||
<a href="#contact"><button mat-button class="navbar-button">Contact</button></a>
|
||||
<button mat-button [matMenuTriggerFor]="learnMenu" class="navbar-button">
|
||||
Learn <mat-icon>expand_more</mat-icon>
|
||||
</button>
|
||||
<mat-menu #learnMenu="matMenu">
|
||||
<button mat-menu-item>Legio XXX</button>
|
||||
<button mat-menu-item>Legion Structure</button>
|
||||
<button mat-menu-item>Legion Camp</button>
|
||||
<button mat-menu-item>Legion Headquarters</button>
|
||||
<button mat-menu-item>Legionary Equipment</button>
|
||||
<button mat-menu-item>Legionairy Training</button>
|
||||
<mat-divider></mat-divider>
|
||||
<button mat-menu-item>Resources</button>
|
||||
</mat-menu>
|
||||
<button mat-button [matMenuTriggerFor]="eventsMenu" class="navbar-button">
|
||||
Events <mat-icon>expand_more</mat-icon>
|
||||
</button>
|
||||
<mat-menu #eventsMenu="matMenu">
|
||||
<button mat-menu-item>Castra Aestiva</button>
|
||||
<button mat-menu-item>Castra Hiberna</button>
|
||||
<mat-divider></mat-divider>
|
||||
<button mat-menu-item>Calendar</button>
|
||||
</mat-menu>
|
||||
<button mat-button [matMenuTriggerFor]="membersMenu" class="navbar-button">
|
||||
Members <mat-icon>expand_more</mat-icon>
|
||||
</button>
|
||||
<mat-menu #membersMenu="matMenu">
|
||||
<button mat-menu-item>Getting Started</button>
|
||||
<mat-divider></mat-divider>
|
||||
<button mat-menu-item>Rules & Regulations</button>
|
||||
<button mat-menu-item>Approved Vendors</button>
|
||||
<button mat-menu-item>Kit Assembly</button>
|
||||
<button mat-menu-item>Kit Maintinance</button>
|
||||
<mat-divider></mat-divider>
|
||||
<button mat-menu-item>Login/Register</button>
|
||||
</mat-menu>
|
||||
</div>
|
||||
<button *ngIf="hamburger" mat-icon-button class="mr-3">
|
||||
<mat-icon (click)="hamburgerClick.emit()">menu</mat-icon>
|
||||
</button>
|
||||
</mat-toolbar-row>
|
||||
</mat-toolbar>
|
||||
<div class="navbar-spacing"><!-- Spacing --></div>
|
55
src/app/components/navbar/navbar.component.scss
Normal file
55
src/app/components/navbar/navbar.component.scss
Normal file
@ -0,0 +1,55 @@
|
||||
.navbar-spacing {
|
||||
height: 64px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
::ng-deep mat-toolbar {
|
||||
background: #000 !important;
|
||||
border-bottom: #fff solid 1px;
|
||||
height: 64px;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
|
||||
.mat-toolbar-row {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
font-weight: lighter;
|
||||
}
|
||||
|
||||
.navbar-button {
|
||||
color: rgba(255, 255, 255, 0.55);
|
||||
font-weight: normal;
|
||||
padding: 0 8px 0 8px;
|
||||
|
||||
&:hover {
|
||||
color: rgba(255, 255, 255, 0.75);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::ng-deep .mat-menu-content {
|
||||
background: #000;
|
||||
border: #fff solid 1px;
|
||||
padding: 0 !important;
|
||||
border-radius: 0.25rem;
|
||||
|
||||
mat-divider {
|
||||
border-color: white;
|
||||
margin-top: 0.2rem;
|
||||
padding-bottom: 0.1rem;
|
||||
}
|
||||
|
||||
button {
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
|
||||
&:hover {
|
||||
background: rgba(255, 255, 255, 0.15) !important;
|
||||
}
|
||||
}
|
||||
}
|
12
src/app/components/navbar/navbar.component.ts
Normal file
12
src/app/components/navbar/navbar.component.ts
Normal file
@ -0,0 +1,12 @@
|
||||
import {Component, EventEmitter, Input, Output} from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'xxx-navbar',
|
||||
templateUrl: './navbar.component.html',
|
||||
styleUrls: ['./navbar.component.scss']
|
||||
})
|
||||
export class NavbarComponent {
|
||||
@Input() hamburger = true;
|
||||
|
||||
@Output() hamburgerClick = new EventEmitter<void>();
|
||||
}
|
Reference in New Issue
Block a user