liron pr #20
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
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,18 @@ | ||
| function send(event) { | ||
| event.preventDefault(); | ||
| const form = event.target; | ||
| const data = new FormData(form); | ||
| const email = data.get("email-address"); | ||
| const subscribeForm = document.querySelector(".subscribe-form"); | ||
| const subscribeSuccessWindow = document.querySelector(".subscribe-success"); | ||
| subscribeForm.classList.add("active"); | ||
| document.querySelector(".subscribe-success p b").textContent = email; | ||
| subscribeSuccessWindow.classList.add("active"); | ||
| } | ||
|
|
||
| function invalidEmail() { | ||
| const emailInput = document.getElementById("email-address"); | ||
| const invalidEmailLabel = document.querySelector(".invalid-email-label"); | ||
| emailInput.classList.add("invalid"); | ||
| invalidEmailLabel.classList.add("invalid"); | ||
| } |
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,205 @@ | ||
| @font-face { | ||
| font-family:Roboto ; | ||
| src: url(./assets/fonts/Roboto-Regular.ttf); | ||
| } | ||
|
|
||
| :root { | ||
| --primary-bg-color: hsl(235, 18%, 26%); | ||
| --primary-color: hsl(234, 29%, 20%); | ||
| --hover-button-color: hsl(4, 100%, 67%); | ||
| --form-bg-color: hsl(0, 0%, 100%); | ||
| --form-input-color: hsl(0, 0%,58%); | ||
| } | ||
|
|
||
| html, body { | ||
| background-color: var(--primary-bg-color); | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: center; | ||
| align-items: center; | ||
| font-family: "Roboto", sans-serif; | ||
| min-height: 100vh; | ||
| height: 100%; | ||
| } | ||
|
|
||
| @media(min-width: 529px) { | ||
| .subscribe-form { | ||
| max-height: 25rem; | ||
| max-width: 50rem; | ||
| flex-direction: row-reverse; | ||
| justify-content: space-between; | ||
| border-radius: 1.5rem; | ||
| padding: 1.25rem; | ||
| padding-left: 2rem; | ||
| gap: 2rem; | ||
| } | ||
| .subscribe-form picture { | ||
| max-width: 300px; | ||
| display: flex; | ||
| justify-content: end; | ||
| } | ||
| .subscribe-form main { | ||
| flex-direction: column; | ||
| justify-content: center; | ||
| padding-left: 1rem; | ||
| padding-top: 1rem; | ||
| max-height: 370px; | ||
| } | ||
| .article-content { | ||
| max-width: 350px;; | ||
| } | ||
|
|
||
| .subscribe-form form { | ||
| margin-top: 1rem; | ||
| padding-bottom: 1rem; | ||
| max-width: 350px;; | ||
| } | ||
| .subscribe-success.active { | ||
| max-width: 340px; | ||
| height: 350px; | ||
|
There was a problem hiding this comment. In stuff like border-radius, paddings , margings, try working with different measurments than percentages, rem is the most recommended and used one
Author
There was a problem hiding this comment. what about width and height? and the breakpoints in the media queries? |
||
| border-radius: 1.5rem; | ||
| padding: 3rem; | ||
| } | ||
| } | ||
|
|
||
| @media(max-width: 528px) { | ||
| .subscribe-form { | ||
| height: 100%; | ||
| flex-direction: column; | ||
| padding-bottom: 1rem; | ||
| } | ||
| .subscribe-form main { | ||
| flex-direction: column; | ||
| } | ||
| .article-content { | ||
| padding: 2rem; | ||
| } | ||
| .subscribe-form form { | ||
| padding-left: 2rem; | ||
| padding-right: 2rem; | ||
| padding-bottom: 2rem; | ||
| } | ||
| .subscribe-form picture { | ||
| object-fit: cover; | ||
| border-bottom-left-radius: 1rem; | ||
| border-bottom-right-radius: 1rem; | ||
| } | ||
| article input[type=submit] { | ||
| margin-top: 1.5rem; | ||
| } | ||
| .subscribe-success.active { | ||
| height: 90%; | ||
| width: 90%; | ||
| padding: 10%; | ||
| } | ||
| } | ||
|
|
||
| .subscribe-form .icon-list { | ||
| float: left; | ||
| margin-right: 0.5rem; | ||
| } | ||
|
|
||
| .subscribe-form { | ||
| display: flex; | ||
| background-color: var(--form-bg-color); | ||
| color: var(--primary-color); | ||
| font-size: 1rem; | ||
| font-weight: 400; | ||
| margin: 0 auto; | ||
| } | ||
|
|
||
| .subscribe-form main { | ||
| display: flex; | ||
| } | ||
|
|
||
| .subscribe-form main h1 { | ||
| font-weight: 700; | ||
| font-size: 2.5rem; | ||
| line-height: 2rem; | ||
| position: relative; | ||
| } | ||
|
|
||
| .subscribe-form form { | ||
| display: flex; | ||
| flex-direction: column; | ||
| } | ||
|
|
||
| .subscribe-form label { | ||
| font-weight: 700; | ||
| font-size: 0.75rem; | ||
| } | ||
|
|
||
| input { | ||
| border-radius: 0.3rem; | ||
| border-width: 0.05rem; | ||
| border-color: var(--form-input-color); | ||
| color: var(--form-input-color); | ||
| margin-top: 0.5rem; | ||
| outline: 0; | ||
| height: 2rem | ||
| } | ||
|
|
||
| input[type=submit], input[type=button] { | ||
| background-color: var(--primary-color); | ||
| text-align: center; | ||
| color: var(--form-bg-color); | ||
| font-weight: 700; | ||
| border: none; | ||
| } | ||
|
|
||
| input[type=email] { | ||
| color: var(--primary-color); | ||
| } | ||
|
|
||
| #email-address.invalid { | ||
| border-color: var(--hover-button-color); | ||
| } | ||
|
|
||
| .invalid-email-label.invalid { | ||
| color: var(--hover-button-color); | ||
| } | ||
|
|
||
| .invalid-email-label { | ||
| color: var(--form-bg-color);; | ||
| } | ||
|
|
||
| .labels { | ||
| display: flex; | ||
| justify-content: space-between; | ||
| } | ||
|
|
||
| input[type=submit]:hover, input[type=button]:hover { | ||
| background-color: var(--hover-button-color); | ||
| } | ||
|
|
||
| .subscribe-form.active{ | ||
| display: none; | ||
| } | ||
|
|
||
| .subscribe-success { | ||
| display: none; | ||
| } | ||
|
|
||
| .subscribe-success.active { | ||
| display: flex; | ||
| flex-direction: column; | ||
| background-color: var(--form-bg-color); | ||
| color: var(--primary-color); | ||
| font-size: 1rem; | ||
| font-weight: 400; | ||
| } | ||
|
|
||
| .subscribe-success.active h1 { | ||
| font-weight: 800; | ||
| font-size: 3em; | ||
| } | ||
|
|
||
| .subscribe-success.active p { | ||
| margin-top: -3%; | ||
| color: hsl(234, 29%, 20%); | ||
| } | ||
|
|
||
| .subscribe-success.active input[type=button] { | ||
| height: 50px; | ||
| margin-top: auto; | ||
| } | ||
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.
The structure and usage of elements here could be improved. Consider pasting your code into an AI to get suggestions for a cleaner, more semantic structure