diff --git a/newsletter-sign-up-with-success-message-main/index.html b/newsletter-sign-up-with-success-message-main/index.html index 8e7329b..9e719dd 100644 --- a/newsletter-sign-up-with-success-message-main/index.html +++ b/newsletter-sign-up-with-success-message-main/index.html @@ -5,6 +5,10 @@ + + + + Frontend Mentor | Newsletter sign-up form with success message @@ -16,37 +20,54 @@ - - - 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! - - Email address - email@company.com - - Subscribe to monthly newsletter - - +
+ + + + + +
+
+

Stay updated!

+

Join 60,000+ product managers recieving monthly updates on:

+

+ + Product discovery and building what matters +

+

+ + Measuring to ensure updates are a success +

+

+ + And much more fun! +

+
+
+
+ + +
+ + +
+
+
- - 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 - +
+
+ +
+

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/script.js b/newsletter-sign-up-with-success-message-main/script.js new file mode 100644 index 0000000..04bf1c6 --- /dev/null +++ b/newsletter-sign-up-with-success-message-main/script.js @@ -0,0 +1,18 @@ +function send(event) { + event.preventDefault(); + const form = event.target; + const data = new FormData(form); + const email = data.get("email-address"); + const subscribeForm = document.querySelector(".subscribe-form"); + const subscribeSuccessWindow = document.querySelector(".subscribe-success"); + subscribeForm.classList.add("active"); + document.querySelector(".subscribe-success p b").textContent = email; + subscribeSuccessWindow.classList.add("active"); +} + +function invalidEmail() { + const emailInput = document.getElementById("email-address"); + const invalidEmailLabel = document.querySelector(".invalid-email-label"); + emailInput.classList.add("invalid"); + invalidEmailLabel.classList.add("invalid"); +} \ No newline at end of file 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..cd3526b --- /dev/null +++ b/newsletter-sign-up-with-success-message-main/style.css @@ -0,0 +1,205 @@ +@font-face { + font-family:Roboto ; + src: url(./assets/fonts/Roboto-Regular.ttf); +} + +:root { + --primary-bg-color: hsl(235, 18%, 26%); + --primary-color: hsl(234, 29%, 20%); + --hover-button-color: hsl(4, 100%, 67%); + --form-bg-color: hsl(0, 0%, 100%); + --form-input-color: hsl(0, 0%,58%); +} + +html, body { + background-color: var(--primary-bg-color); + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + font-family: "Roboto", sans-serif; + min-height: 100vh; + height: 100%; +} + +@media(min-width: 529px) { + .subscribe-form { + max-height: 25rem; + max-width: 50rem; + flex-direction: row-reverse; + justify-content: space-between; + border-radius: 1.5rem; + padding: 1.25rem; + padding-left: 2rem; + gap: 2rem; + } + .subscribe-form picture { + max-width: 300px; + display: flex; + justify-content: end; + } + .subscribe-form main { + flex-direction: column; + justify-content: center; + padding-left: 1rem; + padding-top: 1rem; + max-height: 370px; + } + .article-content { + max-width: 350px;; + } + + .subscribe-form form { + margin-top: 1rem; + padding-bottom: 1rem; + max-width: 350px;; + } + .subscribe-success.active { + max-width: 340px; + height: 350px; + border-radius: 1.5rem; + padding: 3rem; + } +} + +@media(max-width: 528px) { + .subscribe-form { + height: 100%; + flex-direction: column; + padding-bottom: 1rem; + } + .subscribe-form main { + flex-direction: column; + } + .article-content { + padding: 2rem; + } + .subscribe-form form { + padding-left: 2rem; + padding-right: 2rem; + padding-bottom: 2rem; + } + .subscribe-form picture { + object-fit: cover; + border-bottom-left-radius: 1rem; + border-bottom-right-radius: 1rem; + } + article input[type=submit] { + margin-top: 1.5rem; + } + .subscribe-success.active { + height: 90%; + width: 90%; + padding: 10%; + } +} + +.subscribe-form .icon-list { + float: left; + margin-right: 0.5rem; +} + +.subscribe-form { + display: flex; + background-color: var(--form-bg-color); + color: var(--primary-color); + font-size: 1rem; + font-weight: 400; + margin: 0 auto; +} + +.subscribe-form main { + display: flex; +} + +.subscribe-form main h1 { + font-weight: 700; + font-size: 2.5rem; + line-height: 2rem; + position: relative; +} + +.subscribe-form form { + display: flex; + flex-direction: column; +} + +.subscribe-form label { + font-weight: 700; + font-size: 0.75rem; +} + +input { + border-radius: 0.3rem; + border-width: 0.05rem; + border-color: var(--form-input-color); + color: var(--form-input-color); + margin-top: 0.5rem; + outline: 0; + height: 2rem +} + +input[type=submit], input[type=button] { + background-color: var(--primary-color); + text-align: center; + color: var(--form-bg-color); + font-weight: 700; + border: none; +} + +input[type=email] { + color: var(--primary-color); +} + +#email-address.invalid { + border-color: var(--hover-button-color); +} + +.invalid-email-label.invalid { + color: var(--hover-button-color); +} + +.invalid-email-label { + color: var(--form-bg-color);; +} + +.labels { + display: flex; + justify-content: space-between; +} + +input[type=submit]:hover, input[type=button]:hover { + background-color: var(--hover-button-color); +} + +.subscribe-form.active{ + display: none; +} + +.subscribe-success { + display: none; +} + +.subscribe-success.active { + display: flex; + flex-direction: column; + background-color: var(--form-bg-color); + color: var(--primary-color); + font-size: 1rem; + font-weight: 400; +} + +.subscribe-success.active h1 { + font-weight: 800; + font-size: 3em; +} + +.subscribe-success.active p { + margin-top: -3%; + color: hsl(234, 29%, 20%); +} + +.subscribe-success.active input[type=button] { + height: 50px; + margin-top: auto; +} \ No newline at end of file