Css ex #22
There are no files selected for viewing
Binary file not shown.
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
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,126 @@ | ||
| body { | ||
| background-color: hsl(235, 18%, 26%); | ||
| height: 100vh; | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| margin: 0; | ||
| font-family: "Roberto", sans-serif; | ||
| } | ||
|
|
||
| @font-face { | ||
| font-family: "Roberto"; | ||
| src: url("./fonts/MyFont-Regular.ttf") format("truetype"); | ||
|
There was a problem hiding this comment. Consider importing fonts in HTML ( in ) rather than only via CSS for better performance and compatibility |
||
| } | ||
|
|
||
| .container { | ||
| display: flex; | ||
| height: 65%; | ||
| width: 55%; | ||
| background-color: white; | ||
| border-radius: 30px; | ||
|
There was a problem hiding this comment. Dont use px, use responsive units like rem or em (read about the differences) |
||
| padding: 20px; | ||
| max-width: 800px; | ||
| width: 90%; | ||
| } | ||
|
|
||
| .container img { | ||
| flex: 1; | ||
| } | ||
|
|
||
| .text-container { | ||
| flex: 1; | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: space-between; | ||
| padding: 60px 40px; | ||
| gap: 10px; | ||
| } | ||
|
|
||
| .text-container * { | ||
| margin: 0; | ||
| } | ||
|
|
||
| .text-container ul { | ||
| list-style: none; | ||
| padding: 0; | ||
| } | ||
|
|
||
| .text-container li { | ||
| position: relative; | ||
| line-height: 30px; | ||
| padding-left: 25px; | ||
| background-image: url("./assets/images/icon-list.svg"); | ||
| background-repeat: no-repeat; | ||
| background-size: 16px; | ||
| background-position: 0px 7px; | ||
| font-size: 16px; | ||
| } | ||
|
|
||
|
|
||
| .text-container h1 { | ||
| color: hsl(234, 29%, 20%); | ||
| text-align: center; | ||
| font-weight: 700; | ||
| width: 100%; | ||
| } | ||
|
|
||
| .text-container p { | ||
| font-size: 16px; | ||
| text-align: left; | ||
| } | ||
|
|
||
| .text-container input, | ||
| .text-container button { | ||
| width: 100%; | ||
| border-radius: 8px; | ||
| } | ||
|
|
||
| .text-container input { | ||
| border: 2px solid hsl(0, 0%,58%) ; | ||
| color: hsl(0, 0%,58%); | ||
| height: 40px; | ||
| } | ||
|
|
||
| .text-container button { | ||
| background-color: hsl(234, 29%, 20%); | ||
| height: 45px; | ||
| color: white; | ||
| border: none; | ||
| cursor: pointer; | ||
| } | ||
|
|
||
| .img-mobile { | ||
| display: none; | ||
| } | ||
|
|
||
| @media (max-width: 700px) { | ||
|
|
||
|
|
||
| body { | ||
| height: auto; | ||
| padding: 10px 0; | ||
| align-items: flex-start; | ||
| } | ||
|
|
||
| .container { | ||
| flex-direction: column; | ||
| width: 90%; | ||
| height: auto; | ||
| } | ||
|
|
||
| .img-desktop { | ||
| display: none; | ||
| } | ||
|
|
||
| .img-mobile { | ||
| display: block; | ||
| width: 100%; | ||
| align-self: center; | ||
| order: -1; | ||
| border-radius: 20px; | ||
| } | ||
|
|
||
| .text-container { | ||
| padding: 30px 20px; | ||
| } | ||
| } | ||
|
There was a problem hiding this comment. love that you seperated the css files! good work |
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,55 @@ | ||
| body { | ||
| background-color: hsl(235, 18%, 26%); | ||
| height: 100vh; | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| margin: 0; | ||
| font-family: "Roberto", sans-serif; | ||
| } | ||
|
|
||
| @font-face { | ||
| font-family: "Roberto"; | ||
| src: url("./fonts/MyFont-Regular.ttf") format("truetype"); | ||
|
There was a problem hiding this comment. Consider importing fonts in HTML ( in ) rather than only via CSS for better performance and compatibility |
||
| } | ||
|
|
||
| .container { | ||
| display: flex; | ||
| width: 300px; | ||
|
There was a problem hiding this comment. same note for this file as well: dont use px |
||
| height: 300px; | ||
| background-color: white; | ||
| border-radius: 30px; | ||
| padding: 40px; | ||
| flex-direction: column; | ||
| } | ||
|
|
||
| .container img { | ||
| height: 40px; | ||
| width: 40px; | ||
| } | ||
|
|
||
| .container button { | ||
| background-color: hsl(235, 18%, 26%); | ||
| color: white; | ||
| height: 40px; | ||
| width: 100%; | ||
| border: 0px; | ||
| border-radius: 7px; | ||
| } | ||
|
|
||
| @media (max-width: 400px) { | ||
|
|
||
| body { | ||
| background-color: white; | ||
| height: 100%; | ||
| justify-content: flex-start; | ||
| } | ||
|
|
||
| .container { | ||
| width: 100%; | ||
| height: auto; | ||
| padding: 20px; | ||
| padding-top: 80px; | ||
| } | ||
|
|
||
| } | ||
|
There was a problem hiding this comment. love the seperated files!! good practice! |
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,23 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>Subscription Success</title> | ||
| <link rel="stylesheet" href="./success.css"> | ||
| </head> | ||
| <body> | ||
| <div class="container"> | ||
|
|
||
| <img src="./assets/images/icon-list.svg"> | ||
|
|
||
| <h1>Thanks for subscribing!</h1> | ||
|
|
||
| <p>A confirmation email has been sent to ash@loremcompany.com. | ||
| Please open it and click the button inside to confirm your subscription.</p> | ||
|
|
||
| <button>Dismiss message</button> | ||
| </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.
use css variables