homePage.html

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


    <style>
        body{
        background-color: rgb(41, 41, 41)
        }
        #homeTitle{
            grid-area: pageTitle;
            color: whitesmoke;
        }
        .submitLand{
            grid-area: submitButton;
        }
        .caerphillyBanner , .riscaBanner,.penarthBanner{
            margin-top: 20px;

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

        .penarthBannerTrail{
            background-image: linear-gradient(to right, darkslategrey , darkgoldenrod 40%);

        }

        .caerphillyBannerTrail{
            margin-top: 20px;
            margin-bottom: 20px;
            border: solid 2px whitesmoke;
            border-left: none;
            background-image: linear-gradient(to right, darkslategrey , darkgoldenrod 30%);
        /*    30% left so that's where it turns grey*/

        }

        .caerphillyBanner{
        /*    #caerUrl{*/
            grid-area:townBannerC;
            background-image: url('/images/CaerphillyCastle.jpg');
        /*// from cadw*/
            background-size: 850px 200px;
            background-repeat: no-repeat;
            background-position: left 35%;
            color: inherit;
            text-decoration: none;

            /*filter: grayscale(30%);*/
        }

        /*!*https://www.stayinwales.co.uk/wales_picture.cfm?p=4454*! Risca img*/

        .riscaBanner {
            /*    #caerUrl{*/
            grid-area: townBannerR;
            background-image: url('/images/RiscaBanner.jpg');
            background-size: 850px 200px;
            background-repeat: no-repeat;
            background-position: left 65%;
            color: inherit;
            text-decoration: none;
        }

        .penarthBanner {
            /*    #caerUrl{*/
            grid-area: townBannerP;
            background-image: url('/images/PenarthBanner.jpg');
            background-size: 850px 200px;
            background-repeat: no-repeat;
            background-position: left 78%;
            color: inherit;
            text-decoration: none;
        }


        /*body{*/
        /*    background-image: url('CaerphillyCastle.jpg');*/
        /*}*/
        .caerphillyBannerTrail{
            grid-area:townBannerDetsC;

            /*linear-gradient(90 deg,white,red);*/
        }
        /*.caerphillyBanner,.caerphillyBannerTrail{*/
        /*    background-image: linear-gradient(to right, red , green);*/
        /*    display: flex*/
        /*}*/
        .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;
            color: whitesmoke;
        }
        #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="~{/towns/Templating.html::header}"></header>
<main>
<div class="gridContainer1">
    <H1 id="homeTitle"> VZTA Smart Towns - Trails</H1>
    <a class="submitLand" href="/landmarkSubmission">  <button> Submit Landmark!</button></a>
<!--    <button class="submitLand"> Submit Landmark!</button>-->


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

<!--            <H2> Caerphilly</H2>-->
            <a href="/Caerphilly" class="caerphillyBanner">
                <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="~{/towns/Templating.html::footer}"></footer>

</body>
</html>