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">
<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">
......
src/main/resources/templates/towns/caerphilly.html
+ 97
− 2
View file @ 8ce5974a
<!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
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