diff --git a/newsletter-sign-up-with-success-message-main/constants.js b/newsletter-sign-up-with-success-message-main/constants.js new file mode 100644 index 0000000..843d9cc --- /dev/null +++ b/newsletter-sign-up-with-success-message-main/constants.js @@ -0,0 +1,3 @@ +const AppConstants = { + EMAIL_PARAM_KEY: "email", +}; diff --git a/newsletter-sign-up-with-success-message-main/index-styles.css b/newsletter-sign-up-with-success-message-main/index-styles.css new file mode 100644 index 0000000..3dc0883 --- /dev/null +++ b/newsletter-sign-up-with-success-message-main/index-styles.css @@ -0,0 +1,109 @@ +@media screen and (min-width: 800px) { + .container { + width: 850px; + height: 590px; + padding: 2em; + } + .img-side { + background-image: url("./assets/images/illustration-sign-up-desktop.svg"); + } + button { + height: 25%; + } +} +@media screen and (max-width: 799px) { + .container { + flex-direction: column-reverse; + width: 320px; + height: 110vh; + padding: 0.4em; + margin: 0; + } + .img-side { + max-height: 35%; + background-image: url("./assets/images/illustration-sign-up-mobile.svg"); + } + button, + input { + height: 45%; + } +} +.img-side { + border-radius: 10px; +} +.container > * { + flex: 1; +} +.container { + margin-top: 1em; + justify-self: center; + + background-color: white; + + border-radius: 20px; + display: flex; +} +.text-side { + display: flex; + flex-direction: column; + justify-content: space-evenly; + padding: 4em 0.1em 1.5em 0.1em; + gap: 1em; + margin: 0.5em 1.5em 0.5em 1.5em; +} +.text-side > * { + flex-grow: 1; +} + +ul { + list-style: none; + display: flex; + flex-direction: column; + justify-content: space-around; + height: 5%; + padding: 0; + margin: 0; +} +li { + gap: 0.4em; + flex: 1; + display: flex; + justify-content: flex-start; + align-items: center; +} +h1 { + align-self: center; + max-height: fit-content; + padding: 0; + margin: 0; +} +.check-icon { + justify-self: flex-start; + width: 5%; + height: 40%; +} +p { + margin: 0; + max-height: fit-content; +} +button { + width: 100%; + + border-radius: 10px; + border: none; + font-weight: bold; + color: white; + box-shadow: 2px 2px 2px hsla(5, 9%, 27%, 0.695); +} + +input { + width: 98%; + height: 25%; + border-radius: 6px; +} +.form { + margin-top: 1em; + display: flex; + flex-direction: column; + gap: 0.5em; +} diff --git a/newsletter-sign-up-with-success-message-main/index.html b/newsletter-sign-up-with-success-message-main/index.html index 8e7329b..98fbf04 100644 --- a/newsletter-sign-up-with-success-message-main/index.html +++ b/newsletter-sign-up-with-success-message-main/index.html @@ -1,52 +1,76 @@ - - - + + + + + - - - Frontend Mentor | Newsletter sign-up form with success message + - - - - + + Frontend Mentor | Newsletter sign-up form with success message + + + + + + +
+
+
+

stay updated!

+

join 60000+ product managers reciving monthly updates on:

+
    +
  • + product discovery and bulding what matters +
    • +
  • + messuring to ensure updates are a sucsses +
    • +
  • + and + much more +
    • +
+
+ + + +
+
+
+
+
- + + + + 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..226a839 --- /dev/null +++ b/newsletter-sign-up-with-success-message-main/styles.css @@ -0,0 +1,51 @@ +html { + height: 100vh; + width: 96vw; +} +footer { + background-color: rgb(155, 150, 150); + display: flex; + align-items: center; + justify-content: center; + padding: 0; + margin: 0; +} +body { + height: fit-content; + min-height: 100%; + min-width: 100%; + box-sizing: border-box; + display: grid; + grid-template-columns: 1fr; + grid-template-rows: 97% 3%; +} +main { + height: 100%; + width: 100%; + background-color: rgb(230, 227, 227); +} + +div { + margin: 0; + padding: 0; +} + +label { + font-weight: bold; +} + +button { + background-color: hsl(224, 64%, 21%); + color: white; +} + +button:hover { + cursor: pointer; + box-shadow: 4px 4px 4px hsla(5, 9%, 27%, 0.695); + background-image: linear-gradient( + to right, + hsl(354, 100%, 67%), + hsl(4, 100%, 67%), + hsl(15, 100%, 67%) + ); +} diff --git a/newsletter-sign-up-with-success-message-main/success-styles.css b/newsletter-sign-up-with-success-message-main/success-styles.css new file mode 100644 index 0000000..0683ccd --- /dev/null +++ b/newsletter-sign-up-with-success-message-main/success-styles.css @@ -0,0 +1,60 @@ +@media screen and (min-width: 800px) { + article { + width: 300px; + height: 340px; + padding: 2.5em; + } + button { + max-height: 20%; + } +} +@media screen and (max-width: 799px) { + article { + width: 70vw; + flex-direction: column-reverse; + height: 100%; + padding: 1.5em; + justify-content: flex-start; + margin: 0; + } + button { + margin-top: 40vh; + max-height: 7%; + } +} + +article > * { + flex: 1; +} +article { + gap: 2em; + justify-self: center; + display: flex; + flex-direction: column; + border-radius: 30px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + background-color: rgb(255, 255, 255); + margin-top: 4rem; + max-height: fit-content; +} +button { + border: none; + border-radius: 10px; + padding: 0.75rem 1.5rem; + cursor: pointer; + font-size: 1rem; + width: 100%; +} +img { + width: 15%; + max-height: fit-content; +} +h1 { + margin: 0; + max-height: fit-content; + font-size: 45px; +} +p { + max-height: fit-content; + margin: 0; +} diff --git a/newsletter-sign-up-with-success-message-main/successPage.html b/newsletter-sign-up-with-success-message-main/successPage.html new file mode 100644 index 0000000..16be6cc --- /dev/null +++ b/newsletter-sign-up-with-success-message-main/successPage.html @@ -0,0 +1,46 @@ + + + + + + + + + + + + Frontend Mentor | Newsletter sign-up form with success message + + + +
+
+ +

thanks for subscribing!

+

+ +
+
+ + + + +