diff --git a/src/main/resources/templates/towns/home/homePage.html b/src/main/resources/templates/towns/home/homePage.html index 96c1e91bbeb2a2dac1a3368d909e19e050af94f3..34e1bcb024d294e2732446d9a87d6efd7b794ab0 100644 --- a/src/main/resources/templates/towns/home/homePage.html +++ b/src/main/resources/templates/towns/home/homePage.html @@ -13,40 +13,68 @@ .submitLand{ grid-area: submitButton; } - .caerphillyBanner{ + .caerphillyBanner , .riscaBanner,.penarthBanner{ margin-top: 20px; - grid-area:townBanner; + background-color: hotpink; margin-bottom: 20px; border: solid 2px black; border-right: none; } - .caerphillyBannerTrail{ + .caerphillyBannerTrail,.riscaBannerTrail,.penarthBannerTrail{ background-color: hotpink; margin-top: 20px; - grid-area:townBannerDets; - display: flex; - flex-direction: column; + /*display: flex;*/ + /*flex-direction: column;*/ margin-bottom: 20px; border: solid 2px black; border-left: none; + /*align-self: stretch*/ + } + + .caerphillyBanner{ + grid-area:townBannerC; + } + .caerphillyBannerTrail{ + grid-area:townBannerDetsC; + } + .riscaBanner{ + grid-area:townBannerR; } - #trailCount{ + .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; } - #trailProgress{ + #trailProgressCaer,#trailProgressRisca,#trailProgressPenarth{ flex:2; } + .gridContainer1{ display:grid; - grid-template-columns: 10% 70% 5% 5% 10%; + grid-template-columns: 10% 10% 60% 5% 5% 10%; grid-template-rows: auto; grid-template-areas: - ". pageTitle pageTitle pageTitle ." - ". . submitButton submitButton ." - ". townBanner townBannerDets . ."; + ". pageTitle pageTitle pageTitle pageTitle ." + ". . . submitButton submitButton ." + ". townBannerC townBannerC townBannerDetsC . ." + ". townBannerR townBannerR townBannerDetsR . ." + ". townBannerP townBannerP townBannerDetsP . ." + " . . textFlavour . . ."; } @@ -73,12 +101,28 @@ </div> <div class="caerphillyBannerTrail"> - <div id="trailCount"> Trails: 3</div> - <div id="trailProgress"> 55%</div> + <div id="trailCountCaer"> Trails: 3</div> + <div id="trailProgressCaer"> 55%</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>