+ 
+
\ No newline at end of file
diff --git a/newsletter-sign-up-with-success-message-main/styles.css b/newsletter-sign-up-with-success-message-main/styles.css
new file mode 100644
index 0000000..aeee761
--- /dev/null
+++ b/newsletter-sign-up-with-success-message-main/styles.css
@@ -0,0 +1,136 @@
+
+* {
+ box-sizing: border-box;
+}
+
+
+body {
+ background-color: hsl(234, 29%, 20%);
+ margin: 0;
+ min-height: 100vh;
+ padding: 16px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-family: system-ui, Arial, sans-serif;
+}
+
+.box {
+ display: flex;
+ flex-direction: column-reverse;
+ background-color: white;
+ border-radius: 20px;
+ color: hsl(234, 29%, 20%);
+ font-size: 12px;
+ gap: 20px;
+ width: 100%;
+ max-width: 400px;
+ padding: 24px 20px;
+}
+
+
+.right-side {
+ display: flex;
+ flex-direction: column;
+ gap: 15px;
+ text-align: left;
+}
+
+h1 {
+ font-size: 33px;
+ margin: 0 0 8px;
+ padding: 0;
+}
+
+.first-message {
+ margin: 0 0 8px;
+ font-size: 13px;
+ line-height: 1.8;
+}
+
+.line {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ font-size: 13px;
+}
+
+.ok-img {
+ width: 15px;
+ height: 15px;
+ display: block;
+}
+
+.img-data {
+ max-width: 100%;
+ height: auto;
+ display: block;
+ align-self: center;
+}
+
+.newsletter-form {
+ display: flex;
+ flex-direction: column;
+}
+
+.email-label {
+ font-weight: bold;
+ font-size: 12px;
+ margin-top: 14px;
+ padding-bottom: 10px;
+}
+
+#email-textbox {
+ border: 1px solid rgb(177, 177, 177);
+ border-radius: 5px;
+ font-size: 12px;
+ padding: 12px;
+ width: 100%;
+ max-width: 280px;
+ text-align: left;
+ outline: none;
+ color: hsl(234, 29%, 20%);
+
+}
+
+.subscribe {
+ background-color: hsl(234, 29%, 20%);
+ color: white;
+ border: none;
+ border-radius: 5px;
+ font-size: 12px;
+ padding: 12px;
+ width: 100%;
+ max-width: 285px;
+ text-align: center;
+ cursor: pointer;
+}
+
+
+@media (min-width: 768px) {
+ body {
+ padding: 40px 60px;
+ }
+
+ .box {
+ flex-direction: row;
+ align-items: center;
+ max-width: 700px;
+ padding: 40px 32px;
+ gap: 30px;
+ }
+
+ h1 {
+ font-size: 40px;
+ margin: 0 0 10px;
+ }
+
+ .first-message {
+ font-size: 14px;
+ margin-bottom: 12px;
+ }
+
+ .img-data {
+ max-width: 300px;
+ }
+}
Stay updated!
+Join 60,000+ product managers receiving monthly updates on:
+
+ 
+ Product discovery and building what matters
+
+
+ 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
-
-
-
-
+
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
-
-
-
-
- Challenge by Frontend Mentor.
- Coded by Your Name Here.
+
+
+
+And much more!
+
+
+And much more!
+
+