diff --git a/static/locations.css b/static/locations.css new file mode 100644 index 0000000000000000000000000000000000000000..93d42136e3814df9aec333e95adacfbf243a23f5 --- /dev/null +++ b/static/locations.css @@ -0,0 +1,173 @@ +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; + JScript/locations.js 0 → 100644 ++ +10 +- +0 + +Viewed +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/static/locations.html b/static/locations.html new file mode 100644 index 0000000000000000000000000000000000000000..7b935a80f6106ff7c5f4ff458b225b6ba02e1dd2 --- /dev/null +++ b/static/locations.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<html> + <head> + <link rel="stylesheet" href= "css/locations.css"> + <title> Locations </title> + </head> + <body> + <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> + <div class="container"> + <img src="https://images.squarespace-cdn.com/content/v1/55439320e4b0f92b5d6c4c8b/1646867535415-4JI39H286BUMT26H4FHN/C36A1915.jpg?format=2500w" class="image" > + + <div class="middle"> + <div class="text"> Codebase </div> + </div> + </div> + </li> + + <li> + <div class="container"> + <img src="https://wearecatalyst.org/wp-content/uploads/2022/05/Catalyst03.jpg" class="image" > + + <div class="middle"> + <div class="text"> Catalyst </div> + </div> + </div> + </li> + <li> + <div class="container"> + <img src="https://images.squarespace-cdn.com/content/v1/5709040420c647579532dbb4/1594914119071-OWI9G22S295OCMSWL0VL/_K5L1162.jpg?format=2500w" Class="image" > + </li> + </ul> + </div> + </section> + <script src="C:\Users\c22086220\OneDrive - Cardiff University\Desktop\our locations\JScript\locations.js"> </script> + + </body> diff --git a/static/locations.js b/static/locations.js new file mode 100644 index 0000000000000000000000000000000000000000..9c8f709c829af97b94a5173614f0c524d7515fc6 --- /dev/null +++ b/static/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"); + + } );