Integrate Registration Pop up at home page

index.html

@@ -22,6 +22,7 @@
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
     <link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">
     <!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> -->
+     <link rel="stylesheet" href="./popup.css">
 
 
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
@@ -430,6 +431,32 @@
 
     <!--Navbar End-->
 
+    <!-- Registration Pop up Starts Here -->
+
+
+    <div id="popup" class="popup">
+        <div class="popup-content">
+            <div class="popup-left">
+                <img src="Images/popup.jpg" alt="Retro Vintage Charm">
+            </div>
+            <a href="#" class="no-thanks popuplogo" style="font-family: var(--ff-philosopher); color: black;"><b>Retro</b></a>
+            <div class="popup-right">
+                <h1>Discover the Past!</h1>
+                <p id="h2">Sign Up for Exclusive Vintage Deals</p>
+                <p>Get a <strong>30% off</strong> on your first order when you join our Retro family.</p>
+                <form id="emailForm">
+                    <input type="email" id="popup-email" placeholder="Enter your email" required>
+                    <button type="submit" class="signup-btn">Sign Up Now</button>
+                </form>
+                <a href="#" class="no-thanks close-btn">No thanks, I’ll browse with Fullprice</a>
+                <p class="terms">By signing up, you agree to our <a href="#">Terms of Service</a> and <a href="#">Privacy Policy</a>.</p>
+            </div>
+        </div>
+    </div>
+
+    <!-- Registration Pop up HTML ends here -->
+
+
 <!--    <nav class="navbar navbar-expand-lg fixed-top" id="top">
         <div class="container-fluid">
             <a class="navbar-brand" href="#"  style="font-family: var(--ff-philosopher);color: black;"><b>Retro</b></a>
@@ -1026,6 +1053,11 @@ <h4 style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">Follow
   document.documentElement.scrollTop = 0;
 });
 </script>
+
+<!-- Pop Up JS starts Here  -->
+<script src="./script/popup.js">
+</script>
+
 <script>
 
     const coords = { x: 0, y: 0 };

popup.css

@@ -0,0 +1,128 @@
+
+  /* Styling for the pop-up */
+.popup {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.7);
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
+  }
+
+  .popup-content {
+    display: flex;
+    background-color: #feaea5;
+    border-radius: 10px;
+    max-width: 800px;
+    height: 450px;
+    overflow: hidden;
+    position: relative;
+    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
+  }
+
+  .popuplogo{
+    position: absolute;
+    top: 0;
+    right: 12px;
+    height: 50px;
+  }
+
+  .popup-left img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .popup-right {
+    padding: 20px;
+    width: 50%;
+    display: flex;
+    flex-direction: column; 
+    align-items: center;
+    justify-content: center;
+  }
+
+  .popup h1 {
+    font-size: 31px;
+    color: #8B4513;
+    margin-bottom: 10px;
+    margin-top: 35px;
+    padding-top: 10px;
+  }
+
+  #h2{
+    font-size: 18px;
+    margin-bottom: 16px;
+    font-weight: bold;
+  }
+
+  /* h2 {
+    font-size: 24px;
+    margin-bottom: 10px;
+    color: #4B3B2A;
+  } */
+
+  .popup-right p{
+    margin-bottom: 26px;
+    color: #4B3B2A;
+    margin-bottom: 30px;
+  }
+
+  input[type="email"] {
+    width: 100%;
+    padding: 18px;
+    padding-bottom: 20px;
+    margin-bottom: 10px;
+    border: 1px solid #8B4513;
+    border-radius: 5px;
+    font-size: 14px;
+  }
+
+  #emailForm{
+    padding-top: 0px;
+    padding-bottom: 0px;
+  }
+
+  .signup-btn {
+    width: 100%;
+    padding: 10px 0;
+    background-color: #8B4513;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    font-size: 13px;
+  }
+
+  .signup-btn:hover {
+    background-color: #6f3920;
+    font-size: 13.2px;
+  }
+
+  .no-thanks {
+    display: block;
+    margin-top: 14px;
+    color: #4B3B2A;
+    text-decoration: none;
+    margin-bottom: 40px;
+  }
+
+  .no-thanks:hover {
+    text-decoration: underline;
+    color: #381d0a;
+  }
+
+  .terms {
+    margin-top: 15px;
+    font-size: 10px;
+    color: #4B3B2A;
+  }
+
+  .terms a {
+    color: #8B4513;
+  }
+

script/popup.js

@@ -0,0 +1,26 @@
+    // Show the pop-up automatically when the page loads
+    window.onload = function() {
+        document.getElementById('popup').style.display = 'flex';
+      };
+
+      // Close the pop-up when the user clicks the close button
+      document.querySelector('.close-btn').addEventListener('click', function() {
+        document.getElementById('popup').style.display = 'none';
+      });
+
+      // Handle form submission
+      document.getElementById('emailForm').addEventListener('submit', function(event) {
+        event.preventDefault();
+
+        const email = document.getElementById('email').value;
+        if (email) {
+          alert(`Thank you! A 30% discount code has been sent to ${email}`);
+          document.getElementById('popup').style.display = 'none';
+        }
+      });
+
+      // Handle "No thanks" link
+      document.querySelector('.no-thanks').addEventListener('click', function(event) {
+        event.preventDefault();
+        document.getElementById('popup').style.display = 'none';
+      });