From 2b7ce123f67b007de8dae3a24031ca65599cd9ee Mon Sep 17 00:00:00 2001 From: Asaf Axelrod Date: Sun, 16 Nov 2025 20:56:42 +0200 Subject: [PATCH 1/8] index.html formatting fixes --- .../index.html | 24 +++++++++++++------ 1 file changed, 17 insertions(+), 7 deletions(-) diff --git a/newsletter-sign-up-with-success-message-main/index.html b/newsletter-sign-up-with-success-message-main/index.html index 8e7329b..45051fc 100644 --- a/newsletter-sign-up-with-success-message-main/index.html +++ b/newsletter-sign-up-with-success-message-main/index.html @@ -1,19 +1,28 @@ + - + + - + Frontend Mentor | Newsletter sign-up form with success message + @@ -37,16 +46,17 @@ Thanks for subscribing! - A confirmation email has been sent to ash@loremcompany.com. + 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. + Challenge by Frontend Mentor. Coded by Your Name Here.
+ \ No newline at end of file From a772b66d333880b15d25c569368d804007b3db14 Mon Sep 17 00:00:00 2001 From: AxelrodAsaf Date: Sun, 16 Nov 2025 21:08:27 +0200 Subject: [PATCH 2/8] Test to new branch --- newsletter-sign-up-with-success-message-main/index.html | 2 +- 1 file changed, 1 insertion(+), 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 45051fc..15d54e5 100644 --- a/newsletter-sign-up-with-success-message-main/index.html +++ b/newsletter-sign-up-with-success-message-main/index.html @@ -41,7 +41,7 @@ Subscribe to monthly newsletter - + Thanks for subscribing! From a190c0d7a92275c0fe6c9f244193f44677041741 Mon Sep 17 00:00:00 2001 From: AxelrodAsaf Date: Sun, 16 Nov 2025 21:46:54 +0200 Subject: [PATCH 3/8] Moved all styling to style.css --- .../index.html | 47 ++++++------------- .../style-guide.md | 36 -------------- .../styles/style.css | 23 +++++++++ 3 files changed, 38 insertions(+), 68 deletions(-) delete mode 100644 newsletter-sign-up-with-success-message-main/style-guide.md create mode 100644 newsletter-sign-up-with-success-message-main/styles/style.css diff --git a/newsletter-sign-up-with-success-message-main/index.html b/newsletter-sign-up-with-success-message-main/index.html index 15d54e5..64992b4 100644 --- a/newsletter-sign-up-with-success-message-main/index.html +++ b/newsletter-sign-up-with-success-message-main/index.html @@ -4,44 +4,34 @@ - + - Frontend Mentor | Newsletter sign-up form with success message - - - + Newsletter sign-up - +
+

+ Stay updated! +

