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

Removing old location files and renaming others.

parent 9659dc99
No related branches found
No related tags found
1 merge request!55Removing old location files and renaming others.
...@@ -36,7 +36,7 @@ def returnListLocations(): ...@@ -36,7 +36,7 @@ def returnListLocations():
cur.execute("SELECT Name, Main_Photo FROM coworking_spaces") cur.execute("SELECT Name, Main_Photo FROM coworking_spaces")
locationData = cur.fetchall() locationData = cur.fetchall()
conn.close() conn.close()
return render_template("ListLocations.html", data = locationData) return render_template("Locations.html", data = locationData)
@app.route("/Load/CodeBase") @app.route("/Load/CodeBase")
def Load(): def Load():
......
/* #iD and .Class
font, color, text
padding, background, border, margin
width, height,
position, top/right/bottom/left
overflow, float, display
.my-class {
width: calc(100% - 20px);
height: calc(50% + 10px);
} */
* {
font-family: Helvetica, Verdana, Arial, sans-serif;
}
body {
margin: 0;
padding: 0;
/* Below styling used for footer position. */
display: flex;
min-height: 100vh;
flex-direction: column;
}
ul, li {
list-style-type: none;
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
.Left {
margin-right: auto;
}
.Center {
margin-left: auto;
margin-right: auto;
}
.Right {
margin-left: auto;
}
/* [#1] Page header styling. Uses [#2].
header #pageHeader
div #headerDiv
a #headerText #headerImg
nav #headerNav .navBar
ul .Right, ul .Left
li a
*/
#headerDiv {
text-align: center;
background-color: white;
padding: 20px 0px;
display: flex;
align-items: center;
justify-content: flex-start;
}
#headerDiv a {
font-size: 30px;
font-weight: bold;
color: black;
}
#headerText {
width: 100%;
margin-left: -240px;
}
#headerImg {
width: 200px;
height: 65px;
margin-top: -10px;
margin-right: 20px;
margin-bottom: -17.5px;
margin-left: 20px;
}
#headerNav {
width: 100%;
position: absolute;
}
#headerNav a {
font-size: 20px;
padding: 7.5px 10px;
}
/* [#2] Page navigation styling. Used in [#1] and [#4]. */
.navBar {
background-color: #282A35;
display: flex;
justify-content: center;
align-items: center;
}
.navBar ul, .navBar li {
display: flex;
align-items: center;
}
.navBar a {
color: white;
}
.navBar a:hover {
background-color: #0B0C0F;
}
/* [#3] Page main styling.
main #pageMain
form #recordForm
label
input .formTextInput
button #addButton
*/
#pageMain {
/* Below styling used for footer position. */
flex: 1;
}
#recordForm {
margin-left: 5px;
}
#recordForm .formTextInput {
margin-top: 5px;
width: 50%;
}
/* [#4] Page footer styling. Uses [#2].
footer #pageFooter
nav #footerNav .navBar
ul .Center
li a
*/
#footerNav a {
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;
}
body{ /* #iD and .Class
background-color: white;
color: black; font, color, text
padding, background, border, margin
width, height,
position, top/right/bottom/left
overflow, float, display
.my-class {
width: calc(100% - 20px);
height: calc(50% + 10px);
} */
* {
font-family: Helvetica, Verdana, Arial, sans-serif;
}
body {
margin: 0;
padding: 0;
/* Below styling used for footer position. */
display: flex;
min-height: 100vh;
flex-direction: column;
}
ul, li {
list-style-type: none;
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
.Left {
margin-right: auto;
}
.Center {
margin-left: auto;
margin-right: auto;
}
.Right {
margin-left: auto;
}
/* [#1] Page header styling. Uses [#2].
header #pageHeader
div #headerDiv
a #headerText #headerImg
nav #headerNav .navBar
ul .Right, ul .Left
li a
*/
#headerDiv {
text-align: center;
background-color: white;
padding: 20px 0px;
display: flex;
align-items: center;
justify-content: flex-start;
}
#headerDiv a {
font-size: 30px;
font-weight: bold;
color: black;
}
#headerText {
width: 100%;
margin-left: -240px;
} }
#headerImg {
width: 200px;
height: 65px;
margin-top: -10px;
margin-right: 20px;
margin-bottom: -17.5px;
margin-left: 20px;
}
#headerNav {
width: 100%;
position: absolute;
}
#headerNav a {
font-size: 20px;
padding: 7.5px 10px;
}
/* [#2] Page navigation styling. Used in [#1] and [#4]. */
.navBar {
background-color: #282A35;
display: flex;
justify-content: center;
align-items: center;
}
.navBar ul, .navBar li {
display: flex;
align-items: center;
}
.navBar a {
color: white;
}
.navBar a:hover {
background-color: #0B0C0F;
}
/* [#3] Page main styling.
main #pageMain
form #recordForm
label
input .formTextInput
button #addButton
*/
#pageMain {
/* Below styling used for footer position. */
flex: 1;
}
#recordForm {
margin-left: 5px;
}
#recordForm .formTextInput {
margin-top: 5px;
width: 50%;
}
/* [#4] Page footer styling. Uses [#2].
footer #pageFooter
nav #footerNav .navBar
ul .Center
li a
*/
#footerNav a {
font-size: 15px;
padding: 5px 10px;
}
div.contain {
text-align: center;
}
ul.list {
display: inline-block;
list-style-type: none;
margin: 0;
}
.container { .container {
display: flex; display: flex;
position: relative; position: relative;
padding: 5px 640px 5px 5px; padding: 5px 660px 5px 5px;
width: 40%; width: 40%;
height: 50%; height: 50%;
background-color: white; 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); 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; margin-bottom: 25px;
border-radius: 10px; border-radius: 10px;
margin-left: 20px;
} }
...@@ -51,9 +215,7 @@ p{ ...@@ -51,9 +215,7 @@ p{
left: 40%; left: 40%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
margin-top: 80px; margin-top: 80px;
} }
.middle { .middle {
transition: .5s ease; transition: .5s ease;
opacity: 0; opacity: 0;
...@@ -79,122 +241,3 @@ color: white; ...@@ -79,122 +241,3 @@ color: white;
font-size: 16px; font-size: 16px;
padding: 16px 32px; padding: 16px 32px;
} }
div.contain {
text-align: center;
}
ul.list {
display: inline-block;
list-style-type: none;
margin: 0;
}
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: absolute;
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: 18.1vh;
position: absolute;
top: 0;
right: 0;
width: 200px;
transform: translateX(100%);
margin-top: 2.25em;
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: #A9A9A9;
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">
<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="Media/logo.png" class="logo"/> Our Locations </h1>
<button>
<span></span>
<span></span>
<span></span>
</button>
<nav>
<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>
</li>
<li>
<div class="container">
<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>
</li>
<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>
</div>
</li>
<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>
</div>
</li>
<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>
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
{%block headblock%} {%block headblock%}
<title> Locations </title> <title> Locations </title>
<link rel="stylesheet" href="/static/CSS/ListLocations.css"> <link rel="stylesheet" href="/static/CSS/Locations.css">
{%endblock%} {%endblock%}
{%block headerblock%} {%block headerblock%}
<a id="headerText" <a id="headerText"
......
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