diff --git a/CSS/locations.css b/CSS/locations.css
new file mode 100644
index 0000000000000000000000000000000000000000..540b8d2621d6067b67f3e0410ad8304db7cf2353
--- /dev/null
+++ b/CSS/locations.css
@@ -0,0 +1,156 @@
+body{
+background-color: white;
+color: black;
+}
+
+
+.container {
+position: relative;
+padding: 5px;
+width: 50%;
+height: 70%;
+background-color: white;
+box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+margin-bottom: 25px;
+}
+
+
+.image {
+opacity: 1;
+display: block;
+width: 100%;
+height: 75%;
+transition: .5s ease;
+backface-visibility: hidden;
+
+}
+
+.middle {
+transition: .5s ease;
+opacity: 0;
+position: absolute;
+top: 50%;
+left: 50%;
+transform: translate(-50%, -50%);
+-ms-transform: translate(-50%, -50%)
+
+}
+
+.container:hover .image {
+opacity: 0.3;
+}
+
+.container:hover .middle {
+opacity: 1;
+}
+
+.text {
+background-color: black;
+color: white;
+font-size: 16px;
+padding: 16px 32px;
+}
+
+
+
+div.contain {
+text-align: center;
+}
+
+ul.list {
+display: inline-block;
+text-align: center;
+list-style-type: none;
+margin-left: 350px;
+}
+
+h1 {
+color: white;
+background-color: black;
+font-weight: 600;
+font-family: 'Monospace', Lucida-Console;
+position: relative;
+font-size: 36px;
+display: flex;
+margin-right: 650px;
+margin: 1em 0 1em 0;
+line-height: 110px;
+padding: 15px 15px 15px 3%;
+border-radius: 10px 10px 10px 10px;
+
+}
+
+.logo{
+width: 8%;
+height: 8%
+border: 0;
+float: left;
+display: flex;
+margin: 10px 10px;
+
+}
+
+ button{
+ width: 40px;
+ height: 30px;
+ background-color: black;
+ border: none;
+ outline: none;
+ border-radius: 4px;
+ padding: 4px;
+ position: fixed;
+ top: 65px;
+ right: 20px;
+ cursor: pointer;
+ transition: 0.4s ease-in-out;
+ }
+
+ button.active{
+ transform: translateX(-210px);
+ }
+
+ button span {
+ display: block;
+ width: 100%;
+ height: 4px;
+ background-color: white;
+
+ }
+
+ button span:nth-child(2) {
+ margin: 5px 0;
+ }
+
+ nav{
+ background-color: black;
+ padding: 15px;
+ height: 100vh;
+ position: fixed;
+ top: 0;
+ right: 0;
+ width: 200px;
+ transform: translateX(100%);
+ margin-top: 0.5em;
+ border-radius: 10px;
+ transition: 0.4s ease-in-out;
+ }
+ nav.active {
+ transform: translateX(0);
+ }
+
+ nav ul{
+ list-style: none;
+ margin: 0;
+ padding:0;
+ width: 60px;
+ }
+ nav ul li{
+ padding: 10px 0;
+ }
+ nav ul li a{
+ color: white;
+ text-decoration: none;
+ display: block;
+ }
+ nav ul li a:hover {
+ color: white;
diff --git a/JScript/locations.js b/JScript/locations.js
new file mode 100644
index 0000000000000000000000000000000000000000..9c8f709c829af97b94a5173614f0c524d7515fc6
--- /dev/null
+++ b/JScript/locations.js
@@ -0,0 +1,10 @@
+let btn = document.querySelector("button");
+let nav = document.querySelector("nav");
+
+
+btn.addEventListener("click", function() {
+
+ nav.classList.toggle("active");
+ btn.classList.toggle("active");
+
+ } );
diff --git a/our locations.html b/our locations.html
index 25b69bc2803a0b83228085f3d5bb89cb594143b0..68090f2df7b64b046f0b8657ac1fb9d4641e7d82 100644
--- a/our locations.html
+++ b/our locations.html
@@ -1,85 +1,26 @@
<!DOCTYPE html>
<html>
<head>
+ <link rel="stylesheet" href= "css/locations.css">
<title> Locations </title>
-
-<style>
- body{
- background-color: white;
- color: black;
-}
-
-header{
- background-color: white;
- color: black;
- display: block;
- margin-left: auto;
- margin-right: auto;
- float: center;
-}
-
-.container {
- position: relative;
- padding: 5px;
- width: 50%;
- height: 70%;
- background-color: white;
- box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
- margin-bottom: 25px;
-}
-
-
-.image {
- opacity: 1;
- display: block;
- width: 100%;
- height: 75%;
- transition: .5s ease;
- backface-visibility: hidden;
-
-}
-
-.middle {
- transition: .5s ease;
- opacity: 0;
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- -ms-transform: translate(-50%, -50%)
-
-}
-
-.container:hover .image {
- opacity: 0.3;
-}
-
-.container:hover .middle {
- opacity: 1;
-}
-
-.text {
- background-color: black;
- color: white;
- font-size: 16px;
- padding: 16px 32px;
-}
-
-
-
-div.contain {
- text-align: center;
-}
-
-ul.list {
- display: inline-block;
- text-align: left;
- list-style-type: none;
-}
-
-</style>
+</head>
<body>
- <h1> OUR LOCATIONS </h1>
+ <section>
+
+ <h1><img src="https://www.4piproductions.com/wp-content/uploads/2017/04/tramshed_.png" class="logo"> Our Locations </h1>
+ <button>
+ <span></span>
+ <span></span>
+ <span></span>
+ </button>
+ <nav>
+ <ul>
+ <li><a href="#"> Home </a></il>
+ <li><a href="#"> ### </a></il>
+ <li><a href="#"> ### </a></il>
+ </ul>
+ </nav>
+
<div class="contain">
<ul class= "list">
<li>
@@ -132,5 +73,7 @@ ul.list {
</li>
</ul>
</div>
+</section>
+<script src="C:\Users\c22086220\OneDrive - Cardiff University\Desktop\our locations\JScript\locations.js"> </script>>
</body>
diff --git a/static/__pycache__/__init__.cpython-310.pyc b/static/__pycache__/__init__.cpython-310.pyc
index 2e099c12ae40d9f36336371daeaa85bcd52de30f..f3af13ed63b34714c9755228e378da56c7944baf 100644
Binary files a/static/__pycache__/__init__.cpython-310.pyc and b/static/__pycache__/__init__.cpython-310.pyc differ
diff --git a/static/__pycache__/coworking_functions.cpython-310.pyc b/static/__pycache__/coworking_functions.cpython-310.pyc
index 686c5e64725d8003e480164cad09f9b2c489d099..5697a0f2e6d04f0e724f385e9e77055f7caa1f70 100644
Binary files a/static/__pycache__/coworking_functions.cpython-310.pyc and b/static/__pycache__/coworking_functions.cpython-310.pyc differ