From 2b7ce123f67b007de8dae3a24031ca65599cd9ee Mon Sep 17 00:00:00 2001 From: Asaf Axelrod Date: Sun, 16 Nov 2025 20:56:42 +0200 Subject: [PATCH 1/5] 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/5] 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/5] 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/5] 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/5] 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