diff --git a/newsletter-sign-up-with-success-message-main/index.html b/newsletter-sign-up-with-success-message-main/index.html index 8e7329b..6c472aa 100644 --- a/newsletter-sign-up-with-success-message-main/index.html +++ b/newsletter-sign-up-with-success-message-main/index.html @@ -1,52 +1,176 @@ + - + + - + Frontend Mentor | Newsletter sign-up form with success message - - + .attribution { + font-size: 11px; + text-align: center; + } + + .attribution a { + color: hsl(228, 45%, 44%); + } + + .page { + display: flex; + align-items: center; + justify-content: center; + height: 100vh; + width: 100vw; + + } + + .grey-ground { + display: flex; + background-color: #36384D; + justify-content: center; + align-items: center; + width: 60vw; + height: 80vh; + } + + .white-ground { + display: flex; + flex-direction: row; + justify-content: space-around; + background-color: white; + align-items: center; + width: 40vw; + height: 50vh; + border-radius: 12px; + padding: 25px 5px; + } + - + .photo { + width: 45%; + height: 100%; + } - Stay updated! + .photo-item { + width: 100%; + height: 100%; + object-fit: contain; + } - Join 60,000+ product managers receiving monthly updates on: + .text { + width: 45%; + height: 100%; + text-align: left; + } - Product discovery and building what matters - Measuring to ensure updates are a success - And much more! + .title { + font-weight: bold; + font-size: 28px; + margin-top: 20px; - Email address - email@company.com + } - Subscribe to monthly newsletter + .sub-title { + margin-top: 20px; + font-size: 12px; - - + } - Thanks for subscribing! + .line-1 { + display: flex; + flex-direction: row; + font-size: 10px; + margin-top: 10px; + align-items: center; + } - A confirmation email has been sent to ash@loremcompany.com. - Please open it and click the button inside to confirm your subscription. + .text-1 { + display: flex; + align-items: center; + text-align: end; + margin-left: 7px; + } - Dismiss message + .email-title { + display: flex; + flex-direction: row; + margin-top: 20px; + font-size: 10px; + } - - -
+ .field { + display: flex; + flex-direction: row; + width:250px; + height: 35px; + } + .btn{ + display: flex; + color:rgb(236, 229, 229); + background-color: #232840; + border-radius: 3px; + justify-content: center; + align-items: center; + margin-top: 20px; + width:250px; + height: 35px; + } + + + + + +
+
+
+
+
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! +
+
+ +
+ +
+ +
+
+ +
+
+
+
+ + + + \ No newline at end of file