From 1e99f400ff906230603b39a339136012abf987f3 Mon Sep 17 00:00:00 2001 From: sltan29 Date: Mon, 17 Nov 2025 00:51:42 +0200 Subject: [PATCH 1/7] created a page for desktop --- .../index.html | 90 ++++++++++++++----- .../style.css | 87 ++++++++++++++++++ 2 files changed, 153 insertions(+), 24 deletions(-) create mode 100644 newsletter-sign-up-with-success-message-main/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 8e7329b..2ad233f 100644 --- a/newsletter-sign-up-with-success-message-main/index.html +++ b/newsletter-sign-up-with-success-message-main/index.html @@ -1,52 +1,94 @@ + - + + - - 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: +

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

+ Product discovery and building what matters +

+
+
+ +

+ Measuring to ensure updates are a success +

+
+
+ +

+ And much more! +

+
+
+ + + +
+
+
+ +
+
- Thanks for subscribing! + - -
- Challenge by Frontend Mentor. + + + \ No newline at end of file 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..ed754c8 --- /dev/null +++ b/newsletter-sign-up-with-success-message-main/style.css @@ -0,0 +1,87 @@ +:root{ + font-family: "Roboto"; +} + +body{ + background-color: hsl(235, 18%, 26%); + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + height: 100vh; +} + +.main-rect{ + height: 55vh; + width: 50vw; + display: flex; + background-color: hsl(0, 0%, 100%); + border-radius: 25px; + padding: 60px; + box-shadow: 0px 0px 25px 5px rgba(0, 0, 0, 0.574); +} +.left-form{ + justify-content: start; + display: flex; + align-items: start; + width: 60%; + color: hsl(234, 29%, 20%); + flex-direction: column; + gap: 0px; +} +.title{ + font-size: 55px; + margin: 0px; +} + +.desc{ + font-size: medium; +} + +.checklistItem{ + display: flex; + flex-direction: row; + gap: 20px; +} +.tickImg{ + max-width: 25px; +} +.lab{ + font-weight: bold; + color: hsl(234, 29%, 20%); +} +.main-form{ + display: flex; + flex-direction: column; + margin-top: 20px; + gap: 20px; + width: 80%; +} +input[type=email]{ + padding: 15px; + width: 100%; + border-radius: 5px; + border: solid 1px rgb(197, 197, 197); +} + +button[type=submit]{ + width: 110%; + padding: 15px; + border-radius: 5px; + border: 0px; + background-color: hsl(234, 29%, 20%); + color: hsl(0, 0%, 100%); + font-size: small; + +} + +.right-img{ + width: 40%; + display: flex; + justify-content: center; + align-items: center; +} + +.desk-img{ + width: 22vw; +} \ No newline at end of file From 90b7e634b809903893f47860b89ed1a3ca15ea06 Mon Sep 17 00:00:00 2001 From: sltan29 Date: Tue, 18 Nov 2025 00:02:56 +0200 Subject: [PATCH 2/7] added mobile and tablet adjustments and resposive design --- .../index.html | 77 ++++++++- .../style.css | 154 ++++++++++++++++-- .../success.css | 7 + .../success.html | 17 ++ 4 files changed, 237 insertions(+), 18 deletions(-) create mode 100644 newsletter-sign-up-with-success-message-main/success.css create mode 100644 newsletter-sign-up-with-success-message-main/success.html diff --git a/newsletter-sign-up-with-success-message-main/index.html b/newsletter-sign-up-with-success-message-main/index.html index 2ad233f..aed2c92 100644 --- a/newsletter-sign-up-with-success-message-main/index.html +++ b/newsletter-sign-up-with-success-message-main/index.html @@ -30,7 +30,6 @@ -
@@ -61,9 +60,9 @@

And much more!

-
+ - +
@@ -72,6 +71,78 @@

+
+ +
+

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

+
+
+ + + +
+ +
+
+ +
+ +
+

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

+
+
+ + + +
+ +
+
+ diff --git a/newsletter-sign-up-with-success-message-main/style.css b/newsletter-sign-up-with-success-message-main/style.css index ed754c8..61023e8 100644 --- a/newsletter-sign-up-with-success-message-main/style.css +++ b/newsletter-sign-up-with-success-message-main/style.css @@ -1,8 +1,8 @@ -:root{ +:root { font-family: "Roboto"; } -body{ +body { background-color: hsl(235, 18%, 26%); display: flex; justify-content: center; @@ -11,7 +11,7 @@ body{ height: 100vh; } -.main-rect{ +.main-rect { height: 55vh; width: 50vw; display: flex; @@ -20,7 +20,8 @@ body{ padding: 60px; box-shadow: 0px 0px 25px 5px rgba(0, 0, 0, 0.574); } -.left-form{ + +.left-form { justify-content: start; display: flex; align-items: start; @@ -29,42 +30,47 @@ body{ flex-direction: column; gap: 0px; } -.title{ + +.title { font-size: 55px; margin: 0px; } -.desc{ +.desc { font-size: medium; } -.checklistItem{ +.checklistItem { display: flex; flex-direction: row; gap: 20px; } -.tickImg{ + +.tickImg { max-width: 25px; } -.lab{ + +.lab { font-weight: bold; color: hsl(234, 29%, 20%); } -.main-form{ + +.main-form { display: flex; flex-direction: column; margin-top: 20px; gap: 20px; width: 80%; } -input[type=email]{ + +input[type=email] { padding: 15px; width: 100%; border-radius: 5px; border: solid 1px rgb(197, 197, 197); } -button[type=submit]{ +button[type=submit] { width: 110%; padding: 15px; border-radius: 5px; @@ -72,16 +78,134 @@ button[type=submit]{ background-color: hsl(234, 29%, 20%); color: hsl(0, 0%, 100%); font-size: small; + cursor: not-allowed; +} + +.main-form:valid button[type=submit] { + width: 110%; + padding: 15px; + border-radius: 5px; + border: 0px; + background-image: hsl(234, 29%, 20%); + color: hsl(0, 0%, 100%); + font-size: small; + cursor: pointer; +} +.main-form:valid:hover button[type=submit] { + width: 110%; + padding: 15px; + border-radius: 5px; + border: 0px; + background-image: linear-gradient(to right, hsl(4, 100%, 67%), hsl(23, 100%, 67%)); + color: hsl(0, 0%, 100%); + font-size: small; + cursor: pointer; + box-shadow: 0px 0px 20px 2px hsla(4, 58%, 54%, 0.525); } -.right-img{ +.right-img { width: 40%; display: flex; justify-content: center; align-items: center; } -.desk-img{ +.desk-img { width: 22vw; -} \ No newline at end of file +} + +.mobile-main { + display: none; +} + +.tablet-main { + display: none; +} + +@media (max-width: 600px) { + body { + height: 93vh; + display: flex; + justify-content: center; + align-items: center; + background-color: hsl(0, 0%, 100%); + flex-direction: column; + width: 96vw; + } + + .tablet-main { + display: none; + } + + .main-rect { + display: none; + } + + .mobile-main { + display: flex; + width: 100vw; + height: 100vh; + flex-direction: column; + } + + .title { + font-size: 45px; + } + + .lower-part { + display: flex; + justify-content: start; + align-items: start; + flex-direction: column; + margin-top: 20px; + color: hsl(234, 29%, 20%); + margin-left: 30px; + gap : 0px; + } + + .pic{ + width: 100%; + display: flex; + justify-content: center; + align-items: center; + } + +} + +@media (min-width: 601px) and (max-width: 1024px) { + .main-rect { + display: none; + } + body{ + background-color: hsl(0, 0%, 100%); + padding: 0px; + } + .mobile-main { + display: none + } + .tablet-main{ + display: flex; + width: 100vw; + height: 100vh; + flex-direction: column; + margin: 0px; + } + .pic{ + width: 100%; + display: flex; + justify-content: center; + align-items: center; + height: 100%; + margin-top: -325px; + } + .lower-part { + display: flex; + justify-content: start; + align-items: start; + flex-direction: column; + color: hsl(234, 29%, 20%); + margin-left: 50px; + gap : 0px; + } +} diff --git a/newsletter-sign-up-with-success-message-main/success.css b/newsletter-sign-up-with-success-message-main/success.css new file mode 100644 index 0000000..a9f65c0 --- /dev/null +++ b/newsletter-sign-up-with-success-message-main/success.css @@ -0,0 +1,7 @@ +body{ + height: 100vh; + display: flex; + justify-content: center; + align-items: center; + background-color: hsl(235, 18%, 26%); +} diff --git a/newsletter-sign-up-with-success-message-main/success.html b/newsletter-sign-up-with-success-message-main/success.html new file mode 100644 index 0000000..642e10a --- /dev/null +++ b/newsletter-sign-up-with-success-message-main/success.html @@ -0,0 +1,17 @@ + + + + + + Success Page + + + +
+ +

+ Thanks for subscribing! +

+
+ + \ No newline at end of file From c7e83830127c98322683ed71eeac50285e739126 Mon Sep 17 00:00:00 2001 From: sltan29 Date: Thu, 20 Nov 2025 16:01:34 +0200 Subject: [PATCH 3/7] designed the success screen and made it available for mobile --- .../index.html | 2 +- .../success.css | 68 ++++++++++++++++++- .../success.html | 21 +++++- 3 files changed, 87 insertions(+), 4 deletions(-) diff --git a/newsletter-sign-up-with-success-message-main/index.html b/newsletter-sign-up-with-success-message-main/index.html index aed2c92..12407eb 100644 --- a/newsletter-sign-up-with-success-message-main/index.html +++ b/newsletter-sign-up-with-success-message-main/index.html @@ -60,7 +60,7 @@

And much more!

-
+ diff --git a/newsletter-sign-up-with-success-message-main/success.css b/newsletter-sign-up-with-success-message-main/success.css index a9f65c0..db25d5b 100644 --- a/newsletter-sign-up-with-success-message-main/success.css +++ b/newsletter-sign-up-with-success-message-main/success.css @@ -1,7 +1,73 @@ -body{ +:root { + font-family: "Roboto"; +} + +body { height: 100vh; display: flex; justify-content: center; align-items: center; background-color: hsl(235, 18%, 26%); } + +.main-rect { + width: 375px; + height: 400px; + background-color: hsl(0, 0%, 100%); + border-radius: 25px; + box-shadow: 0px 10px 20px hsla(0, 0%, 0%, 0.553); + display: flex; + flex-direction: column; + justify-content: start; + align-items: start; + padding: 30px; + color: hsl(234, 29%, 20%); +} + +.dis { + width: 100%; + padding: 15px; + border-radius: 5px; + border: 0px; + background-color: hsl(234, 29%, 20%); + color: hsl(0, 0%, 100%); + font-size: small; + cursor: pointer; +} + +.dis:hover { + width: 100%; + padding: 15px; + border-radius: 5px; + border: 0px; + background-image: linear-gradient(to right, hsl(4, 100%, 67%), hsl(23, 100%, 67%)); + color: hsl(0, 0%, 100%); + font-size: small; + cursor: pointer; + box-shadow: 0px 0px 20px 2px hsla(4, 58%, 54%, 0.525); +} + +.title { + font-size: 50px; +} + +@media (max-width: 1024px) { + body { + height: 100vh; + background-color: hsl(0, 0%, 100%); + } + + .main-rect { + box-shadow: none; + height: 100vh; + width: 100vw; + border-radius: 0px; + justify-content: center; + align-items: start; + } + + .dis { + margin-top: 200px; + } + +} \ No newline at end of file diff --git a/newsletter-sign-up-with-success-message-main/success.html b/newsletter-sign-up-with-success-message-main/success.html index 642e10a..2a5e5fc 100644 --- a/newsletter-sign-up-with-success-message-main/success.html +++ b/newsletter-sign-up-with-success-message-main/success.html @@ -1,17 +1,34 @@ + Success Page - + + + + +
- +
+ +

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

+
+ \ No newline at end of file From 7c06710d75b3c8cf5d98f0204fb3c56443e607b7 Mon Sep 17 00:00:00 2001 From: sltan29 Date: Sun, 30 Nov 2025 11:29:16 +0200 Subject: [PATCH 4/7] removed lines that appear twice, removed
, removed unwanted comments, changed colors of BG to variables, made the css of the form more generic. --- .../index.html | 37 ++----------------- .../style.css | 18 +++++---- .../success.css | 10 +++-- .../success.html | 3 +- 4 files changed, 20 insertions(+), 48 deletions(-) diff --git a/newsletter-sign-up-with-success-message-main/index.html b/newsletter-sign-up-with-success-message-main/index.html index 12407eb..45017f8 100644 --- a/newsletter-sign-up-with-success-message-main/index.html +++ b/newsletter-sign-up-with-success-message-main/index.html @@ -10,27 +10,14 @@ Frontend Mentor | Newsletter sign-up form with success message - - - -

@@ -114,18 +101,18 @@

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 + Product discovery and building what matters

- Measuring to ensure updates are a
success + Measuring to ensure updates are a success

@@ -142,24 +129,6 @@

- - - - - - - - - - \ No newline at end of file diff --git a/newsletter-sign-up-with-success-message-main/style.css b/newsletter-sign-up-with-success-message-main/style.css index 61023e8..f987855 100644 --- a/newsletter-sign-up-with-success-message-main/style.css +++ b/newsletter-sign-up-with-success-message-main/style.css @@ -1,9 +1,11 @@ :root { font-family: "Roboto"; + --primary-bg-color:hsl(235, 18%, 26%) ; + --secondary-bg-color:hsl(0, 0%, 100%); } body { - background-color: hsl(235, 18%, 26%); + background-color: var(--primary-bg-color); display: flex; justify-content: center; align-items: center; @@ -15,7 +17,7 @@ body { height: 55vh; width: 50vw; display: flex; - background-color: hsl(0, 0%, 100%); + background-color: var(--secondary-bg-color); border-radius: 25px; padding: 60px; box-shadow: 0px 0px 25px 5px rgba(0, 0, 0, 0.574); @@ -63,14 +65,14 @@ body { width: 80%; } -input[type=email] { +input { padding: 15px; width: 100%; border-radius: 5px; border: solid 1px rgb(197, 197, 197); } -button[type=submit] { +button { width: 110%; padding: 15px; border-radius: 5px; @@ -81,7 +83,7 @@ button[type=submit] { cursor: not-allowed; } -.main-form:valid button[type=submit] { +.main-form:valid button{ width: 110%; padding: 15px; border-radius: 5px; @@ -92,7 +94,7 @@ button[type=submit] { cursor: pointer; } -.main-form:valid:hover button[type=submit] { +.main-form:valid:hover button { width: 110%; padding: 15px; border-radius: 5px; @@ -129,7 +131,7 @@ button[type=submit] { display: flex; justify-content: center; align-items: center; - background-color: hsl(0, 0%, 100%); + background-color: var(--secondary-bg-color); flex-direction: column; width: 96vw; } @@ -178,7 +180,7 @@ button[type=submit] { display: none; } body{ - background-color: hsl(0, 0%, 100%); + background-color: var(--secondary-bg-color); padding: 0px; } .mobile-main { diff --git a/newsletter-sign-up-with-success-message-main/success.css b/newsletter-sign-up-with-success-message-main/success.css index db25d5b..8970746 100644 --- a/newsletter-sign-up-with-success-message-main/success.css +++ b/newsletter-sign-up-with-success-message-main/success.css @@ -1,5 +1,7 @@ :root { font-family: "Roboto"; + --primary-bg-color:hsl(235, 18%, 26%) ; + --secondary-bg-color:hsl(0, 0%, 100%); } body { @@ -7,13 +9,13 @@ body { display: flex; justify-content: center; align-items: center; - background-color: hsl(235, 18%, 26%); + background-color: var(--primary-bg-color); } .main-rect { width: 375px; height: 400px; - background-color: hsl(0, 0%, 100%); + background-color: var(--secondary-bg-color); border-radius: 25px; box-shadow: 0px 10px 20px hsla(0, 0%, 0%, 0.553); display: flex; @@ -24,7 +26,7 @@ body { color: hsl(234, 29%, 20%); } -.dis { +.dismiss { width: 100%; padding: 15px; border-radius: 5px; @@ -54,7 +56,7 @@ body { @media (max-width: 1024px) { body { height: 100vh; - background-color: hsl(0, 0%, 100%); + background-color: var(--secondary-bg-color); } .main-rect { diff --git a/newsletter-sign-up-with-success-message-main/success.html b/newsletter-sign-up-with-success-message-main/success.html index 2a5e5fc..95723b8 100644 --- a/newsletter-sign-up-with-success-message-main/success.html +++ b/newsletter-sign-up-with-success-message-main/success.html @@ -7,7 +7,6 @@ Success Page - @@ -25,7 +24,7 @@

A confirmation email has been sent to
ash@loremcompany.com. Please open it and click
the button inside to confirm your subscription.

-

From 15fa71f024bf8447d18d0ea0a2cb02c58b04e969 Mon Sep 17 00:00:00 2001 From: sltan29 Date: Sun, 30 Nov 2025 11:31:41 +0200 Subject: [PATCH 5/7] removed all
--- newsletter-sign-up-with-success-message-main/index.html | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/newsletter-sign-up-with-success-message-main/index.html b/newsletter-sign-up-with-success-message-main/index.html index 45017f8..c0b44e4 100644 --- a/newsletter-sign-up-with-success-message-main/index.html +++ b/newsletter-sign-up-with-success-message-main/index.html @@ -25,7 +25,6 @@

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

@@ -65,18 +64,18 @@

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 + Product discovery and building what matters

- Measuring to ensure updates are a
success + Measuring to ensure updates are a success

From 89e64baaa9feec51939a883fb64d575bfb00dab6 Mon Sep 17 00:00:00 2001 From: sltan29 Date: Sun, 30 Nov 2025 18:18:01 +0200 Subject: [PATCH 6/7] added alt attributes, changed screen sizing to em and fixed margin --- newsletter-sign-up-with-success-message-main/index.html | 6 +++--- newsletter-sign-up-with-success-message-main/style.css | 7 ++++--- 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/newsletter-sign-up-with-success-message-main/index.html b/newsletter-sign-up-with-success-message-main/index.html index c0b44e4..5ba55b9 100644 --- a/newsletter-sign-up-with-success-message-main/index.html +++ b/newsletter-sign-up-with-success-message-main/index.html @@ -103,19 +103,19 @@

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

- + tick before sentence

Product discovery and building what matters

- + tick before sentence

Measuring to ensure updates are a success

- + tick before sentence

And much more!

diff --git a/newsletter-sign-up-with-success-message-main/style.css b/newsletter-sign-up-with-success-message-main/style.css index f987855..83a181d 100644 --- a/newsletter-sign-up-with-success-message-main/style.css +++ b/newsletter-sign-up-with-success-message-main/style.css @@ -40,6 +40,7 @@ body { .desc { font-size: medium; + max-width: 80%; } .checklistItem { @@ -125,7 +126,7 @@ button { display: none; } -@media (max-width: 600px) { +@media (max-width: 30em) { body { height: 93vh; display: flex; @@ -175,7 +176,7 @@ button { } -@media (min-width: 601px) and (max-width: 1024px) { +@media (min-width: 30em) and (max-width: 50em) { .main-rect { display: none; } @@ -199,7 +200,7 @@ button { justify-content: center; align-items: center; height: 100%; - margin-top: -325px; + margin-top: auto; } .lower-part { display: flex; From 21d2ba39644a0d4efcca3d874ebb4af37018fa31 Mon Sep 17 00:00:00 2001 From: sltan29 Date: Tue, 2 Dec 2025 15:03:26 +0200 Subject: [PATCH 7/7] changed all px units to em (still using vw and vh fo width and height, removed unwanted comment, applied all css colors as variables, combined selectors on the css file and changed the name of the div 'lower-part' to something that is not position based. --- .../index.html | 5 +- .../style.css | 141 ++++++++++-------- .../success.css | 60 ++++---- 3 files changed, 117 insertions(+), 89 deletions(-) diff --git a/newsletter-sign-up-with-success-message-main/index.html b/newsletter-sign-up-with-success-message-main/index.html index c0b44e4..3f3275c 100644 --- a/newsletter-sign-up-with-success-message-main/index.html +++ b/newsletter-sign-up-with-success-message-main/index.html @@ -4,7 +4,6 @@ - @@ -59,7 +58,7 @@

-
+

Stay updated!

@@ -95,7 +94,7 @@

-
+

Stay updated!

diff --git a/newsletter-sign-up-with-success-message-main/style.css b/newsletter-sign-up-with-success-message-main/style.css index f987855..40b8e82 100644 --- a/newsletter-sign-up-with-success-message-main/style.css +++ b/newsletter-sign-up-with-success-message-main/style.css @@ -2,6 +2,12 @@ font-family: "Roboto"; --primary-bg-color:hsl(235, 18%, 26%) ; --secondary-bg-color:hsl(0, 0%, 100%); + --box-shadow-color: rgba(0, 0, 0, 0.574); + --secondary-blue: hsl(234, 29%, 20%); + --input-border:rgb(197, 197, 197); + --grediant-left:hsl(4, 100%, 67%); + --grediant-right : hsl(23, 100%, 67%); + --button-active-shadow: hsla(4, 58%, 54%, 0.525); } body { @@ -18,24 +24,24 @@ body { width: 50vw; display: flex; background-color: var(--secondary-bg-color); - border-radius: 25px; - padding: 60px; - box-shadow: 0px 0px 25px 5px rgba(0, 0, 0, 0.574); + border-radius: 2em; + padding: 4em; + box-shadow: 0em 0em 1em 0.25em var(--box-shadow-color) ; } .left-form { justify-content: start; display: flex; align-items: start; - width: 60%; - color: hsl(234, 29%, 20%); + width: 60vw; + color: var(--secondary-blue) ; flex-direction: column; - gap: 0px; + gap: 0em; } .title { - font-size: 55px; - margin: 0px; + font-size: 4em; + margin: 0em; } .desc { @@ -45,69 +51,69 @@ body { .checklistItem { display: flex; flex-direction: row; - gap: 20px; + gap: 1em; } .tickImg { - max-width: 25px; + max-width: 1.25em; } .lab { font-weight: bold; - color: hsl(234, 29%, 20%); + color: var(--secondary-blue); } .main-form { display: flex; flex-direction: column; - margin-top: 20px; - gap: 20px; - width: 80%; + margin-top: 1em; + gap: 1.5em; + width: 20vw; } input { - padding: 15px; - width: 100%; - border-radius: 5px; - border: solid 1px rgb(197, 197, 197); + padding: 0.75em; + width: 21vw; + border-radius: 0.5em; + border: solid 0.1em var(--input-border); } button { - width: 110%; - padding: 15px; - border-radius: 5px; - border: 0px; - background-color: hsl(234, 29%, 20%); - color: hsl(0, 0%, 100%); + width: 22vw; + padding: 1em; + border-radius: 0.5em; + border: 0em; + background-color: var(--secondary-blue); + color: var(--secondary-bg-color); font-size: small; cursor: not-allowed; } .main-form:valid button{ - width: 110%; - padding: 15px; - border-radius: 5px; - border: 0px; - background-image: hsl(234, 29%, 20%); - color: hsl(0, 0%, 100%); + width: 22vw; + padding: 1em; + border-radius: 0.5em; + border: 0em; + background-image: var(--secondary-blue); + color: var(--secondary-bg-color); font-size: small; cursor: pointer; } .main-form:valid:hover button { - width: 110%; - padding: 15px; - border-radius: 5px; - border: 0px; - background-image: linear-gradient(to right, hsl(4, 100%, 67%), hsl(23, 100%, 67%)); - color: hsl(0, 0%, 100%); + width: 22vw; + padding: 1em; + border-radius: 0.5em; + border: 0em; + background-image: linear-gradient(to right, var(--grediant-left), var(--grediant-right)); + color: var(--secondary-bg-color); font-size: small; cursor: pointer; - box-shadow: 0px 0px 20px 2px hsla(4, 58%, 54%, 0.525); + box-shadow: 0em 0em 1em 0.1em var(--button-active-shadow); } .right-img { - width: 40%; + width: 20vw; display: flex; justify-content: center; align-items: center; @@ -125,9 +131,9 @@ button { display: none; } -@media (max-width: 600px) { +@media (max-width: 40em) { body { - height: 93vh; + height: 100vh; display: flex; justify-content: center; align-items: center; @@ -136,10 +142,7 @@ button { width: 96vw; } - .tablet-main { - display: none; - } - + .tablet-main, .main-rect { display: none; } @@ -152,36 +155,46 @@ button { } .title { - font-size: 45px; + font-size: 3em; } - .lower-part { + .main-area { display: flex; justify-content: start; align-items: start; flex-direction: column; - margin-top: 20px; - color: hsl(234, 29%, 20%); - margin-left: 30px; - gap : 0px; + margin-top: 1em; + color: var(--secondary-blue); + margin-left: 1.5em; + gap : 0em; + width: 100vw; } .pic{ - width: 100%; + width: 100vw; display: flex; justify-content: center; align-items: center; } + .main-form{ + width: 100vw; + } + input{ + width: 72vw; + } + button { + width: 75vw; + } } -@media (min-width: 601px) and (max-width: 1024px) { +@media (min-width: 40em) and (max-width: 60em) { .main-rect { display: none; } body{ background-color: var(--secondary-bg-color); - padding: 0px; + padding: 0em; } .mobile-main { display: none @@ -191,23 +204,29 @@ button { width: 100vw; height: 100vh; flex-direction: column; - margin: 0px; + margin: 0em; } .pic{ - width: 100%; + width: 100vw; display: flex; justify-content: center; align-items: center; - height: 100%; - margin-top: -325px; + height: 100vh; + margin-top: auto; } - .lower-part { + .main-area { display: flex; justify-content: start; align-items: start; flex-direction: column; - color: hsl(234, 29%, 20%); - margin-left: 50px; - gap : 0px; + color: var(--secondary-blue); + margin-left: 2em; + gap : 0em; + } + input{ + width: 72vw; + } + button { + width: 75vw; } } diff --git a/newsletter-sign-up-with-success-message-main/success.css b/newsletter-sign-up-with-success-message-main/success.css index 8970746..9fff0a5 100644 --- a/newsletter-sign-up-with-success-message-main/success.css +++ b/newsletter-sign-up-with-success-message-main/success.css @@ -2,6 +2,12 @@ font-family: "Roboto"; --primary-bg-color:hsl(235, 18%, 26%) ; --secondary-bg-color:hsl(0, 0%, 100%); + --box-shadow-color: rgba(0, 0, 0, 0.574); + --secondary-blue: hsl(234, 29%, 20%); + --input-border:rgb(197, 197, 197); + --grediant-left:hsl(4, 100%, 67%); + --grediant-right : hsl(23, 100%, 67%); + --button-active-shadow: hsla(4, 58%, 54%, 0.525); } body { @@ -13,47 +19,47 @@ body { } .main-rect { - width: 375px; - height: 400px; + width: 25em; + height: 27em; background-color: var(--secondary-bg-color); - border-radius: 25px; - box-shadow: 0px 10px 20px hsla(0, 0%, 0%, 0.553); + border-radius: 1.25em; + box-shadow: 0em 0.5em 1em var(--box-shadow-color); display: flex; flex-direction: column; justify-content: start; align-items: start; - padding: 30px; - color: hsl(234, 29%, 20%); + padding: 1.5em; + color: var(--secondary-blue); } .dismiss { - width: 100%; - padding: 15px; - border-radius: 5px; - border: 0px; - background-color: hsl(234, 29%, 20%); - color: hsl(0, 0%, 100%); + width: 20vw; + padding: 1em; + border-radius: 0.5em; + border: 0em; + background-color: var(--secondary-blue); + color: var(--secondary-bg-color); font-size: small; cursor: pointer; } -.dis:hover { - width: 100%; - padding: 15px; - border-radius: 5px; - border: 0px; - background-image: linear-gradient(to right, hsl(4, 100%, 67%), hsl(23, 100%, 67%)); - color: hsl(0, 0%, 100%); +.dismiss:hover { + width: 20vw; + padding: 1em; + border-radius: 0.25em; + border: 0em; + background-image: linear-gradient(to right, var(--grediant-left), var(--grediant-right)); + color: var(--secondary-bg-color); font-size: small; cursor: pointer; - box-shadow: 0px 0px 20px 2px hsla(4, 58%, 54%, 0.525); + box-shadow: 0em 0em 1em 0.1em var(--button-active-shadow); } .title { - font-size: 50px; + font-size: 3em; } -@media (max-width: 1024px) { +@media (max-width: 60em) { body { height: 100vh; background-color: var(--secondary-bg-color); @@ -63,13 +69,17 @@ body { box-shadow: none; height: 100vh; width: 100vw; - border-radius: 0px; + border-radius: 0em; justify-content: center; align-items: start; } - .dis { - margin-top: 200px; + .dismiss { + margin-top: 3em; + width: 75vw; + } + .dismiss:hover { + width: 75vw; } } \ No newline at end of file