form, templating, database connection and some CSS updates

Closes #14 (closed)

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