From cf3e65ef1ab92776b75c821c4e7d2d9d70bb3731 Mon Sep 17 00:00:00 2001 From: Moriel Date: Mon, 17 Nov 2025 12:50:29 +0200 Subject: [PATCH 1/3] finish-design --- .../index.html | 56 ++++---- .../styles.css | 136 ++++++++++++++++++ 2 files changed, 166 insertions(+), 26 deletions(-) create mode 100644 newsletter-sign-up-with-success-message-main/styles.css diff --git a/newsletter-sign-up-with-success-message-main/index.html b/newsletter-sign-up-with-success-message-main/index.html index 8e7329b..5803b24 100644 --- a/newsletter-sign-up-with-success-message-main/index.html +++ b/newsletter-sign-up-with-success-message-main/index.html @@ -2,51 +2,55 @@ - - - - Frontend Mentor | Newsletter sign-up form with success message + + - + Frontend Mentor | Newsletter sign-up form with success message - - - - Stay updated! - - Join 60,000+ product managers receiving monthly updates on: - - Product discovery and building what matters +
+
+

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 - +
+
+ +And much more! +
+
+ +

+ +
+
+ +
- Thanks for subscribing! + -
+ \ No newline at end of file diff --git a/newsletter-sign-up-with-success-message-main/styles.css b/newsletter-sign-up-with-success-message-main/styles.css new file mode 100644 index 0000000..d88359a --- /dev/null +++ b/newsletter-sign-up-with-success-message-main/styles.css @@ -0,0 +1,136 @@ +* { + box-sizing: border-box; +} + + +body { + background-color: hsl(234, 29%, 20%); + margin: 0; + min-height: 100vh; + padding: 16px; + display: flex; + justify-content: center; + align-items: center; + font-family: system-ui, Arial, sans-serif; +} + +.box { + display: flex; + flex-direction: column-reverse; + background-color: white; + border-radius: 20px; + color: hsl(234, 29%, 20%); + font-size: 12px; + gap: 20px; + width: 100%; + max-width: 400px; + padding: 24px 20px; +} + + +.right-side { + display: flex; + flex-direction: column; + gap: 15px; + text-align: left; +} + +h1 { + font-size: 33px; + margin: 0 0 8px; + padding: 0; +} + +.right-side > p { + margin: 0 0 8px; + font-size: 13px; + line-height: 1.8; +} + +.line { + display: flex; + align-items: center; + gap: 12px; + font-size: 13px; +} + +.ok-img { + width: 15px; + height: 15px; + display: block; +} + +.img-data { + max-width: 100%; + height: auto; + display: block; + align-self: center; +} + +.right-side form { + display: flex; + flex-direction: column; + +} + +.Email-label { + font-weight: bold; + font-size: 12px; + margin-top: 14px; + padding-bottom: 10px; +} + +#email-textbox { + border: 1px solid rgb(177, 177, 177); + border-radius: 5px; + font-size: 12px; + padding: 12px; + width: 100%; + max-width: 280px; + text-align: left; + outline: none; + color: hsl(234, 29%, 20%); + +} + +.subscribe { + background-color: hsl(234, 29%, 20%); + color: white; + border: none; + border-radius: 5px; + font-size: 12px; + padding: 12px; + width: 100%; + max-width: 285px; + text-align: center; + cursor: pointer; +} + + +@media (min-width: 768px) { + body { + padding: 40px 60px; + } + + .box { + flex-direction: row; + align-items: center; + max-width: 700px; + padding: 40px 32px; + gap: 30px; + } + + h1 { + font-size: 40px; + margin: 0 0 10px; + } + + .right-side > p { + font-size: 14px; + margin-bottom: 12px; + } + + .img-data { + max-width: 300px; + } +} From 6f609db05a7c38be84e3ac5dc98b419d4e45bc1f Mon Sep 17 00:00:00 2001 From: Moriel Date: Wed, 3 Dec 2025 23:34:38 +0200 Subject: [PATCH 2/3] Fix review comments from PR --- .../index.html | 23 +++---------------- .../styles.css | 10 ++++---- 2 files changed, 8 insertions(+), 25 deletions(-) diff --git a/newsletter-sign-up-with-success-message-main/index.html b/newsletter-sign-up-with-success-message-main/index.html index 5803b24..6413ca0 100644 --- a/newsletter-sign-up-with-success-message-main/index.html +++ b/newsletter-sign-up-with-success-message-main/index.html @@ -16,15 +16,15 @@

Stay updated!

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

- + success Product discovery and building what matters
- +success Measuring to ensure updates are a success
- +success And much more!
@@ -35,22 +35,5 @@

Stay updated!

- - - - - - - - - \ No newline at end of file diff --git a/newsletter-sign-up-with-success-message-main/styles.css b/newsletter-sign-up-with-success-message-main/styles.css index d88359a..aeee761 100644 --- a/newsletter-sign-up-with-success-message-main/styles.css +++ b/newsletter-sign-up-with-success-message-main/styles.css @@ -1,3 +1,4 @@ + * { box-sizing: border-box; } @@ -41,7 +42,7 @@ h1 { padding: 0; } -.right-side > p { +.first-message { margin: 0 0 8px; font-size: 13px; line-height: 1.8; @@ -67,13 +68,12 @@ h1 { align-self: center; } -.right-side form { +.newsletter-form { display: flex; flex-direction: column; - } -.Email-label { +.email-label { font-weight: bold; font-size: 12px; margin-top: 14px; @@ -125,7 +125,7 @@ h1 { margin: 0 0 10px; } - .right-side > p { + .first-message { font-size: 14px; margin-bottom: 12px; } From 056cb9e2a8077d5bb84da63efdbdac54524a1b47 Mon Sep 17 00:00:00 2001 From: Moriel Date: Wed, 3 Dec 2025 23:36:47 +0200 Subject: [PATCH 3/3] Update index.html --- 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 6413ca0..8b3076a 100644 --- a/newsletter-sign-up-with-success-message-main/index.html +++ b/newsletter-sign-up-with-success-message-main/index.html @@ -14,7 +14,7 @@

Stay updated!

-

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

+

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

success Product discovery and building what matters