diff --git a/newsletter-sign-up-with-success-message-main/index.html b/newsletter-sign-up-with-success-message-main/index.html index 8e7329b..6338737 100644 --- a/newsletter-sign-up-with-success-message-main/index.html +++ b/newsletter-sign-up-with-success-message-main/index.html @@ -1,52 +1,67 @@ + - + + + + - + Frontend Mentor | Newsletter sign-up form with success message + +
+
- Stay updated! - - Join 60,000+ product managers receiving monthly updates on: - Product discovery and building what matters - Measuring to ensure updates are a success - And much more! +

Stay updated!

- Email address - email@company.com - Subscribe to monthly newsletter - +
Join 60,000+ product managers receiving monthly updates on:
- + +
+
Email address
+

+
+ - Thanks for subscribing! - - A confirmation email has been sent to ash@loremcompany.com. - Please open it and click the button inside to confirm your subscription. - - Dismiss message - - - -
- Challenge by Frontend Mentor. - Coded by Your Name Here. + +
+ \ No newline at end of file diff --git a/newsletter-sign-up-with-success-message-main/msgPage.html b/newsletter-sign-up-with-success-message-main/msgPage.html new file mode 100644 index 0000000..6ba884a --- /dev/null +++ b/newsletter-sign-up-with-success-message-main/msgPage.html @@ -0,0 +1,34 @@ + + + + + + + + + + Frontend Mentor | Newsletter sign-up form with success message + + + +
+ +
+ +

+ Thanks for subscribing! +

+
+ A confirmation email has been sent to + .
+ Please open it and click the button inside to confirm your subscription. +
+ + +
+
+ + + \ No newline at end of file diff --git a/newsletter-sign-up-with-success-message-main/msgPage.js b/newsletter-sign-up-with-success-message-main/msgPage.js new file mode 100644 index 0000000..1c6f08c --- /dev/null +++ b/newsletter-sign-up-with-success-message-main/msgPage.js @@ -0,0 +1,6 @@ +let email = localStorage.getItem("userEmail"); +document.getElementById("currentValue").textContent = email; + +function onDislick() { + window.location.href = "./index.html"; +} \ No newline at end of file diff --git a/newsletter-sign-up-with-success-message-main/script.js b/newsletter-sign-up-with-success-message-main/script.js new file mode 100644 index 0000000..83759ac --- /dev/null +++ b/newsletter-sign-up-with-success-message-main/script.js @@ -0,0 +1,5 @@ +function onSubClick() { + const email = document.getElementById('inputData').value; + localStorage.setItem("userEmail", email); + window.location.href = "./msgPage.html"; +} diff --git a/newsletter-sign-up-with-success-message-main/style.css b/newsletter-sign-up-with-success-message-main/style.css new file mode 100644 index 0000000..f9eb72c --- /dev/null +++ b/newsletter-sign-up-with-success-message-main/style.css @@ -0,0 +1,136 @@ +body { + background-color: hsl(235, 18%, 26%); + font-family: 'Roboto', sans-serif; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + min-height: 100vh; +} + +.mainForm { + display: flex; + flex-direction: column; + align-items: flex-start; + align-content: center; + background-color: transparent; + border-radius: 0; + padding: 32px 40px; +} + +.wholeForm { + display: flex; + flex-direction: row; + background-color: #ffffff; + border-radius: 12px; + overflow: hidden; +} + + +.wholeForm img { + display: block; +} + +.successForm { + display: flex; + flex-direction: row; + background-color: #ffffff; + border-radius: 12px; + overflow: hidden; +} + +.itemList { + display: flex; + flex-direction: row; + gap: 5%; +} + +ul { + list-style-type: none; + padding-left: 0; + margin: 0; +} + +h6 { + margin: 0; +} + +.emailBox { + width: 100%; + max-width: 380px; +} + +.emailTitle { + font-size: 14px; + font-weight: 600; + display: block; + margin-bottom: 6px; +} + +.emailBox input { + width: 100%; + padding: 14px 18px; + font-size: 16px; + + border: 1px solid #d5d5d5; + border-radius: 12px; + outline: none; + + transition: box-shadow 0.2s ease, border-color 0.2s ease; +} + +.emailBox input:focus { + border-color: #a06cff; + box-shadow: 0 0 0 4px rgba(160, 108, 255, 0.15); +} + +.buttonClass { + width: 100%; + max-width: 380px; + margin-top: 8px; + + display: inline-block; + text-align: center; + white-space: nowrap; + padding: 18px 0; + border: none; + border-radius: 12px; + background: linear-gradient(90deg, #ff5f7b, #ff9152); + color: #fff; + font-size: 18px; + font-weight: 600; + cursor: pointer; + box-shadow: 0 20px 30px rgba(255, 120, 120, 0.35); + transition: transform 0.15s ease, box-shadow 0.15s ease; +} + +.buttonClass:hover { + transform: translateY(-2px); + box-shadow: 0 24px 40px rgba(255, 120, 120, 0.6); +} + + +.disButtonClass { + width: 100%; + max-width: 380px; + margin-top: 8px; + + display: inline-block; + text-align: center; + white-space: nowrap; + padding: 18px 0; + border: none; + border-radius: 12px; + background: linear-gradient(90deg, #242840); + color: #fff; + font-size: 18px; + font-weight: 600; + cursor: pointer; + box-shadow: 0 20px 30px rgba(120, 181, 255, 0.35); + transition: transform 0.15s ease, box-shadow 0.15s ease; +} + +.disButtonClass:hover { + transform: translateY(-2px); + box-shadow: 0 24px 40px rgba(120, 185, 255, 0.6); +} \ No newline at end of file