diff --git a/static/CSS/Manage_Coworking_Spaces.css b/static/CSS/Manage_Coworking_Spaces.css
index b0975c4d5dfcf38ea42148d5876c4220a06c9ca8..7388f166b927700d63f7b7ed8f2d3b9e4c80cdad 100644
--- a/static/CSS/Manage_Coworking_Spaces.css
+++ b/static/CSS/Manage_Coworking_Spaces.css
@@ -125,9 +125,9 @@ header #pageHeader
main #pageMain
form #recordForm
- label .smallLabel
- input textarea .smallInput
- button
+ label
+ input .formTextInput
+ button #addButton
*/
@@ -136,38 +136,13 @@ main #pageMain
flex: 1;
}
-#recordForm label, #recordForm input, #recordForm textarea {
- margin-left: 1.25px;
- margin-top: 5px;
+#recordForm {
+ margin-left: 5px;
}
-#recordForm label {
- display: inline-block;
- min-width: 27.5%;
- text-align: right;
- font-weight: bold;
- vertical-align: top;
-}
-
-#recordForm input {
- width: 50%;
- min-width: 550px;
-}
-
-#recordForm textarea {
+#recordForm .formTextInput {
+ margin-top: 5px;
width: 50%;
- min-width: 550px;
- font-size: 14.25px;
-}
-
-#recordForm .smallLabel {
- width: 10%;
- min-width: 125px;
-}
-
-#recordForm .smallInput {
- width: 19.2%;
- min-width: 200px;
}
/* [#4] Page footer styling. Uses [#2].
@@ -183,3 +158,86 @@ footer #pageFooter
font-size: 15px;
padding: 5px 10px;
}
+div.contain {
+text-align: center;
+}
+
+ul.list {
+display: inline-block;
+list-style-type: none;
+margin: 0;
+}
+.container {
+display: flex;
+position: relative;
+padding: 5px 660px 5px 5px;
+width: 40%;
+height: 50%;
+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;
+border-radius: 10px;
+margin-left: 20px;
+
+}
+
+
+.image {
+opacity: 1;
+display: block;
+transition: .5s ease;
+backface-visibility: hidden;
+border-radius: 10px 10px 10px 10px;
+ float: left;
+ width: 300px;
+ height: 250px;
+ object-fit: cover;
+}
+
+h2 {
+position: absolute;
+margin-left: 320px;
+margin-top: 30px;
+ }
+
+p{
+ margin-top: 80px;
+ margin-left: 50px;
+}
+
+.checked{
+ color: orange;
+}
+
+.star{
+ position: absolute;
+ top: 50%;
+ left: 40%;
+ transform: translate(-50%, -50%);
+ margin-top: 80px;
+}
+.middle {
+transition: .5s ease;
+opacity: 0;
+position: absolute;
+top: 45%;
+left: 10.5%;
+transform: translate(-25%, -25%);
+-ms-transform: translate(-25%, -25%)
+
+}
+
+.container:hover .image {
+opacity: 0.3;
+}
+
+.container:hover .middle {
+opacity: 1;
+}
+
+.text {
+background-color: black;
+color: white;
+font-size: 16px;
+padding: 16px 32px;
+}
diff --git a/static/CSS/locations.css b/static/CSS/locations.css
index 93d42136e3814df9aec333e95adacfbf243a23f5..76f5b34ec48aad1f02a488a3161aaec747ea764d 100644
--- a/static/CSS/locations.css
+++ b/static/CSS/locations.css
@@ -5,34 +5,63 @@ color: black;
.container {
+display: flex;
position: relative;
-padding: 5px;
-width: 50%;
-height: 70%;
+padding: 5px 640px 5px 5px;
+width: 40%;
+height: 50%;
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;
+border-radius: 10px;
+
}
.image {
opacity: 1;
display: block;
-width: 100%;
-height: 75%;
transition: .5s ease;
backface-visibility: hidden;
+border-radius: 10px 10px 10px 10px;
+ float: left;
+ width: 300px;
+ height: 250px;
+ object-fit: cover;
+}
+
+h2 {
+position: absolute;
+margin-left: 320px;
+margin-top: 30px;
+ }
+
+p{
+ margin-top: 80px;
+ margin-left: 50px;
+}
+
+.checked{
+ color: orange;
+}
+.star{
+ position: absolute;
+ top: 50%;
+ left: 40%;
+ transform: translate(-50%, -50%);
+ margin-top: 80px;
+
}
.middle {
transition: .5s ease;
opacity: 0;
position: absolute;
-top: 50%;
-left: 50%;
-transform: translate(-50%, -50%);
--ms-transform: translate(-50%, -50%)
+top: 45%;
+left: 10.5%;
+transform: translate(-25%, -25%);
+-ms-transform: translate(-25%, -25%)
}
@@ -51,17 +80,14 @@ 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;
+margin: 0;
}
h1 {
@@ -98,7 +124,7 @@ margin: 10px 10px;
outline: none;
border-radius: 4px;
padding: 4px;
- position: fixed;
+ position: absolute;
top: 65px;
right: 20px;
cursor: pointer;
@@ -124,13 +150,13 @@ margin: 10px 10px;
nav{
background-color: black;
padding: 15px;
- height: 100vh;
- position: fixed;
+ height: 18.1vh;
+ position: absolute;
top: 0;
right: 0;
width: 200px;
transform: translateX(100%);
- margin-top: 0.5em;
+ margin-top: 2.25em;
border-radius: 10px;
transition: 0.4s ease-in-out;
}
@@ -153,7 +179,8 @@ margin: 10px 10px;
display: block;
}
nav ul li a:hover {
- color: white;
+ color: #A9A9A9;
+
JScript/locations.js 0 → 100644
+
10
diff --git a/static/locations.html b/static/locations.html
index b2d35675eb5ad782b154eddb1550a1ef5de6cb9f..b77d1e4483b728cf5b889137f24e97600ff52f96 100644
--- a/static/locations.html
+++ b/static/locations.html
@@ -2,11 +2,12 @@
<html>
<head>
<link rel="stylesheet" href= "CSS/locations.css">
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.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>
+ <section>
+ <h1><img src="Media/logo.png" class="logo"/> Our Locations </h1>
<button>
<span></span>
<span></span>
@@ -14,29 +15,44 @@
</button>
<nav>
<ul>
- <li><a href="#"> Home </a></li>
- <li><a href="#"> ### </a></li>
- <li><a href="#"> ### </a></li>
- </ul>
+ <li><a href="landingpage.html"> Home </a></li>
+ <li><a href="#"> ### </a></li>
+ <li><a href="#"> ### </a></li>
+ </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" >
-
+ <h2> Codebase </h2>
+ <p>hhhhhhhhhhhhhhhhhhhhhhhhhhh</p>
+ <div class= star>
+ <span class="fa fa-star fa-3x checked" ></span>
+ <span class="fa fa-star fa-3x checked"></span>
+ <span class="fa fa-star fa-3x checked"></span>
+ <span class="fa fa-star fa-3x" ></span>
+ <span class="fa fa-star fa-3x" ></span>
+ </div>
<div class="middle">
<div class="text"> Codebase </div>
- </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">
+ <img src="https://wearecatalyst.org/wp-content/uploads/2022/05/Catalyst03.jpg" class="image" >
+ <h2> Catalyst </h2>
+ <p>hhhhhhhhhhhhhhhhhhhhhhhhhhh</p>
+ <div class= star>
+ <span class="fa fa-star fa-3x checked" ></span>
+ <span class="fa fa-star fa-3x checked"></span>
+ <span class="fa fa-star fa-3x checked"></span>
+ <span class="fa fa-star fa-3x" ></span>
+ <span class="fa fa-star fa-3x" ></span>
+ </div>
+ <div class="middle">
<div class="text"> Catalyst </div>
</div>
</div>
@@ -44,7 +60,15 @@
<li>
<div class="container">
<img src="https://images.squarespace-cdn.com/content/v1/5709040420c647579532dbb4/1594914119071-OWI9G22S295OCMSWL0VL/_K5L1162.jpg?format=2500w" Class="image" >
-
+ <h2> C4DI </h2>
+ <p>hhhhhhhhhhhhhhhhhhhhhhhhhhh</p>
+ <div class= star>
+ <span class="fa fa-star fa-3x checked" ></span>
+ <span class="fa fa-star fa-3x checked"></span>
+ <span class="fa fa-star fa-3x checked"></span>
+ <span class="fa fa-star fa-3x" ></span>
+ <span class="fa fa-star fa-3x" ></span>
+ </div>
<div class="middle">
<div class="text"> C4DI </div>
</div>
@@ -54,7 +78,15 @@
<li>
<div class="container">
<img src="https://dogpatchlabs.wpenginepowered.com/wp-content/uploads/2022/09/ian_browne.jpg" class="image" >
-
+ <h2> Dogpatch </h2>
+ <p>hhhhhhhhhhhhhhhhhhhhhhhhhhh</p>
+ <div class= star>
+ <span class="fa fa-star fa-3x checked" ></span>
+ <span class="fa fa-star fa-3x checked"></span>
+ <span class="fa fa-star fa-3x checked"></span>
+ <span class="fa fa-star fa-3x" ></span>
+ <span class="fa fa-star fa-3x" ></span>
+ </div>
<div class="middle">
<div class="text"> Dogpatch </div>
</div>
@@ -64,16 +96,30 @@
<li>
<div class="container">
<img src="https://stationf.co/img/misc/create-zone.jpg" class="image" >
-
+ <h2>Station F </h2>
+ <p>hhhhhhhhhhhhhhhhhhhhhhhhhhh</p>
+ <div class= star>
+ <span class="fa fa-star fa-3x checked" ></span>
+ <span class="fa fa-star fa-3x checked"></span>
+ <span class="fa fa-star fa-3x checked"></span>
+ <span class="fa fa-star fa-3x" ></span>
+ <span class="fa fa-star fa-3x" ></span>
+ </div>
<div class="middle">
<div class="text"> Station F </div>
</div>
</div>
</li>
</ul>
+ <div>
+ {%if data%}
+ {{ data }}
+ {%endif%}
+ </div>
</div>
-
</section>
+ <footer>
+ </footer>
<script src="JS/locations.js"> </script>
</body>
diff --git a/templates/ListLocations.html b/templates/ListLocations.html
index e7d8052ea108762a80595592c2c729a4ea8ad93d..3503048a5b526bdb22658fd92d190d6a9f7dcba6 100644
--- a/templates/ListLocations.html
+++ b/templates/ListLocations.html
@@ -3,7 +3,6 @@
{%block headblock%}
<title> Locations </title>
{%endblock%}
-
{%block headerblock%}
<a id="headerText"
href="ListLocations">
@@ -14,10 +13,29 @@
<br><br>
{%if data%}
{%for x in range(data|length)%}
- {{data[x][0]}}
- {{data[x][1]}}
+
<br><br>
+ <div class="contain">
+ <ul class= "list">
+ <li>
+ <div class="container">
+ <img src= "{{data[x][1]}}" class="image" >
+ <h2> {{data[x][0]}} </h2>
+ <p>hhhhhhhhhhhhhhhhhhhhhhhhhhh</p>
+ <div class= star>
+ <span class="fa fa-star fa-3x checked" ></span>
+ <span class="fa fa-star fa-3x checked"></span>
+ <span class="fa fa-star fa-3x checked"></span>
+ <span class="fa fa-star fa-3x" ></span>
+ <span class="fa fa-star fa-3x" ></span>
+ </div>
+ <div class="middle">
+ <div class="text">{{data[x][0]}}</div>
+ </div>
+ </div>
+ </li>
{%endfor%}
+
{%endif%}
{%endblock%}
diff --git a/templates/Manage_Coworking_Spaces.html b/templates/Manage_Coworking_Spaces.html
index 9c3cd6bc00e9c1e55147c60be93ba83abbf8ab3b..39922679cb88cefdfe55da9f68e61dc355ac919d 100644
--- a/templates/Manage_Coworking_Spaces.html
+++ b/templates/Manage_Coworking_Spaces.html
@@ -2,7 +2,6 @@
{%block headblock%}
<title> Manage Coworking Spaces </title>
- <link rel="stylesheet" href="/static/CSS/Manage_Coworking_Spaces.css">
{%endblock%}
{%block headerblock%}
diff --git a/templates/base_template.html b/templates/base_template.html
index 480dbb778dbf0c5c105d27a92186e3846d53a99f..d71ce278b095978818213584267e7480cf065ba0 100644
--- a/templates/base_template.html
+++ b/templates/base_template.html
@@ -2,6 +2,7 @@
<html lang="EN" dir="ltr">
<head>
<meta charSet="UTF-8">
+ <link rel="stylesheet" href="/static/CSS/Manage_Coworking_Spaces.css">
{%block headblock%}
{%endblock%}
</head>