Fixed JS

css/general.css

@@ -1197,6 +1197,10 @@ section {
   transition: 0.5s;
 }
 
+/* .cal-card:hover > #community-room {
+  visibility: visible !important;
+} */
+
 #fri {
   background-color: #18b14b65;
 }
@@ -1303,6 +1307,7 @@ section {
   padding: 3px;
   height: 500px;
   border: 1px solid white;
+  position: relative;
 }
 
 #map {
@@ -1310,15 +1315,26 @@ section {
   width: 100%;
 
   border-radius: 10px;
-  z-index: 0;
+  position: relative;
+  z-index: 1;
 }
 
-#map-iframe {
-  border: 0;
+/* #community-room {
+  width: 100%;
+  height: 99%;
+  position: absolute;
   border-radius: 10px;
+  margin-top: 3px;
+  visibility: hidden;
+  top: 0;
+}
+
+#com-room-img {
   width: 100%;
   height: 100%;
-}
+  border-radius: 10px;
+  object-fit: contain;
+} */
 
 #rules-description {
   margin: 10px 20px;

index.html

@@ -411,6 +411,7 @@
                 </div>
                 <div id="map-container">
                     <div id="map"></div>
+                    <!-- <div id="community-room"><img id="com-room-img" src="img/GL_Community_Room.jpg"></div> -->
                 </div>
             </article>
         </section>

js/scroll_element.js

@@ -1,3 +1,4 @@
+// Creating an observer when the user views that element
 const observer = new IntersectionObserver(entries => {
     // Loop over the entries
     entries.forEach(entry => {
@@ -10,55 +11,40 @@ const observer = new IntersectionObserver(entries => {
   });
 
   const observer_prize_2 = new IntersectionObserver(entries => {
-    // Loop over the entries
     entries.forEach(entry => {
-      // If the element is visible
       if (entry.isIntersecting) {
-        // Add the animation class
         entry.target.classList.add('slide-animation-prize-2');
       }
     });
   });
 
   const observer_prize_1 = new IntersectionObserver(entries => {
-    // Loop over the entries
     entries.forEach(entry => {
-      // If the element is visible
       if (entry.isIntersecting) {
-        // Add the animation class
         entry.target.classList.add('slide-animation-prize-1');
       }
     });
   });
   
   const observer_prize_3 = new IntersectionObserver(entries => {
-    // Loop over the entries
     entries.forEach(entry => {
-      // If the element is visible
       if (entry.isIntersecting) {
-        // Add the animation class
         entry.target.classList.add('slide-animation-prize-3');
       }
     });
   });
 
   const observer_team_img = new IntersectionObserver(entries => {
-    // Loop over the entries
     entries.forEach(entry => {
-      // If the element is visible
       if (entry.isIntersecting) {
-        // Add the animation class
         entry.target.classList.add('slide-animation-card-img');
       }
     });
   });
 
   const observer_team_desc = new IntersectionObserver(entries => {
-    // Loop over the entries
     entries.forEach(entry => {
-      // If the element is visible
       if (entry.isIntersecting) {
-        // Add the animation class
         entry.target.classList.add('slide-animation-card-desc');
       }
     });
@@ -74,26 +60,13 @@ const observer = new IntersectionObserver(entries => {
     observer_team_desc.observe(entry);
   });
 
-  observer.observe(document.querySelector('#description-heading'));
-  observer.observe(document.querySelector('#event-main-box'));
-  observer.observe(document.querySelector('#timeline'));
-  observer.observe(document.querySelector('#signup-title'));
-  observer.observe(document.querySelector('#steps-card'));
-  observer.observe(document.querySelector('#sponsor-title'));
-  observer.observe(document.querySelector('#sponsor-container'));
-  observer.observe(document.querySelector('#map-article'));
-  observer.observe(document.querySelector('#rules-description'));
-  observer.observe(document.querySelector('#guidelines'));
-  observer.observe(document.querySelector('#code-of-conduct'));
-  observer.observe(document.querySelector('#photo-release-container'));
-  observer.observe(document.querySelector('#second-column'));
-  observer.observe(document.querySelector('#first-column'));
-  observer.observe(document.querySelector('#third-column'));
+
+  // Adding the class animations to these elements
+  let elements_id = ['#description-heading', '#event-main-box', '#timeline', '#signup-title', '#steps-card', '#sponsor-title', '#sponsor-container', '#map-article', '#rules-description', '#guidelines', '#code-of-conduct', '#photo-release-container', '#second-column', '#first-column', '#third-column', '#administration', '#logistics', '#outreach', '#tech', '#marketing'];
+  elements_id.forEach(entry => {
+    observer.observe(document.querySelector(entry));
+  });
+
   observer_prize_2.observe(document.querySelector('#second-place'));
   observer_prize_1.observe(document.querySelector('#first-place'));
-  observer_prize_3.observe(document.querySelector('#third-place'));
-  observer.observe(document.querySelector('#administration'));
-  observer.observe(document.querySelector('#logistics'));
-  observer.observe(document.querySelector('#outreach'));
-  observer.observe(document.querySelector('#tech'));
-  observer.observe(document.querySelector('#marketing'));
+  observer_prize_3.observe(document.querySelector('#third-place'));