From ae3b075ce42343033c43237aa901c1f821f943e1 Mon Sep 17 00:00:00 2001 From: Snir Tal Date: Sun, 16 Nov 2025 21:27:22 +0200 Subject: [PATCH 1/3] nadav --- .DS_Store | Bin 0 -> 6148 bytes .../index.html | 1 + 2 files changed, 1 insertion(+) create mode 100644 .DS_Store diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..41e6ed03ddb9e924cf9c889dc0fe1aca68c924e7 GIT binary patch literal 6148 zcmeHKO^6&t6n@|AWYe8w+}ixP`57{@Dw=HKh7eFOGTB`XakFf2ce9gKTzk69-6lQV z!&J}AA_$|RUPV#7spP66f?iZeJSK`Lxkx~~dC`N1T*X&iwcxPv7R7{qP1X0_tM}9O zx~r>;h%nI(juHtXa=2+MZsG1Gq{nsJKn1JOh%81#l2X1TwKiDiio61O1^#ap&}(;$ zVqURbQuO!rdzj^rR(R|%wW-N{m*tdJnNzIs`I5{jmK&Dy*j{F`$F^~#I?Z~N)QJjL z>dh!r>G=3{6b6c$1~)tImaW@Lca={+HGO8LG+hh*B%TXjl*?jBttQ>mES_!2PAI#J zeiF4Cv04_xz8CrJ$V=tPDALBP8&ZBNiK4TK3ezx&&o7JZ+G)0_C3Q}=6k{!wYw3FQ zKKt5|N?Pe;mSI_lwvtavP7rqF6sJ*3-rBr%9j%U=hv)t@B!;)|*tu)>-6Qwhe`x&p zBactk{G`#4ajF&~uP&p-j>-E>z(FQklKWs@@eMz#6*EZ?z7VqJLKp}0vDc8#Y4sUT zrL#>L%i!9cz5Di;O9v{8olu4KNS^nUFXJGLR~EWqkghJUqg->`VT_5**81N299INl zlNBF4$l|mZG-CP4LyjXp7lmv4_wL(sv~;W_23+B}*=VVJVo58U&zLlZ#Sa}8V3f$%u(BFp& zH;q+`J%ib&gFF5EpvQ|EH8HQx5*jNOs}_3(d4vhZmC?Au9x-6tSzobsRf|1?#+{I5 z<~TMp>>?KorfRy@KjBOa@0hOug~XOJ~a`Hw(WhP=xw@Sj%T EFERM?=Kufz literal 0 HcmV?d00001 diff --git a/newsletter-sign-up-with-success-message-main/index.html b/newsletter-sign-up-with-success-message-main/index.html index 8e7329b..80d9007 100644 --- a/newsletter-sign-up-with-success-message-main/index.html +++ b/newsletter-sign-up-with-success-message-main/index.html @@ -12,6 +12,7 @@ From 861c9023d7bfc29d13f4f28200034df006bc0b71 Mon Sep 17 00:00:00 2001 From: Snir Tal Date: Sun, 16 Nov 2025 21:47:37 +0200 Subject: [PATCH 2/3] test --- newsletter-sign-up-with-success-message-main/index.html | 1 - 1 file changed, 1 deletion(-) diff --git a/newsletter-sign-up-with-success-message-main/index.html b/newsletter-sign-up-with-success-message-main/index.html index 80d9007..8e7329b 100644 --- a/newsletter-sign-up-with-success-message-main/index.html +++ b/newsletter-sign-up-with-success-message-main/index.html @@ -12,7 +12,6 @@ From a30e361ae44f95e14fa5b9f06bf7578438227940 Mon Sep 17 00:00:00 2001 From: Snir Tal Date: Sat, 29 Nov 2025 17:38:28 +0200 Subject: [PATCH 3/3] snirpro1 --- .../index.css | 123 ++++++++++++++++++ .../index.html | 71 +++++----- .../index.js | 50 +++++++ 3 files changed, 213 insertions(+), 31 deletions(-) create mode 100644 newsletter-sign-up-with-success-message-main/index.css create mode 100644 newsletter-sign-up-with-success-message-main/index.js diff --git a/newsletter-sign-up-with-success-message-main/index.css b/newsletter-sign-up-with-success-message-main/index.css new file mode 100644 index 0000000..5fdf905 --- /dev/null +++ b/newsletter-sign-up-with-success-message-main/index.css @@ -0,0 +1,123 @@ +body { + height: 100vh; + margin: 0; + padding: 0; + background-color: #2c2e47; + font-family: Arial, sans-serif; +} + +.maincontainer { + margin-top: 32%; + height: 100vh; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.center { + padding: 20px; + width: 750px; + background: white; + border-radius: 20px; + display: flex; + box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25); + overflow: hidden; + margin-bottom: 20px; +} + +#successCard { + display: none; + flex-direction: column; + align-items: center; + justify-content: center; + width: 381px; +} + +.text { + flex: 1; + padding: 40px; +} + +.text h1 { + margin-top: 0; + font-size: 32px; + font-weight: 700; +} + +.text p { + color: #555; + margin-bottom: 15px; +} + +.text ul { + list-style: none; + padding: 0; + margin-bottom: 30px; +} + +.text ul li { + margin-bottom: 10px; + display: flex; + align-items: center; + gap: 10px; +} + +.text label { + font-size: 12px; + font-weight: bold; + display: block; + margin-bottom: 6px; +} + +.text input { + width: 100%; + padding: 12px; + margin-bottom: 20px; + border-radius: 6px; + border: 1px solid #ccc; + font-size: 14px; +} + +#subscribeBtn { + width: 110%; + padding: 14px; + border-radius: 6px; + border: none; + background-color: #1d223a; + color: white; + font-size: 14px; + cursor: pointer; + font-weight: bold; + transition: 0.3s ease; +} + +#subscribeBtn.valid { + background: linear-gradient(to right, #ff6f91, #ff9671); +} + +#dismissBtn:hover { + opacity: 0.9; +} + +#errorMsg { + display: none; + color: red; + font-size: 9px; + margin-bottom: 5px; + text-align: right; + margin-right: -23px; +} + +#dismissBtn { + width: 110%; + padding: 14px; + border-radius: 6px; + border: none; + background-color: #1d223a; + color: white; + font-size: 14px; + cursor: pointer; + font-weight: bold; + margin-top: 20px; +} diff --git a/newsletter-sign-up-with-success-message-main/index.html b/newsletter-sign-up-with-success-message-main/index.html index 8e7329b..d961fd1 100644 --- a/newsletter-sign-up-with-success-message-main/index.html +++ b/newsletter-sign-up-with-success-message-main/index.html @@ -1,52 +1,61 @@ + - - + - - Frontend Mentor | Newsletter sign-up form with success message - - - + + Newsletter Sign-up + - +
- Stay updated! +
- Join 60,000+ product managers receiving monthly updates on: +
+

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! +
    +
  • Product discovery and building what matters
    • +
  • Measuring to ensure updates are a success
    • +
  • And much more!
    • +
