From 939c5c03a5426bc3c88576a158b6170e5f5aa7db Mon Sep 17 00:00:00 2001
From: ellen-rose-james <ellenrj03@gmail.com>
Date: Sat, 12 Oct 2024 14:56:32 +0530
Subject: [PATCH] popup image added

---
 assets/css/get-tickets.css | 23 +++++++++++++++++++
 assets/css/rex-landing.css | 45 ++++++++++++++++++++++++++++++++++++++
 assets/js/global.js        | 12 +++++++++-
 index.html                 | 14 ++++++++++++
 4 files changed, 93 insertions(+), 1 deletion(-)

diff --git a/assets/css/get-tickets.css b/assets/css/get-tickets.css
index 5f0e73f..33a393f 100644
--- a/assets/css/get-tickets.css
+++ b/assets/css/get-tickets.css
@@ -254,3 +254,26 @@ button:hover .star-6 {
   fill: #06b137;
 }
 
+/* Popup */
+
+.get-tickets-popup {
+  position: relative;
+  padding: 12px 35px;
+  background: var(--color);
+  font-family: "Ubuntu", sans-serif;
+  font-size: 17px;
+  font-weight: 500;
+  color: white;
+  border: 3px solid var(--color);
+  border-radius: 8px;
+  box-shadow: 0 0 0 #000000;
+  transition: all 0.3s ease-in-out;
+  cursor: pointer;
+  margin: 10px;
+}
+
+.get-tickets-popup:hover {
+  background: transparent;
+  color: #06b137;
+  box-shadow: 0 0 25px black;
+}
diff --git a/assets/css/rex-landing.css b/assets/css/rex-landing.css
index a2d9226..42b5547 100644
--- a/assets/css/rex-landing.css
+++ b/assets/css/rex-landing.css
@@ -187,6 +187,51 @@ body::before {
   border-bottom-color: #f0f0e4;
 }
 
+/* Popup container */
+.popup-container {
+  display: none; /* Hidden by default */
+  position: fixed;
+  z-index: 1000;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.7); /* Dark background */
+  justify-content: center;
+  align-items: center;
+}
+
+/* Popup content */
+.popup-content {
+  background-color: #fff;
+  border-radius: 10px;
+  width: 400px;
+  padding: 20px;
+  text-align: center;
+  position: relative;
+}
+
+/* Image container */
+.popup-image-container {
+  margin-bottom: 20px;
+}
+
+.popup-image {
+  width: 100%;
+  height: auto;
+  border-radius: 10px;
+}
+
+/* Close button */
+.close-btn {
+  position: absolute;
+  top: 10px;
+  right: 20px;
+  font-size: 24px;
+  cursor: pointer;
+}
+
+
 /* Heading Section */
 .hero-section {
   display: flex;
diff --git a/assets/js/global.js b/assets/js/global.js
index a09f22f..c6849c7 100644
--- a/assets/js/global.js
+++ b/assets/js/global.js
@@ -63,4 +63,14 @@ window.onpointermove = event => {
 //   backgroundMusic.play();
 //   isPlaying = true;
 //   musicToggleButton.textContent = "❚❚"; // Change to pause icon when music starts playing
-// });
\ No newline at end of file
+// });
+
+
+// Popup
+window.onload = function() {
+  document.getElementById("popup").style.display = "flex";
+};
+
+document.getElementById("closePopup").onclick = function() {
+  document.getElementById("popup").style.display = "none";
+};
diff --git a/index.html b/index.html
index bf19a39..7c915ed 100644
--- a/index.html
+++ b/index.html
@@ -40,6 +40,20 @@
 				<div class="close-button" id="closeButton"></div>
 			</div>
 		</div>
+
+		<!-- Popup -->
+		<div id="popup" class="popup-container">
+			<div class="popup-content">
+				<span class="close-btn" id="closePopup">&times;</span>
+				<div class="popup-image-container">
+					<img src="./assets/images/earlybird.jfif" alt="Popup Image" class="popup-image">
+				</div>
+				<a href="https://www.yepdesk.com/rex-5" target="_blank">
+					<button class="get-tickets-popup">Get Tickets
+				  	</button>
+				</a>
+			</div>
+		</div>
 		
         <section class="hero-section">
             <div class="hero-content">