diff --git a/src/main/resources/static/css/templatingstyle.css b/src/main/resources/static/css/templatingstyle.css
index 8661180143d4330efc6f86e02d3668c8c1520f24..8fb64205d5746165c02a2e6c895ddf5692003de4 100644
--- a/src/main/resources/static/css/templatingstyle.css
+++ b/src/main/resources/static/css/templatingstyle.css
@@ -90,4 +90,13 @@ footer {
.rightFooter{
flex:1;
color: rgb(255, 255, 255);
-}
\ No newline at end of file
+}
+
+/*CHANGES*/
+
+.headerBar, .footerBar{
+ margin:0px;
+ padding: 0px;
+ width: 100%;
+}
+
diff --git a/src/main/resources/templates/towns/home/CaerphillyCastle.jpg b/src/main/resources/static/images/CaerphillyCastle.jpg
similarity index 100%
rename from src/main/resources/templates/towns/home/CaerphillyCastle.jpg
rename to src/main/resources/static/images/CaerphillyCastle.jpg
diff --git a/src/main/resources/templates/towns/Templating.html b/src/main/resources/templates/towns/Templating.html
index 8f289442417d145d0fc82201a6f664fec128adfd..59d73364e1e8fba008a809e8a457c55bacecf168 100644
--- a/src/main/resources/templates/towns/Templating.html
+++ b/src/main/resources/templates/towns/Templating.html
@@ -1,7 +1,7 @@
<link rel="stylesheet" href="../../static/css/templatingstyle.css">
<header class="headerBar" th:fragment="header">
<div class="Logo">
- <img src="../../static/images/VZTA.png" height="97" width="400" alt="VZTA Logo"/>
+ <img src="/images/VZTA.png" height="97" width="400" alt="VZTA Logo"/>
</div>
<nav class="navBar">
<ul>
@@ -40,10 +40,10 @@
<div class="centerFooter">
<span class="footerText">
<h3>Follow Us</h3>
- <a href="https://www.facebook.com/VZTAsmarttowns/" class="icon"><img src="../../static/images/Facebook.png" height="25" width="25" alt="Facebook Logo" class="icon"/></a>
- <a href="https://www.twitter.com/VZTAsmarttowns/" class="icon"><img src="../../static/images/Twitter.jpg" height="25" width="25" alt="X (formally Twitter) Logo" class="icon"/></a>
- <a href="https://www.instagram.com/vztasmarttowns/" class="icon"><img src="../../static/images/Instagram.jpg" height="25" width="25" alt="Instagram Logo" class="icon"/></a>
- <a href="https://www.linkin.com/company/vztasmarttowns/" class="icon"><img src="../../static/images/Linkedin.png" height="25" width="25" alt="Linkedin Logo" class="icon"/></a><br>
+ <a href="https://www.facebook.com/VZTAsmarttowns/" class="icon"><img src="/images/Facebook.png" height="25" width="25" alt="Facebook Logo" class="icon"/></a>
+ <a href="https://www.twitter.com/VZTAsmarttowns/" class="icon"><img src="/images/Twitter.jpg" height="25" width="25" alt="X (formally Twitter) Logo" class="icon"/></a>
+ <a href="https://www.instagram.com/vztasmarttowns/" class="icon"><img src="/images/Instagram.jpg" height="25" width="25" alt="Instagram Logo" class="icon"/></a>
+ <a href="https://www.linkin.com/company/vztasmarttowns/" class="icon"><img src="/images/Linkedin.png" height="25" width="25" alt="Linkedin Logo" class="icon"/></a><br>
</span>
</div>
<div class="copyright" style="text-align: left">
diff --git a/src/main/resources/templates/towns/home/homePage.html b/src/main/resources/templates/towns/home/homePage.html
index 334e00428a60cd35724019627dd108eeefd7aa84..41d7f40cbd5eb69b3b3f413c7ea536f3be04b6f6 100644
--- a/src/main/resources/templates/towns/home/homePage.html
+++ b/src/main/resources/templates/towns/home/homePage.html
@@ -7,8 +7,12 @@
<style>
+ body{
+ background-color: rgb(41, 41, 41)
+ }
#homeTitle{
grid-area: pageTitle;
+ color: whitesmoke;
}
.submitLand{
grid-area: submitButton;
@@ -16,39 +20,63 @@
.caerphillyBanner , .riscaBanner,.penarthBanner{
margin-top: 20px;
- background-color: hotpink;
+ background-color: darkslategrey;
margin-bottom: 20px;
- border: solid 2px black;
+ border: solid 2px whitesmoke;
+ /*border colour here*/
border-right: none;
}
.caerphillyBannerTrail,.riscaBannerTrail,.penarthBannerTrail{
- background-color: hotpink;
+ background-color: darkslategrey;
margin-top: 20px;
/*display: flex;*/
/*flex-direction: column;*/
margin-bottom: 20px;
- border: solid 2px black;
+ 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('/CaerphillyCastle.jpg');
- background-size: 800px 200px;
+ background-image: url('/images/CaerphillyCastle.jpg');
+ background-size: 850px 200px;
background-repeat: no-repeat;
background-position: left 35%;
- background-image: url('CaerphillyCastle.jpg');
- filter: grayscale(30%);
+ color: inherit;
+ text-decoration: none;
+
+ /*filter: grayscale(30%);*/
}
/*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;
}
@@ -65,6 +93,7 @@
grid-area: textFlavour;
margin-top: 25px;
margin-bottom: 15px;
+ color: whitesmoke;
}
#trailCountCaer,#trailCountRisca,#trailCountPenarth{
flex:1;
@@ -111,10 +140,12 @@
color: inherit;
text-decoration: none;
}
+
+
</style>
</head>
<body>
-<!--<header th:insert="~{../Templating.html::header}"></header>-->
+<header th:insert="~{/towns/Templating.html::header}"></header>
<main>
<div class="gridContainer1">
<H1 id="homeTitle"> VZTA Smart Towns - Trails</H1>
@@ -122,33 +153,34 @@
<!-- <a href="/Caerphilly" id="caerUrl" > -->
- <div class="caerphillyBanner">
+<!-- <div class="caerphillyBanner">-->
- <H2> Caerphilly</H2>
-<!-- <a href="/Caerphilly" id="caerUrl" ><H2> Caerphilly</H2></a>-->
+<!-- <H2> Caerphilly</H2>-->
+ <a href="/Caerphilly" class="caerphillyBanner">
+ <H2> Caerphilly</H2></a>
<!-- <a href="homePage.html" id="caerUrl"></a>-->
- </div>
+<!-- </div>-->
<!-- </a>-->
<div class="caerphillyBannerTrail">
- <div id="trailCountCaer"> Trails: 3</div>
- <div id="trailProgressCaer"> 70%</div>
+ <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 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 id="trailCountPenarth">Trails: 5</div>
+ <div id="trailProgressPenarth">60%</div>
</div>
<div id="aboutUsFlavour"> This is placeholder text about VZTA, this application,
@@ -171,7 +203,7 @@
</main>
-<!--<footer th:insert="~{../Templating::footer}"></footer>-->
+<footer th:insert="~{/towns/Templating.html::footer}"></footer>
</body>
</html>
diff --git a/src/main/resources/templates/towns/templates.server/Templating.html b/src/main/resources/templates/towns/templates.server/TemplatingOld.html
similarity index 100%
rename from src/main/resources/templates/towns/templates.server/Templating.html
rename to src/main/resources/templates/towns/templates.server/TemplatingOld.html