add promo banner

holtzy · Feb 15, 2024 · 3c465cb · 3c465cb
1 parent 11c8a8a
commit 3c465cb
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 2 deletions.
diff --git a/css/agency.css b/css/agency.css
@@ -1226,9 +1226,45 @@ ul.social-buttons li a:active, ul.social-buttons li a:focus, ul.social-buttons l
 
 
 
+/* ------------------------------------------------------------------------------------------------------------------- */
+/* PROMOTIONAL BANNER
+/* ------------------------------------------------------------------------------------------------------------------- */
+
+.promo-banner {
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  background: linear-gradient(90deg, #FF007F, #f01cf3); /* Simulating bg-purple-100 gradient */
+  color: rgba(255, 255, 255, 0.9);
+  text-align: center;
+  padding: 10px 0;
+  font-size: 16px;
+  z-index: 1000;
+  font-weight: 300;
+  font-family:  'Helvetica Neue', Helvetica, Arial, sans-serif;
+  letter-spacing: 1px;
+  text-decoration: none !important;
+}
 
 
 
+.promo-banner:hover {
+  color: rgba(255, 255, 255, 1);
+}
+
+.promo-banner-close-btn {
+  position: absolute;
+  right: 20px;
+  top: 50%;
+  transform: translateY(-50%);
+  border: none;
+  background-color: transparent;
+  color: rgba(255, 255, 255, .8);
+  font-size: 24px;
+  cursor: pointer;
+}
+
+
 
 
 

diff --git a/css/agency.min.css b/css/agency.min.css
diff --git a/index.html b/index.html
@@ -2788,12 +2788,21 @@ <h2 class="section-heading text-uppercase" style="color: black">Contact</h2>
       </div>
     </footer>
 
+
 <!-- ======================================================================= -->
 
 
 
 
 
+<!-- ======================= PROMO BANNER SECTION ================================ -->
+<a href="https://rfortherestofus.com/3months?utm_source=datatoviz" id="promo-banner" class="promo-banner">
+    <div>
+      R in 3 Months is the program to help you finally learn R. Registration is open now!
+    <button onclick="closeBanner()" class="promo-banner-close-btn">&times;</button>
+  </div>
+</a>
+<!-- ======================================================================= -->
 
 
 
@@ -4692,7 +4701,13 @@ <h2 class="section-heading text-uppercase" style="color: black">Contact</h2>
     </script>
 
 
-
+ <script>
+  function closeBanner() {
+    event.stopPropagation(); // Stop the event from propagating to parent elements
+    event.preventDefault(); // Prevent the default action (link navigation) 
+    document.getElementById('promo-banner').style.display = 'none';
+  }
+ </script>
 
 
   <!-- Global site tag (gtag.js) - Google Analytics -->