src/main/resources/static/css/templatingstyle.css

+/* 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);
+}
\ No newline at end of file

src/main/resources/templates/towns/Templating.html

+<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"/>
+</div>
+<nav class="navBar">
+    <ul>
+        <li>Home</li>
+        <li>FAQs</li>
+        <li>Contact us</li>
+    </ul>
+    <label class="work">Who  we Work with:</label>
+    <select>
+        <ul>
+            <option value="localauthorities">Local Authorities</option>
+            <option value="towns">Towns</option>
+            <option value="businesses">Businesses</option>
+            <option value="consumers">Consumers</option>
+        </ul>
+    </select>
+</nav>
+</header>
+
+<div class="footerBar" th:fragment="footer">
+    <div class="containerFooter">
+        <div class="leftFooter">
+            <h3>VZTA</h3>
+            Near Me Now LTD
+            <br>Britania House
+            <br>Caerphilly Business Park
+            <br>Caerphilly
+            <br>CF83 3GG
+        </div>
+        <div class="rightFooter">
+            <h3>Connect with us</h3>
+            <p>Be the first to know about updates by joining out Community page</p>
+            (C) VZTA 2022<br>
+            Policy Terms and Conditions
+        </div>
+        <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>
+                        </span>
+        </div>
+        <div class="copyright" style="text-align: left">
+
+        </div>
+    </div>
+</div>
+</div>