add sponsors to home page

Author: purna135

layouts/index.html

@@ -155,10 +155,64 @@ <h3> {{ .title }} </h3>
     <!-- ========================== END OF GOALS ========================== -->
 
 
-    
+    <!-- ================================== START OF PYMCON SPONSORS ============================== -->
+    <section class="section pymcon__sponsor">
+        <div class="container pymcon__sponsor__container">
+            <h1>Our <span>💖</span>Sponsors</h2>
+            <div class="slider">
+                <div class="logos__container">
+                    <div class="sponsor_logo">
+                        <a href="https://www.mistplay.com/" target="_blank">
+                            <img src="/images/sponsors_logos/mistplay_logo.jpg" alt="Mistplay logo">
+                        </a>
+                        <h2>Hamiltonian Monte Carlo</h2>
+                    </div>
+
+                    <div class="sponsor_logo">
+                        <a href="https://odsc.com/california/?utm_source=pymc&utm_medium=referral" target="_blank">
+                            <img src="/images/sponsors_logos/odsc_logo.jpg" alt="ODSC logo">
+                        </a>
+                        <h2>Hamiltonian Monte Carlo</h2>
+                    </div>
+                    
+                    <div class="sponsor_logo">
+                        <a href="https://numfocus.org/" target="_blank">
+                            <img src="/images/sponsors_logos/num_focus_logo.jpg" alt="NumFOCUS logo">
+                        </a>
+                        <h2>Non-profit Sponsors</h2>
+                    </div>
+
+                    <!-- ======== DUPLICATE FOR SLIDER TO WORK PROPERLY ======== -->
+
+                    <div class="sponsor_logo">
+                        <a href="https://www.mistplay.com/" target="_blank">
+                            <img src="/images/sponsors_logos/mistplay_logo.jpg" alt="Mistplay logo">
+                        </a>
+                        <h2>Hamiltonian Monte Carlo</h2>
+                    </div>
+
+                    <div class="sponsor_logo">
+                        <a href="https://odsc.com/california/?utm_source=pymc&utm_medium=referral" target="_blank">
+                            <img src="/images/sponsors_logos/odsc_logo.jpg" alt="ODSC logo">
+                        </a>
+                        <h2>Hamiltonian Monte Carlo</h2>
+                    </div>
+
+                    <div class="sponsor_logo">
+                        <a href="https://numfocus.org/" target="_blank">
+                            <img src="/images/sponsors_logos/num_focus_logo.jpg" alt="NumFOCUS logo">
+                        </a>
+                        <h2>Non-profit Sponsors</h2>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- ================================== END OF PYMCON SPONSORS ============================== -->
+
 
     <!-- ================================== START OF SUBSCRIBE ============================== -->
-    <section class="section subscribe" {{ if not $showFeaturedEvent }} style="background: transparent; margin: 8rem 0 4rem;" {{ end }}>
+    <!-- <section class="section subscribe" {{ if not $showFeaturedEvent }} style="background: transparent; margin: 8rem 0 4rem;" {{ end }}>
         <div class="container subscribe__container">
             <div class="subscribe__text">
                 <h2>Join the PyMC Discourse to stay updated</h2>
@@ -168,7 +222,7 @@ <h2>Join the PyMC Discourse to stay updated</h2>
             </div>
             <a href="{{ .Site.Author.discourse }}" class="btn subscribe__btn">Take me to the Discourse</a>
         </div>
-    </section>
+    </section> -->
     <!-- ================================== END OF SUBSCRIBE ============================== -->
 
 

static/css/home.css

@@ -460,6 +460,85 @@
 }
 
 
+/* ======================== PYMCON SPONSOR SLIDER ====================== */
+.pymcon__sponsor {
+    padding: 6rem 0 6rem;
+    background: var(--color-bg1);
+}
+
+.pymcon__sponsor__container {
+    display: grid;
+    grid-template-columns: 1fr 5fr;
+    gap: 1rem;
+    align-items: center;
+}
+
+.sponsor_logo {
+    background: var(--color-bg2);
+    width: 15rem;
+    height: auto;
+    margin: 0.6rem;
+    padding: 1rem;
+    border: 1px solid transparent;
+    border-radius: 1rem;
+    transition: var(--transition);
+}
+
+.sponsor_logo h2{
+    margin: 0;
+    padding-top: 0.5rem;
+    font-size: 0.9rem;
+}
+
+.sponsor_logo:hover {
+    border-radius: 0;
+    background: transparent;
+    border-color: var(--color-primary);
+}
+
+.sponsor_logo img {
+    transition: var(--transition);
+}
+
+.sponsor_logo:hover img {
+    transform: scale(1.07);
+}
+
+.sponsor_logo:focus-within img {
+    outline: 3px solid var(--color-red);
+    transform: scale(0.9);
+    outline-offset: 5px;
+    border-radius: 5px;
+}
+
+
+/* ============= LOGO SCROLL ANIMATION ============= */
+.slider {
+    width: 100%;
+    overflow: hidden;
+}
+
+.logos__container {
+    display: flex;
+    width: calc(16.2rem * 6);
+    animation: scrollLogos 10s linear infinite;
+}
+
+@keyframes scrollLogos {
+    0% {
+        transform: translateX(0);
+    }
+    100% {
+        transform: translateX(calc(-16.2rem * 3));
+    }
+}
+
+.logos__container:hover,
+.logos__container:focus-within {
+    animation-play-state: paused;
+}
+
+
 /* ======================== SUBSCRIBE ====================== */
 .subscribe {
     padding: 6rem 0 6rem;