google for the win???

Author: steph1111

_includes/team-showcase.html

@@ -1,4 +1,4 @@
-<section class="hero is-halfheight has-text-left" id="team-showcase">
+<!-- <section class="hero is-halfheight has-text-left" id="team-showcase">
     <figure class="hero-background" id="rotating-image" style="background-size: cover; background-position: center;">
         <div class="overlay">
             <div class="container is-centered">
@@ -10,8 +10,42 @@ <h1 class="title has-text-white-ter is-size-1 is-uppercase has-text-weight-bold"
             </div>
         </div>
     </figure>
-</section>
+</section> -->
 
+<div id = "rotator1_div"></div>
+
+<script>
+    <!-- 
+        var rotator1imgs = new Array("https://raw.githubusercontent.com/CabrilloRoboticsClub/cabrillorobotics.github.io/41309abdbb5d93dbc6c0119bf8f97a3bb38ad743/assets/images/seahawk-II/gallery-seahawk-II/interview.webp", "https://raw.githubusercontent.com/CabrilloRoboticsClub/cabrillorobotics.github.io/41309abdbb5d93dbc6c0119bf8f97a3bb38ad743/assets/images/seahawk-II/gallery-seahawk-II/stack.webp");
+        var rotator1alt = new Array("qqjq", "liqjiq");
+        var rotatorHtml = "";
+        var endJs = "";
+    
+        for(var img in rotator1imgs){
+            var thisImg = new Image();
+            thisImg.src = rotator1imgs[img];
+        }
+        var rotator1imgCt = 2;
+        var rotator1currentAd = 0;
+        var target = "";
+        var rotator1banner = document.getElementById('rotator1');
+        
+        function rotator1cycle() {
+            var rotatorHtml = "";
+            var endJs = "";
+            if (rotator1currentAd == rotator1imgCt) {
+                rotator1currentAd = 0;
+            }
+    
+                rotatorHtml += '<img src="' + rotator1imgs[rotator1currentAd] + '" alt = "' + rotator1alt[rotator1currentAd] + '" id="rotator1">' + endJs;
+        document.getElementById("rotator1_div").innerHTML = rotatorHtml;	
+            rotator1currentAd++;
+            window.setTimeout(rotator1cycle,5000);
+        }
+        rotator1cycle();
+    // -->
+</script>
+<!-- 
 <script>
     document.addEventListener('DOMContentLoaded', function() {
         const images = [
@@ -35,4 +69,4 @@ <h1 class="title has-text-white-ter is-size-1 is-uppercase has-text-weight-bold"
         // Rotate the image every 5 seconds
         setInterval(rotateImage, 5000);
     });
-</script>
+</script> -->

assets/css/style.scss

@@ -448,31 +448,31 @@
         }
     }
 
-    #team-showcase {
-        position: relative;
-        height: 50vh;
-        background: var(--black);
+    // #team-showcase {
+    //     position: relative;
+    //     height: 50vh;
+    //     background: var(--black);
 
-        .hero-background {
-            width: 100%;
-            height: 100%;
-            background-size: cover;
-            background-position: center;
-            position: relative;
-        }
-        .overlay {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background-color: rgba(0, 0, 0, 0.7);
-            display: flex;
-            align-items: flex-end;
-            justify-content: flex-start;
-            padding: 2rem;
-        }
-    }
+    //     .hero-background {
+    //         width: 100%;
+    //         height: 100%;
+    //         background-size: cover;
+    //         background-position: center;
+    //         position: relative;
+    //     }
+    //     .overlay {
+    //         position: absolute;
+    //         top: 0;
+    //         left: 0;
+    //         width: 100%;
+    //         height: 100%;
+    //         background-color: rgba(0, 0, 0, 0.7);
+    //         display: flex;
+    //         align-items: flex-end;
+    //         justify-content: flex-start;
+    //         padding: 2rem;
+    //     }
+    // }
 
     #member {
         // this is for a shadow under the card, with the dark background it cant really be seen, consider making darker or removing