<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Checkpoint One <filler></title>
</head>
<body>
    <!-- constant use of divs used to separate important sections of the website that'll be maintained throughout the project -->
    <div>
        <h1>Checkpoint one... The Beginning of an adventure!</h1>
    </div>

    <div>
        <!-- Insert a thymeleaf attribute here to layer this image onto a background of the town-->
        <img src="dragonone.png" alt="Image of a Red Dragon">
    </div>

    <div>
        <p> Enter a story about the checkpoint here.....</p>
    </div>

    <div>
        <p> Here goes where the user must go next. Hints, etc. </p>
    </div>

    <div>
        <p> Greyed out image of something that can be dynamically altered upon scanning QR code.</p>
    </div>

    <div>
        <p> Here a total progress bar...</p>
    </div>



</body>
</html>