Skip to content
Snippets Groups Projects
Commit ba6a15d3 authored by Rhys Nute's avatar Rhys Nute
Browse files

updated correct header and footer coding in Templating.html

parent 4d74c4a5
No related branches found
No related tags found
No related merge requests found
<header th:fragment="headerBlock"> <header class="headerBar th:fragment="header">
<br>Header Block<br>
<div class="Logo">
<img th:src="@{images/VZTA.png}" 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> </header>
<footer th:fragment="footerBlock"> <div class="footerBar" th:fragment="footer">
<br><b>VZTA</b><br> <div class="containerFooter">
<br>Near Me Now LTD<br> <div class="leftFooter">
<br>Britania House<br> <h3>VZTA</h3>
<br>Caerphilly Business Park<br> Near Me Now LTD
<br>Caerphilly<br> <br>Britania House
<br>CF83 3GG<br> <br>Caerphilly Business Park
<br>(C) VZTA 2022<br> <br>Caerphilly
<br><b>Follow Us</b><br> <br>CF83 3GG
<br>Facebook Twitter Instagram LinkedIn<br> </div>
<br>Privacy Policy Terms and Conditions<br> <div class="rightFooter">
</footer> <h3>Connect with us</h3>
\ No newline at end of file <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 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>
</span>
</div>
<div class="copyright" style="text-align: left">
</div>
</div>
</div>
</div>
<style>
/* 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>
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment