From 2e4aa43ac52f05070e8f9ea36c871c581cd87161 Mon Sep 17 00:00:00 2001
From: Saumya Shahi <147405306+saumyashahi@users.noreply.github.com>
Date: Tue, 24 Dec 2024 20:54:54 +0530
Subject: [PATCH] Make Donation Banner Responsive and Sync Logo Colors
 Dynamically, (#603)

* Fixes #576. Replace outdated about text with perennial (#608)

Co-authored-by: Devin Ulibarri <devin@devinulibarri.com>

* Created a donation-banner for the website

Co-authored-by: Muhammad Haroon <haroongondal347@gmail.com>

---------

Co-authored-by: Devin Ulibarri <devin@ulibarri.website>
Co-authored-by: Devin Ulibarri <devin@devinulibarri.com>
Co-authored-by: Muhammad Haroon <haroongondal347@gmail.com>
---
 _includes/banner-mobile.html   |   3 -
 _includes/banner.html          |  20 ----
 _includes/donation_banner.html |  25 +++++
 _includes/nav.html             | 178 ++++++++-------------------------
 assets/entry-stop.svg          |  21 ++++
 assets/sparkles.svg            |   1 +
 css/custom.css                 | 145 ++++++++++++++++++++++++++-
 js/custom.js                   |  35 +++++--
 js/main.js                     | 124 +++++++++++++----------
 9 files changed, 331 insertions(+), 221 deletions(-)
 delete mode 100644 _includes/banner-mobile.html
 delete mode 100644 _includes/banner.html
 create mode 100644 _includes/donation_banner.html
 create mode 100644 assets/entry-stop.svg
 create mode 100644 assets/sparkles.svg

diff --git a/_includes/banner-mobile.html b/_includes/banner-mobile.html
deleted file mode 100644
index 85775223..00000000
--- a/_includes/banner-mobile.html
+++ /dev/null
@@ -1,3 +0,0 @@
-  <div class="d-flex">
-    <p style="padding:10px 5% 0 5%;">Our goal is $25k this fall, and every contribution counts! Whether you give $3 or more, your tax-deductible donation will help us continue to provide a unique learning environment where youth can solve authentic tasks and learn by doing. <a href="{{ site.baseurl }}/community/2024/12/03/help-SL-continue-to-transform-education/">Read more</a> about how we can make a difference together and <a href="https://www.paypal.com/donate?campaign_id=NEAV3YL4H6B5S">donate today!</a></p>
-  </div>
diff --git a/_includes/banner.html b/_includes/banner.html
deleted file mode 100644
index f989e5ab..00000000
--- a/_includes/banner.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<div class="d-flex">
-  <p style="padding:10px 5% 0 5%;">Our goal is $25k this fall, and every contribution counts! Whether you give $3 or more, your tax-deductible donation will help us continue to provide a unique learning environment where youth can solve authentic tasks and learn by doing. <a href="{{ site.baseurl }}/community/2024/12/03/help-SL-continue-to-transform-education/">Read more</a> about how we can make a difference together and <a href="https://www.paypal.com/donate?campaign_id=NEAV3YL4H6B5S">donate today!</a></p>
-  <!-- Paypal Start -->
-  <div id="donate-button-container">
-    <div id="donate-button"></div>
-    <script src="https://www.paypalobjects.com/donate/sdk/donate-sdk.js" charset="UTF-8"></script>
-    <script>
-      PayPal.Donation.Button({
-	  env:'production',
-	  hosted_button_id:'PTEFYZE5PUWNL',
-	  image: {
-	      src:'https://www.paypalobjects.com/images/Debit_Credit_APM.svg',
-	      alt:'Donate with PayPal button',
-	      title:'Donate to Sugar Labs today!',
-	  }
-      }).render('#donate-button');
-    </script>
-  </div>
-  <!-- Paypal End -->
-</div>
diff --git a/_includes/donation_banner.html b/_includes/donation_banner.html
new file mode 100644
index 00000000..d3da9bb8
--- /dev/null
+++ b/_includes/donation_banner.html
@@ -0,0 +1,25 @@
+<base href="/"> <!--Fix base path issue and ensure compatibility for nested URLs -->
+<div id="donation-banner">
+    <div class="donate-container">
+        <img aria-hidden="true" class="donate-icon" src="../assets/sparkles.svg" alt="Donation Icon">
+        <div class="donate-text-container">
+            <p class="donate-text">
+                Our goal is $25k this fall, and every contribution counts! Whether you give $3 or more, your
+                tax-deductible donation will help us continue to provide a unique learning environment where youth can
+                solve authentic tasks and learn by doing.
+                <a href="{{ site.baseurl }}/community/2024/12/03/help-SL-continue-to-transform-education"> Read more
+                </a>
+                about how we can make a difference together and donate today!
+            </p>
+        </div>
+        <button class="donate-button" id="donate-button"><a
+                href="https://www.paypal.com/donate?campaign_id=NEAV3YL4H6B5S">DONATE
+                NOW</a>
+        </button>
+        <div class="donate-close-button">
+            <button class="close-button" id="close-icon">
+                <img src="../assets/entry-stop.svg" alt="Close Banner" />
+            </button>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/_includes/nav.html b/_includes/nav.html
index 98f90946..ae88933f 100755
--- a/_includes/nav.html
+++ b/_includes/nav.html
@@ -2,12 +2,8 @@
 <header class="large" id="firstHeader">
   <div class="row">
     <div class="container">
-      <nav class="navbar-expand-lg donation-bar fixed-top">
-        <div class="container">
-        {% include banner.html %}
-        </div>
-      </nav>
-      <nav class="navbar navbar-default navbar-expand-lg fixed-top align-items-center d-flex justify-content-between     pb-0  pt-0">
+      <nav
+        class="navbar navbar-default navbar-expand-lg fixed-top align-items-center d-flex justify-content-between     pb-0  pt-0">
         <div class="logo1" id="navLogo">
           <a href="{{ site.baseurl }}/">{% include logo.svg %}</a>
         </div>
@@ -15,48 +11,25 @@
           <div class="zeroMarPadBtm ">
             <ul class="mr-5  navbar-nav" id="menuBar">
               <li class="nav-item dropdown align-self-center">
-                <a
-                  href="{{ site.baseurl }}/#"
-                  class="dropdown-toggle"
-                  data-toggle="dropdown"
-                  role="button"
-                  aria-haspopup="true"
-                  aria-expanded="false"
-                  >About<span class="caret"></span
-                ></a>
+                <a href="{{ site.baseurl }}/#" class="dropdown-toggle" data-toggle="dropdown" role="button"
+                  aria-haspopup="true" aria-expanded="false">About<span class="caret"></span></a>
                 <div class="dropdown-menu">
-                 <a class="dropdown-item" href="{{ site.baseurl }}/about-us"
-                 >About us</a>
-                 <a class="dropdown-item" href="{{ site.baseurl }}/about-us/#mission"
-                 >Our mission</a>
-                 <a class="dropdown-item" href="{{ site.baseurl }}/leadership"
-                 >Leadership and governance</a>
-                 <a class="dropdown-item" href="{{ site.baseurl }}/contact-us"
-                 >Contact us</a>
-                 <a class="dropdown-item" href="{{ site.baseurl }}/FAQ"
-                 >FAQs</a> 
+                  <a class="dropdown-item" href="{{ site.baseurl }}/about-us">About us</a>
+                  <a class="dropdown-item" href="{{ site.baseurl }}/about-us/#mission">Our mission</a>
+                  <a class="dropdown-item" href="{{ site.baseurl }}/leadership">Leadership and governance</a>
+                  <a class="dropdown-item" href="{{ site.baseurl }}/contact-us">Contact us</a>
+                  <a class="dropdown-item" href="{{ site.baseurl }}/FAQ">FAQs</a>
                 </div>
               </li>
 
 
               <li class="nav-item dropdown align-self-center">
-                <a
-                  href="{{ site.baseurl }}/#"
-                  class="dropdown-toggle"
-                  data-toggle="dropdown"
-                  role="button"
-                  aria-haspopup="true"
-                  aria-expanded="false"
-                  >News<span class="caret"></span
-                ></a>
+                <a href="{{ site.baseurl }}/#" class="dropdown-toggle" data-toggle="dropdown" role="button"
+                  aria-haspopup="true" aria-expanded="false">News<span class="caret"></span></a>
                 <div class="dropdown-menu">
-                <a class="dropdown-item"
-                  href="{{ site.baseurl }}/community-news"
-                  >Community News</a>
-                <a class="dropdown-item" href="{{ site.baseurl }}/event"
-                  >Events</a>
-                <a class="dropdown-item" href="{{ site.baseurl }}/press"
-                  >Press Release</a>
+                  <a class="dropdown-item" href="{{ site.baseurl }}/community-news">Community News</a>
+                  <a class="dropdown-item" href="{{ site.baseurl }}/event">Events</a>
+                  <a class="dropdown-item" href="{{ site.baseurl }}/press">Press Release</a>
                 </div>
               </li>
 
@@ -64,30 +37,17 @@
                 <a class="nav-link" href="{{ site.baseurl }}/#try">Try now</a>
               </li>
               <li class="nav-item">
-                <a class="nav-link" href="{{ site.baseurl }}/develop"
-                  >Join development</a
-                >
+                <a class="nav-link" href="{{ site.baseurl }}/develop">Join development</a>
               </li>
               <li class="nav-item">
-                <a class="nav-link" href="{{ site.baseurl }}/volunteering"
-                  >Volunteer</a
-                >
+                <a class="nav-link" href="{{ site.baseurl }}/volunteering">Volunteer</a>
               </li>
               <li class="nav-item dropdown align-self-center">
-                <a
-                  href="{{ site.baseurl }}/#"
-                  class="dropdown-toggle"
-                  data-toggle="dropdown"
-                  role="button"
-                  aria-haspopup="true"
-                  aria-expanded="false"
-                  >Donate<span class="caret"></span
-                ></a>
+                <a href="{{ site.baseurl }}/#" class="dropdown-toggle" data-toggle="dropdown" role="button"
+                  aria-haspopup="true" aria-expanded="false">Donate<span class="caret"></span></a>
                 <div class="dropdown-menu">
-                <a class="dropdown-item" href="{{ site.baseurl }}/donate"
-                  >Donate</a>
-                <a class="dropdown-item" href="https://www.bonfire.com/store/sugar-labs-merch/"
-                  >Store</a>
+                  <a class="dropdown-item" href="{{ site.baseurl }}/donate">Donate</a>
+                  <a class="dropdown-item" href="https://www.bonfire.com/store/sugar-labs-merch/">Store</a>
                 </div>
               </li>
             </ul>
@@ -102,111 +62,61 @@
 <div class="sticky-top bg-white container-fluid flex-fill w-100" id="secondHeader">
   <nav class="navbar navbar-expand-lg navbar-light">
     <div class="logo2">
-      <a href="{{ site.baseurl }}/">{% include logo.svg %}</a> 
+      <a href="{{ site.baseurl }}/">{% include logo.svg %}</a>
     </div>
-    <button
-      class="navbar-toggler"
-      type="button"
-      data-toggle="collapse"
-      data-target="#mainNav"
-      aria-controls="mainNav"
-      aria-expanded="false"
-      aria-label="Toggle navigation"
-    >
+    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainNav" aria-controls="mainNav"
+      aria-expanded="false" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
     </button>
-    {% include banner-mobile.html %}
     <div class="collapse navbar-collapse" id="mainNav">
       <ul class="navbar-nav ml-auto">
         <li class="nav-item dropdown">
-          <a
-            class="nav-link dropdown-toggle"
-            href="{{ site.baseurl }}/#"
-            id="navbarDropdown"
-            role="button"
-            data-toggle="dropdown"
-            aria-haspopup="true"
-            aria-expanded="false"
-          >
+          <a class="nav-link dropdown-toggle" href="{{ site.baseurl }}/#" id="navbarDropdown" role="button"
+            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
             About us
           </a>
           <div class="dropdown-menu" aria-labelledby="navbarDropdown">
-            <a class="dropdown-item" href="{{ site.baseurl }}/about-us"
-              >About us</a
-            >
-            <a class="dropdown-item" href="{{ site.baseurl }}/about-us/#mission"
-              >Our mission</a
-            >
-            <a class="dropdown-item" href="{{ site.baseurl }}/leadership"
-              >Leadership and governance</a
-            >
-            <a class="dropdown-item" href="{{ site.baseurl }}/contact-us"
-              >Contact us</a
-            >
-            <a class="dropdown-item" href="{{ site.baseurl }}/FAQ"
-              >FAQs</a
-            >
+            <a class="dropdown-item" href="{{ site.baseurl }}/about-us">About us</a>
+            <a class="dropdown-item" href="{{ site.baseurl }}/about-us/#mission">Our mission</a>
+            <a class="dropdown-item" href="{{ site.baseurl }}/leadership">Leadership and governance</a>
+            <a class="dropdown-item" href="{{ site.baseurl }}/contact-us">Contact us</a>
+            <a class="dropdown-item" href="{{ site.baseurl }}/FAQ">FAQs</a>
           </div>
         </li>
         <li class="nav-item dropdown">
-          <a
-            class="nav-link dropdown-toggle"
-            href="{{ site.baseurl }}/#"
-            id="navbarDropdown"
-            role="button"
-            data-toggle="dropdown"
-            aria-haspopup="true"
-            aria-expanded="false"
-          >
+          <a class="nav-link dropdown-toggle" href="{{ site.baseurl }}/#" id="navbarDropdown" role="button"
+            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
             News
           </a>
           <div class="dropdown-menu" aria-labelledby="navbarDropdown">
-            <a class="dropdown-item" href="{{ site.baseurl }}/community-news"
-              >Community News</a
-            >
-            <a class="dropdown-item" href="{{ site.baseurl }}/event"
-              >Events</a
-            >
-            <a class="dropdown-item" href="{{ site.baseurl }}/press"
-              >Press Release</a
-            >
+            <a class="dropdown-item" href="{{ site.baseurl }}/community-news">Community News</a>
+            <a class="dropdown-item" href="{{ site.baseurl }}/event">Events</a>
+            <a class="dropdown-item" href="{{ site.baseurl }}/press">Press Release</a>
           </div>
         </li>
         <li class="nav-item">
           <a class="nav-link" href="{{ site.baseurl }}/#try">Try now</a>
         </li>
         <li class="nav-item">
-          <a class="nav-link" href="{{ site.baseurl }}/develop"
-            >Join development</a
-          >
+          <a class="nav-link" href="{{ site.baseurl }}/develop">Join development</a>
         </li>
         <li class="nav-item">
-          <a class="nav-link" href="{{ site.baseurl }}/volunteering"
-            >Volunteer</a
-          >
+          <a class="nav-link" href="{{ site.baseurl }}/volunteering">Volunteer</a>
         </li>
         <li class="nav-item dropdown">
-          <a
-            class="nav-link dropdown-toggle"
-            href="{{ site.baseurl }}/#"
-            id="navbarDropdown"
-            role="button"
-            data-toggle="dropdown"
-            aria-haspopup="true"
-            aria-expanded="false"
-          >
+          <a class="nav-link dropdown-toggle" href="{{ site.baseurl }}/#" id="navbarDropdown" role="button"
+            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
             Donate
           </a>
           <div class="dropdown-menu" aria-labelledby="navbarDropdown">
-            <a class="dropdown-item" href="{{ site.baseurl }}/donate"
-              >Donate</a
-            >
-            <a class="dropdown-item" href="https://www.bonfire.com/store/sugar-labs-merch/"
-              >Store</a
-            >
+            <a class="dropdown-item" href="{{ site.baseurl }}/donate">Donate</a>
+            <a class="dropdown-item" href="https://www.bonfire.com/store/sugar-labs-merch/">Store</a>
           </div>
         </li>
       </ul>
     </div>
   </nav>
 </div>
+<div>
+  {% include donation_banner.html %}
+</div>
\ No newline at end of file
diff --git a/assets/entry-stop.svg b/assets/entry-stop.svg
new file mode 100644
index 00000000..a6580d21
--- /dev/null
+++ b/assets/entry-stop.svg
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
+  <!ENTITY fill_color "#FFFFFF">
+  <!ENTITY stroke_color "#010101">
+]>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="22.16" height="22.16" viewBox="0 0 22.16 22.16" id="browse-dialog-cancel" xml:space="preserve">
+  <g transform="matrix(1.3,0,0,1.3,-3.2682282,-3.3351543)" id="browse-dialog-cancel" style="stroke-width:2.69230771;stroke-miterlimit:4;stroke-dasharray:none">
+    <path
+       d="M 14.798121,7.2131543 6.9900671,15.021208"
+       id="path2986"
+       style="fill:none;stroke:&stroke_color;;stroke-width:2.69230771;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
+    <path
+       d="M 6.9900671,7.2131543 14.798121,15.021208"
+       id="path3756"
+       style="fill:none;stroke:&stroke_color;;stroke-width:2.69230771;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
+  </g>
+</svg>
+<!-- 
+This file uses `entry-stop.svg` from the `sugar-artwork` repository: 
+https://github.com/sugarlabs/sugar-artwork 
+-->
\ No newline at end of file
diff --git a/assets/sparkles.svg b/assets/sparkles.svg
new file mode 100644
index 00000000..38dc1bea
--- /dev/null
+++ b/assets/sparkles.svg
@@ -0,0 +1 @@
+<svg enable-background="new 0 0 128 128" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg"><path d="m121.59 60.83-13.93-4.49c-8.91-2.94-14.13-10.15-16.58-19.21l-6.13-29.86c-.16-.59-.55-1.38-1.75-1.38-1.01 0-1.59.79-1.75 1.38l-6.13 29.87c-2.46 9.06-7.67 16.27-16.58 19.21l-13.93 4.49c-1.97.64-2 3.42-.04 4.09l14.03 4.83c8.88 2.95 14.06 10.15 16.52 19.17l6.14 29.53c.16.59.49 1.65 1.75 1.65 1.33 0 1.59-1.06 1.75-1.65l6.14-29.53c2.46-9.03 7.64-16.23 16.52-19.17l14.03-4.83c1.94-.68 1.91-3.46-.06-4.1z" fill="#fdd835"/><path d="m122.91 62.08c-.22-.55-.65-1.03-1.32-1.25l-13.93-4.49c-8.91-2.94-14.13-10.15-16.58-19.21l-6.13-29.86c-.09-.34-.41-.96-.78-1.14l1.98 29.97c1.47 13.68 2.73 20.12 13.65 22 9.38 1.62 20.23 3.48 23.11 3.98z" fill="#ffee58"/><path d="m122.94 63.64-24.16 5.54c-8.51 2.16-13.2 7.09-13.2 19.99l-2.37 30.94c.81-.08 1.47-.52 1.75-1.65l6.14-29.53c2.46-9.03 7.64-16.23 16.52-19.17l14.03-4.83c.66-.24 1.08-.73 1.29-1.29z" fill="#f4b400"/><path d="m41.81 86.81c-8.33-2.75-9.09-5.85-10.49-11.08l-3.49-12.24c-.21-.79-2.27-.79-2.49 0l-2.37 11.31c-1.41 5.21-4.41 9.35-9.53 11.04l-8.16 3.54c-1.13.37-1.15 1.97-.02 2.35l8.22 2.91c5.1 1.69 8.08 5.83 9.5 11.02l2.37 10.82c.22.79 2.27.79 2.48 0l2.78-10.77c1.41-5.22 3.57-9.37 10.5-11.07l7.72-2.91c1.13-.39 1.12-1.99-.02-2.36z" fill="#fdd835"/><path d="m28.49 75.55c.85 7.86 1.28 10.04 7.65 11.67l13.27 2.59c-.14-.19-.34-.35-.61-.43l-7-2.57c-7.31-2.5-9.33-5.68-10.7-12.04s-2.83-10.51-2.83-10.51c-.51-1.37-1.24-1.3-1.24-1.3z" fill="#ffee58"/><g fill="#f4b400"><path d="m28.73 102.99c0-7.41 4.05-11.08 10.49-11.08l10.02-.41s-.58.77-1.59 1.01l-6.54 2.13c-5.55 2.23-8.08 3.35-9.8 10.94 0 0-2.22 8.83-2.64 9.76-.58 1.3-1.27 1.57-1.27 1.57z"/><path d="m59.74 28.14c.56-.19.54-.99-.03-1.15l-7.72-2.08c-1.62-.44-2.88-1.69-3.34-3.3l-3.04-12.55c-.15-.61-1.02-.61-1.17.01l-2.86 12.5c-.44 1.66-1.74 2.94-3.4 3.37l-7.67 1.99c-.57.15-.61.95-.05 1.15l8.09 2.8c1.45.5 2.57 1.68 3.01 3.15l2.89 11.59c.15.6 1.01.61 1.16 0l2.99-11.63c.45-1.47 1.58-2.64 3.04-3.13z" stroke="#f4b400" stroke-miterlimit="10"/></g></svg>
\ No newline at end of file
diff --git a/css/custom.css b/css/custom.css
index 0c727682..3e233b46 100644
--- a/css/custom.css
+++ b/css/custom.css
@@ -73,8 +73,147 @@
   padding-left: 44%;
 }
 
-.donation-bar {
+/* Styles for the donation banner */
+
+#donation-banner .donate-container {
+  position: sticky;
+  display: flex;
+  flex-direction: row;
+  align-content: normal;
+  justify-content:center;
+  align-items: center;
+  /* background-color: rgb(0, 49, 109); */
+  padding: 15px 10px;
+  margin: 0;
+  width: 100%;
+  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
+}
+
+#donation-banner {
+  transition: opacity 0.3s ease, visibility 0.3s ease;
+  opacity: 1;
+  visibility: visible;
+}
+
+#donation-banner.hidden {
+  opacity: 0;
+  visibility: hidden;
+}
+
+.donate-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  margin: 0 auto;
+  flex-wrap: wrap;
+  padding: 0 10px;
+}
+
+.donate-icon {
+  width: 40px;
+  height: 40px;
+  margin-right: 10px;
+}
+
+.donate-text-container {
+  text-align: left;
+  justify-content: center;
+  padding: 5px 15px;
+  
+}
+
+.donate-text {
+  color: white;
+  font-size: 1 rem;
+  font-weight: bold;
+  line-height: 1.5;
+  max-width: 70vw;
+  margin-top: 0.19rem;
+  margin-bottom: 0.19rem;
+}
+
+.donate-text a {
+  color: #FFD700;
+  text-decoration: underline;
+}
+
+.donate-button {
+  border: none;
+  border-radius: 20px;
+  padding: 10px 20px;
   background-color: white;
-  margin-top: 90px;
-  padding: 10px 0; 
+  /* color: rgb(0, 49, 109); */
+  font-weight: bold;
+  cursor: pointer;
+  text-decoration: none;
+  margin: .375rem auto;
 }
+
+.donate-button a {
+  color: rgb(0, 49, 109);
+  text-decoration: none;
+}
+
+.donate-button:hover {
+  background-color: #FFD700;
+  color: rgb(0, 49, 109);
+}
+
+.donate-close-button .close-button{
+  background-color: rgba(255, 255, 255, 0.2);
+  border: none;
+  border-radius: 50%;
+  cursor: pointer;
+  width: 2rem;
+}
+
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  .donate-banner .donate-container{
+    flex-direction: column;
+    flex-wrap: wrap;
+    align-items: center;
+    text-align: center;
+    padding: 10px;
+    
+  }
+
+  @media only screen and (max-width: 640px) {
+    .donate-banner .donate-container .donate-button {
+      margin-bottom: 1rem;
+    }
+  }
+  .donate-icon {
+    margin-bottom: 10px;
+  }
+
+  .donate-text-container {
+    max-width: 100%;
+    margin-bottom: 10px;
+  }
+
+  .donate-text {
+    font-size: 0.9rem;
+  }
+
+  .donate-button {
+    text-align: center;
+  }
+
+  .donate-close-button {
+    position: relative;
+    top: 0;
+    right: 0;
+    vertical-align: middle;
+  }
+
+  .donation-bar {
+    background-color: white;
+    margin-top: 90px;
+    padding: 10px 0; 
+  }
+  
+}
\ No newline at end of file
diff --git a/js/custom.js b/js/custom.js
index 7ec8f650..2e5ea841 100644
--- a/js/custom.js
+++ b/js/custom.js
@@ -1,11 +1,11 @@
 //show answer and change indicator for /FAQ page
 function toggleAnswer(answerId, element) {
     const answer = document.getElementById(answerId);
-    const indicator = element.querySelector('.indicator'); 
+    const indicator = element.querySelector('.indicator');
 
     if (answer) {
         answer.classList.toggle('d-none');
-        
+
         if (answer.classList.contains('d-none')) {
             indicator.innerHTML = '+';
         } else {
@@ -17,11 +17,11 @@ function toggleAnswer(answerId, element) {
 // Counter Animation of the home page 
 document.addEventListener('DOMContentLoaded', () => {
     const counters = document.querySelectorAll('.count');
-    
+
     // Function to animate the counter
     function animateCounter(counter) {
         const target = +counter.getAttribute('data-target');
-        const speed = 200; 
+        const speed = 200;
 
         const updateCount = () => {
             const current = +counter.innerText;
@@ -31,13 +31,13 @@ document.addEventListener('DOMContentLoaded', () => {
                 counter.innerText = Math.ceil(current + increment);
                 setTimeout(updateCount, 10); // Repeat every 10ms
             } else {
-                
+
                 if (target === 170) {
-                    counter.innerText = `${target}`; 
+                    counter.innerText = `${target}`;
                 } else {
                     counter.innerText = `${target}+`;
                 }
-              
+
             }
         };
 
@@ -46,8 +46,8 @@ document.addEventListener('DOMContentLoaded', () => {
 
     // Use IntersectionObserver to detect when the element comes into view
     const observerOptions = {
-        root: null, 
-        threshold: 0.3 
+        root: null,
+        threshold: 0.3
     };
 
     const observer = new IntersectionObserver((entries, observer) => {
@@ -62,4 +62,21 @@ document.addEventListener('DOMContentLoaded', () => {
     counters.forEach(counter => {
         observer.observe(counter); // Observe each counter
     });
+
+});
+
+//Donation Banner 
+// Ensures that the buttons have loaded correctly before executing code
+document.addEventListener('DOMContentLoaded', () => {
+
+    const donateBanner = document.getElementById("donation-banner");
+    const closeBtn = document.getElementById("close-icon");
+
+    if (closeBtn) {
+        closeBtn.addEventListener("click", () => {
+            if (donateBanner) {
+                donateBanner.style.display = "none"; // Hide the banner on click
+            }
+        });
+    }
 });
\ No newline at end of file
diff --git a/js/main.js b/js/main.js
index 94826841..cc9809bc 100755
--- a/js/main.js
+++ b/js/main.js
@@ -1,31 +1,52 @@
-$(document).ready(function(){
-    // Colour changing affect of logo
+$(document).ready(function () {
+    // Colour changing affect of logo and donation banner
     var COLORS = [['006E00', '78E600'], ['68008C', '78E600'],
-                  ['006E00', '00BEFF'], ['033CD2', '00BEFF'],
-                  ['6E008C', '00BEFF'], ['A00000', 'FF7800'],
-                  ['033CD2', 'FF64D2'], ['6E008C', 'FF64D2'],
-                  ['6E008C', 'FF7800'], ['033CD2', 'FF7800'],
-                  ['006E00', 'FFD732'], ['6E008C', 'FFD732']];
-    var color = Math.floor((Math.random() * 12));
-    var logoID = color + 1;
+    ['006E00', '00BEFF'], ['033CD2', '00BEFF'],
+    ['6E008C', '00BEFF'], ['A00000', 'FF7800'],
+    ['033CD2', 'FF64D2'], ['6E008C', 'FF64D2'],
+    ['6E008C', 'FF7800'], ['033CD2', 'FF7800'],
+    ['006E00', 'FFD732'], ['6E008C', 'FFD732']];
+
+    //select random colors              
+    var colorIndex = Math.floor((Math.random() * 12));
+    var selectedColors = COLORS[colorIndex];
+
+    //Apply selected colors to the Sugarlabs logo
+    var logoID = colorIndex + 1;
     if (logoID < 10) {
         logoID = "0" + logoID;
     }
     document.querySelector('#defaultIcon1').href = 'https://www.sugarlabs.org/assets/favicon_' + logoID + '.png';
     var h = document.querySelector('.logo1').innerHTML;
-    h = h.replace(/033cd2/g, COLORS[color][0]);
-    h = h.replace(/78e600/g, COLORS[color][1]);
+    h = h.replace(/033cd2/g, selectedColors[0]);
+    h = h.replace(/78e600/g, selectedColors[1]);
     document.querySelector('.logo1').innerHTML = h;
-    if(document.getElementById("secondHeader").style.display!="none"){
+
+    if (document.getElementById("secondHeader").style.display != "none") {
         var h = document.querySelector('.logo2').innerHTML;
-        h = h.replace(/033cd2/g, COLORS[color][0]);
-        h = h.replace(/78e600/g, COLORS[color][1]);
-        document.querySelector('.logo2').innerHTML = h;}
+        h = h.replace(/033cd2/g, selectedColors[0]);
+        h = h.replace(/78e600/g, selectedColors[1]);
+        document.querySelector('.logo2').innerHTML = h;
+    }
+
+    // Apply the first color to the banner background
+    var donationBanner = document.getElementById("donation-banner");
+    if (donationBanner) {
+        donationBanner.style.backgroundColor = `#${selectedColors[0]}`;
+    }
+
+    // Apply the second color to the donate button background
+    var donateButton = document.getElementById("donate-button");
+    if (donateButton) {
+        donateButton.style.backgroundColor = `#${selectedColors[1]}`;
+    }
+
     // Footer links collapse code
-    $( ".widget h4" ).click(
-        function() {
+    $(".widget h4").click(
+        function () {
             $(this).parent().toggleClass('active');
-    });
+        });
+
     // Disabling code
     // Opera 8.0+
     var isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
@@ -39,27 +60,26 @@ $(document).ready(function(){
     var isEdge = !isIE && !!window.StyleMedia;
     // Chrome 1+
     var isChrome = !!window.chrome && !!window.chrome.webstore;
-    var isOtherdevice= navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i);
-    var isSmallWidth=0;
-    if(window.innerWidth<768)
-    {
-        isSmallWidth=1;
+    var isOtherdevice = navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i);
+    var isSmallWidth = 0;
+    if (window.innerWidth < 768) {
+        isSmallWidth = 1;
     }
-    if(isOpera || isFirefox || isSafari || isIE || isEdge || isChrome || isOtherdevice || isSmallWidth){
+    if (isOpera || isFirefox || isSafari || isIE || isEdge || isChrome || isOtherdevice || isSmallWidth) {
         $('#loaderDiv').css('display', 'block');
         $('#animationPart1').addClass('start');
         $('#animationPart2').addClass('start');
         $('#animationPart3').addClass('start');
-        if(isIE){
+        if (isIE) {
             $('#navh2').css('display', 'block');
             $('#navh3').css('display', 'block');
         }
-        else{
+        else {
             $('#navh').css('display', 'block');
             $('#navh1').css('display', 'block');
         }
     }
-    if(!isOpera && !isFirefox &&!isSafari && !isIE && !isEdge &&!isChrome &&!isOtherdevice &&!isSmallWidth){
+    if (!isOpera && !isFirefox && !isSafari && !isIE && !isEdge && !isChrome && !isOtherdevice && !isSmallWidth) {
         $('#ftctn').css('display', 'none');
         $('#myBtn2').css('display', 'none');
         $('#navh2').css('display', 'block');
@@ -70,55 +90,55 @@ $(document).ready(function(){
     // Slideshows code
 
     $("#glimpse-slider").owlCarousel({
-        paginationSpeed : 500,
-        singleItem:true,
+        paginationSpeed: 500,
+        singleItem: true,
         autoPlay: 3000,
     });
     $("#testimonial-slider1").owlCarousel({
-        paginationSpeed : 500,
-        singleItem:true,
+        paginationSpeed: 500,
+        singleItem: true,
         autoPlay: 3000,
     });
     $("#testimonial-slider2").owlCarousel({
-        paginationSpeed : 500,
-        singleItem:true,
+        paginationSpeed: 500,
+        singleItem: true,
         autoPlay: 3000,
     });
     $("#testimonial-slider3").owlCarousel({
-        paginationSpeed : 500,
-        singleItem:true,
+        paginationSpeed: 500,
+        singleItem: true,
         autoPlay: 3000,
     });
     $("#testimonial-slider4").owlCarousel({
-        paginationSpeed : 500,
-        singleItem:true,
+        paginationSpeed: 500,
+        singleItem: true,
         autoPlay: 3000,
     });
     $("#testimonial-slider5").owlCarousel({
-        paginationSpeed : 500,
-        singleItem:true,
+        paginationSpeed: 500,
+        singleItem: true,
         autoPlay: 3000,
     });
     $("#testimonial-slider6").owlCarousel({
-        paginationSpeed : 500,
-        singleItem:true,
+        paginationSpeed: 500,
+        singleItem: true,
         autoPlay: 3000,
     });
     $("#testimonial-slider7").owlCarousel({
-        paginationSpeed : 500,
-        singleItem:true,
+        paginationSpeed: 500,
+        singleItem: true,
         autoPlay: 3000,
     });
     $("#social-media-logos").owlCarousel({
-    	autoPlay: 3000,
-    	items : 5,
-    	itemsDesktop : [1199,5],
-    	itemsDesktopSmall : [979,5],
+        autoPlay: 3000,
+        items: 5,
+        itemsDesktop: [1199, 5],
+        itemsDesktopSmall: [979, 5],
     });
-    var fullHeight = function() {
-    	$('.js-fullheight').css('height', $(window).height());
-    	$(window).resize(function(){
-    		$('.js-fullheight').css('height', $(window).height());
-    	});
+    var fullHeight = function () {
+        $('.js-fullheight').css('height', $(window).height());
+        $(window).resize(function () {
+            $('.js-fullheight').css('height', $(window).height());
+        });
     };
 });