Design #21
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,52 +1,176 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
|
|
||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <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"> | ||
|
|
||
| <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%); | ||
|
There was a problem hiding this comment. I recommend using CSS variables — they’re easier to work with and are generally considered best practice. |
||
| } | ||
|
|
||
| .page { | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| height: 100vh; | ||
| width: 100vw; | ||
|
|
||
| } | ||
|
|
||
| .grey-ground { | ||
| display: flex; | ||
| background-color: #36384D; | ||
| justify-content: center; | ||
| align-items: center; | ||
| width: 60vw; | ||
| height: 80vh; | ||
| } | ||
|
|
||
| .white-ground { | ||
| display: flex; | ||
| flex-direction: row; | ||
| justify-content: space-around; | ||
| background-color: white; | ||
| align-items: center; | ||
| width: 40vw; | ||
| height: 50vh; | ||
| border-radius: 12px; | ||
| padding: 25px 5px; | ||
|
|
||
| } | ||
|
|
||
|
|
||
| .photo { | ||
| width: 45%; | ||
| height: 100%; | ||
| } | ||
|
|
||
| .photo-item { | ||
| width: 100%; | ||
| height: 100%; | ||
| object-fit: contain; | ||
| } | ||
|
|
||
| .text { | ||
| width: 45%; | ||
| height: 100%; | ||
| text-align: left; | ||
| } | ||
|
|
||
| .title { | ||
| font-weight: bold; | ||
| font-size: 28px; | ||
| margin-top: 20px; | ||
|
|
||
| } | ||
|
|
||
| .sub-title { | ||
| margin-top: 20px; | ||
| font-size: 12px; | ||
|
|
||
|
|
||
| } | ||
|
|
||
| .line-1 { | ||
| display: flex; | ||
| flex-direction: row; | ||
| font-size: 10px; | ||
| margin-top: 10px; | ||
| align-items: center; | ||
| } | ||
|
|
||
| .text-1 { | ||
| display: flex; | ||
| align-items: center; | ||
| text-align: end; | ||
| margin-left: 7px; | ||
| } | ||
|
|
||
| .email-title { | ||
| display: flex; | ||
| flex-direction: row; | ||
| margin-top: 20px; | ||
| font-size: 10px; | ||
| } | ||
|
|
||
| .field { | ||
| display: flex; | ||
| flex-direction: row; | ||
| width:250px; | ||
|
There was a problem hiding this comment. Coniser that its not It’s not recommended — and even considered incorrect — to use fixed pixel sizes for a div. If the user changes their screen size, the entire layout can break |
||
| height: 35px; | ||
| } | ||
| .btn{ | ||
| display: flex; | ||
| color:rgb(236, 229, 229); | ||
| background-color: #232840; | ||
| border-radius: 3px; | ||
| justify-content: center; | ||
| align-items: center; | ||
| margin-top: 20px; | ||
| width:250px; | ||
|
There was a problem hiding this comment. Same comment as before about pixels, try to use % or Vh and Vw |
||
| height: 35px; | ||
| } | ||
| </style> | ||
| </head> | ||
|
|
||
| <body> | ||
|
|
||
| <div class="page"> | ||
| <div class="grey-ground"> | ||
|
There was a problem hiding this comment. Try to use more logical names. grey-ground class its most commonly about colors and not about roles in my page. |
||
| <div class="white-ground"> | ||
| <div class="text"> | ||
| <div class="title"> Stay updated!</div> | ||
| <div class="sub-title"> Join 60,000+ product managers receiving monthly updates on:</div> | ||
|
There was a problem hiding this comment. In my opinion you have to many divs. in here the "sub-title" div supposed to be in a h1 label it will make your code easier to read |
||
| <div class="line-1"> | ||
| <img src=assets\images\icon-list.svg> | ||
|
|
||
| <div class="text-1"> | ||
| Product discovery and building what matters | ||
| </div> | ||
| </div> | ||
| <div class="line-1"> | ||
| <img src=assets\images\icon-list.svg> | ||
| <div class="text-1"> | ||
| Measuring to ensure updates are a success | ||
| </div> | ||
| </div> | ||
| <div class="line-1"> | ||
| <img src=assets\images\icon-list.svg> | ||
| <div class="text-1"> | ||
| And much more! | ||
| </div> | ||
| </div> | ||
| <div class="email-title"> | ||
| Email address | ||
| </div> | ||
| <div class=field> | ||
|
There was a problem hiding this comment. In here you have to classes named "field" consider it is not good practice try to be more creative next time LOL : ) |
||
| <input type="text" placeholder="email@company.com" class="field"> | ||
| </div> | ||
| <button class="btn" type="button">Subscribe to monthly newsletter</button> | ||
| </div> | ||
| <div class="photo"> | ||
| <img class="photo-item" src=assets\images\illustration-sign-up-desktop.svg> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
|
|
||
| <!-- <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> | ||
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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.
For next time, we usually writing our design in a separate file called style.css