giving day changes + small changes

1. made popup on the home page, with corresponding css changes
2. added a photo for the popup
3. fixed what_is_fsae page to properly showcase background photo
4. added kendrick as drivetrain lead onto leadership

Author: teahibiscus

Leadership.html

@@ -263,7 +263,7 @@ <h3 class ="member_title">Mechanical Technical Project Manager</h3>
             <!--list of names here-->
 
             <p class ="lead_name"> <b>Aly Chang</b> <em>Manufacturing Lead</em></p>
-                
+            <p class ="lead_name"><b>Aidan Lee</b> <em>Chassis Lead</em></p>
 
 
         </div>
@@ -272,46 +272,24 @@ <h3 class ="member_title">Mechanical Technical Project Manager</h3>
 
 
             <p class ="lead_name"> <b>Christian Reyes-Moreno</b> <em>Welding Lead</em></p>
-            
-            
-        </div>
-
-        <div class = "item">
-            <!--list of names here-->
-            
-            <p class ="lead_name"><b>Aidan Lee</b> <em>Chassis Lead</em></p>
-            
-            
-            
-            
-        </div>
-        <div class = "item">
-            <!--list of names here-->
-            
             <p class ="lead_name"><b>Colton Rogalski </b> <em>Vehicle Dynamics & Suspension Lead</em></p>
 
 
-            
-            
         </div>
+    
         <div class = "item">
             <!--list of names here-->
 
 
             <p class ="lead_name"> <b>Justin Judge </b> <em>Ergonomics Lead</em></p>
+            <p class ="lead_name"> <b>Kendrick Ng </b> <em>Drivetrain Lead</em></p>
 
 
 
         </div>
 
 
     </div>
-
-
-    
-
-      
-
 
 
     <script>

fs_team_cornucopia.jpg

@@ -262,6 +262,95 @@ h2 {
     z-index: 2;
 }
 
