homePage.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
 <link rel="stylesheet" th:href="@{/css/templatingstyle.css}">


    <style>
        #homeTitle{
            grid-area: pageTitle;
        }
        .submitLand{
            grid-area: submitButton;
        }
        .caerphillyBanner , .riscaBanner,.penarthBanner{
            margin-top: 20px;

            background-color: hotpink;
            margin-bottom: 20px;
            border: solid 2px black;
            border-right: none;
        }
        .caerphillyBannerTrail,.riscaBannerTrail,.penarthBannerTrail{
            background-color: hotpink;
            margin-top: 20px;
            /*display: flex;*/
            /*flex-direction: column;*/
            margin-bottom: 20px;
            border: solid 2px black;
            border-left: none;
            /*align-self: stretch*/
        }

        .caerphillyBanner{
        /*    #caerUrl{*/
            grid-area:townBannerC;
            background-image: url('/CaerphillyCastle.jpg');
            background-size: 800px 200px;
            background-repeat: no-repeat;
            background-position: left 35%;
            background-image: url('CaerphillyCastle.jpg');
            filter: grayscale(30%);
        }
        /*body{*/
        /*    background-image: url('CaerphillyCastle.jpg');*/
        /*}*/
        .caerphillyBannerTrail{
            grid-area:townBannerDetsC;
            /*linear-gradient(90 deg,white,red);*/
        }
        .riscaBanner{
            grid-area:townBannerR;
        }
        .riscaBannerTrail{
            grid-area:townBannerDetsR;
        }
        .penarthBanner{
            grid-area:townBannerP;
        }
        .penarthBannerTrail{
            grid-area:townBannerDetsP;
        }
        #aboutUsFlavour{
            grid-area: textFlavour;
            margin-top: 25px;
            margin-bottom: 15px;
        }
        #trailCountCaer,#trailCountRisca,#trailCountPenarth{
            flex:1;


            /*align-items: center;*/
            /*justify-content: center;*/

        }
        #trailProgressCaer,#trailProgressRisca,#trailProgressPenarth{
            flex:2;
            align-content: center;

        }


        .gridContainer1{
            display:grid;
            grid-template-columns: 10% 10% 60% 5% 5% 10%;
            grid-template-rows: auto;
            grid-template-areas:
            ". pageTitle pageTitle pageTitle pageTitle ."
            ". . . submitButton submitButton ."
            ". townBannerC townBannerC townBannerDetsC . ."
            ". townBannerR townBannerR townBannerDetsR . ."
            ". townBannerP townBannerP townBannerDetsP . ."
            " . . textFlavour . . .";
        }


        /*.gridContainer2{*/
        /*    display:grid;*/
        /*    grid-template-columns: 10% 75% 15%;*/
        /*    grid-template-rows: auto;*/
        /*    grid-template-areas:*/
        /*    ". townBanner ."*/
        /*}*/
#caerUrl{
    display: block;
    height:40px;
    width: 460px;
    margin:0px;
    padding:0px;
    color: inherit;
    text-decoration: none;
}
    </style>
</head>
<body>
<!--<header th:insert="~{../Templating.html::header}"></header>-->
<main>
<div class="gridContainer1">
    <H1 id="homeTitle"> VZTA Smart Towns - Trails</H1>
    <button class="submitLand"> Submit Landmark!</button>


<!--    <a href="/Caerphilly" id="caerUrl" > -->
        <div class="caerphillyBanner">

            <H2> Caerphilly</H2>
<!--            <a href="/Caerphilly" id="caerUrl" ><H2> Caerphilly</H2></a>-->
<!--            <a href="homePage.html" id="caerUrl"></a>-->
        </div>
<!--    </a>-->

    <div class="caerphillyBannerTrail">
        <div id="trailCountCaer"> Trails: 3</div>
        <div id="trailProgressCaer"> 70%</div>
    </div>

    <div class="riscaBanner">
        <H2> Risca</H2>
    </div>
    <div class="riscaBannerTrail">
        <div id="trailCountRisca"> Trails: 2</div>
        <div id="trailProgressRisca"> 0%</div>
    </div>

    <div class="penarthBanner">
        <H2> Penarth</H2>
    </div>
    <div class="penarthBannerTrail">
        <div id="trailCountPenarth"> Trails: 5</div>
        <div id="trailProgressPenarth"> 60%</div>
    </div>

    <div id="aboutUsFlavour"> This is placeholder text about VZTA, this application,
    the trails and towns and resultant awards written in an excitable manner!!</div>

</div>


</main>
<!--<footer th:insert="~{../Templating::footer}"></footer>-->

</body>
</html>