129 lines
5.6 KiB
HTML
129 lines
5.6 KiB
HTML
<!-- Banner -->
|
|
<header id="banner" style="height: calc(100vh - 64px)">
|
|
<xxx-banner></xxx-banner>
|
|
</header>
|
|
<!-- ABout -->
|
|
<section id="about" class="d-flex flex-column flex-md-row align-items-center justify-content-center" style="height: 100vh">
|
|
<div class="d-none d-md-inline flex-grow-1 text-end" style="flex-basis: 0">
|
|
<img src="/assets/img/trajan.png" alt="Statue of Trajan" height="450px" width="auto">
|
|
</div>
|
|
<div class="flex-grow-0 text-center px-5">
|
|
<div class="text-white">
|
|
<h1>About</h1>
|
|
<h2>Legio XXX - Vlpia Victrix</h2>
|
|
<h3 class="mb-4">(Trajan's Victorious Thirtieth Legion)</h3>
|
|
<p>
|
|
Legio XXX is a North American Roman reenactment group established in 2004.
|
|
<br><br>
|
|
It's members represent a cross between living history enthusiasts and "edu-tainers"
|
|
<br><br>
|
|
that recreate the lives of soldiers found in Trajan's legions during the 1st - 2nd Century AD
|
|
</p>
|
|
</div>
|
|
<a routerLink="/about">More</a>
|
|
</div>
|
|
<div class="flex-md-grow-1" style="flex-basis: 0">
|
|
<img class="mt-5" src="/assets/img/standard.png" alt="Legio XXX Standard" height="250px" width="auto">
|
|
</div>
|
|
</section>
|
|
<!-- Discord -->
|
|
<section class="d-flex" style="background-color: #990000">
|
|
<div class="d-flex flex-grow-1">
|
|
<div class="h-100 w-100" style="background: #7289d9"></div>
|
|
<img class="d-block d-md-none" src="/assets/img/discord.png" style="height: 100px; transform: translateX(-1px);">
|
|
<img class="d-none d-md-block" src="/assets/img/discord.png" style="height: 200px; transform: translateX(-1px);">
|
|
</div>
|
|
<div class="d-flex justify-content-start align-items-center flex-grow-1 p-3">
|
|
<div class="d-block text-center">
|
|
<h1 class="d-block m-0 mb-md-3 transparent-link">
|
|
<a href="https://discord.gg/wW458KYR79" target="_blank">Join us on Discord</a>
|
|
</h1>
|
|
<div class="d-none d-md-inline">
|
|
<p>
|
|
Ask us questions, get involved
|
|
<br><br>
|
|
and celebrate the glory of Rome with us!
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Links -->
|
|
<section id="resources" class="d-flex flex-column flex-md-row align-items-center justify-content-center invert" style="min-height: 50vh; max-height: 100vh; background: url('/assets/img/texture.png') repeat;">
|
|
<div class="py-5 container">
|
|
<div class="d-flex justify-content-around flex-wrap">
|
|
<div class="d-flex p-3 pe-4 rounded-1 bg-light m-3 align-items-center border" style="min-width: 45%; flex: 1 0 0;">
|
|
<div class="pe-3">
|
|
<img src="/assets/img/capricorn.png" alt="Regulations" style="height: 80px; width: auto">
|
|
</div>
|
|
<div>
|
|
<h3 class="mb-1">Legio XXX</h3>
|
|
<p class="m-0">Learn about Legio XXX, who we are & what we do</p>
|
|
<a routerLink="/about">About Us</a> / <a routerLink="/gallery">Gallery</a> / <a routerLink="/" fragment="contact">Contact</a>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex p-3 pe-4 rounded-1 bg-light m-3 align-items-center border" style="min-width: 45%; flex: 1 0 0;">
|
|
<div class="pe-3">
|
|
<img src="/assets/img/event.png" alt="Calendar" style="height: 80px; width: auto">
|
|
</div>
|
|
<div>
|
|
<h3 class="mb-1">Events</h3>
|
|
<p class="m-0">See our upcoming events & learn how you can participate</p>
|
|
<a routerLink="/events/calendar">Calendar</a> / <a routerLink="/events/castra-aestiva">Castra Aestiva</a> / <a routerLink="/events/castra-hiberna">Castra Hiberna</a>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex p-3 pe-4 rounded-1 bg-light m-3 align-items-center border" style="min-width: 45%; flex: 1 0 0;">
|
|
<div class="pe-3">
|
|
<img src="/assets/img/reenact.png" alt="Knight being dubbed" style="height: 80px; width: auto">
|
|
</div>
|
|
<div>
|
|
<h3 class="mb-1">Reenacting</h3>
|
|
<p class="m-0">Learn about re-enacting and how you can get involved</p>
|
|
<a routerLink="/getting-started">Getting Started</a> / <a routerLink="/rules">Rules & Regulations</a> / <a routerLink="/drill">Drill Commands</a>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex p-3 pe-4 rounded-1 bg-light m-3 align-items-center border" style="min-width: 45%; flex: 1 0 0;">
|
|
<div class="pe-3">
|
|
<img src="/assets/img/helmet.png" alt="Roman helmet" style="height: 80px; width: auto">
|
|
</div>
|
|
<div>
|
|
<h3 class="mb-1">Equipment</h3>
|
|
<p class="m-0">Learn how to assemble & maintain your kit</p>
|
|
<a routerLink="/buy">Buy Equipment</a> / <a routerLink="/diy">Build Equipment</a> / <a routerLink="/maintenance">Maintenance</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Recruitment -->
|
|
<section id="recruitment" class="d-flex flex-column flex-md-row align-items-center justify-content-center invert" style="padding: 10rem 0">
|
|
<div class="flex-grow-1 mt-5 mt-md-0 p-5 pb-0 text-center text-md-end" style="flex-basis: 0">
|
|
<img src="/assets/img/recruitment.png" alt="Recruitment poster" style="max-width: min(90%, 400px)">
|
|
</div>
|
|
<div class="d-flex flex-grow-1 justify-content-start align-items-center" style="flex-basis: 0">
|
|
<div class="d-block text-center">
|
|
<h2 class="my-3">Enlist Today!</h2>
|
|
<p>
|
|
Interested in any <a routerLink="/events/calendar">events</a>?
|
|
<br><br>
|
|
Legio XXX is looking for new recruits.
|
|
<br><br>
|
|
Check out the <a routerLink="/getting-started">Getting Started</a> page to learn more.
|
|
<br><br>
|
|
Family participation is welcome!
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Page Break-->
|
|
<section style="background: #fff">
|
|
<div style="height: 300px; background: 0 url('/assets/img/formation.png') repeat-x; background-size: auto 300px;"></div>
|
|
</section>
|
|
<!-- Contact -->
|
|
<section id="contact" class="d-flex flex-column align-items-center justify-content-center" style="padding: 10rem 0">
|
|
<div class="container">
|
|
<h2 class="text-center mb-5">Contact</h2>
|
|
<app-contact></app-contact>
|
|
</div>
|
|
</section>
|