diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..a526a37 Binary files /dev/null and b/.DS_Store differ diff --git a/newsletter-sign-up-with-success-message-main/index.html b/newsletter-sign-up-with-success-message-main/index.html index 8e7329b..17facaf 100644 --- a/newsletter-sign-up-with-success-message-main/index.html +++ b/newsletter-sign-up-with-success-message-main/index.html @@ -3,50 +3,35 @@ - - + + Frontend Mentor | Newsletter sign-up form with success message - - +
+ +
+

Stay updated!

+
60,000+ product managers receiving monthly updates on:
+ + +
Email address
+ + + + +
+ + + - - - 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 - 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.
+ \ 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..f2bf8fd --- /dev/null +++ b/newsletter-sign-up-with-success-message-main/style.css @@ -0,0 +1,126 @@ +body { + background-color: hsl(235, 18%, 26%); + height: 100vh; + display: flex; + align-items: center; + justify-content: center; + margin: 0; + font-family: "Roberto", sans-serif; +} + +@font-face { + font-family: "Roberto"; + src: url("./fonts/MyFont-Regular.ttf") format("truetype"); +} + +.container { + display: flex; + height: 65%; + width: 55%; + background-color: white; + border-radius: 30px; + padding: 20px; + max-width: 800px; + width: 90%; +} + +.container img { + flex: 1; +} + +.text-container { + flex: 1; + display: flex; + flex-direction: column; + justify-content: space-between; + padding: 60px 40px; + gap: 10px; +} + +.text-container * { + margin: 0; +} + +.text-container ul { + list-style: none; + padding: 0; +} + +.text-container li { + position: relative; + line-height: 30px; + padding-left: 25px; + background-image: url("./assets/images/icon-list.svg"); + background-repeat: no-repeat; + background-size: 16px; + background-position: 0px 7px; + font-size: 16px; +} + + +.text-container h1 { + color: hsl(234, 29%, 20%); + text-align: center; + font-weight: 700; + width: 100%; +} + +.text-container p { + font-size: 16px; + text-align: left; +} + +.text-container input, +.text-container button { + width: 100%; + border-radius: 8px; +} + +.text-container input { + border: 2px solid hsl(0, 0%,58%) ; + color: hsl(0, 0%,58%); + height: 40px; +} + +.text-container button { + background-color: hsl(234, 29%, 20%); + height: 45px; + color: white; + border: none; + cursor: pointer; +} + +.img-mobile { + display: none; +} + +@media (max-width: 700px) { + + body { + height: auto; + padding: 10px 0; + align-items: flex-start; + } + + .container { + flex-direction: column; + width: 90%; + height: auto; + } + + .img-desktop { + display: none; + } + + .img-mobile { + display: block; + width: 100%; + align-self: center; + order: -1; + border-radius: 20px; + } + + .text-container { + padding: 30px 20px; + } +} diff --git a/newsletter-sign-up-with-success-message-main/success.css b/newsletter-sign-up-with-success-message-main/success.css new file mode 100644 index 0000000..010b381 --- /dev/null +++ b/newsletter-sign-up-with-success-message-main/success.css @@ -0,0 +1,55 @@ +body { + background-color: hsl(235, 18%, 26%); + height: 100vh; + display: flex; + align-items: center; + justify-content: center; + margin: 0; + font-family: "Roberto", sans-serif; +} + +@font-face { + font-family: "Roberto"; + src: url("./fonts/MyFont-Regular.ttf") format("truetype"); +} + +.container { + display: flex; + width: 300px; + height: 300px; + background-color: white; + border-radius: 30px; + padding: 40px; + flex-direction: column; +} + +.container img { + height: 40px; + width: 40px; +} + +.container button { + background-color: hsl(235, 18%, 26%); + color: white; + height: 40px; + width: 100%; + border: 0px; + border-radius: 7px; +} + +@media (max-width: 400px) { + + body { + background-color: white; + height: 100%; + justify-content: flex-start; + } + + .container { + width: 100%; + height: auto; + padding: 20px; + padding-top: 80px; + } + +} \ No newline at end of file diff --git a/newsletter-sign-up-with-success-message-main/success.html b/newsletter-sign-up-with-success-message-main/success.html new file mode 100644 index 0000000..b4e9a0e --- /dev/null +++ b/newsletter-sign-up-with-success-message-main/success.html @@ -0,0 +1,23 @@ + + + + + + Subscription Success + + + +
+ + + +

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.

+ + +
+ + + \ No newline at end of file