New sponsor carousel on hackStoga page, back button on sponsor page

hackstoga/index.html

@@ -63,12 +63,12 @@ <h1 id="title">hack<span style="color: var(--garnet)">Stoga</span></h1>
                 class="shape-fill"></path>
         </svg>
     </div>
-    <section id="about" class="screen pure-g">
+    <section id="about" class="screen pure-g" style="margin-top: -100px;">
         <div class="pure-u-1-12"><!-- formatting div PRE--></div>
         <div class="pure-u-5-6 pure-g">
             <h1>Sign Up</h1>
             <p>
-                <i>You're here early! Sign-ups are not available at this time. Check back closer to the event date.</i>
+                <i>Sign-ups will be available soon. Check back closer to the event date.</i>
             </p>
             <div class="formatting-separator"></div>
             <h1>What is a Hackathon?</h1>
@@ -110,18 +110,56 @@ <h1>Our Sponsors</h1>
                 <br><br>
                 If you would like to be a sponsor this year, learn more <a href="sponsor">here</a>.
             </p>
-            <!-- <div id="sponsor-logos" class="pure-g">
+            <div id="sponsor-logos" class="pure-g">
                 <div class="pure-u-1-1"><img class="pure-img" src="/media/hackathon/sponsor/sig.png"></div>
-                <div class="pure-u-11-24"><img class="pure-img" src="/media/hackathon/sponsor/uif.png"></div>
+                <!-- <div class="pure-u-11-24"><img class="pure-img" src="/media/hackathon/sponsor/uif.png"></div>
                 <div class="pure-u-1-12"></div>
                 <div class="pure-u-11-24"><img class="pure-img" src="/media/hackathon/sponsor/mathnasium.png"></div>
                 <div class="pure-u-1-3"><img class="pure-img" src="/media/hackathon/sponsor/keystone_volvo.png"></div>
                 <div class="pure-u-1-12"></div>
                 <div class="pure-u-1-6"><img class="pure-img" src="/media/hackathon/sponsor/clays_bakery.png"></div>
-                <div class="pure-u-1-3"></div>
-            </div> -->
+                <div class="pure-u-1-3"></div> -->
+            </div>
+
         </div>
+
         <div class="pure-u-1-6"><!-- formatting div POST--></div>
+
+        <!-- <div class = "pure-u-1-12"></div>
+            <div class="pure-u-5-6 pure-g" style="height: 700px;"></div>
+            <div class="pure-u-1-12"></div> -->
+
+
+        <div class="slider">
+            <ul class="brands">
+                <li class="brand"><img src="/media/hackathon/sponsor/carousel/mathnasium.png" alt="Mathnasium" width="auto" style="max-height: calc(100vw / 6); max-width: 800px;"></li>
+                <li class="brand"><img src="/media/hackathon/sponsor/carousel/uif.png" alt="UIF" width="auto" style="max-height: calc(100vw / 6); max-width: 800px;" ></li>
+                <li class="brand"><img src="/media/hackathon/sponsor/carousel/keystone_volvo.png" alt="Keystone Volvo" height="auto" width="auto" style="max-height: calc(100vw / 6); max-width: 800px;"></li>
+                <li class="brand"><img src="/media/hackathon/sponsor/carousel/clays_bakery.png" alt="Clay's Bakery" width="auto" style="max-height: 250px"></li>
+            </ul>
+        </div>
+
+        <script> const brands = document.querySelector('.brands') 
+        numBrands = brands.children.length
+        document.documentElement.style.setProperty('--num-logos', numBrands)
+
+        for (let i = 0; i < numBrands; i++) {
+            brands.appendChild(brands.children[i].cloneNode(true))
+        }
+
+        // on window resize
+
+        window.addEventListener('resize', () => {
+            document.documentElement.style.setProperty('--logo-width', 'calc(vw / 6)')
+            document.documentElement.style.setProperty('--total-width', 'calc(var(--num-logos) * var(--logo-width) * 2)')
+            console.log("Total width: " + getComputedStyle(document.documentElement).getPropertyValue('--total-width'))
+        })
+        </script>
+
+
+
+
+
     </section>
     <div class="triangle-divider" style="transform: rotate(0deg);">
         <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">

hackstoga/sponsor/index.html

@@ -20,10 +20,16 @@
       rel="stylesheet"
       href="https://cdn.jsdelivr.net/npm/[email protected]/build/grids-responsive-min.css"
     />
+
+    <!-- External script -->
+    <script src="https://kit.fontawesome.com/18234bc3bf.js" crossorigin="anonymous"></script>
+    <script src="/scripts/fontawesome.js" defer></script>
   </head>
 
   <body>
     <div id="main-cover" class="flex flex-center">
+      <a href="../index.html" class="back-button"><i class="fas fa-angle-left"></i> Back</a>
+
       <div class="pure-g pure-u-1 flex flex-center">
         <div class="video-background" id="video-container">
           <video id="video-background" autoplay muted loop>