Feature/index structure #4
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,53 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
|
|
||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <link rel="stylesheet" href="./styles/style.css"> | ||
|
|
||
| <link rel="icon" type="image/png" sizes="32x32" href="./assets/images/favicon-32x32.png"> | ||
|
|
||
| <title>Newsletter sign-up</title> | ||
| </head> | ||
|
|
||
| <body> | ||
|
|
||
| <div class="form-container"> | ||
| <div class="form-column" id="form-text"> | ||
| <h2 id="heading"> | ||
| Stay updated! | ||
| </h2> | ||
|
|
||
| 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 | ||
| </div> | ||
|
|
||
| <div class="form-column"> | ||
|
Member
There was a problem hiding this comment. HTML is like a book for developers, and we all know that form label means that we have a form inside so you could use form instead of your div So its more readable |
||
| <div id="desktop-image"> | ||
|
Member
There was a problem hiding this comment. This is not really the desktop image, this is the container so I would change the name |
||
| <img src="./assets/images/illustration-sign-up-desktop.svg" alt="Sign up illustration"> | ||
|
Member
There was a problem hiding this comment. Good work on the alt attribute |
||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <!-- Sign-up form end --> | ||
|
|
||
| <!-- Success message start --> | ||
|
|
||
| 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. | ||
|
|
||
| Dismiss message | ||
| </body> | ||
|
|
||
| </html> | ||
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 |
|---|---|---|
| @@ -0,0 +1,75 @@ | ||
| /* | ||
| - Mobile: 375px | ||
| - Desktop: 1440px | ||
|
Member
There was a problem hiding this comment. When you are making a pr do not keep those comments, looks like ai generated comment? |
||
| */ | ||
|
|
||
| :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; | ||
|
Member
There was a problem hiding this comment. any reason not to use 100vw? why would we want the body not to be 100% in width? |
||
| 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 { | ||
|
Member
There was a problem hiding this comment. In here you are using id instead of classes, any reason for this? |
||
| 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%; */ | ||
|
Member
There was a problem hiding this comment. Please do not push commended code, remove it, we got git for seeing history |
||
| object-fit: contain; | ||
| display: block; | ||
| } | ||
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.
So in here you are using both id and class, you dont really need both of them, you can remain with only class