-
-
Notifications
You must be signed in to change notification settings - Fork 266
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #1013 from Palmistry2310/adding-newsletter-subscip…
…tion Added newsletter subscription section
- Loading branch information
Showing
1 changed file
with
140 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -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> | ||
|
|
@@ -1036,7 +1113,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"> | ||
|
|
@@ -1743,6 +1850,38 @@ <h3>Emily Johnson</h3> | |
| <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> | ||
| <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/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> | ||
|
|
||
| <script> | ||
| window.gtranslateSettings = { | ||
|
|
||