src/main/java/Team5/SmartTowns/Towns/TownController.java

+package Team5.SmartTowns.Towns;
+
+import org.springframework.stereotype.Controller;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.servlet.ModelAndView;
+
+import java.util.List;
+
+@Controller
+public class TownController {
+
+    @GetMapping("/home")
+    public ModelAndView getTownList(){
+        ModelAndView modelAndView = new ModelAndView("Towns/home/homePage");
+        TownStorage townsCurrent= new TownStorage().getInstance();
+        List<Towns> towns = townsCurrent.getTownList();
+        modelAndView.addObject("towns",towns);
+        return modelAndView;
+
+    }
+}

src/main/java/Team5/SmartTowns/Towns/TownStorage.java

+package Team5.SmartTowns.Towns;
+
+import java.util.ArrayList;
+import java.util.List;
+
+public class TownStorage {
+    private List<Towns> townList;
+    private static TownStorage singleton;
+
+    TownStorage() {
+        townList = new ArrayList<>();
+        townList.addAll(
+          List.of(
+                  new Towns("Caerphilly",01,3,70,"/images/CaerphillyCastle.jpg"),
+                  new Towns("Risca",02,2,34,"/images/RiscaBanner.jpg"),
+                  new Towns("Penarth",03,5,0,"/images/PenarthBanner.jpg"),
+                  new Towns("Penarth",03,5,50,"/images/PenarthBanner.jpg"),
+                  new Towns("Caerphilly",01,3,70,"/images/CaerphillyCastle.jpg"),
+                  new Towns("Risca",02,2,90,"/images/RiscaBanner.jpg"),
+                  new Towns("Penarth",03,5,100,"/images/PenarthBanner.jpg")
+
+
+
+          )
+
+        );
+
+    }
+    public static TownStorage getInstance() {
+        if (singleton == null) {
+            singleton = new TownStorage();
+
+        }
+        return singleton;
+    }
+
+    public List<Towns> getTownList() {
+        return townList;
+    }
+
+
+
+
+}

src/main/java/Team5/SmartTowns/Towns/Towns.java

+package Team5.SmartTowns.Towns;
+
+import lombok.Data;
+
+@Data
+public class Towns {
+    private String name;
+    private Integer id;
+    private int trailNumber;
+    private int trailProgress;
+
+    private String imageTown;
+
+
+    public String getName() {
+        return name;
+    }
+
+    public void setName(String name) {
+        this.name = name;
+    }
+
+    public Integer getId() {
+        return id;
+    }
+
+    public void setId(Integer id) {
+        this.id = id;
+    }
+
+    public int getTrailNumber() {
+        return trailNumber;
+    }
+
+    public void setTrailNumber(int trailNumber) {
+        this.trailNumber = trailNumber;
+    }
+
+    public int getTrailProgress() {
+        return trailProgress;
+    }
+
+    public void setTrailProgress(int trailProgress) {
+        this.trailProgress = trailProgress;
+    }
+
+    public String getImageTown() {
+        return imageTown;
+    }
+
+    public void setImageTown(String imageTown) {
+        this.imageTown = imageTown;
+    }
+
+    public Towns(String name, Integer id, int trailNumber, int trailProgress, String imageTown) {
+        this.name = name;
+        this.id = id;
+        this.trailNumber = trailNumber;
+        this.trailProgress = trailProgress;
+        this.imageTown = imageTown;
+    }
+}

src/main/java/Team5/SmartTowns/Webpages/WebpageController.java

