From ced65d88328ddec0ea80e14668c9b20fe0c420b8 Mon Sep 17 00:00:00 2001
From: Zainab Almeshari <almeshariz@cardiff.ac.uk>
Date: Mon, 28 Nov 2022 13:51:08 +0000
Subject: [PATCH] html page, style, js changes
---
CSS/locations.css | 156 ++++++++++++++++++
JScript/locations.js | 10 ++
our locations.html | 97 +++--------
static/__pycache__/__init__.cpython-310.pyc | Bin 200 -> 228 bytes
.../coworking_functions.cpython-310.pyc | Bin 530 -> 558 bytes
5 files changed, 186 insertions(+), 77 deletions(-)
create mode 100644 CSS/locations.css
create mode 100644 JScript/locations.js
diff --git a/CSS/locations.css b/CSS/locations.css
new file mode 100644
index 0000000..540b8d2
--- /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 0000000..9c8f709
--- /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 25b69bc..68090f2 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
GIT binary patch
delta 103
zcmX@X_=J%=pO=@50SNSVwoK%<321k=iU}=FEh>&lHZn4>Far`X{&}e`MVV!(3c3o;
ziA5=yX=w_fc|d+qab`(nj7w^9c1eCgjB`$AYF>##Kv8~HYI2D}NNQrPf}!ceYF_|y
Cv?2=t
delta 75
zcmaFDc!H5TpO=@50SGL-A}4a&m}EOy#RMm3<mczaI42gRWTvGlgyv<Ir4|)umQ=<>
drY06C7{(;$WTxho=oS>^XQd{W6i=M)3jkRV8F2sr
diff --git a/static/__pycache__/coworking_functions.cpython-310.pyc b/static/__pycache__/coworking_functions.cpython-310.pyc
index 686c5e64725d8003e480164cad09f9b2c489d099..5697a0f2e6d04f0e724f385e9e77055f7caa1f70 100644
GIT binary patch
delta 121
zcmbQlvW|s2pO=@50SNSVwru29Wek|)Y!wq)oLW>IlWb&UU||L%V*K+`U5YZxQWbO+
zoD+*uGSku&Li2$9qT<Yw${3f_;_Q<Af*9wV%+$ORg@B^`tkmQZg^<+5Tm?hZ$tjGw
V+|K#s`9;~8dFk<Pljks&0RX@hCyxLC
delta 93
zcmZ3-GKqydpO=@50SHcCt>4J4%4kyNWEB&foROcO6XTp%l#-d2rVyH!S(aK<oLN#C
v6PcP=q+l46oRgWFSE5@`l%JKFTv9x_fl-$`Ilnx=C_6JRJw9#n4#qM7gTEk^
--
GitLab