-
Notifications
You must be signed in to change notification settings - Fork 38
final desgin #8
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: main
Are you sure you want to change the base?
final desgin #8
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,61 @@ | ||
| body{ | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| background-color: hsl(235, 18%, 26%); | ||
| height:100vh; | ||
| } | ||
| #container{ | ||
| background-color: white; | ||
| height: 60vh; | ||
| width: 55vw; | ||
| border-radius: 25px; | ||
| display:flex; | ||
| justify-content: space-between; | ||
| padding: 4vh; | ||
| } | ||
| .text{ | ||
| width:25vw; | ||
| display:flex; | ||
| flex-direction: column; | ||
| font-family: Roboto ,Arial; | ||
|
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. consider setting a global defaults (like :root {
font-family: "Roboto", sans-serif;
....
} |
||
| font-size: 16px; | ||
| font-weight: 400; | ||
| margin-left: 2vw; | ||
| color:hsl(0, 0%,58%); | ||
| } | ||
| .icon-picture{ | ||
| margin-right: 1vw; | ||
| height:16px; | ||
| } | ||
| #submit-button{ | ||
| margin-top: 2vh; | ||
| background-color: hsl(234, 29%, 20%); | ||
|
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Use CSS variables instead of repeating colors. :root {
--primary-dark: hsl(234, 29%, 20%);
}
....
background-color: var(--primary-dark); |
||
| color: hsl(0, 0%, 100%); | ||
| padding: 1.5vh; | ||
| border-radius: 5px; | ||
| font-weight: 700; | ||
|
|
||
| } | ||
| #email-label{ | ||
| color:hsl(234, 29%, 20%); | ||
| font-weight: 700; | ||
| font-size: 12px; | ||
| padding-bottom:1vh; | ||
| } | ||
| #headline{ | ||
| color:hsl(234, 29%, 20%); | ||
| font-weight: 700; | ||
| font-size: 40px; | ||
| margin-bottom: 2vh; | ||
|
|
||
| } | ||
| #text-with-images{ | ||
| padding-bottom: 2vh; | ||
| } | ||
| #email-input{ | ||
| padding:2vh; | ||
| border-radius: 5px; | ||
| border: 1px solid rgb(210, 209, 209); | ||
|
|
||
| } | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -5,48 +5,36 @@ | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device --> | ||
|
|
||
| <link rel="icon" type="image/png" sizes="32x32" href="./assets/images/favicon-32x32.png"> | ||
| <link rel="stylesheet" href="./css/index.css"> | ||
|
|
||
| <title>Frontend Mentor | Newsletter sign-up form with success message</title> | ||
|
|
||
| <!-- Feel free to remove these styles or customise in your own stylesheet 👍 --> | ||
| <style> | ||
| .attribution { font-size: 11px; text-align: center; } | ||
| .attribution a { color: hsl(228, 45%, 44%); } | ||
| </style> | ||
| </head> | ||
| <body> | ||
|
|
||
| <!-- Sign-up form start --> | ||
| <div id="container"> | ||
| <div class="text"> | ||
| <p id="headline">Stay updated!</p> | ||
|
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Use |
||
|
|
||
| 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 | ||
| <span>Join 60,000+ product managers receiving monthly updates on:</span> | ||
| <div id="text-with-images"> | ||
| <p><img class="icon-picture" src="./assets/images/icon-list.svg" alt="icon-list">Product discovery and building what matters</p> | ||
| <p><img class="icon-picture" src="./assets/images/icon-list.svg" alt="icon-list">Measuring to ensure updates are a success</p> | ||
| <p><img class="icon-picture" src="./assets/images/icon-list.svg" alt="icon-list">And much more!</p> | ||
|
Comment on lines
+21
to
+23
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Add |
||
| </div> | ||
|
|
||
|
|
||
| <!-- Sign-up form end --> | ||
| <label id="email-label" for="email">Email address</label> | ||
| <input id="email-input" type="email" placeholder="email@company.com"> | ||
|
|
||
| <!-- Success message start --> | ||
| <button id="submit-button" type="submit">Subscribe to monthly newsletter</button> | ||
|
|
||
| Thanks for subscribing! | ||
|
|
||
| </div> | ||
|
|
||
| A confirmation email has been sent to ash@loremcompany.com. | ||
| Please open it and click the button inside to confirm your subscription. | ||
|
|
||
| Dismiss message | ||
| <img src="./assets/images/illustration-sign-up-desktop.svg"> | ||
| </div> | ||
|
|
||
| <!-- Success message end --> | ||
|
|
||
| <div class="attribution"> | ||
| Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. | ||
| Coded by <a href="#">Your Name Here</a>. | ||
| </div> | ||
| </body> | ||
| </html> | ||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
consider moving
index.cssinto the main project folder so the file structure stays clean and easier to navigate as the project grows