87 lines
3.5 KiB
HTML
87 lines
3.5 KiB
HTML
<header class="fill">
|
|
<div class="fill d-flex flex-column align-items-center justify-content-center">
|
|
<img src="/assets/img/spqr.png" class="mt-5" alt="SPQR" height="250" width="250" style="filter: drop-shadow(2px 4px 6px black);">
|
|
<div>
|
|
<a href="#about" class="text-white">
|
|
<i class="fa fa-angle-double-down fa-4x" style="filter: drop-shadow(2px 4px 6px black);"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<section id="about" class="d-flex flex-column align-items-center bg-black text-white" style="height: 100vh">
|
|
<div class="mb-5 py-5"><!-- Spacer --></div>
|
|
<h2>About</h2>
|
|
<div class="container">
|
|
<div class="d-flex align-items-center justify-content-around">
|
|
<div class="">
|
|
<img src="/assets/img/trajan-bust.png" height="auto" width="275px">
|
|
</div>
|
|
<div class="text-center">
|
|
<h4>Legio XXX Vlpia Victrix</h4>
|
|
<h4 class="mb-4">(Trajan's Victorious Thirtieth Legion)</h4>
|
|
<p>Legio XXX is a North American Roman re-enactment group that has been active since 2004.</p>
|
|
<p>It's members represent a cross between living history enthusiasts and edutainers</p>
|
|
<p>recreating the lives of LEGIO XXX, founded by emperor Trajan in the 2nd centery AD.</p>
|
|
</div>
|
|
<div class="ps-4">
|
|
<div class="p-1 text-center" style="border: solid 5px white;">
|
|
<div class="p-1" style="border: dashed 5px white;">
|
|
<div class="p-3" style="border: solid 5px white;">
|
|
<h3 class="text-nowrap" style="font-size: 2em">LEGIO · XXX</h3>
|
|
<img src="/assets/img/capricorn.png" class="my-3" alt="capricorn" height="140em" width="140em">
|
|
<h4 class="text-nowrap" style="font-size: 1.5em">VLPIA · VICTRIX</h4>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section id="recruitment" class="d-flex flex-column align-items-center" style="height: 100vh; background: #fff; color: #000;">
|
|
<div class="mb-5 py-5"><!-- Spacer --></div>
|
|
<div class="d-flex align-items-center justify-content-center">
|
|
<div>
|
|
<img src="/assets/img/recruitment.png" height="50%" width="auto">
|
|
</div>
|
|
<div class="ms-5 text-center">
|
|
<h2>Enlist Today!</h2>
|
|
<p>Legio XXX is looking for new recruits.</p>
|
|
<p>Check out the <a>Getting Started</a> page to learn more.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section style="background: #fff">
|
|
<img src="/assets/img/formation.png" width="100%" height="auto">
|
|
</section>
|
|
<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">
|
|
</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>
|
|
<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>
|
|
<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>
|
|
<button class="btn btn-primary">Send</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</section>
|