+/* START OF GIVING DAY ADDITIONS -Sritha*/
+
+ 
+  /* Hidden class to hide the popup */
+  .hidden {
+    display: none;
+    visibility: hidden;
+
+  }
+  
+  /* Popup styles */
+  .popup {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
+    text-align: center;
+  }
+  
+  /* Popup content */
+  .popup-content {
+    background: #1B263B;
+    padding: 20px;
+    border-radius: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    width: 70%;
+    margin: 2% 2% 2% 2%;
+    position: relative;
+  }
+
+  .popup-content a:link {
+    color: #f2e505;
+  }
+
+  .popup-content a:hover {
+    opacity: 0.5;
+    transition: opacity 0.5s ease;
+  }
+
+
+.popup-content a:visited { 
+    text-decoration: none; 
+    color: #f2e505;
+} 
+
+
+
+  .giving_title {
+    font-family: scandia-web;
+    color: #e6e6e6;
+    font-size: 2.5em; /* Adjust the font size as needed */
+    text-align: center; /* Centers the title */
+    width: 100%; /* Ensures full width */
+    margin: 0 auto 10px auto; /* Centered with space below */
+  }
+
+  .giving_desc {
+    font-family: titillium-web;
+    font-size: 1.25em; /* Adjust the font size as needed */
+    text-align: center; /* Ensures description is centered */
+    line-height: 1.5;
+    color: #e6e6e6;
+
+    opacity: 0.9; /* Optional for softer text */
+  }
+  
+  
+  /* Close button */
+  .close {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    font-size: 20px;
+    cursor: pointer;
+    color: #e6e6e6;
+
+  }
+/* END OF GIVING DAY ADDITIONS -SRITHA*/  
+
 .team_pic {
     flex: 0 0 40%;
     overflow: hidden;

home_page.css

@@ -81,6 +81,27 @@ <h3 class="never_has_there">Never Has There Been a Faster Slug</h3>
     </div>
 </div>
 
+<!--GIVING DAY ADDITIONS START HERE -->
+<button id="openPopup">Open Popup</button>
+
+  <!-- The Popup -->
+  <div id="popup" class="popup hidden">
+    <div class="popup-content">
+      <span id="closePopup" class="close">&times;</span>
+      <h3 class="giving_title">Giving Day is Here!</h3>
+      <img src="fs_team_cornucopia.jpg" width="40%">
+      <p class="giving_desc"> Giving Day is a  24-hour fundraising event for organizations at UC Santa Cruz, and we’re excited to be a part of it! <br>
+        This event is extremely important to the future of our club. Giving Day has historically been our largest source of funding, and it is this support that makes our project possible. Our fundraising goal for this year is 20 thousand dollars, between community donations and event challenges.
+
+        The money raised during Giving Day is the difference between having a basic, rules-passing car, or one that we’re able to take to the next level and incrementally improve on a year-by-year basis.<br>
+        <b>Even a small donation, starting at $5, can make a huge difference for our team! </b> 
+        <br> If you’d like to help, here’s the link to donate: <a href="https://give.ucsc.edu/giving-day-2024/?a=8831002" target="_blank">Formula Slug Giving Day</a> Thank you so much for considering!
+      </p>
+    </div>
+  </div>
+
+<!--END OF GIVING DAY ADDITIONS  -->
+
 <div class="main-section">
     <h2>What is Formula Slug?</h2>
     <p class = "p1">In Formula Slug, we pride ourselves on inclusivity, learning, and teamwork. We work together, designing and building a formula-style racing car. As a team, we maintain a high standard for engineering excellence and innovation. Our dedication to continuous learning, inclusive processes, and embracing challenges as opportunities for growth provides an environment where students can practice hands-on electrical and mechanical engineering, as well as manufacturing and business-related skills. Through collaboration and teamwork, we utilize our collective strengths to achieve our yearly design goals and drive towards a cleaner transportation future through hands-on engineering practice. Together, we strive to push the boundaries of automotive engineering and prepare the next generation of leaders in industry and research.</p>
@@ -117,6 +138,47 @@ <h2>Brief History</h2>
 
 </script>
 
+<!--START OF GIVING DAY SCRIPT-->
+<script>
+    document.addEventListener("DOMContentLoaded", () => {
+        
+
+        // Get the elements
+        const openPopup = document.getElementById('openPopup');
+        const closePopup = document.getElementById('closePopup');
+        const popup = document.getElementById('popup');
+
+        if (!openPopup || !closePopup || !popup) {
+            console.error("Some elements could not be found!");
+            return;
+        }
+
+        popup.classList.remove('hidden');
+
+        if (!sessionStorage.getItem('popupShown')) {
+            // If not, show the popup
+            popup.classList.remove('hidden');
+            sessionStorage.setItem('popupShown', 'true'); // Mark it as shown
+        }
+
+        // Event listener for closing the popup
+        closePopup.addEventListener('click', (e) => {
+            console.log("Closing popup..."); // Debugging log
+            popup.classList.add('hidden'); // Hide the popup
+            e.stopPropagation(); // Prevent event from bubbling up
+        });
+
+        // Close popup if clicked outside
+        window.addEventListener('click', (e) => {
+            if (e.target === popup) {
+                console.log("Closing popup due to background click..."); // Debugging log
+                popup.classList.add('hidden'); // Hide the popup
+            }
+        });
+    });
+</script>
+<!--END OF GIVING DAY SCRIPT-->
+
 
 </body>
 

home_page.html

@@ -109,7 +109,7 @@ nav {
     }
 
     .nav li .logo {
-        display: none; /* Optionally hide the logo on mobile */
+        display: none; 
     }
 }
 
@@ -136,7 +136,7 @@ p {
 .fsae_electric_pic {
     top: 10%;
     width: 100%;
-    height: 700px;
+    height: 100vh;
     background-image: url(what_is_fsae.jpg);
     background-repeat: no-repeat;
     background-size: cover;
@@ -165,7 +165,7 @@ p {
 .fsae_comp {
     position: relative;
     z-index: 50;
-    margin-top: 50vh;
+    margin-top: 80vh;
     background-color: #141624;
     color: #e6e6e6;
 }