diff --git a/newsletter-sign-up-with-success-message-main/index.html b/newsletter-sign-up-with-success-message-main/index.html index 8e7329b..847db4b 100644 --- a/newsletter-sign-up-with-success-message-main/index.html +++ b/newsletter-sign-up-with-success-message-main/index.html @@ -1,35 +1,42 @@ + - + + - - Frontend Mentor | Newsletter sign-up form with success message - - - + + Newsletter sign-up + - +
+
+

+ Stay updated! +

- Stay updated! + Join 60,000+ product managers receiving monthly updates on: - 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! - Product discovery and building what matters - Measuring to ensure updates are a success - And much more! + Email address + email@company.com - Email address - email@company.com + Subscribe to monthly newsletter +
- Subscribe to monthly newsletter +
+
+ Sign up illustration +
+
+
@@ -37,16 +44,10 @@ Thanks for subscribing! - A confirmation email has been sent to ash@loremcompany.com. + 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-guide.md b/newsletter-sign-up-with-success-message-main/style-guide.md deleted file mode 100644 index 822e21d..0000000 --- a/newsletter-sign-up-with-success-message-main/style-guide.md +++ /dev/null @@ -1,36 +0,0 @@ -# Front-end Style Guide - -## Layout - -The designs were created to the following widths: - -- Mobile: 375px -- Desktop: 1440px - -> 💡 These are just the design sizes. Ensure content is responsive and meets WCAG requirements by testing the full range of screen sizes from 320px to large screens. - -## Colors - -### Primary - -- Red: hsl(4, 100%, 67%) - -### Neutral - -- Blue 800: hsl(234, 29%, 20%) -- Blue 700: hsl(235, 18%, 26%) -- Grey: hsl(0, 0%,58%) -- White: hsl(0, 0%, 100%) - -## Typography - -### Body Copy - -- Font size (paragraph): 16px - -### Font - -- Family: [Roboto](https://fonts.google.com/specimen/Roboto) -- Weights: 400, 700 - -> 💎 [Upgrade to Pro](https://www.frontendmentor.io/pro?ref=style-guide) for design file access to see all design details and get hands-on experience using a professional workflow with tools like Figma. diff --git a/newsletter-sign-up-with-success-message-main/styles/style.css b/newsletter-sign-up-with-success-message-main/styles/style.css new file mode 100644 index 0000000..601e609 --- /dev/null +++ b/newsletter-sign-up-with-success-message-main/styles/style.css @@ -0,0 +1,75 @@ +/* + - Mobile: 375px + - Desktop: 1440px + */ + +:root { + font-family: 'Roboto', sans-serif; + font-size: 16px; + --originalBlue800: hsl(234, 29%, 20%); + --originalBlue700: hsl(235, 18%, 26%); + --originalGrey: hsl(0, 0%, 58%); + --originalWhite: hsl(0, 0%, 100%); + --primaryRed: hsl(4, 100%, 67%); +} + +*, +*::before, +*::after { + box-sizing: border-box; +} + +body { + background-color: var(--originalBlue800); + width: 98vw; + height: 98vh; + overflow: hidden; + color: var(--originalBlue800); + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; +} + +.form-container { + background-color: var(--originalWhite); + width: 50%; + height: 60%; + border-radius: 25px; + display: flex; + flex-direction: row; + overflow: hidden; +} + +.form-column { + flex: 1 1 0; + min-width: 0; + + height: 100%; + padding: 1.5rem; + + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} + +#form-text { + width: 100%; +} + +#desktop-image { + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; +} + +#desktop-image img { + max-width: 100%; + /* max-height: 100%; */ + object-fit: contain; + display: block; +} \ No newline at end of file