Added Google Maps

css/general.css

@@ -132,11 +132,6 @@ nav li a:focus::after{
 }
 
 /* Responsive Functions */
-@media (max-width: 1156px) {
-  #signup-header {
-    margin-top: 20px;
-  }
-}
 @media (max-width: 880px) {
   #photo-release-container {
     transform: scale(0.8);
@@ -739,6 +734,7 @@ section {
     margin-top: 30px;
     margin-left: 0;
     text-align: left;
+    margin-bottom: 20px;
   }
 }
 @media (max-width: 480px) {
@@ -982,6 +978,29 @@ section {
   }
 }
 
+#map-article {
+margin: 20px 100px;
+}
+
+#map-title {
+  font-size: 25px;
+  margin-bottom: 10px;
+}
+
+#google-maps {
+  border-radius: 10px;
+  padding: 3px;
+  height: 500px;
+  border: 1px solid white;
+}
+
+#map {
+  border: 0;
+  border-radius: 10px;
+  width: 100%;
+  height: 100%;
+}
+
 #rules-description {
   margin: 10px 20px;
   font-size: 18px;
@@ -1261,6 +1280,15 @@ section {
   border: 0px solid rgb(54, 54, 54);
 }
 
+@keyframes card-pullout {
+  0% {
+    transform: rotate3d(0, 1, 0, 0deg);
+  }
+  100% {
+    transform: rotate3d(0, 1, 0, 360deg);
+  }
+}
+
 .team-entry:hover {
   transform: scale(1.01);
   border: 1px solid rgb(54, 54, 54);
@@ -1270,6 +1298,7 @@ section {
 .team-picture {
   width: auto;
   height: auto;
+  animation: card-pullout ease 2s;
 }
 
 .team-picture img {

index.html

@@ -257,6 +257,12 @@
                     </div>
                 </article>
             </div>
+            <article id="map-article">
+                <h2 id="map-title">Event Location</h2>
+                <div id="google-maps">
+                    <iframe id="map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3186.195428202165!2d-121.5748893844308!3d37.00513386383601!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8091e3b7411b6c7b%3A0x23a4a857b416c1de!2sGilroy%20Library!5e0!3m2!1sen!2sus!4v1654314375400!5m2!1sen!2sus" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
+                </div>
+            </article>
         </section>
         <section id="rules">
             <h2 class="topic">Rules</h2>

js/scroll_element.js

@@ -46,6 +46,7 @@ const observer = new IntersectionObserver(entries => {
   observer.observe(document.querySelector('#event-main-box'));
   observer.observe(document.querySelector('#timeline'));
   observer.observe(document.querySelector('#signup-article'));
+  observer.observe(document.querySelector('#map-article'));
   observer.observe(document.querySelector('#rules-description'));
   observer.observe(document.querySelector('#guidelines'));
   observer.observe(document.querySelector('#code-of-conduct'));