diff --git a/newsletter-sign-up-with-success-message-main/index.html b/newsletter-sign-up-with-success-message-main/index.html index 8e7329b..00f1bbd 100644 --- a/newsletter-sign-up-with-success-message-main/index.html +++ b/newsletter-sign-up-with-success-message-main/index.html @@ -3,22 +3,54 @@ - + 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

+
+
+ +

Measuring to ensure updates are a success

+
+
+ +

And much more!

+
+
+ +
+ +
+ + +
+
+
+
+ rightimage +
- Stay updated! +
+ - Thanks for subscribing! + -
+ + \ 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..fedbd6d --- /dev/null +++ b/newsletter-sign-up-with-success-message-main/style.css @@ -0,0 +1,117 @@ +html{ + height: 100%; + width: 100%; + display: flex; + justify-content: center; + align-items: center; +} +body{ + background-color: hsl(234, 29%, 20%); + display: flex; + justify-content: center; + align-items: center; + width: 100%; + height: 100%; + font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; +} +.form{ + padding: 22px; + display: flex; + flex-direction: row; + background-color: hsl(0, 0%, 100%); + width: 860px; + height: 538px; + border-radius: 30px; +} + +.right{ + justify-content: right; + display:flex; + height:100%; + width:50%; +} + +#rightimage{ + position: relative; + width: 70%; + height: 100%; +} +.left{ + margin-left: 50px; + justify-content: center; + flex-direction: column; + height:100%; + width:50%; +} + +.inputbox{ + flex-direction: column; + justify-content: flex-end; +} + +.emailform{ + display: flex; + flex-direction: column; +} + +.text{ + padding-top: 10px; + padding-bottom: 20px; + flex-direction: column; +} + +.header{ + color:hsl(234, 29%, 20%); + font-weight: 700; + font-size: 54px; + margin-bottom: 28px; + margin-top:40px; +} +#icon{ + height:20px; + width: 20px; +} +.small{ + color:hsl(234, 29%, 20%); + font-weight: 400; + font-size: 16px; + margin-top: 0; +} + +.input{ + margin-bottom: 20px; + width: 365px; + height:36px; +} +#placeholder{ + margin-left: 12px; +} +.checkbox{ + margin-top: -4px; +} +.email{ + color: hsl(234, 29%, 20%); + font-size: 10.5px; + font-weight: 700; + margin-top: 26px; + margin-bottom: 10px; +} +.sub{ + background-color:hsl(234, 29%, 20%); + color:hsl(0, 0%, 100%); + font-weight: 700; + font-size: 12px; + width:379px; + height:44px; + border:none; + border-radius: 6px; + +} +.row{ + display: flex; + flex-direction: row; +} + +#icons{ + padding-left: 14px; +} \ No newline at end of file