@@ -11,27 +11,28 @@ import org.springframework.stereotype.Controller;
 public class WebpageController {
     @GetMapping("/Caerleon")
     public ModelAndView getCaerleonPage(){
-        ModelAndView modelAndView = new ModelAndView("towns/caerleon");
+        ModelAndView modelAndView = new ModelAndView("Towns/caerleon");
         return modelAndView;
     }
 
     @GetMapping("/Caerphilly")
     public ModelAndView getCaerphillyPage(){
-        ModelAndView modelAndView = new ModelAndView("towns/caerphilly");
+        ModelAndView modelAndView = new ModelAndView("Towns/caerphilly");
         return modelAndView;
     }
 
     @GetMapping("/Risca")
     public ModelAndView getRiscaPage(){
-        ModelAndView modelAndView = new ModelAndView("towns/risca");
+        ModelAndView modelAndView = new ModelAndView("Towns/risca");
         return modelAndView;
     }
 
-    @GetMapping("/home")
-    public ModelAndView getHome(){
-        ModelAndView modelAndView = new ModelAndView("towns/home/homePage");
-        return modelAndView;
-    }
+//    @GetMapping("/home")
+//    public ModelAndView getHome(){
+//        ModelAndView modelAndView = new ModelAndView("Towns/home/homePage");
+//        return modelAndView;
+//    }
+
 
     @RequestMapping(value="/test_ajax_frag", method=RequestMethod.POST)
     public String sendHtmlFragment(Model map) {

src/main/resources/data.sql

@@ -3,32 +3,32 @@ insert into users (userID, Name) value ('1', 'Hannah');
 insert into users (userID, Name) value ('2', 'Nigel');
 
 delete from trails;
-insert into trails (trailID, Name) value ('1', 'Caerphilly Coffee Trail');
-insert into trails (trailID, Name) value ('2', 'Penarth Dragon Trail');
+insert into trails ( Name) value ( 'Caerphilly Coffee Trail');
+insert into trails ( Name) value ( 'Penarth Dragon Trail');
 
 delete from locations;
-insert into locations (locationID, locationName , locationEmail,locationDescription,locationPlace, locationTrailID) value (1, 'St Cenydd','','Location description here','Caerphilly',0101);
-insert into locations (locationID, locationName , locationEmail,locationDescription,locationPlace, locationTrailID) value (2, 'The Castle','','Location description here','Caerphilly',0101);
-insert into locations (locationID, locationName , locationEmail,locationDescription,locationPlace, locationTrailID) value (3, 'Medieval Trades','','Location description here','Caerphilly',0101);
-insert into locations (locationID, locationName , locationEmail,locationDescription,locationPlace, locationTrailID) value (4, 'The Queen''s War','','Location description here','Caerphilly',0101);
-insert into locations (locationID, locationName , locationEmail,locationDescription,locationPlace, locationTrailID) value (5, 'The Green Lady','','Location description here','Caerphilly',0101);
-insert into locations (locationID, locationName , locationEmail,locationDescription,locationPlace, locationTrailID) value (6, 'Armoury','','Location description here','Caerphilly',0101);
-insert into locations (locationID, locationName , locationEmail,locationDescription,locationPlace, locationTrailID) value (7, 'Architecture','','Location description here','Caerphilly',0101);
-insert into locations (locationID, locationName , locationEmail,locationDescription,locationPlace, locationTrailID) value (8, '21st Century Landmark','','Location description here','Caerphilly',0101);
+insert into locations ( locationName , locationEmail,locationDescription,locationPlace, locationTrailID) value ( 'St Cenydd','','Location description here','Caerphilly',0101);
+insert into locations ( locationName , locationEmail,locationDescription,locationPlace, locationTrailID) value ( 'The Castle','','Location description here','Caerphilly',0101);
+insert into locations ( locationName , locationEmail,locationDescription,locationPlace, locationTrailID) value ( 'Medieval Trades','','Location description here','Caerphilly',0101);
+insert into locations ( locationName , locationEmail,locationDescription,locationPlace, locationTrailID) value ( 'The Queen''s War','','Location description here','Caerphilly',0101);
+insert into locations ( locationName , locationEmail,locationDescription,locationPlace, locationTrailID) value ( 'The Green Lady','','Location description here','Caerphilly',0101);
+insert into locations ( locationName , locationEmail,locationDescription,locationPlace, locationTrailID) value ( 'Armoury','','Location description here','Caerphilly',0101);
+insert into locations ( locationName , locationEmail,locationDescription,locationPlace, locationTrailID) value ( 'Architecture','','Location description here','Caerphilly',0101);
+insert into locations ( locationName , locationEmail,locationDescription,locationPlace, locationTrailID) value ( '21st Century Landmark','','Location description here','Caerphilly',0101);
 
-insert into locations (locationID, locationName , locationEmail,locationDescription,locationPlace, locationTrailID) value (9, 'JD Wetherspoons-Malcolm Uphill','','Location description here','Caerphilly',0102);
-insert into locations (locationID, locationName , locationEmail,locationDescription,locationPlace, locationTrailID) value (10, 'Caerphilly Cwtch','','Location description here','Caerphilly',0102);
-insert into locations (locationID, locationName , locationEmail,locationDescription,locationPlace, locationTrailID) value (11, 'Caerphilly Conservative Club','','Location description here','Caerphilly',0102);
-insert into locations (locationID, locationName , locationEmail,locationDescription,locationPlace, locationTrailID) value (12, 'The King''s Arms','','Location description here','Caerphilly',0102);
+insert into locations ( locationName , locationEmail,locationDescription,locationPlace, locationTrailID) value ( 'JD Wetherspoons-Malcolm Uphill','','Location description here','Caerphilly',0102);
+insert into locations ( locationName , locationEmail,locationDescription,locationPlace, locationTrailID) value ( 'Caerphilly Cwtch','','Location description here','Caerphilly',0102);
+insert into locations ( locationName , locationEmail,locationDescription,locationPlace, locationTrailID) value ( 'Caerphilly Conservative Club','','Location description here','Caerphilly',0102);
+insert into locations ( locationName , locationEmail,locationDescription,locationPlace, locationTrailID) value ( 'The King''s Arms','','Location description here','Caerphilly',0102);
 
-insert into locations (locationID, locationName , locationEmail,locationDescription,locationPlace, locationTrailID) value (13, 'Caerphilly Bus Station','','Location description here','Caerphilly',0103);
-insert into locations (locationID, locationName , locationEmail,locationDescription,locationPlace, locationTrailID) value (14, 'The Medieval Courthouse','','Location description here','Caerphilly',0103);
-insert into locations (locationID, locationName , locationEmail,locationDescription,locationPlace, locationTrailID) value (15 ,'Caerphilly Castle','','Location description here','Caerphilly',0103);
-insert into locations (locationID, locationName , locationEmail,locationDescription,locationPlace, locationTrailID) value (16, 'Ty Vaughan House','','Location description here','Caerphilly',0103);
+insert into locations ( locationName , locationEmail,locationDescription,locationPlace, locationTrailID) value ( 'Caerphilly Bus Station','','Location description here','Caerphilly',0103);
+insert into locations ( locationName , locationEmail,locationDescription,locationPlace, locationTrailID) value ( 'The Medieval Courthouse','','Location description here','Caerphilly',0103);
+insert into locations ( locationName , locationEmail,locationDescription,locationPlace, locationTrailID) value ('Caerphilly Castle','','Location description here','Caerphilly',0103);
+insert into locations ( locationName , locationEmail,locationDescription,locationPlace, locationTrailID) value ( 'Ty Vaughan House','','Location description here','Caerphilly',0103);
 
-insert into locations (locationID, locationName , locationEmail,locationDescription,locationPlace, locationTrailID) value (17, 'Risca Colliery','','Location description here','Risca',0201);
-insert into locations (locationID, locationName , locationEmail,locationDescription,locationPlace, locationTrailID) value (18, 'Black Vein Colliery Disaster','','Location description here','Risca',0201);
+insert into locations ( locationName , locationEmail,locationDescription,locationPlace, locationTrailID) value ( 'Risca Colliery','','Location description here','Risca',0201);
+insert into locations ( locationName , locationEmail,locationDescription,locationPlace, locationTrailID) value ( 'Black Vein Colliery Disaster','','Location description here','Risca',0201);
 
 
-insert into locations (locationID, locationName , locationEmail,locationDescription,locationPlace, locationTrailID) value (19, 'The Esplanade','','Location description here','Penarth',0301);
-insert into locations (locationID, locationName , locationEmail,locationDescription,locationPlace, locationTrailID) value (20, 'The Old Swimming Baths','','Location description here','Penarth',0301);
+insert into locations ( locationName , locationEmail,locationDescription,locationPlace, locationTrailID) value ( 'The Esplanade','','Location description here','Penarth',0301);
+insert into locations ( locationName , locationEmail,locationDescription,locationPlace, locationTrailID) value ( 'The Old Swimming Baths','','Location description here','Penarth',0301);

src/main/resources/static/css/homePageStyle.css

+
 body{
     background-color: rgb(41, 41, 41)
 }
@@ -8,117 +9,164 @@ body{
 .submitLand{
     grid-area: submitButton;
 }
-.caerphillyBanner , .riscaBanner,.penarthBanner{
+.Banner {
     margin-top: 20px;
     background-color: darkslategrey;
     margin-bottom: 20px;
-    border: solid 2px whitesmoke;
+    /*border: solid 2px whitesmoke;*/
     /*border colour here at .banner and .bannertrail*/
     border-right: none;
 }
-.caerphillyBannerTrail,.riscaBannerTrail,.penarthBannerTrail{
-    background-color: darkslategrey;
+
+/* .BannerTrail.Complete(100%) .BannerTrail.closeComplete(90-99%) .BannerTrail.nearComplete(70-99%) .BannerTrail.farComplete(50-69%) .BannerTrail.notComplete(0-49%) */
+.BannerTrail, .BannerTrail.Complete, .BannerTrail.closeComplete, .BannerTrail.nearComplete, .BannerTrail.farComplete, .BannerTrail.notComplete {
     margin-top: 20px;
     margin-bottom: 20px;
     border: solid 2px whitesmoke;
-    border-left: none;
     text-align: center;
 }
 
-.penarthBannerTrail{
-    background-image: linear-gradient(to right, darkslategrey , darkgoldenrod 40%);
+.BannerTrail th, .BannerTrail.Complete th, .BannerTrail.closeComplete th, .BannerTrail.nearComplete th, .BannerTrail.farComplete th, .BannerTrail.notComplete th{
+    grid-area:townBannerDetsR
 }
 
-.caerphillyBannerTrail{
-    margin-top: 20px;
-    margin-bottom: 20px;
-    border: solid 2px whitesmoke;
-    border-left: none;
-    background-image: linear-gradient(to right, darkslategrey , darkgoldenrod 30%);
+.BannerTrail, .BannerTrail.Complete, .BannerTrail.closeComplete, .BannerTrail.nearComplete, .BannerTrail.farComplete, .BannerTrail.notComplete{
+    grid-area:townBannerDets;
 }
 
-.caerphillyBanner{
-    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%);*/
+.BannerTrail {
+    background-color: darkslategrey;
+
 }
 
-/*!*https://www.stayinwales.co.uk/wales_picture.cfm?p=4454*! Risca img*/
+.BannerTrail.Complete {
+    background-color: gold;
+    border: 2px solid gold;
+    border-left: solid 2px whitesmoke;
+}
+.BannerTrail.closeComplete {
+    background-color: darkgoldenrod;
+    background-color: darkgoldenrod;
+    border: 2px solid darkgoldenrod;
+    border-left: solid 2px whitesmoke;
+}
 
-.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;
+.BannerTrail.nearComplete {
+    background-color: deepskyblue;
+    background-color: deepskyblue;
+    border: 2px solid deepskyblue;
+    border-left: solid 2px whitesmoke;
 }
 
-.penarthBanner {
-    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;
+.BannerTrail.farComplete {
+    background-color: green;
+    background-color: green;
+    border: 2px solid green;
+    border-left: solid 2px whitesmoke;
+}
+
+.BannerTrail.notComplete {
+    background-color: red;
+    background-color: red;
+    border: 2px solid red;
+    border-left: solid 2px whitesmoke;
 }
-.caerphillyBannerTrail{
-    grid-area:townBannerDetsC;
+
+/*Below selects banner that has the Complete class to change color*/
+.Banner:has(+.BannerTrail.Complete){
+    border: 2px solid gold;
+    border-right: solid 2px whitesmoke;
 }
-.riscaBanner{
-    grid-area:townBannerR;
+
+.Banner:has(+.BannerTrail.closeComplete){
+    border: 2px solid darkgoldenrod;
+    border-right: solid 2px whitesmoke;
 }
-.riscaBannerTrail{
-    grid-area:townBannerDetsR;
+
+
+.Banner:has(+.BannerTrail.nearComplete){
+    border: 2px solid deepskyblue;
+    border-right: solid 2px whitesmoke;
 }
-.penarthBanner{
-    grid-area:townBannerP;
+.Banner:has(+.BannerTrail.farComplete){
+    border: 2px solid green;
+    border-right: solid 2px whitesmoke;
 }
-.penarthBannerTrail{
-    grid-area:townBannerDetsP;
+.Banner:has(+.BannerTrail.notComplete){
+    border: 2px solid red;
+    border-right: solid 2px whitesmoke;
 }
+
+
+.BannerTrail {
+    background-color: darkslategrey;
+
+}
+
+
+
+
+
+
+.Banner {
+    grid-area:townBanner;
+    color: inherit;
+    text-decoration: none;
+    background-color: hotpink;
+}
+
+
+a{
+    background-size: contain;
+
+}
+
+
+
 #aboutUsFlavour{
     grid-area: textFlavour;
     margin-top: 25px;
     margin-bottom: 15px;
     color: whitesmoke;
 }
-#trailCountCaer,#trailCountRisca,#trailCountPenarth{
+#trailCount{
     flex:1;
 
 
-    /*align-items: center;*/
-    /*justify-content: center;*/
+
 
 }
-#trailProgressCaer,#trailProgressRisca,#trailProgressPenarth{
+#trailProgress{
     flex:2;
     align-content: center;
 
 }
 
 
-.gridContainer1{
+.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 . . .";
+            ". . . submitButton submitButton .";
+}
+
+.gridContainer2 {
+    display:grid;
+    grid-template-columns: 10% 10% 60% 5% 5% 10%;
+    grid-template-rows: auto;
+    grid-template-areas:
+
+            ". townBanner townBanner townBannerDets . .";
 }
 
+.gridContainer3 {
+    display:grid;
+    grid-template-columns: 10% 10% 60% 5% 5% 10%;
+    grid-template-rows: auto;
+    grid-template-areas:
 
+            " . . textFlavour . . .";
+}
 

src/main/resources/templates/Landmarks/LandmarkFormTh.html

@@ -5,9 +5,7 @@
     <title>Landmark Sign Up</title>
     <link rel="stylesheet" th:href="@{css/landmarkFormStyle.css}">
     <link rel="stylesheet" th:href="@{css/templatingstyle.css}">
-<!--    <link rel="script" th:href="@{scripts/landmarkFormThScript.js}">-->
     <script src="scripts/landmarkFormThScript.js"></script>
-<!--    <style in="scripts/landmarkFormThScript.js"></style>-->
 
 
 </head>

src/main/resources/templates/towns/home/homePage.html

@@ -2,62 +2,58 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8">
-  <title>Title</title>
+  <title>VZTA - Smart Towns Trails</title>
     <link rel="stylesheet" th:href="@{/css/homePageStyle.css}">
     <link rel="stylesheet" th:href="@{/css/templatingstyle.css}">
-
 </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>
-
-            <a href="/allTrails" class="caerphillyBanner">
-                <H2> Caerphilly</H2></a>
-
-
-    <div class="caerphillyBannerTrail">
-        <div id="trailCountCaer">Trails: 3</div>
-        <div id="trailProgressCaer">70%</div>
-    </div>
-
-        <a href="/allTrails" class="riscaBanner">
-            <H2> Risca</H2> </a>
-
-    <div class="riscaBannerTrail">
-        <div id="trailCountRisca">Trails: 2</div>
-        <div id="trailProgressRisca">0%</div>
+  <div class="gridContainer1">
+      <H1 id="homeTitle"> VZTA Smart Towns - Trails</H1>
+      <a class="submitLand" href="/landmarkSubmission">  <button> Submit Landmark!</button></a>
+<!--    <div th:text="${towns}">-->
     </div>
 
+    <div th:each="town:${towns}" class="gridContainer2">
 
-    <a href="/allTrails" class="penarthBanner">
-        <H2> Penarth</H2> </a>
-    <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>
+      <a href="/allTrails" class="Banner"
+         th:style="'background:url('+ ${town.getImageTown()} +');'"
+         th:styleappend="'background-size: 80vw 24vh;'+'background-repeat: no-repeat;'+'background-position: left 30%;'" />
 
-</div>
 
 
 
+        <H2 th:text="${town.getName()}"> </H2></a>
 
+        <div class="BannerTrail"th:classappend="|${town.getTrailProgress()==100 ? 'Complete' : ''} ${town.getTrailProgress()<100 and town.getTrailProgress()>=90 ? 'closeComplete' : ''''} ${town.getTrailProgress()<90 and town.getTrailProgress()>=70 ? 'nearComplete' : ''''} ${town.getTrailProgress()<70 and town.getTrailProgress()>=50 ? 'farComplete' : ''''} ${town.getTrailProgress()<50 ? 'notComplete' : ''''}|"
+        >
 
+<!--Rough class append used to distinguish progress, using a class append based on progress can allow for  further customisation to banners later on
+rough % outline;
+100 -gold
+90-99 - darkgold
+70-89 - blue
+50-69-green
+0-49-red-->
 
 
+        <div id="trailCount" th:text="'Trails: '+ ${town.getTrailNumber()}">Trails: </div>
+        <div id="trailProgress" th:text="${town.getTrailProgress()}+'%'"></div>
+      </div>
 
 
+    </div>
 
 
+<div class="gridContainer3">
 
 
+    <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>

src/main/resources/templates/towns/home/homePageOld.html

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Title</title>
+<!--    <link rel="stylesheet" th:href="@{/css/homePageStyle.css}">-->
+    <link rel="stylesheet" th:href="@{/css/templatingstyle.css}">
+
+</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>
+
+            <a href="/allTrails" class="caerphillyBanner">
+                <H2> Caerphilly</H2></a>
+
+
+    <div class="caerphillyBannerTrail">
+        <div id="trailCountCaer">Trails: 3</div>
+        <div id="trailProgressCaer">70%</div>
+    </div>
+
+        <a href="/allTrails" class="riscaBanner">
+            <H2> Risca</H2> </a>
+
+    <div class="riscaBannerTrail">
+        <div id="trailCountRisca">Trails: 2</div>
+        <div id="trailProgressRisca">0%</div>
+    </div>
+
+
+    <a href="/allTrails" class="penarthBanner">
+        <H2> Penarth</H2> </a>
+    <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>