Skip to content
Snippets Groups Projects
Commit 56d63c73 authored by Zainab Almeshari's avatar Zainab Almeshari
Browse files

Locations

parent a55e3d90
No related branches found
No related tags found
3 merge requests!20Draft: resolving merge conflicts,!11update in styling locations.css,!9Resolve "As a user I want to view a list of all locations available"
Hide whitespace changes
Inline Side-by-side
CSS 0 → 100644
+ 4
− 0
View file @ 56d63c73
<!DOCTYPE html>
<html>
<head>
<title> Locations </title>
our locations.html 0 → 100644
+ 136
− 0
View file @ 56d63c73
<!DOCTYPE html>
<html>
<head>
<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>
<body>
<h1> OUR LOCATIONS </h1>
<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" >
<div class="middle">
<div class="text"> C4DI </div>
</div>
</div>
</li>
<li>
<div class="container">
<img src="https://dogpatchlabs.wpenginepowered.com/wp-content/uploads/2022/09/ian_browne.jpg" class="image" >
<div class="middle">
<div class="text"> Dogpatch </div>
</div>
</div>
</li>
<li>
<div class="container">
<img src="https://stationf.co/img/misc/create-zone.jpg" class="image" >
<div class="middle">
<div class="text"> Station F </div>
</div>
</div>
</li>
</ul>
</div>
</body>
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