diff --git a/newsletter-sign-up-with-success-message-main/index.html b/newsletter-sign-up-with-success-message-main/index.html index 8e7329b..09fd20b 100644 --- a/newsletter-sign-up-with-success-message-main/index.html +++ b/newsletter-sign-up-with-success-message-main/index.html @@ -1,52 +1,76 @@ - - - + + + + - - - Frontend Mentor | Newsletter sign-up form with success message + + + + Frontend Mentor | Newsletter sign-up form with success message + + + +
+ success icon +

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

+ +
- - - - +
+ sign-up-desktop - +
+

Stay updated!

+

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

- Stay updated! +
+
+ check mark icon +

Product discovery and building what matters

+
- Join 60,000+ product managers receiving monthly updates on: +
+ check mark icon +

Measuring to ensure updates are a success

+
- Product discovery and building what matters - Measuring to ensure updates are a success - And much more! +
+ check mark icon +

And much more!

+
+
- Email address - email@company.com - - Subscribe to monthly newsletter - - - - - - 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/script.js b/newsletter-sign-up-with-success-message-main/script.js new file mode 100644 index 0000000..4fa236c --- /dev/null +++ b/newsletter-sign-up-with-success-message-main/script.js @@ -0,0 +1,28 @@ +const signUpBox = document.querySelector(".signUpBox"); +const successMessege = document.querySelector(".successMessege"); +const submitBtn = document.querySelector(".submit"); +const dismissBtn = document.querySelector(".dismiss"); +const errorMassege = document.querySelector(".errorMessage"); +const emailInput = document.querySelector(".email"); + +function checkValidEmail(input) { + const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; + return emailPattern.test(input); +} + +submitBtn.addEventListener("click", (e) => { + if (checkValidEmail(emailInput.value)) { + e.preventDefault(); + successMessege.classList.add("active"); + signUpBox.classList.add("active"); + errorMassege.classList.remove("active"); + return; + } + errorMassege.classList.add("active"); + emailInput.classList.add("active"); +}); + +dismissBtn.addEventListener("click", () => { + successMessege.classList.remove("active"); + signUpBox.classList.remove("active"); +}); 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..db685b9 --- /dev/null +++ b/newsletter-sign-up-with-success-message-main/style.css @@ -0,0 +1,234 @@ +@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"); +:root { + --error-color: #ff3333; + --text-color: #333; + --primary: #4f7df3; +} + +body { + font-family: "Roboto", sans-serif; + background-color: hsl(234, 29%, 20%); + margin: 0; + padding: 0; + width: 100vw; + height: 100vh; + display: flex; + align-items: center; + justify-content: center; +} + +.signUpBox { + background-color: aliceblue; + display: grid; + grid-template-columns: 50% 50%; + align-items: center; + justify-items: center; + border-radius: 15px; + width: 60%; + height: auto; + grid-template-areas: "text-side image-side"; +} +.signUpBox.active { + display: none; +} + +.textSide { + display: flex; + flex-direction: column; + grid-area: text-side; +} +.textSide h1 { + font-size: clamp(0.7rem, 4vw, 3rem); + font-weight: 800; +} + +.textSide p { + font-size: clamp(0.6rem, 1vw, 1.2rem); + font-weight: 400; +} + +.title { + align-items: center; + justify-items: center; +} +.signUpBox img { + grid-area: image-side; + height: 90%; + max-width: 90%; + border-radius: 10px; +} + +.checkMarks img { + height: 20px; + width: 20px; +} +.checkMarks { + display: flex; + align-items: center; + gap: 10px; +} + +.emailSection { + display: flex; + flex-direction: column; + gap: 10px; + width: 90%; +} + +.emailSection h4 { + margin: 0; +} +.emailSection .email { + opacity: 0.7; + height: 30px; + border: solid 1px gray; + border-radius: 5px; +} +.emailSection .email.active { + color: red; + background-color: rgba(233, 157, 157, 0.511); + opacity: 0.7; + padding: 10px; + border: red; + border-radius: 5px; +} +input:active::placeholder { + color: var(--error-color); +} +.emailSection button { + background-color: hsl(234, 29%, 20%); + color: white; + height: 45px; + padding: 10px; + cursor: pointer; + border-radius: 5px; + border: none; +} +.emailSection button:hover { + background: linear-gradient(90deg, #ff4f81, #ff8a24); + box-shadow: 0 10px 25px rgba(255, 90, 80, 0.4); +} +.errorMessage { + display: none; +} +.errorMessage.active { + display: block; + color: var(--error-color); + font-size: 0.8rem; + text-align: right; +} +.titleAndError { + display: flex; + justify-content: space-between; + align-items: center; +} + +.allCheckMarks { + margin-bottom: 20px; +} +.companyEmail { + font-weight: bold; +} + +.successMessege { + display: none; +} + +.successMessege.active { + display: flex; + flex-direction: column; + align-items: flex-start; + background-color: white; + position: absolute; + height: auto; + width: 40vw; + padding: 30px 30px; + border-radius: 20px; +} +.successMessege h1 { + font-size: clamp(1.5rem, 5vw, 2.5rem); + margin: 20px 0 0 0; +} +.successMessege p { + font-size: clamp(0.8rem, 2vw, 1.2rem); +} +.success-icon { + height: 50px; + width: 50px; +} +.successMessege .dismiss { + margin-top: 20px; + background-color: hsl(234, 29%, 20%); + color: white; + height: 40px; + width: 100%; + padding: 10px; + cursor: pointer; + border-radius: 5px; + border: none; +} +.successMessege .dismiss:hover { + background: linear-gradient(90deg, #ff4f81, #ff8a24); + box-shadow: 0 10px 25px rgba(255, 90, 80, 0.4); +} + +@media (max-width: 500px) { + .signUpBox { + display: flex; + flex-direction: column; + width: 100vw; + height: 100vh; + border-radius: 0; + padding: 0; + } + .signUpBox img { + content: url("assets/images/illustration-sign-up-mobile.svg"); + position: sticky; + height: 35vh; + width: 100vw; + border-radius: 0; + max-width: 100%; + } + + .textSide { + align-items: right; + text-align: left; + padding: 20px 20px; + } + .textSide h1 { + font-size: clamp(1.5rem, 8vw, 3rem); + } + .textSide p { + font-size: clamp(0.8rem, 3vw, 1.1rem); + } + .emailSection h4 { + text-align: left; + } + + .emailSection { + width: 100%; + } + .checkMarks img { + content: none; + height: 20px; + width: 20px; + } + .successMessege.active { + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-start; + background-color: white; + position: static; + height: 100vh; + width: 100vw; + border-radius: none; + } + .successMessege h1 { + font-size: clamp(1.5rem, 8vw, 2.5rem); + margin: 20px 0 0 0; + } + .successMessege p { + font-size: clamp(0.9rem, 4vw, 1.3rem); + } +}