From 18aaa9b569710ae2266e3767d3760d3c9b9c9077 Mon Sep 17 00:00:00 2001
From: Anushka Chouhan <anushkachouhan064@gmail.com>
Date: Fri, 1 Nov 2024 16:55:14 +0530
Subject: [PATCH] Update index.html

---
 index.html | 14 +++++++++++---
 style.css  | 26 +++++++++++++++++++++++++-
 2 files changed, 36 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index 453b397a..264a3e48 100644
--- a/index.html
+++ b/index.html
@@ -571,12 +571,13 @@ <h1 id="logo"><a href="#home">BuddyTrail</a></h1>
 
 <!-- Pop up HTML Starts Here -->
  <!-- Pop-up for BuddyTrail -->
-<div id="popup" class="popup">
+<div id="popup" class="popup"> 
   <div id="popup-content">
-      <div class="popup-left">
+    <div class="popup-left">
           <img if="popupimage" src="./img/popup1.jpg" alt="Travel Image">
       </div>
-      <div class="popup-right">
+      <div class="popup-right">   
+        <button id="cross-btn" class="cross-btn">&times;</button>
           <h1>Ready for Your Next Adventure?</h1>
           <p class="h2">Join <strong>BuddyTrail</strong> and Plan Your Dream Vacation Today!</p>
           <p>Sign up to receive <strong> 20% discount </strong> on your first booking!</p>
@@ -589,6 +590,12 @@ <h1>Ready for Your Next Adventure?</h1>
       </div>
   </div>
 </div>
+<script>
+  document.getElementById("cross-btn").addEventListener("click", function() {
+    document.getElementById("popup").style.display = "none";
+});
+
+</script>
 <!-- Pop up HTML ends Here -->
 
 <!-- JS to handle hamburger and close button -->
@@ -3166,6 +3173,7 @@ <h2>Exclusive Deals and Offers!</h2>
       }
 
       .popup-content {
+        position: relative;
         background-color: white;
         padding: 20px;
         border-radius: 5px;
diff --git a/style.css b/style.css
index d52a39dd..1beee435 100644
--- a/style.css
+++ b/style.css
@@ -2188,7 +2188,31 @@ input#rate-5:checked ~ header:before {
   align-items: center;
   z-index: 1;
 }
-
+.cross-btn {
+  position: absolute;
+  top: 142px; 
+  right: 25.3%;
+  background: transparent;
+  color: black;
+  border: none;
+  cursor: pointer;
+  z-index: 1; 
+  width: 30px;
+  height: 33px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  /* background-color: #ee2828; */
+  border-radius: 25%;
+  font-size: 3rem;
+  cursor: pointer;
+  color: #aaa;
+  transition: all 0.4s ease-in;
+}
+.cross-btn button{
+  padding: 1px !important;
+  background-color: red !important;
+}
 .close-btn:hover {
   background-color: #ff0000;
   transform: scale(1.1);