diff --git a/src/main/resources/static/css/homePageStyle.css b/src/main/resources/static/css/homePageStyle.css
new file mode 100644
index 0000000000000000000000000000000000000000..6e2a91e341594ae4f89a867da1bc89fb93d4c4f1
--- /dev/null
+++ b/src/main/resources/static/css/homePageStyle.css
@@ -0,0 +1,124 @@
+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 at .banner and .bannertrail*/
+ border-right: none;
+}
+.caerphillyBannerTrail,.riscaBannerTrail,.penarthBannerTrail{
+ background-color: darkslategrey;
+ 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%);
+}
+
+.caerphillyBannerTrail{
+ margin-top: 20px;
+ margin-bottom: 20px;
+ border: solid 2px whitesmoke;
+ border-left: none;
+ background-image: linear-gradient(to right, darkslategrey , darkgoldenrod 30%);
+}
+
+.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%);*/
+}
+
+/*!*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 {
+ 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;
+}
+.caerphillyBannerTrail{
+ grid-area:townBannerDetsC;
+}
+.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 . . .";
+}
+
+
+
diff --git a/src/main/resources/static/css/style.css b/src/main/resources/static/css/style.css
index c116f6554429b20e76bcc8fbe703a9bddeee9792..3d1973fac582203a1fbfa9cab0937ff213a45c51 100644
--- a/src/main/resources/static/css/style.css
+++ b/src/main/resources/static/css/style.css
@@ -3,6 +3,13 @@
padding: 0;
margin: 0;
}
+
+#homeHead{
+ color: inherit;
+ text-decoration: none;
+ padding: 0;
+ margin: 0;}
+
.center {
text-align: center;
}
diff --git a/src/main/resources/static/css/templatingstyle.css b/src/main/resources/static/css/templatingstyle.css
index 8fb64205d5746165c02a2e6c895ddf5692003de4..9e0cd5ea53680a42b91c2a6e896e0bbc43fe4e30 100644
--- a/src/main/resources/static/css/templatingstyle.css
+++ b/src/main/resources/static/css/templatingstyle.css
@@ -21,8 +21,9 @@
margin-left: 100px;
}
.navBar a {
- border-left: 2px rgb(185, 185, 185) solid;
- padding: 10px 40px;
+ /*border-left: 2px rgb(185, 185, 185) solid;*/
+ /*padding: 10px 40px;*/
+ padding-left:5px ;padding-right: 5px;
text-decoration: none;
color:rgb(87, 86, 86);
white-space: nowrap;
diff --git a/src/main/resources/templates/towns/Templating.html b/src/main/resources/templates/towns/Templating.html
index 2cac9faac6f9f4cd243066db805d7384f29544aa..1313b325bb3027665a9242b8fcd6d9db707af4e7 100644
--- a/src/main/resources/templates/towns/Templating.html
+++ b/src/main/resources/templates/towns/Templating.html
@@ -1,21 +1,4 @@
-<!--<<<<<<< HEAD-->
-<!--<header th:fragment="headerBlock">-->
-<!-- <br>Header Block<br>-->
-<!--</header>-->
-<!--<footer th:fragment="footerBlock">-->
-<!-- <br><b>VZTA</b><br>-->
-<!-- <br>Near Me Now LTD<br>-->
-<!-- <br>Britania House<br>-->
-<!-- <br>Caerphilly Business Park<br>-->
-<!-- <br>Caerphilly<br>-->
-<!-- <br>CF83 3GG<br>-->
-<!-- <br>(C) VZTA 2022<br>-->
-<!-- <br><b>Follow Us</b><br>-->
-<!-- <br>Facebook Twitter Instagram LinkedIn<br>-->
-<!-- <br>Privacy Policy Terms and Conditions<br>-->
-<!--</footer>-->
-<!--=======-->
<link rel="stylesheet" href="../../static/css/templatingstyle.css">
<header class="headerBar" th:fragment="header">
<div class="Logo">
@@ -23,7 +6,7 @@
</div>
<nav class="navBar">
<ul>
- <li>Home</li>
+ <li><a id="homeHead" href="/home">Home</a></li>
<li>FAQs</li>
<li>Contact us</li>
</ul>
diff --git a/src/main/resources/templates/towns/caerphilly.html b/src/main/resources/templates/towns/caerphilly.html
index a2ce11074c7412ff9b05115adac5cc1ff117c611..912da813737475d83dfc3af4c0ff4010189ec7f5 100644
--- a/src/main/resources/templates/towns/caerphilly.html
+++ b/src/main/resources/templates/towns/caerphilly.html
@@ -1,7 +1,7 @@
<!DOCTYPE html>
<html lang="en">
<style>
- *{
+ body{
background-color: #36454F;
color: white;
}
@@ -168,8 +168,10 @@
<head>
<meta charset="UTF-8">
<title>Caerphilly</title>
+ <link rel="stylesheet" th:href="@{/css/templatingstyle.css}">
</head>
<body>
+<header th:insert="~{/towns/Templating.html::header}"></header>
<main>
<div class="container">
<h1 class="townName"> Welcome to the town of Caerphilly.</h1>
@@ -213,6 +215,7 @@
</div>
</main>
+<footer th:insert="~{/towns/Templating.html::footer}"></footer>
</body>
</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/towns/home/homePage.html b/src/main/resources/templates/towns/home/homePage.html
index c481113b0bf69c762452f3b0d491d87c844f376b..c0eb3564debbaa03dff14cc4946bba0441ae05c3 100644
--- a/src/main/resources/templates/towns/home/homePage.html
+++ b/src/main/resources/templates/towns/home/homePage.html
@@ -3,195 +3,21 @@
<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>
+ <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>
-<!-- <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>