Merge pull request nss-day-cohort-47#25 from nss-day-cohort-47/jrg--w…

…eek5-5A

resaved css stylings to add to main

index.html

@@ -42,8 +42,8 @@ <h1>Itinerary Preview</h2>
 
         </div>
     </main>
-    <aside>
-
+    <aside class="aside">
+        <h3>Your Trip awaits</h3>        
     </aside>
     <footer>
         <!-- ! FOOTER -->

scripts/parks/ParkPreview.js

@@ -1,15 +1,14 @@
 export const displayPark = (parkObj) => {
     const contentElement = document.querySelector(".parkCard")
 
-    let parkDisplay =  `
-                            <h2>${parkObj.fullName}</h2>
-                            <p>${parkObj.addresses[0].city}, ${parkObj.states}</p><br>
+    let parkDisplay =       `<h2 id="parkName">${parkObj.fullName}</h2>
+                            <p id="parkLocation">${parkObj.addresses[0].city}, ${parkObj.states}</p><br>
                             <p> <a href="${parkObj.url}">Visit the ${parkObj.fullName} official website!</a> </p><br>
+                            <button id="parkDetails" value="${parkObj.parkCode}">Detail Snapshot</button>
                             <latitude id="parkLat" value="${parkObj.latitude}"></latitude>
                             <longitude id="parkLng" value="${parkObj.longitude}"></longitude>
-                            <button id="parkDetails" value="${parkObj.parkCode}">Details Snapshot</button>
                             <div id="parkForecast"></div>
-                        `;
+                            </section>`;
 
     contentElement.innerHTML = parkDisplay;
 }

styles/main.css

@@ -1,7 +1,87 @@
-#parkForecast {
+/* The hero image */
+.hero-image {
+    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
+    width: 99vw;
+    height: 45vh;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    position: relative;
+    filter: brightness(60%);
+    object-fit: cover;
+  }
+
+body {
+      background: rgb(200, 208, 157);
+}
+
+.logo {
+      height: 90px;
+      width: 100px;
+      object-fit: cover;
+      border-radius: 200%;
+      border:  solid #84703e;
+}
+
+.dropdown {
+        z-index: 999999;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        font-size: 18px;
+        justify-content: space-evenly;
+        margin: 0;
+        padding: 0
+}
+
+.dropdownSelect :hover {
+        background-color: #cbb68e;
+}
+
+header {
+    box-sizing: border-box;
+    background: #ae4c1b;
+    text-align: left;
+    position: relative;
+    padding: 5px 5px 5px 5px;
+    height: 100px;
+}
+
+.dropdown-content {
+    display: none;
+    position: absolute;
+    background-color: #f9f9f9;
+    min-width: 160px;
+    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+    /*z-index: 1;*/
+}
+
+html {
     display: flex;
+}
+
+#eaterySelect, #parkSelect, #attractionSelect {
+    flex-direction: row;
+    justify-items: stretch;
+}
+
+.previewSection {
+    border-style: ouset;
+}
+
+#parkForecast {
+  display: flex;
+}
+
+a:link {
+    color:#ae4c1b;
+  }
 
-aside {
-    border: dodgerblue dotted;
+a:hover {
+    color: #CBB68E;
+  }
 
+a:visited {
+  color:#84703e;
 }