From c8a87229d1ad3a27acd9af45fc81413957bb5d7e Mon Sep 17 00:00:00 2001
From: Palmistry2310 <palmistry017@gmail.com>
Date: Sat, 9 Nov 2024 15:55:52 +0530
Subject: [PATCH] added newsletter subscription section

---
 index.html | 142 ++++++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 140 insertions(+), 2 deletions(-)
diff --git a/index.html b/index.html
index 215b4ef..f3012cf 100644
--- a/index.html
+++ b/index.html
@@ -180,6 +180,83 @@
       /* Show on hover */
     }
   </style>
+  <style>
+  /* Container Styling */
+.container.newsletter {
+    max-width: 600px;
+    margin: 30px auto;
+    padding: 20px;
+    background-color: #f5f5f5;
+    border-radius: 8px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    text-align: center;
+    font-family: Arial, sans-serif;
+}
+
+/* Title and Description Styling */
+.container.newsletter .h4 {
+    font-size: 24px;
+    color: #333;
+    margin-bottom: 10px;
+}
+
+.container.newsletter p {
+    color: #555;
+    font-size: 16px;
+    margin-bottom: 20px;
+}
+
+/* Input Group Styling */
+.input-group {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.input-group input[type="email"] {
+    padding: 12px;
+    border: 1px solid #ddd;
+    border-radius: 4px 0 0 4px;
+    outline: none;
+    font-size: 14px;
+    width: 70%;
+}
+
+.input-group button {
+    padding: 12px 20px;
+    background-color: #007bff;
+    color: #fff;
+    border: none;
+    border-radius: 0 4px 4px 0;
+    cursor: pointer;
+    font-size: 14px;
+}
+
+.input-group button:hover {
+    background-color: #0056b3;
+}
+
+/* Error and Confirmation Messages */
+.text-danger {
+    color: #e74c3c;
+    font-size: 12px;
+}
+
+.text-success {
+    color: #2ecc71;
+    font-size: 12px;
+}
+
+  /* Responsive styles */
+  @media (max-width: 900px) {
+    header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 0.5rem 0.5rem;
+     /* Adjust padding to reduce overall height */
+    }
+  </style>
 
 
   <head>
@@ -1041,7 +1118,37 @@ <h3>Emily Johnson</h3>
       </div>
     </section>
 
-
+    <!-- Newsletters Section  -->
+    <div class="container newsletter ">
+      <div>
+        <div>
+          <h1 class="h4">Sign Up for Newsletters</h1>
+          <p>Get updates in your email about the latest deals and products</p>
+        </div>
+        <div >
+          <div class="input-group" style="margin: 14px;">
+            <input
+              type="email"
+              id="email"
+              placeholder="Enter your email"
+              required
+              style=" box-sizing: border-box;"
+            />
+            <button type="submit" id="submit-button">
+              Subscribe
+            </button>
+          </div>
+          <div id="error-message" class="text-danger large mt-2" style="display: none;  font-size: 15px;">
+            *Please enter a valid email address.
+          </div>
+          <div id="confirmation-message" class="text-success large mt-2" style="display: none;  font-size: 15px;">
+            Thank you for subscribing to our newsletter!
+          </div>
+        </div>
+      </div>
+    </div>
+   
+    
     <!-- Chatbot Button -->
     <a href="chatbot.html">
         <div class="chatbot-container">
@@ -1124,7 +1231,38 @@ <h3>Connect With Us</h3>
       <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
       <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
       <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
-
+      	 <!-- This script for newsletter subscription -->
+    <script>
+      document.addEventListener("DOMContentLoaded", function () {
+        document
+          .getElementById("submit-button")
+          .addEventListener("click", function (e) {
+            e.preventDefault();
+
+            const emailInput = document.getElementById("email");
+            const email = emailInput.value.trim();
+            const errorMessage = document.getElementById("error-message");
+            const confirmationMessage = document.getElementById(
+              "confirmation-message"
+            );
+
+            if (!validateEmail(email)) {
+              errorMessage.style.display = "block";
+              confirmationMessage.style.display = "none";
+            } else {
+              errorMessage.style.display = "none";
+              confirmationMessage.style.display = "block";
+
+              emailInput.value = "";
+            }
+          });
+
+        function validateEmail(email) {
+          const re = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+          return re.test(email);
+        }
+      });
+    </script>
 
   </body>
 
