Added Sponsors section and more animations

css/general.css

@@ -242,7 +242,7 @@ nav li a:focus::after{
     background-size: cover;
     background-repeat: no-repeat;
     background-attachment: fixed;
-    height: 100vh; /* makes it so it covers the entire page */
+    height: 100vh;
 }
 
 #header {
@@ -482,6 +482,14 @@ section {
   margin-bottom: 26px;
 }
 
+#description-content {
+  text-align: center;
+  border-radius: 10px;
+  background-color: #202329;
+  padding: 20px 0;
+  margin: auto;
+}
+
 .list {
   padding-left: 20px;
 }
@@ -545,7 +553,6 @@ section {
   transform: translateY(-50%);
   background-color: #2C3E50;
   width: 80px;
-  /* width: 6vw; */
   height: 5px;
 }
 .timeline-input::before {
@@ -589,7 +596,6 @@ section {
 .dot-info span.year {
   bottom: -30px;
   right: -0.2vw;
-  /* transform: translateX(-60%); */
 }
 .dot-info span.label {
   top: -56px;
@@ -604,7 +610,7 @@ section {
   margin-top: 70px;
   font-size: 22px;
   font-weight: 400;
-  margin-bottom: 200px;
+  margin-bottom: 300px;
   text-align: left;
 }
 #timeline-descriptions-wrapper div {
@@ -886,7 +892,7 @@ section {
 }
 #checklist input[type=checkbox]:checked::after {
   animation: check-02 0.4s ease forwards;
-  left: -30px;
+  left: -31px;
 }
 #checklist input[type=checkbox]:checked + label {
   color: var(--disabled);
@@ -979,6 +985,25 @@ section {
   }
 }
 
+#sponsor-heading {
+  margin: 30px 0 0;
+}
+
+#sponsor-container {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 20px 5px;
+  justify-content: center;
+}
+
+#sponsor-container a:hover {
+  transform: scale(1.03);
+}
+
+#gilroy-library-logo {
+  height: 120px;
+}
+
 #map-article {
   margin: 20px auto 0;
   width: 90%;
@@ -1249,12 +1274,6 @@ section {
   margin-left: 7px;
   color: #ffde59;
 }
-/* 
-#first-podium:hover > .podium-label, #first-podium:hover > #prize-logo {
-  transform: scale(1.1);
-  margin: 5px;
-  transition: 0.5s;
-} */
 
 #team-container {
   width: 100%;
@@ -1281,15 +1300,45 @@ section {
   align-content: stretch;
   padding: 15px;
   border-radius: 10px;
+  width: 355px;
   border: 0px solid rgb(54, 54, 54);
 }
 
-@keyframes card-pullout {
+@keyframes card-img-pullout {
   0% {
-    transform: rotate3d(0, 1, 0, 0deg);
+    transform: translateX(110px);
+  }
+  50% {
+    transform: translateX(110px);
   }
   100% {
-    transform: rotate3d(0, 1, 0, 360deg);
+    transform: translateX(0px);
+  }
+}
+@keyframes card-desc-pullout {
+  0% {
+    transform: translateX(-110px);
+    opacity: 0;
+  }
+  50% {
+    transform: translateX(-110px);
+  }
+  80% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(0px);
+  }
+}
+@media (prefers-reduced-motion: no-preference) {
+  .slide-animation-card-img {
+    animation: card-img-pullout ease 2s;
+  }
+}
+@media (prefers-reduced-motion: no-preference) {
+  .slide-animation-card-desc {
+    animation: card-desc-pullout ease 2s;
   }
 }
 
@@ -1302,7 +1351,6 @@ section {
 .team-picture {
   width: auto;
   height: auto;
-  animation: card-pullout ease 2s;
 }
 
 .team-picture img {

index.html

@@ -82,16 +82,19 @@
             <hr class="line">
             <div id="event-container">
                 <article id="event-description">
-                    <h2 id="description-heading">Description</h2>
+                    <h2 id="description-heading">Our Mission Statement</h2>
                     <div id="event-main-box">
+                        <br>
+                        <div id="description-content">Gilroy Hacks is a student-led organization focused on promoting community engagement and improving STEM exposure to local high school students.</div>
+                        <br><hr class="line"><br>
                         <ul class="list">
-                            <li>Even if you're not an expert at coding, this hackathon will offer an opportunity to strengthen your skills and collaborate with others to create something useful. Below are important dates to keep in mind:
+                            <li>Even if you're not an expert at coding, this hackathon offers an opportunity for you to strengthen your skills and collaborate with others to create something useful. Below are important dates to keep in mind:
                                 <ul style="margin-left: 25px">
                                     <li><span class="emphasis-text">Aug 11</span> -> Signup Period Ends</li>
                                     <li><span class="emphasis-text">Aug 12-14</span> -> Summer 2022 Hackathon</li>
                                 </ul>
                             </li>
-                            <li>Our program is dedicated to providing the Gilroy/Morgan Hill/Hollister youth with the opportunity to develop their coding skills. We specialize in hackathons where students participate in teams and compete for prizes.</li>
+                            
                         </ul>
                     </div>
                     <!-- Timeline src: https://codepen.io/cjl750/pen/MXvYmg -->
@@ -255,6 +258,13 @@
                             </div>
                         </div>
                     </div>
+                    <h2 id="sponsor-heading">Sponsors</h2>
+                    <span class="caption">Thank you to all these amazing sponsors!</span>
+                    <div id="sponsor-container">
+                        <a href="https://sccld.org/" target="_blank">
+                            <img id="gilroy-library-logo" src="img/SCCLD_logo.png" alt="gilroy library logo">
+                        </a>
+                    </div>
                 </article>
             </div>
             <article id="map-article">

js/scroll_element.js

@@ -42,6 +42,38 @@ const observer = new IntersectionObserver(entries => {
     });
   });
 
+  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');
+      }
+    });
+  });
+
+  const entries = document.querySelectorAll('.team-picture');
+  entries.forEach(entry => {
+    observer_team_img.observe(entry);
+  });
+
+  const entries_desc = document.querySelectorAll('.team-description');
+  entries_desc.forEach(entry => {
+    observer_team_desc.observe(entry);
+  });
+
   observer.observe(document.querySelector('#description-heading'));
   observer.observe(document.querySelector('#event-main-box'));
   observer.observe(document.querySelector('#timeline'));