<header th:fragment="header" class="headerBlock">
    <h1 class="headerTitle">SMART-TOWNS</h1>
    <div class="headerBanner">
        <img src="images/trails.jpg" alt="Trails" class="bannerBack">
<!--        <div class="bannerText">-->
            <h1 class="bigTitle">Smart Town Trails</h1>
            <h2 class="smallTitle">Information about trails for your town</h2>
<!--        </div>-->
    </div>
</header>
<footer th:fragment="footer">
    <ul class="footerBar">
        <li class="footerButton">Home</li>
        <li class="footerButton">About</li>
        <li class="footerButton">Map</li>
        <li class="footerButton">Facilities</li>
        <li class="footerButton">Search</li>
    </ul>
</footer>

<article class="trailInfo" th:fragment="trailInfo2">
    <h1 class="titleH1" th:text="${trail.name}">Trail Info</h1>
</article>