diff --git a/newsletter-sign-up-with-success-message-main/index.html b/newsletter-sign-up-with-success-message-main/index.html index 8e7329b..3460847 100644 --- a/newsletter-sign-up-with-success-message-main/index.html +++ b/newsletter-sign-up-with-success-message-main/index.html @@ -9,44 +9,70 @@ 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! +
+
+
+ +
+

+ email adress

+ +
+
+ - Dismiss message - - -
- Challenge by Frontend Mentor. - Coded by Your Name Here. +
+
+ + + +
+
\ 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..6cc82bc --- /dev/null +++ b/newsletter-sign-up-with-success-message-main/style.css @@ -0,0 +1,153 @@ +body { + margin: 0; + height: 100vh; + background-image: url(https://coolbackgrounds.imgix.net/3ePclU2S6e80DYWpCUdmPV/194ca1fcd9f49a833e906d7adb743078/white-unsplash.jpg?w=3840&q=60&auto=format,compress); + background-size: cover; + background-repeat: no-repeat; + background-position: center; + display: flex; + justify-content: center; + align-items: center; + font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif +} + + +.center-rect { + background: hsl(234, 29%, 20%); + padding-left: 15%; + padding-right: 15%; + padding-top: 7%; + padding-bottom: 7%; + text-align: center; + box-shadow: 0 4px 20px rgba(0,0,0,0.3); + margin: 0 auto; + +} + +.inner-rect { + background:white; + padding: 3%; + border-radius:30px; + text-align: center; + box-shadow: 0 4px 20px rgba(0,0,0,0.3); + display: flex; + flex: 1fr 1fr 1fr; + +} + +.rightside{ +column-gap: 30%; +justify-content: center; +align-items: center; +flex-direction: column; +flex:1; + + +} + + +.picture img { + width: 100%; + height: auto; + display: block; +} + +.leftside{ + + text-align: center; + flex: 1; + flex-direction: row; + padding: 3%; + +} +.row1{ + text-align: center; + +} +.head{ + font-size: 50px; + text-align: left; +} + +.row2{ + text-align: left; + padding-bottom: 30px; +} +.row3{ + display: flex; + flex: 1; + flex-direction: row; + align-items: center; + padding-bottom: 10px; +} +.check1{ + text-align: left; + padding-right:10px; +} +.text1{ + text-align:left ; +} +.row4{ + display: flex; + flex: 1; + flex-direction: row; + align-items: center; + padding-bottom: 10px; +} +.check2{ + padding-right: 10px; + text-align: left; + } +.text2{ + text-align:left ; +} +.row5{ + display: flex; + flex: 1; + flex-direction: row; + align-items: center; +} + +.check3{ + padding-right: 10px; + text-align: left; +} +.text3{ + flex: 1; + text-align: left; + align-items: center; +} +.row6{ + display: flex; + flex: 1; + flex-direction: column; +} +.emailtext{ + font-size: smaller; +} + + .email-form input[type="email"] { + width: 100%; + padding: 15px; + font-size: 1rem; + border: 1px solid #ccc; + border-radius: 8px; + box-sizing: border-box; + margin-bottom: 20px; + + +} + +.submit{ + + background: hsl(234, 29%, 20%) ; + width: 100%; + border-radius: 8px; + padding: 15px; + font-size:13px; + color:white ; + +} + + +