ztimson/legio-30
ztimson/legio-30
1
0
Fork 0
Code Issues Pull Requests Actions Packages Releases Activity

Updated contact form

Browse Source
This commit is contained in:
Zakary Timson 2022-09-24 18:14:27 -04:00
parent 6b6765891b
commit 5c6f40b6ca
2 changed files with 36 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/app/material.module.ts
View File

@ -1,15 +1,23 @@
import {NgModule} from '@angular/core'; import {NgModule} from '@angular/core';
import {MatButtonModule} from '@angular/material/button'; import {MatButtonModule} from '@angular/material/button';
import {MatCheckboxModule} from '@angular/material/checkbox';
import {MatDividerModule} from '@angular/material/divider'; import {MatDividerModule} from '@angular/material/divider';
import {MatFormFieldModule} from '@angular/material/form-field';
import {MatIconModule} from '@angular/material/icon'; import {MatIconModule} from '@angular/material/icon';
import {MatInputModule} from '@angular/material/input';
import {MatMenuModule} from '@angular/material/menu'; import {MatMenuModule} from '@angular/material/menu';
import {MatSelectModule} from '@angular/material/select';
import {MatToolbarModule} from '@angular/material/toolbar'; import {MatToolbarModule} from '@angular/material/toolbar';
export const MATERIAL_MODULES = [ export const MATERIAL_MODULES = [
MatButtonModule, MatButtonModule,
MatCheckboxModule,
MatDividerModule, MatDividerModule,
MatIconModule, MatIconModule,
MatInputModule,
MatFormFieldModule,
MatMenuModule, MatMenuModule,
MatSelectModule,
MatToolbarModule MatToolbarModule
]; ];

50
src/app/views/home/home.component.html
View File

@ -70,33 +70,39 @@
<img src="/assets/img/formation.png" alt="Legion formation" width="100%" height="auto" style="transform: translateY(10px)"> <img src="/assets/img/formation.png" alt="Legion formation" width="100%" height="auto" style="transform: translateY(10px)">
</section> </section>
<!-- Contact --> <!-- Contact -->
<section id="contact" class="d-flex flex-column align-items-center py-5 bg-black text-white" style="min-height: 100vh"> <section id="contact" class="d-flex flex-column align-items-center justify-content-center fill">
<div class="mb-5 py-5"><!-- Spacer --></div> <div style="width: 80%; max-width: 600px;">
<h2>Contact</h2> <h2 class="text-center">Contact</h2>
<div class="w-100 px-5" style="max-width: 600px"> <form>
<form class="text-start"> <div>
<div class="mb-3"> <mat-form-field appearance="fill" class="w-100">
<label class="text-white w-100" for="email">Email</label> <mat-label>Email</mat-label>
<input id="email" class="form-control w-100.0" type="email" placeholder="username@example.com"> <input matInput>
</mat-form-field>
</div> </div>
<div class="mb-3"> <div>
<label class="text-white w-100" for="subject">Subject</label> <mat-form-field appearance="fill" class="w-100">
<select id="subject" class="form-control w-100.0"> <mat-label>Subject</mat-label>
<option>Castra Aestiva/Castra Hiberna</option> <mat-select>
<option>Re-enactment Inqueries</option> <mat-option value="one">Castra Events</mat-option>
<option>Other</option> <mat-option value="two">Reenacting</mat-option>
</select> <mat-option value="two">Other</mat-option>
</mat-select>
</mat-form-field>
</div> </div>
<div class="mb-3"> <div>
<label class="text-white w-100" for="message">Message</label> <mat-form-field appearance="fill" class="w-100">
<textarea id="message" class="form-control w-100" rows="5"></textarea> <mat-label>Message</mat-label>
<textarea matInput rows="8"></textarea>
</mat-form-field>
</div> </div>
<div class="d-flex justify-content-between align-items-center"> <div class="d-flex justify-content-between align-items-center">
<div class="d-inline"> <div>
<input type="checkbox" class="form-check-input" id="copy"> <mat-checkbox color="primary">Send me a copy</mat-checkbox>
<label class="form-check-label" for="copy">Send me a copy</label> </div>
<div>
<button mat-raised-button color="primary">Send</button>
</div> </div>
<button class="btn btn-primary">Send</button>
</div> </div>
</form> </form>
</div> </div>