- Email address - email@company.com + +

Valid email required

+ - Subscribe to monthly newsletter + +
- +
+ Sign Up Illustration +
- +
- 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. +

Thanks for subscribing!

- Dismiss message +

+ A confirmation email has been sent. + Please open it and click the button inside to confirm your subscription. +

+ + +
+
- - -
- 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/index.js b/newsletter-sign-up-with-success-message-main/index.js new file mode 100644 index 0000000..6e74396 --- /dev/null +++ b/newsletter-sign-up-with-success-message-main/index.js @@ -0,0 +1,50 @@ +const input = document.getElementById("emailInput"); +const error = document.getElementById("errorMsg"); +const btn = document.getElementById("subscribeBtn"); +const formCard = document.querySelector("#formCard"); +const successCard = document.querySelector("#successCard"); + +input.addEventListener("input", function () { + const email = input.value; + + if (!email.includes("@")) { + btn.classList.remove("valid"); + return; + } + + const [, domain] = email.split("@"); + + if (domain === "gmail.com" || domain === "colman.com") { + btn.classList.add("valid"); + } else { + btn.classList.remove("valid"); + } +}); + +btn.onclick = function () { + const email = input.value; + + if (!email.includes("@")) { + error.style.display = "block"; + return; + } + + const parts = email.split("@"); + const domain = parts[1]; + + if (domain !== "gmail.com" && domain !== "colman.com") { + error.style.display = "block"; + return; + } + + error.style.display = "none"; + formCard.style.display = "none"; + successCard.style.display = "flex"; +}; + +const dismissBtn = document.getElementById("dismissBtn"); + +dismissBtn.onclick = function () { + successCard.style.display = "none"; + formCard.style.display = "flex"; +};