diff --git a/newsletterpopup.jpg b/newsletterpopup.jpg new file mode 100644 index 0000000..f7d4d0d Binary files /dev/null and b/newsletterpopup.jpg differ diff --git a/src/index.html b/src/index.html index ab5e353..5740390 100644 --- a/src/index.html +++ b/src/index.html @@ -297,12 +297,177 @@ margin-top: 10px; color: #333; } - + + .popup-nl { + + display: none; /* Hidden by default */ + 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: 1009; + +} + +.popup-content-nl { + + display: flex; + background-color: white; + border-radius: 10px; + max-width: 800px; + height: 450px; + width: 700px; + overflow: hidden; + position: relative; + box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); + +} + +.close1-btn-nl { + + width: 20px; + cursor: pointer; + margin: 18px 10px; + position: absolute; + top: -4px; + right: 12px; + font-size: 18px; + font-weight: 800; + +} + +.popup-left-nl img { + + width: 100%; + height: 100%; + object-fit: cover; + +} + +.popup-right-nl { + + padding: 20px; + width: 50%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + +} + +.popup-nl h1 { + + font-size: 24px; + background: linear-gradient(to right, #87a5b5, #4c697b); + -webkit-text-fill-color: transparent; + -webkit-background-clip: text; + text-align: center; + margin-bottom: 12px; + margin-top: 35px; + +} + +.h2-nl { + + font-size: 18px; + margin-bottom: 8px; + text-align: center; + color: #333; + +} + +.pop_up-nl { + + margin-bottom: 15px; + font-weight: bold; + background: linear-gradient(135deg, #1e7654, #20a795); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + font-size: 12.7px; + text-align: center; + +} + +input[type="email"] { + + width: 91%; + padding: 10px; + margin-bottom: 16px; + border: 1px solid #000000; + border-radius: 5px; + font-size: 14px; + +} + +.signup-btn1-nl { + + width: 100%; + height: 40px; + text-align: center; + background: radial-gradient(circle, #bbcabf, #263f59); + color: white; + border: none; + border-radius: 5px; + cursor: pointer; + font-size: 16px; + +} + +.signup-btn1-nl:hover { + + background-color: #ff4aac; + +} + +.no-thanks-nl { + + display: block; + margin-top: 10px; + color: #888; + text-decoration: none; + margin-bottom: 15px; + +} + +.no-thanks-nl:hover { + + color: #000000; + font-size: 14px; + +} + +.terms-nl { + + margin-top: 15px; + font-size: 10px; + color: #888; + +} + +.terms-nl a { + + display: inline; + +} + +.terms-nl a:hover { + + text-decoration: underline; +} + + + + + @@ -1373,6 +1538,36 @@

Contact Us

+ + + + + + + + diff --git a/src/newsletterpopup.js b/src/newsletterpopup.js new file mode 100644 index 0000000..1f59328 --- /dev/null +++ b/src/newsletterpopup.js @@ -0,0 +1,35 @@ +// Show the pop-up automatically when the page loads +window.onload = function() { + document.getElementById('popup-nl').style.display = 'flex'; +}; + +// Close the pop-up when the user clicks the close button +document.querySelector('.close-nl').addEventListener('click', function() { + document.getElementById('popup-nl').style.display = 'none'; +}); + +// Close the pop-up when clicking outside the pop-up content +window.addEventListener('click', function(event) { + const popupContent = document.querySelector('.popup-content-nl'); // Select the popup content + // If the click is outside of the popup content, close the popup + if (event.target === document.getElementById('popup-nl')) { + document.getElementById('popup-nl').style.display = 'none'; + } +}); + +// Handle form submission +document.getElementById('emailForm-nl').addEventListener('submit', function(event) { + event.preventDefault(); + + const email = document.getElementById('email-nl').value; + if (email) { + alert(`Your email ID ${email} has been registered successfully for the newsletter.`); + document.getElementById('popup-nl').style.display = 'none'; // Hide the popup after form submission + } +}); + +// Handle "No thanks" link +document.querySelector('.no-thanks-nl').addEventListener('click', function(event) { + event.preventDefault(); + document.getElementById('popup-nl').style.display = 'none'; // Hide the popup when "No thanks" is clicked +});