additional mock-banners to Risca and Penarth added. layout modified accordingly

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>