Skip to content
Snippets Groups Projects
Commit 062fdd24 authored by Liam Driscoll's avatar Liam Driscoll
Browse files

Merge branch '14-as-a-user-i-want-to-view-a-list-of-all-locations-available' into 'development'

location stuff.

See merge request !21
parents 3144c182 ac9de0bd
No related branches found
No related tags found
1 merge request!21location HTML, CSS, JS
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");
} );
<!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>
let btn = document.querySelector("button");
let nav = document.querySelector("nav");
btn.addEventListener("click", function() {
nav.classList.toggle("active");
btn.classList.toggle("active");
} );
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment