<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- TODO: Description-->
    <meta name="description" content="">
    <meta name="author" content="Zak Timson">

    <title>LEGIO · XXX</title>

    <link href="img/capricorn.png" rel="icon" type="image/png">
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/index.css" rel="stylesheet">
    <link href="https://use.fontawesome.com/releases/v6.1.1/css/all.css" rel="stylesheet">
    <script src="js/bootstrap.js"></script>
</head>
<body data-bs-spy="scroll" data-bs-target="#navbar">
    <nav id="navbar" class="navbar fixed-top navbar-expand-lg navbar-dark bg-black px-3 border-bottom border-white">
        <div>
            <a class="navbar-brand d-flex align-items-center" href="#">
                <img src="img/capricorn.png" alt="Capricorn" height="45" width="45">
                <div class="px-2">LEGIO · XXX</div>
            </a>
        </div>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <div class="me-auto"></div>
            <ul class="navbar-nav mb-2 mb-lg-0">
                <li class="nav-item">
                    <a class="nav-link" href="#about">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#gallery">Gallery</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#contact">Contact</a>
                </li>
                <li class="nav-item dropdown">
                    <a id="learn" class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">Learn</a>
                    <ul class="dropdown-menu dropdown-menu-dark bg-black border-1 border-white" aria-labelledby="learn">
                        <li><a class="dropdown-item" href="#">Legio XXX</a></li>
                        <li><a class="dropdown-item" href="#">Legion Structure</a></li>
                        <li><a class="dropdown-item" href="#">Legionary Camp</a></li>
                        <li><a class="dropdown-item" href="#">Legion HQ</a></li>
                        <li><a class="dropdown-item" href="#">Equipment</a></li>
                        <li><a class="dropdown-item" href="#">Basic Training</a></li>
                        <li><hr class="dropdown-divider"></li>
                        <li><a class="dropdown-item" href="#">Resources</a></li>
                    </ul>
                </li>
                <li class="nav-item dropdown">
                    <a id="events" class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">Events</a>
                    <ul class="dropdown-menu dropdown-menu-dark bg-black border-1 border-white" aria-labelledby="events">
                        <li><a class="dropdown-item" href="#">Castra Aestiva</a></li>
                        <li><a class="dropdown-item" href="#">Castra Hiberna</a></li>
                        <li><hr class="dropdown-divider"></li>
                        <li><a class="dropdown-item" href="#">Calendar</a></li>
                    </ul>
                </li>
                <li class="nav-item dropdown">
                    <a id="members" class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">Members</a>
                    <ul class="dropdown-menu dropdown-menu-end dropdown-menu-dark bg-black border-1 border-white" aria-labelledby="members">
                        <li><a class="dropdown-item" href="#">Register</a></li>
                        <li><hr class="dropdown-divider"></li>
                        <li><a class="dropdown-item" href="#">Rules</a></li>
                        <li><a class="dropdown-item" href="#">Getting Started</a></li>
                        <li><a class="dropdown-item" href="#">Purchase Kit</a></li>
                        <li><a class="dropdown-item" href="#">Kit Maintinance</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </nav>
    <header>
        <div class="w-100 h-100 d-flex flex-column align-items-center justify-content-center">
            <img src="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="/img/trajan-bust.png" height="auto" width="275px">
                </div>
                <div class="text-center">
                    <h4>Legio XXX Ulpia 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="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="gallery" class="d-flex flex-column align-items-center bg-white" style="height: 100vh">
        <div class="mb-5 py-5"><!-- Spacer --></div>
        <h2>Gallery</h2>
    </section>
    <section class="bg-white">
        <img src="/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>
    <footer class="bg-dark text-center text-white py-2">
        <p class="m-0">
            Copyright &copy; Legio XXX 2022 | All Rights Reserved
            <br>
            Created by <a href="https://zakscode.com">Zak Timson</a>
        </p>
    </footer>
</body>
</htmL>