- Stay updated! + Join 60,000+ product managers receiving monthly updates on: - 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 - Email address - email@company.com - - Subscribe to monthly newsletter + Subscribe to monthly newsletter +
- + Thanks for subscribing! @@ -50,13 +40,6 @@ 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/style-guide.md b/newsletter-sign-up-with-success-message-main/style-guide.md deleted file mode 100644 index 822e21d..0000000 --- a/newsletter-sign-up-with-success-message-main/style-guide.md +++ /dev/null @@ -1,36 +0,0 @@ -# Front-end Style Guide - -## Layout - -The designs were created to the following widths: - -- Mobile: 375px -- Desktop: 1440px - -> 💡 These are just the design sizes. Ensure content is responsive and meets WCAG requirements by testing the full range of screen sizes from 320px to large screens. - -## Colors - -### Primary - -- Red: hsl(4, 100%, 67%) - -### Neutral - -- Blue 800: hsl(234, 29%, 20%) -- Blue 700: hsl(235, 18%, 26%) -- Grey: hsl(0, 0%,58%) -- White: hsl(0, 0%, 100%) - -## Typography - -### Body Copy - -- Font size (paragraph): 16px - -### Font - -- Family: [Roboto](https://fonts.google.com/specimen/Roboto) -- Weights: 400, 700 - -> 💎 [Upgrade to Pro](https://www.frontendmentor.io/pro?ref=style-guide) for design file access to see all design details and get hands-on experience using a professional workflow with tools like Figma. diff --git a/newsletter-sign-up-with-success-message-main/styles/style.css b/newsletter-sign-up-with-success-message-main/styles/style.css new file mode 100644 index 0000000..d866ea0 --- /dev/null +++ b/newsletter-sign-up-with-success-message-main/styles/style.css @@ -0,0 +1,23 @@ +/* + - Mobile: 375px + - Desktop: 1440px + */ + +:root { + font-family: 'Roboto', sans-serif; + font-size: 16px; + --originalBlue800: hsl(234, 29%, 20%); + --originalBlue700: hsl(235, 18%, 26%); + --originalGrey: hsl(0, 0%, 58%); + --originalWhite: hsl(0, 0%, 100%); + --primaryRed: hsl(4, 100%, 67%); +} + +body { + background-color: var(--originalBlue800); + color: var(--originalBlue800); +} + +.form-container { + background-color: var(--originalWhite); +} \ No newline at end of file From bb179c6d924f958c33ae2133a554048e4a8de772 Mon Sep 17 00:00:00 2001 From: AxelrodAsaf Date: Sun, 16 Nov 2025 21:53:15 +0200 Subject: [PATCH 4/8] test --- newsletter-sign-up-with-success-message-main/styles/style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/newsletter-sign-up-with-success-message-main/styles/style.css b/newsletter-sign-up-with-success-message-main/styles/style.css index d866ea0..617a2ca 100644 --- a/newsletter-sign-up-with-success-message-main/styles/style.css +++ b/newsletter-sign-up-with-success-message-main/styles/style.css @@ -1,4 +1,4 @@ -/* +/* - Mobile: 375px - Desktop: 1440px */ From aeeb001cf50efedd0618e9e57db0b6cfbda0d56f Mon Sep 17 00:00:00 2001 From: AxelrodAsaf Date: Thu, 20 Nov 2025 09:32:01 +0200 Subject: [PATCH 5/8] Initial structure of webpage --- .../index.html | 28 ++++++---- .../styles/style.css | 52 +++++++++++++++++++ 2 files changed, 70 insertions(+), 10 deletions(-) diff --git a/newsletter-sign-up-with-success-message-main/index.html b/newsletter-sign-up-with-success-message-main/index.html index 64992b4..847db4b 100644 --- a/newsletter-sign-up-with-success-message-main/index.html +++ b/newsletter-sign-up-with-success-message-main/index.html @@ -14,20 +14,28 @@
-

- Stay updated! -

+
+

+ Stay updated! +

- Join 60,000+ product managers receiving monthly updates on: + 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 + Email address + email@company.com - Subscribe to monthly newsletter + Subscribe to monthly newsletter +
+ +
+
+ Sign up illustration +
+
diff --git a/newsletter-sign-up-with-success-message-main/styles/style.css b/newsletter-sign-up-with-success-message-main/styles/style.css index 617a2ca..601e609 100644 --- a/newsletter-sign-up-with-success-message-main/styles/style.css +++ b/newsletter-sign-up-with-success-message-main/styles/style.css @@ -13,11 +13,63 @@ --primaryRed: hsl(4, 100%, 67%); } +*, +*::before, +*::after { + box-sizing: border-box; +} + body { background-color: var(--originalBlue800); + width: 98vw; + height: 98vh; + overflow: hidden; color: var(--originalBlue800); + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; } .form-container { background-color: var(--originalWhite); + width: 50%; + height: 60%; + border-radius: 25px; + display: flex; + flex-direction: row; + overflow: hidden; +} + +.form-column { + flex: 1 1 0; + min-width: 0; + + height: 100%; + padding: 1.5rem; + + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} + +#form-text { + width: 100%; +} + +#desktop-image { + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; +} + +#desktop-image img { + max-width: 100%; + /* max-height: 100%; */ + object-fit: contain; + display: block; } \ No newline at end of file From ef527ef5988ef77a413295609054a3b553b962ae Mon Sep 17 00:00:00 2001 From: AxelrodAsaf Date: Fri, 21 Nov 2025 13:46:00 +0200 Subject: [PATCH 6/8] Cleaner UI for text side of form --- .DS_Store | Bin 0 -> 6148 bytes .../index.html | 33 +++++---- .../styles/style.css | 68 ++++++++++++++++-- 3 files changed, 83 insertions(+), 18 deletions(-) create mode 100644 .DS_Store diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..88cdc7754dd2d3d1e9df3dc32fa9200e76cd0fc5 GIT binary patch literal 6148 zcmeHKyG{c^3>-s>NHi%a_X9}5ADp7_1^fUZIUZ6-5SJ+Jb^JDCuaP(oS_(8i*|YZA zx4J3TX8^W1ZmxkDfGO1x?{3E8`>rE7%ZL%Fe8(0o4t!d?jk13Zc??)X(WZ zR~;j3J}p-r{g+&=nBRuKV(#u?)2;9K`>h`$5d&gC42S_SAO?bg zY>U$i@gWApfEf73fZq>=>ewXq731oli4lM}VK{{Am?enC1H>k=ugD0+YALanT8V&Gpf zV3XzTa=}l^-a7g?@3n<`NBtD$MmkNjVq&ynI^K#ezvLBPbH7RKD@HlvQBKs4fb${| I1AoE52W=@L2mk;8 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 847db4b..453cd79 100644 --- a/newsletter-sign-up-with-success-message-main/index.html +++ b/newsletter-sign-up-with-success-message-main/index.html @@ -15,20 +15,27 @@
-

