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 {MatButtonModule} from '@angular/material/button';
import {MatCheckboxModule} from '@angular/material/checkbox';
import {MatDividerModule} from '@angular/material/divider';
import {MatFormFieldModule} from '@angular/material/form-field';
import {MatIconModule} from '@angular/material/icon';
import {MatInputModule} from '@angular/material/input';
import {MatMenuModule} from '@angular/material/menu';
import {MatSelectModule} from '@angular/material/select';
import {MatToolbarModule} from '@angular/material/toolbar';
export const MATERIAL_MODULES = [
MatButtonModule,
MatCheckboxModule,
MatDividerModule,
MatIconModule,
MatInputModule,
MatFormFieldModule,
MatMenuModule,
MatSelectModule,
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)">
</section>
<!-- Contact -->
<section id="contact" class="d-flex flex-column align-items-center py-5 bg-black text-white" style="min-height: 100vh">
<div class="mb-5 py-5"><!-- Spacer --></div>
<h2>Contact</h2>
<div class="w-100 px-5" style="max-width: 600px">
<form class="text-start">
<div class="mb-3">
<label class="text-white w-100" for="email">Email</label>
<input id="email" class="form-control w-100.0" type="email" placeholder="username@example.com">
<section id="contact" class="d-flex flex-column align-items-center justify-content-center fill">
<div style="width: 80%; max-width: 600px;">
<h2 class="text-center">Contact</h2>
<form>
<div>
<mat-form-field appearance="fill" class="w-100">
<mat-label>Email</mat-label>
<input matInput>
</mat-form-field>
</div>
<div class="mb-3">
<label class="text-white w-100" for="subject">Subject</label>
<select id="subject" class="form-control w-100.0">
<option>Castra Aestiva/Castra Hiberna</option>
<option>Re-enactment Inqueries</option>
<option>Other</option>
</select>
<div>
<mat-form-field appearance="fill" class="w-100">
<mat-label>Subject</mat-label>
<mat-select>
<mat-option value="one">Castra Events</mat-option>
<mat-option value="two">Reenacting</mat-option>
<mat-option value="two">Other</mat-option>
</mat-select>
</mat-form-field>
</div>
<div class="mb-3">
<label class="text-white w-100" for="message">Message</label>
<textarea id="message" class="form-control w-100" rows="5"></textarea>
<div>
<mat-form-field appearance="fill" class="w-100">
<mat-label>Message</mat-label>
<textarea matInput rows="8"></textarea>
</mat-form-field>
</div>
<div class="d-flex justify-content-between align-items-center">
<div class="d-inline">
<input type="checkbox" class="form-check-input" id="copy">
<label class="form-check-label" for="copy">Send me a copy</label>
<div>
<mat-checkbox color="primary">Send me a copy</mat-checkbox>
</div>
<div>
<button mat-raised-button color="primary">Send</button>
</div>
<button class="btn btn-primary">Send</button>
</div>
</form>
</div>