diff --git a/src/main/resources/templates/towns/Templating.html b/src/main/resources/templates/towns/Templating.html
index 26712afc6cbbff97ed414d6f65b9461385dd2eff..2a66700ecaf1c9c780c02b6dc65c50c91c5ac614 100644
--- a/src/main/resources/templates/towns/Templating.html
+++ b/src/main/resources/templates/towns/Templating.html
@@ -1,4 +1,4 @@
-<header class="headerBar th:fragment="header">
+<header class="headerBar" th:fragment="header">
<div class="Logo">
<img th:src="@{images/VZTA.png}" alt="VZTA Logo">
@@ -40,10 +40,10 @@
<div class="centerFooter">
<span class="footerText">
<h3>Follow Us</h3>
- <a th:href=="https://www.facebook.com/VZTAsmarttowns/" class="icon"></a><img th:src="@{images/Facebook.png}" alt="Facebook Logo" class="picture">
- <a th:href=="https://www.twitter.com/VZTAsmarttowns/" class="icon"></a><img th:src="@{images/Twitter-Logo.png}" alt="X (formally Twitter) Logo" class="picture">
- <a th:href=="https://www.instagram.com/vztasmarttowns/" class="icon"></a><img th:src="@{images/Instagram.jpg}" alt="Instagram Logo" class="picture">
- <a th:href=="https://'www.linkin.com/company/vztasmarttowns/" class="icon"></a><img th:src="@{images/LinkedIn.jpg}" alt="Linkedin Logo" class="picture"> <br>
+ <a href="https://www.facebook.com/VZTAsmarttowns/" class="icon"></a><img th:src="@{images/Facebook.png}" alt="Facebook Logo" class="picture">
+ <a href="https://www.twitter.com/VZTAsmarttowns/" class="icon"></a><img th:src="@{images/Twitter-Logo.png}" alt="X (formally Twitter) Logo" class="picture">
+ <a href="https://www.instagram.com/vztasmarttowns/" class="icon"></a><img th:src="@{images/Instagram.jpg}" alt="Instagram Logo" class="picture">
+ <a href="https://'www.linkin.com/company/vztasmarttowns/" class="icon"></a><img th:src="@{images/LinkedIn.jpg}" alt="Linkedin Logo" class="picture"> <br>
</span>
</div>
<div class="copyright" style="text-align: left">
diff --git a/src/main/resources/templates/towns/caerphilly.html b/src/main/resources/templates/towns/caerphilly.html
index 811b8f5e5a68f960b99a751277debd027162caa6..0baeb2da72abe102cb8f16a80e7f65dd2879ac2e 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;
}
@@ -159,9 +159,101 @@
.checkmark:hover .collected{
visibility: visible;
}
+ /*Header and footer*/
+
+ /* Header */
+ .headerBar {
+ border-bottom: 2px rgb(230, 230, 230) solid;
+ margin-bottom: 20px;
+ display: flex;
+ background: blueviolet;
+ }
+ /* Navbar Links */
+ .navBar {
+ margin-top: 50px;
+ margin-left: auto;
+ margin-right:20px;
+ text-align: right;
+ }
+ .work{
+ color: rgb(255, 255, 255);
+ }
+ .navBar ul {
+ list-style: none;
+ display: flex;
+ margin-left: 100px;
+ }
+ .navBar a {
+ border-left: 2px rgb(185, 185, 185) solid;
+ padding: 10px 40px;
+ text-decoration: none;
+ color:rgb(87, 86, 86);
+ white-space: nowrap;
+ overflow: hidden;
+ float: right;
+ }
+ .navBar a:hover {
+ background-color: rgb(209, 209, 209);
+ }
+ .navBar li{
+ margin-left: 10px;
+ margin-right: 10px;
+ color: rgb(255, 255, 255);
+ }
+ .navListLast {
+ border-right: 2px rgb(185, 185, 185) solid;
+ margin-right:40px;
+ }
+ /* Navbar Logo */
+ .Logo {
+ margin-left:10px;
+ padding: 20px;
+ width: fit-content;
+ }
+ .Logo img {
+ width: 120px;
+ margin-left:15px;
+ }
-
+ /* Footer */
+ footer {
+ margin-top:20px;
+ display: flex;
+ justify-content: center;
+ }
+ .footerBar{
+ border-top: 2px rgb(230, 230, 230) solid;
+ text-align: left;
+ display: flex;
+ background: blueviolet;
+ color: rgb(255, 255, 255);
+ padding-left: 30px;
+ }
+ .footerBar ul {
+ list-style: none;
+ display: flex;
+ }
+ .copyright{
+ text-align: left;
+ display: flex;
+ }
+ .containerFooter{
+ display: flex;
+ flex-direction: row;
+ }
+ .leftFooter{
+ flex:1;
+ color: rgb(255, 255,255);
+ }
+ .centerFooter{
+ flex: 1;
+ color: rgb(255, 255,255);
+ }
+ .rightFooter{
+ flex:1;
+ color: rgb(255, 255, 255);
+ }
</style>
<head>
@@ -169,6 +261,8 @@
<title>Caerphilly</title>
</head>
<body>
+<header th:insert="~{towns/Templating.html :: header}"></header>
+
<main>
<div class="container">
<h1 class="townName"> Welcome to the town of Caerphilly.</h1>
@@ -212,6 +306,7 @@
</div>
</main>
+<footer th:insert="~{towns/Templating.html :: footer}"></footer>
</body>
</html>
\ No newline at end of file