+

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

+ 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!
    • +
+ + + + +
diff --git a/newsletter-sign-up-with-success-message-main/styles/style.css b/newsletter-sign-up-with-success-message-main/styles/style.css index 601e609..7a2f1de 100644 --- a/newsletter-sign-up-with-success-message-main/styles/style.css +++ b/newsletter-sign-up-with-success-message-main/styles/style.css @@ -33,8 +33,8 @@ body { .form-container { background-color: var(--originalWhite); - width: 50%; - height: 60%; + width: 65%; + max-width: 900px; border-radius: 25px; display: flex; flex-direction: row; @@ -46,16 +46,75 @@ body { min-width: 0; height: 100%; - padding: 1.5rem; + padding: 2rem 1.5rem; display: flex; flex-direction: column; - align-items: center; justify-content: center; } #form-text { width: 100%; + margin-left: 1.3rem; +} + +#form-text h1 { + font-size: 2.5rem; + line-height: 1.1; + margin-bottom: 1rem; + color: var(--originalBlue800); +} + +#form-text>p { + font-size: 0.95rem; + color: var(--originalBlue700); +} + +#form-text ul { + list-style: none; + padding-left: 0; + margin-bottom: 2rem; +} + +#form-text ul li { + background-image: url("/newsletter-sign-up-with-success-message-main/assets/images/icon-list.svg"); + background-repeat: no-repeat; + background-position: 0 0.25rem; + background-size: 18px 18px; + + padding-left: 1.6rem; + margin-bottom: 0.75rem; + + font-size: 0.95rem; + line-height: 1.75; + color: var(--originalBlue800); +} + +#form-text label { + display: block; + font-size: 0.75rem; + font-weight: 700; + margin-bottom: 0.4rem; + color: var(--originalBlue800); +} + +#form-text input[type="email"] { + width: 100%; + padding: 0.9rem 1rem; + border-radius: 8px; + border: 1px solid hsl(231, 7%, 85%); + font-size: 0.9rem; + color: var(--originalBlue800); + margin-bottom: 1rem; +} + +#form-text input[type="email"]::placeholder { + color: var(--originalGrey); +} + +#form-text input[type="email"]:focus { + outline: none; + border-color: var(--originalBlue800); } #desktop-image { @@ -69,7 +128,6 @@ body { #desktop-image img { max-width: 100%; - /* max-height: 100%; */ object-fit: contain; display: block; } \ No newline at end of file From c8917b6bd650dc4a118e8d07f28a62f57ac78d61 Mon Sep 17 00:00:00 2001 From: AxelrodAsaf Date: Fri, 21 Nov 2025 13:59:17 +0200 Subject: [PATCH 7/8] Active states for email input and button --- .../styles/style.css | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/newsletter-sign-up-with-success-message-main/styles/style.css b/newsletter-sign-up-with-success-message-main/styles/style.css index 7a2f1de..dfa3776 100644 --- a/newsletter-sign-up-with-success-message-main/styles/style.css +++ b/newsletter-sign-up-with-success-message-main/styles/style.css @@ -117,6 +117,20 @@ body { border-color: var(--originalBlue800); } +button { + width: 100%; + padding: 0.9rem 1rem; + background: var(--originalBlue800); + color: var(--originalWhite); + border: none; + border-radius: 8px; +} + +button:hover { + background: linear-gradient(to right, #ff5379, #fe693e); + box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.3); +} + #desktop-image { width: 100%; height: 100%; From e61c77a2bc8b6b663ad3d6a591ff61d146453ff4 Mon Sep 17 00:00:00 2001 From: AxelrodAsaf Date: Sat, 22 Nov 2025 18:43:14 +0200 Subject: [PATCH 8/8] Functionality + CSS fixes --- .../index.html | 43 +++++++++-------- .../script.js | 41 ++++++++++++++++ .../styles/style.css | 48 +++++++++++++++++-- 3 files changed, 107 insertions(+), 25 deletions(-) create mode 100644 newsletter-sign-up-with-success-message-main/script.js diff --git a/newsletter-sign-up-with-success-message-main/index.html b/newsletter-sign-up-with-success-message-main/index.html index 453cd79..546a1ae 100644 --- a/newsletter-sign-up-with-success-message-main/index.html +++ b/newsletter-sign-up-with-success-message-main/index.html @@ -2,22 +2,20 @@ - - - + + + - + Newsletter sign-up + -
-

- Stay updated! -

+

Stay updated!

Join 60,000+ product managers receiving monthly updates on: @@ -28,33 +26,36 @@

  • And much more!
    • - - + + -

    - Sign up illustration + Sign up illustration
    - - - + \ 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..795de53 --- /dev/null +++ b/newsletter-sign-up-with-success-message-main/script.js @@ -0,0 +1,41 @@ +document.addEventListener("DOMContentLoaded", () => { + const formContainer = document.querySelector(".form-container"); + const successCard = document.getElementById("success-card"); + + const emailInput = document.getElementById("email"); + const submitBtn = document.getElementById("submit-button"); + const dismissBtn = document.getElementById("dismiss-button"); + const userEmailSpot = document.getElementById("user-email"); + + function isValidEmail(email) { + // simple email check – good enough for this challenge + return /\S+@\S+\.\S+/.test(email); + } + + submitBtn.addEventListener("click", () => { + const email = emailInput.value.trim(); + + if (!isValidEmail(email)) { + emailInput.style.borderColor = "red"; + return; + } + + emailInput.style.borderColor = ""; // reset if previously red + + // Insert email into success message + userEmailSpot.textContent = email; + + // Hide form & show success + formContainer.classList.add("hidden"); + successCard.classList.remove("hidden"); + }); + + dismissBtn.addEventListener("click", () => { + successCard.classList.add("hidden"); + formContainer.classList.remove("hidden"); + + // reset form input + emailInput.value = ""; + emailInput.style.borderColor = ""; + }); +}); diff --git a/newsletter-sign-up-with-success-message-main/styles/style.css b/newsletter-sign-up-with-success-message-main/styles/style.css index dfa3776..6b8ec4d 100644 --- a/newsletter-sign-up-with-success-message-main/styles/style.css +++ b/newsletter-sign-up-with-success-message-main/styles/style.css @@ -1,10 +1,10 @@ /* - Mobile: 375px - Desktop: 1440px - */ +*/ :root { - font-family: 'Roboto', sans-serif; + font-family: "Roboto", sans-serif; font-size: 16px; --originalBlue800: hsl(234, 29%, 20%); --originalBlue700: hsl(235, 18%, 26%); @@ -20,9 +20,10 @@ } body { + margin: 0; background-color: var(--originalBlue800); - width: 98vw; - height: 98vh; + width: 100vw; + height: 100vh; overflow: hidden; color: var(--originalBlue800); display: flex; @@ -124,6 +125,8 @@ button { color: var(--originalWhite); border: none; border-radius: 8px; + font: inherit; + cursor: pointer; } button:hover { @@ -144,4 +147,41 @@ button:hover { max-width: 100%; object-fit: contain; display: block; +} + +.hidden { + display: none; +} + +#success-card.hidden { + display: none; +} + +#success-card { + background: var(--originalWhite); + width: 420px; + padding: 2.5rem; + border-radius: 25px; + box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); + + display: flex; + justify-content: center; + align-items: center; +} + +.success-content h1 { + color: var(--originalBlue800); + margin: 1.5rem 0 1rem; + font-size: 2rem; +} + +.success-content p { + font-size: 0.95rem; + line-height: 1.4; + color: var(--originalBlue700); + margin-bottom: 1.5rem; +} + +#success-icon { + width: 48px; } \ No newline at end of file