diff --git a/newsletter-sign-up-with-success-message-main/index.html b/newsletter-sign-up-with-success-message-main/index.html index 8e7329b..3cbf6af 100644 --- a/newsletter-sign-up-with-success-message-main/index.html +++ b/newsletter-sign-up-with-success-message-main/index.html @@ -1,52 +1,132 @@ + - + - + 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 address - email@company.com - - Subscribe to monthly newsletter - - + +
+
+

+ 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! +

+
+
+ + + +
+
+
+ +
+
- Thanks for subscribing! +
+ +
+

+ 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! +

+
+
+ + + +
- A confirmation email has been sent to ash@loremcompany.com. - Please open it and click the button inside to confirm your subscription. +
+
- Dismiss message +
+ +
+

+ Stay updated! +

+

+ Join 60,000+ product managers receiving monthly updates on: +

+
+ tick before sentence +

+ Product discovery and building what matters +

+
+
+ tick before sentence +

+ Measuring to ensure updates are a success +

+
+
+ tick before sentence +

+ And much more! +

+
+
+ + + +
- - -
- 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..b3e65a2 --- /dev/null +++ b/newsletter-sign-up-with-success-message-main/style.css @@ -0,0 +1,233 @@ +:root { + font-family: "Roboto"; + --primary-bg-color:hsl(235, 18%, 26%) ; + --secondary-bg-color:hsl(0, 0%, 100%); + --box-shadow-color: rgba(0, 0, 0, 0.574); + --secondary-blue: hsl(234, 29%, 20%); + --input-border:rgb(197, 197, 197); + --grediant-left:hsl(4, 100%, 67%); + --grediant-right : hsl(23, 100%, 67%); + --button-active-shadow: hsla(4, 58%, 54%, 0.525); +} + +body { + background-color: var(--primary-bg-color); + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + height: 100vh; +} + +.main-rect { + height: 55vh; + width: 50vw; + display: flex; + background-color: var(--secondary-bg-color); + border-radius: 2em; + padding: 4em; + box-shadow: 0em 0em 1em 0.25em var(--box-shadow-color) ; +} + +.left-form { + justify-content: start; + display: flex; + align-items: start; + width: 60vw; + color: var(--secondary-blue) ; + flex-direction: column; + gap: 0em; +} + +.title { + font-size: 4em; + margin: 0em; +} + +.desc { + font-size: medium; + max-width: 80%; +} + +.checklistItem { + display: flex; + flex-direction: row; + gap: 1em; +} + +.tickImg { + max-width: 1.25em; +} + +.lab { + font-weight: bold; + color: var(--secondary-blue); +} + +.main-form { + display: flex; + flex-direction: column; + margin-top: 1em; + gap: 1.5em; + width: 20vw; +} + +input { + padding: 0.75em; + width: 21vw; + border-radius: 0.5em; + border: solid 0.1em var(--input-border); +} + +button { + width: 22vw; + padding: 1em; + border-radius: 0.5em; + border: 0em; + background-color: var(--secondary-blue); + color: var(--secondary-bg-color); + font-size: small; + cursor: not-allowed; +} + +.main-form:valid button{ + width: 22vw; + padding: 1em; + border-radius: 0.5em; + border: 0em; + background-image: var(--secondary-blue); + color: var(--secondary-bg-color); + font-size: small; + cursor: pointer; +} + +.main-form:valid:hover button { + width: 22vw; + padding: 1em; + border-radius: 0.5em; + border: 0em; + background-image: linear-gradient(to right, var(--grediant-left), var(--grediant-right)); + color: var(--secondary-bg-color); + font-size: small; + cursor: pointer; + box-shadow: 0em 0em 1em 0.1em var(--button-active-shadow); +} + +.right-img { + width: 20vw; + display: flex; + justify-content: center; + align-items: center; +} + +.desk-img { + width: 22vw; +} + +.mobile-main { + display: none; +} + +.tablet-main { + display: none; +} + +@media (max-width: 40em) { + body { + height: 100vh; + display: flex; + justify-content: center; + align-items: center; + background-color: var(--secondary-bg-color); + flex-direction: column; + width: 96vw; + } + + .tablet-main, + .main-rect { + display: none; + } + + .mobile-main { + display: flex; + width: 100vw; + height: 100vh; + flex-direction: column; + } + + .title { + font-size: 3em; + } + + .main-area { + display: flex; + justify-content: start; + align-items: start; + flex-direction: column; + margin-top: 1em; + color: var(--secondary-blue); + margin-left: 1.5em; + gap : 0em; + width: 100vw; + } + + .pic{ + width: 100vw; + display: flex; + justify-content: center; + align-items: center; + } + .main-form{ + width: 100vw; + } + input{ + width: 72vw; + } + button { + width: 75vw; + } + +} + +@media (min-width: 40em) and (max-width: 60em) { + .main-rect { + display: none; + } + body{ + background-color: var(--secondary-bg-color); + padding: 0em; + } + .mobile-main { + display: none + } + .tablet-main{ + display: flex; + width: 100vw; + height: 100vh; + flex-direction: column; + margin: 0em; + } + .pic{ + width: 100vw; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin-top: auto; + } + .main-area { + display: flex; + justify-content: start; + align-items: start; + flex-direction: column; + color: var(--secondary-blue); + margin-left: 2em; + gap : 0em; + } + input{ + width: 72vw; + } + button { + width: 75vw; + } +} 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..9fff0a5 --- /dev/null +++ b/newsletter-sign-up-with-success-message-main/success.css @@ -0,0 +1,85 @@ +:root { + font-family: "Roboto"; + --primary-bg-color:hsl(235, 18%, 26%) ; + --secondary-bg-color:hsl(0, 0%, 100%); + --box-shadow-color: rgba(0, 0, 0, 0.574); + --secondary-blue: hsl(234, 29%, 20%); + --input-border:rgb(197, 197, 197); + --grediant-left:hsl(4, 100%, 67%); + --grediant-right : hsl(23, 100%, 67%); + --button-active-shadow: hsla(4, 58%, 54%, 0.525); +} + +body { + height: 100vh; + display: flex; + justify-content: center; + align-items: center; + background-color: var(--primary-bg-color); +} + +.main-rect { + width: 25em; + height: 27em; + background-color: var(--secondary-bg-color); + border-radius: 1.25em; + box-shadow: 0em 0.5em 1em var(--box-shadow-color); + display: flex; + flex-direction: column; + justify-content: start; + align-items: start; + padding: 1.5em; + color: var(--secondary-blue); +} + +.dismiss { + width: 20vw; + padding: 1em; + border-radius: 0.5em; + border: 0em; + background-color: var(--secondary-blue); + color: var(--secondary-bg-color); + font-size: small; + cursor: pointer; +} + +.dismiss:hover { + width: 20vw; + padding: 1em; + border-radius: 0.25em; + border: 0em; + background-image: linear-gradient(to right, var(--grediant-left), var(--grediant-right)); + color: var(--secondary-bg-color); + font-size: small; + cursor: pointer; + box-shadow: 0em 0em 1em 0.1em var(--button-active-shadow); +} + +.title { + font-size: 3em; +} + +@media (max-width: 60em) { + body { + height: 100vh; + background-color: var(--secondary-bg-color); + } + + .main-rect { + box-shadow: none; + height: 100vh; + width: 100vw; + border-radius: 0em; + justify-content: center; + align-items: start; + } + + .dismiss { + margin-top: 3em; + width: 75vw; + } + .dismiss:hover { + width: 75vw; + } + +} \ 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..95723b8 --- /dev/null +++ b/newsletter-sign-up-with-success-message-main/success.html @@ -0,0 +1,33 @@ + + + + + + + Success Page + + + + + + +
+
+ +
+

+ 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