Skip to content
Snippets Groups Projects
Commit 8ce5974a authored by Rhys Evans's avatar Rhys Evans
Browse files

styling changes for Caerphilly.html

parent 1e495dd1
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/main/resources/templates/towns/Templating.html
+ 5
− 5
View file @ 8ce5974a
<header class="headerBar th:fragment="header"> <header class="headerBar" th:fragment="header">
<div class="Logo"> <div class="Logo">
<img th:src="@{images/VZTA.png}" alt="VZTA Logo"> <img th:src="@{images/VZTA.png}" alt="VZTA Logo">
...@@ -40,10 +40,10 @@ ...@@ -40,10 +40,10 @@
<div class="centerFooter"> <div class="centerFooter">
<span class="footerText"> <span class="footerText">
<h3>Follow Us</h3> <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 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 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 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.linkin.com/company/vztasmarttowns/" class="icon"></a><img th:src="@{images/LinkedIn.jpg}" alt="Linkedin Logo" class="picture"> <br>
</span> </span>
</div> </div>
<div class="copyright" style="text-align: left"> <div class="copyright" style="text-align: left">
......
src/main/resources/templates/towns/caerphilly.html
+ 97
− 2
View file @ 8ce5974a
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<style> <style>
*{ body{
background-color: #36454F; background-color: #36454F;
color: white; color: white;
} }
...@@ -159,9 +159,101 @@ ...@@ -159,9 +159,101 @@
.checkmark:hover .collected{ .checkmark:hover .collected{
visibility: visible; 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> </style>
<head> <head>
...@@ -169,6 +261,8 @@ ...@@ -169,6 +261,8 @@
<title>Caerphilly</title> <title>Caerphilly</title>
</head> </head>
<body> <body>
<header th:insert="~{towns/Templating.html :: header}"></header>
<main> <main>
<div class="container"> <div class="container">
<h1 class="townName"> Welcome to the town of Caerphilly.</h1> <h1 class="townName"> Welcome to the town of Caerphilly.</h1>
...@@ -212,6 +306,7 @@ ...@@ -212,6 +306,7 @@
</div> </div>
</main> </main>
<footer th:insert="~{towns/Templating.html :: footer}"></footer>
</body> </body>
</html> </html>
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment