From 950af4884149353cd3b3a9da7002044a408e8590 Mon Sep 17 00:00:00 2001 From: RazBenLulu Date: Sat, 22 Nov 2025 16:38:51 +0200 Subject: [PATCH] Final solution upload --- .../index.css | 92 +++++++++++++++++++ .../index.html | 55 +++++++---- 2 files changed, 127 insertions(+), 20 deletions(-) create mode 100644 newsletter-sign-up-with-success-message-main/index.css diff --git a/newsletter-sign-up-with-success-message-main/index.css b/newsletter-sign-up-with-success-message-main/index.css new file mode 100644 index 0000000..2988236 --- /dev/null +++ b/newsletter-sign-up-with-success-message-main/index.css @@ -0,0 +1,92 @@ +@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap'); + +body { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + background-color: rgb(48, 64, 89); + font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; +} + +.box { + display: flex; + background-color: white; + border-radius: 40px; + padding: 25px; + gap: 80px; + height: 600px; + align-items: stretch; + overflow: hidden; +} + +.text { + display: flex; + flex-direction: column; + justify-content: center; +} + +.rightImg { + width: 350px; + height: 100%; + object-fit: cover; + border-radius: 15px; +} + +.title{ + display: flex; + justify-content:center; + color: hsla(234, 67%, 17%, 0.863); + font-size: 55px; + padding-left: 30px; + margin: 0; + line-height: 1.5; +} + +ul { + list-style-type: none; +} + +li { + display: flex; + padding: 6px; + gap: 13px; + +} + +form{ + display: flex; + flex-direction: column; + +} + +.emailInput{ + width: 324px; + padding: 13px; + border:2px solid rgb(196, 196, 196); + border-radius: 5px; + margin: -3px; + margin-left: 50px; + padding-left:20px; + +} + +.subscribeButton{ + background-color: hsla(234, 67%, 17%, 0.863); + color: white; + padding: 12px; + border-radius: 5px; + width:362px; + margin-left: 50px; + margin-bottom: 55px; + +} + +.emailText{ + margin-left: 50px; + margin-top: 20px; +} + +.sub{ + margin-left: 44px; +} \ No newline at end of file diff --git a/newsletter-sign-up-with-success-message-main/index.html b/newsletter-sign-up-with-success-message-main/index.html index 8e7329b..46f4edb 100644 --- a/newsletter-sign-up-with-success-message-main/index.html +++ b/newsletter-sign-up-with-success-message-main/index.html @@ -1,22 +1,14 @@ + - - - - - Frontend Mentor | Newsletter sign-up form with success message - - - - + + + - + - + - -
- Challenge by Frontend Mentor. - Coded by Your Name Here. + +
+ +
+

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 +
+
+ +
+ +
+
+ + + +
+ + + \ No newline at end of file