From b524932710ba5738f4165eb44bb1dc6652bd84ef Mon Sep 17 00:00:00 2001 From: mori1236 Date: Sun, 16 Nov 2025 21:30:22 +0200 Subject: [PATCH 1/3] somting --- .../index.html | 75 ++++++---- .../style.css | 140 ++++++++++++++++++ 2 files changed, 185 insertions(+), 30 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..88aa581 100644 --- a/newsletter-sign-up-with-success-message-main/index.html +++ b/newsletter-sign-up-with-success-message-main/index.html @@ -3,7 +3,7 @@ - + Frontend Mentor | Newsletter sign-up form with success message @@ -17,36 +17,51 @@ - - 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 - - - - - - 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. - - Dismiss message - - - -
+
+
+
+ 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 + + + + + + + + + +
+ Italian Trulli +
+ + \ 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..2b8c142 --- /dev/null +++ b/newsletter-sign-up-with-success-message-main/style.css @@ -0,0 +1,140 @@ +:root { + --Blue800: hsl(234, 29%, 20%); + --Blue700: hsl(235, 18%, 26%); + --Grey: hsl(0, 0%,58%); + --White: hsl(0, 0%, 100%); +} + +html{ + height: 100%; +} + +body{ + background-color: var(--Blue700); + display: flex; + justify-content: center; + justify-items: center; + margin: 0; + height: 100%; + align-items: center; +} + +.popup{ + width: 600px; + height: 400px; + background-color: white; + border-radius: 24px; + display: grid; + padding: 20px; + grid-template-columns: auto auto; +} + +.main{ + display: flex; + flex-direction: column; + justify-content: center; +} + +grid{ + display: grid; + align-items: center; + justify-content: center; + height: auto; +} + +.circle-star{ + background-color: #272E38; + height: 50px; + width: 50px; + color: hsl(217, 12%, 63%); + border-radius: 25px; + display: flex; + font-family: "Overpass"; + font-weight: 700; + justify-content: center; + align-items: center; + border-width: 0px; +} + +.circle{ + background-color: #272E38; + height: 50px; + width: 50px; + color: hsl(217, 12%, 63%); + border-radius: 25px; + display: flex; + font-family: "Overpass"; + font-weight: 700; + justify-content: center; + align-items: center; + border-width: 0px; +} + +.circle:hover{ + background-color: hsl(25, 97%, 53%); + color: hsl(213, 19%, 18%); + cursor: pointer; +} + +.circle:hover:active{ + background-color: hsl(25, 85%, 44%); +} + +.circle:disabled{ + background-color: white; + color: #272E38; +} + + + +.title{ + color: var(--Blue800); + font-size: 25px; + font-weight: 900; + font-family: "Roboto"; +} + +.text{ + color: var(--Blue800); + font-size: 15px; + margin: 20px 0px; + font-weight: 400; + line-height: 1.8; + font-family: "Roboto"; +} +.numbers{ + display: flex; + flex-direction: row; + width: auto; + justify-content: space-between; +} + +.submit{ + background-color: var(--Blue800); + height: 50px; + width: -webkit-fill-available; + border-radius: 10px; + display: flex; + align-items: center; + justify-content: center; + font-size: 15px; + font-family: "Roboto"; + font-weight: 400; + color: white; + border-width: 0px; +} + +.submit:hover{ + background-color: hsl(25, 85%, 44%); + color: hsl(213, 19%, 18%); + cursor: pointer; +} + +.submit:hover:active{ + background-color: hsl(25, 81%, 36%); + color: var(--Blue800); +} + +.photo{ + width: 300px; +} \ No newline at end of file From f1fd41621e5eac51b09843659a794cb5dda9c1d2 Mon Sep 17 00:00:00 2001 From: mori1236 Date: Tue, 18 Nov 2025 17:19:00 +0200 Subject: [PATCH 2/3] update --- .../index.html | 23 +++-- .../style.css | 99 ++++++++++++------- 2 files changed, 77 insertions(+), 45 deletions(-) diff --git a/newsletter-sign-up-with-success-message-main/index.html b/newsletter-sign-up-with-success-message-main/index.html index 88aa581..c6bbbd4 100644 --- a/newsletter-sign-up-with-success-message-main/index.html +++ b/newsletter-sign-up-with-success-message-main/index.html @@ -18,7 +18,7 @@
-
+
Stay updated!
@@ -26,18 +26,27 @@ 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 @@ -56,7 +65,7 @@
- Italian Trulli + Italian Trulli
- + Frontend Mentor | Newsletter sign-up form with success message - - - - - -
+