Merge pull request #190 from antilneeraj/main

[ISSUE - 175] Add newsletter pop up box
apu52 · Jan 27, 2024 · 853736f · 853736f
2 parents f3cc9ad + 8442adf
commit 853736f
Show file tree

Hide file tree

Showing 3 changed files with 179 additions and 2 deletions.
diff --git a/index.html b/index.html
@@ -20,7 +20,6 @@
     href="img/A T logo with a white background and a square shape, connected to nature for a travel company.png"
     type="image/x-icon" />
 
-  <script src="index.js"></script>
 
   <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@emailjs/browser@3/dist/email.min.js">
   </script>
@@ -57,7 +56,7 @@
       <li class="link" data-aos="fade-down"><a href="#ReviewGallery">Reviews</a></li>
       <li class="link" data-aos="fade-down"><a href="feedback.html">Rate Us?</a></li>
       <li class="link" data-aos="fade-down"><a href="login.html">Login</a></li>
-      
+
     </ul>
     <button id="toggle" data-aos="fade-down">Dark Theme</button>
     <a href="#contact"><button class="btn" id="btn-style">Contact Us</button></a>
@@ -122,6 +121,40 @@ <h1 data-aos="fade-in">Find Your Perfect Getaway<br />Discover the World's Best
     </section>
   </header>
 
+  <!-- Newsletter Modal -->
+
+  <div class="modal-container">
+    <div class="modal-wrapper">
+      <div class="cross-container">
+        <i class="fas fa-times close-btn" onclick="closeModal()"></i>
+      </div>
+      <div class="modal-newsletter">
+        <div class="modal-header">
+          <div style="display: flex;flex-flow: column;">
+            <a href="#" class="nav__logo"
+              style="pointer-events:none;color:#000;scale: 0.75;">Tourguide<span>.</span></a>
+            <h3 style="font-weight: 600;font-size: 24px;">Get Flat 15% OFF</h3>
+            <span style="color: #939393; padding: .5rem; font-size: 13px;">Sign up and grab your discount.</span>
+          </div>
+        </div>
+        <div class="modal-content">
+          <form id="modal-form">
+            <input type="email" id="modal-email" placeholder="Email Address" required>
+            <button class="modal-btn" id="news-subscribe" type="submit">Subscribe</button>
+          </form>
+          <span style="color: #3950ac; padding: 1rem 0 0 0; font-weight: 600;cursor:pointer;font-size: 16px;"
+            onclick="closeModal()">No, thanks</span>
+          <span style="color: #939393; padding: 1rem; font-size: 13px;">You are signing up to receive our newsletters
+            via
+            email and can unsubscribe at any time.</span>
+        </div>
+      </div>
+      <div>
+        <img src="./img/pexels-sam-kolder-2387871.jpg" class="modal-image" alt="maldives">
+      </div>
+    </div>
+  </div>
+
   <section class="section__container destination__container" id="Destinations">
     <div class="section__header">
       <div>
@@ -526,6 +559,7 @@ <h4>Reach Out To Us</h4>
     })
   </script>
 
+  <script src="index.js"></script>
 
 
 

diff --git a/index.js b/index.js
@@ -20,3 +20,33 @@ function sendMail() {
       .catch(err=>console.log(err));
 
   }
+
+// Modal JS
+
+const modalContainer = document.querySelector(".modal-container");
+const closeBtn = document.querySelector("#close-btn");
+const subscribeBtn = document.querySelector("#news-subscribe");
+const form = document.querySelector("#modal-form");
+
+function openModal() {
+  modalContainer.style.display = "flex";
+}
+
+function closeModal() {
+  modalContainer.style.display = "none";
+}
+
+// Function to handle form submission (you can customize this)
+function subscribe(e) {
+  e.preventDefault();
+  const emailInput = document.querySelector("#modal-email").value;
+  // You can add your logic to handle the form submission here
+  // alert("Email subscribed: "+emailInput);
+  closeModal();
+}
+
+form.addEventListener("submit", subscribe)
+// closeBtn.addEventListener("click", closeModal);
+
+// Open the modal as soon as the page loads
+window.onload = openModal();
diff --git a/styles.css b/styles.css
@@ -238,6 +238,119 @@ header {
   margin-top: 1rem;
 }
 
+/* Newsletter Modal */
+
+.modal-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.7);
+  backdrop-filter: blur(10px);
+  z-index: 2000000000;
+}
+
+.modal-wrapper{
+  position: relative;
+  max-width: 600px;
+  width: 100%;
+  display: flex;
+  background: #fff;
+  overflow: hidden;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+  border-radius: 5px;
+}
+
+.modal-image{
+  height: 100%;
+  transform: scale(1.1);
+  object-position: center;
+  object-fit: cover;
+  max-width: inherit;
+}
+
+
+.modal-newsletter {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 40px;
+  border-radius: 5px;
+  max-width: 400px;
+  width: 100%;
+}
+
+.modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 15px;
+}
+
+.cross-container{
+  position: absolute;
+  display: flex;
+  justify-content: flex-end;
+  width: 100%;
+  height: fit-content;
+  z-index: 1;
+  padding: 1rem;
+}
+
+.close-btn{
+
+  font-size: 1.5rem;
+  color: #000;
+  cursor: pointer;
+  transition: color 0.3s ease-in-out;
+}
+
+.close-btn:hover{
+  color: #ff0000;
+}
+
+.modal-content form {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.modal-content input {
+  margin-bottom: 10px;
+  padding: 8px;
+  border-radius: 5px;
+  border: 2px solid #efefef;
+}
+
+.modal-btn {
+  padding: 10px;
+  background-color: #091020;
+  border-radius: 5px;
+  color: #fff;
+  border: none;
+  outline: none;
+  cursor: pointer;
+  transition: scale 0.3s ease-in-out;
+}
+
+.modal-btn:active {
+  scale: 0.95;
+}
+
+.close-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+}
+
+
+/* Modal End */
+
 .story {
   display: flex;
   align-items: center;