binyamin cohen #12
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,76 @@ | ||
| <!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" | ||
| /> | ||
| <link rel="stylesheet" href="style.css" /> | ||
| <title> | ||
| Frontend Mentor | Newsletter sign-up form with success message | ||
| </title> | ||
| </head> | ||
| <body> | ||
| <div class="successMessege"> | ||
| <img | ||
| src="./assets/images/icon-success.svg" | ||
| alt="success icon" | ||
| class="success-icon" | ||
| /> | ||
| <h1>Thanks for subscribing!</h1> | ||
| <p> | ||
| A confirmation email has been sent to | ||
| <span class="companyEmail">ash@loremcompany.com.</span> Please open it | ||
| and click the button inside to confirm your subscription. | ||
| </p> | ||
| <button class="dismiss" type="button">Dismiss message</button> | ||
| </div> | ||
|
|
||
| <div class="signUpBox"> | ||
| <img | ||
| src="assets/images/illustration-sign-up-desktop.svg" | ||
| alt="sign-up-desktop" | ||
| /> | ||
|
|
||
| <div class="textSide"> | ||
| <h1>Stay updated!</h1> | ||
| <p>Join 60,000+ product managers receiving monthly updates on:</p> | ||
|
|
||
| <div class="allCheckMarks"> | ||
|
Member
There was a problem hiding this comment. Be consistent with your class names |
||
| <div class="checkMarks"> | ||
| <img src="assets/images/icon-list.svg" alt="check mark icon" /> | ||
| <p>Product discovery and building what matters</p> | ||
| </div> | ||
|
|
||
| <div class="checkMarks"> | ||
| <img src="assets/images/icon-list.svg" alt="check mark icon" /> | ||
| <p>Measuring to ensure updates are a success</p> | ||
| </div> | ||
|
|
||
| <div class="checkMarks"> | ||
| <img src="assets/images/icon-list.svg" alt="check mark icon" /> | ||
| <p>And much more!</p> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="emailSection"> | ||
| <div class="titleAndError"> | ||
| <h4>Email address</h4> | ||
| <h4 class="errorMessage">Valid email required</h4> | ||
| </div> | ||
| <input class="email" type="email" placeholder="email@company.com" /> | ||
| <button class="submit" type="submit"> | ||
| Subscribe to monthly newsletter | ||
| </button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <script src="script.js"></script> | ||
| </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,28 @@ | ||
| const signUpBox = document.querySelector(".signUpBox"); | ||
| const successMessege = document.querySelector(".successMessege"); | ||
| const submitBtn = document.querySelector(".submit"); | ||
| const dismissBtn = document.querySelector(".dismiss"); | ||
| const errorMassege = document.querySelector(".errorMessage"); | ||
| const emailInput = document.querySelector(".email"); | ||
|
|
||
| function checkValidEmail(input) { | ||
| const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; | ||
| return emailPattern.test(input); | ||
| } | ||
|
|
||
| submitBtn.addEventListener("click", (e) => { | ||
| if (checkValidEmail(emailInput.value)) { | ||
| e.preventDefault(); | ||
| successMessege.classList.add("active"); | ||
|
Member
There was a problem hiding this comment. In here if you will add a return after the if you will not need the else |
||
| signUpBox.classList.add("active"); | ||
| errorMassege.classList.remove("active"); | ||
| return; | ||
| } | ||
| errorMassege.classList.add("active"); | ||
| emailInput.classList.add("active"); | ||
| }); | ||
|
|
||
| dismissBtn.addEventListener("click", () => { | ||
| successMessege.classList.remove("active"); | ||
| signUpBox.classList.remove("active"); | ||
| }); | ||
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,234 @@ | ||
| @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"); | ||
| :root { | ||
| --error-color: #ff3333; | ||
|
|
||
| --text-color: #333; | ||
| --primary: #4f7df3; | ||
| } | ||
|
|
||
| body { | ||
| font-family: "Roboto", sans-serif; | ||
| background-color: hsl(234, 29%, 20%); | ||
| margin: 0; | ||
| padding: 0; | ||
| width: 100vw; | ||
| height: 100vh; | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| } | ||
|
|
||
| .signUpBox { | ||
| background-color: aliceblue; | ||
| display: grid; | ||
| grid-template-columns: 50% 50%; | ||
| align-items: center; | ||
| justify-items: center; | ||
| border-radius: 15px; | ||
| width: 60%; | ||
| height: auto; | ||
| grid-template-areas: "text-side image-side"; | ||
| } | ||
| .signUpBox.active { | ||
| display: none; | ||
| } | ||
|
|
||
| .textSide { | ||
| display: flex; | ||
| flex-direction: column; | ||
| grid-area: text-side; | ||
| } | ||
| .textSide h1 { | ||
| font-size: clamp(0.7rem, 4vw, 3rem); | ||
| font-weight: 800; | ||
| } | ||
|
|
||
| .textSide p { | ||
| font-size: clamp(0.6rem, 1vw, 1.2rem); | ||
| font-weight: 400; | ||
| } | ||
|
|
||
| .title { | ||
| align-items: center; | ||
| justify-items: center; | ||
| } | ||
| .signUpBox img { | ||
| grid-area: image-side; | ||
| height: 90%; | ||
| max-width: 90%; | ||
| border-radius: 10px; | ||
| } | ||
|
|
||
| .checkMarks img { | ||
| height: 20px; | ||
| width: 20px; | ||
| } | ||
| .checkMarks { | ||
| display: flex; | ||
| align-items: center; | ||
| gap: 10px; | ||
| } | ||
|
|
||
| .emailSection { | ||
| display: flex; | ||
| flex-direction: column; | ||
| gap: 10px; | ||
| width: 90%; | ||
| } | ||
|
|
||
| .emailSection h4 { | ||
| margin: 0; | ||
| } | ||
| .emailSection .email { | ||
| opacity: 0.7; | ||
| height: 30px; | ||
| border: solid 1px gray; | ||
| border-radius: 5px; | ||
| } | ||
| .emailSection .email.active { | ||
| color: red; | ||
| background-color: rgba(233, 157, 157, 0.511); | ||
| opacity: 0.7; | ||
| padding: 10px; | ||
| border: red; | ||
| border-radius: 5px; | ||
| } | ||
| input:active::placeholder { | ||
| color: var(--error-color); | ||
| } | ||
| .emailSection button { | ||
| background-color: hsl(234, 29%, 20%); | ||
| color: white; | ||
| height: 45px; | ||
| padding: 10px; | ||
| cursor: pointer; | ||
| border-radius: 5px; | ||
| border: none; | ||
|
Member
There was a problem hiding this comment. Did you button had some border ? or why did you need to explicitly remove the border?
Author
There was a problem hiding this comment. ther is a litle gray border its boder me |
||
| } | ||
| .emailSection button:hover { | ||
| background: linear-gradient(90deg, #ff4f81, #ff8a24); | ||
| box-shadow: 0 10px 25px rgba(255, 90, 80, 0.4); | ||
| } | ||
| .errorMessage { | ||
| display: none; | ||
| } | ||
| .errorMessage.active { | ||
| display: block; | ||
| color: var(--error-color); | ||
| font-size: 0.8rem; | ||
| text-align: right; | ||
| } | ||
| .titleAndError { | ||
| display: flex; | ||
| justify-content: space-between; | ||
| align-items: center; | ||
| } | ||
|
|
||
| .allCheckMarks { | ||
| margin-bottom: 20px; | ||
| } | ||
| .companyEmail { | ||
| font-weight: bold; | ||
| } | ||
|
|
||
| .successMessege { | ||
| display: none; | ||
| } | ||
|
|
||
| .successMessege.active { | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: flex-start; | ||
| background-color: white; | ||
| position: absolute; | ||
| height: auto; | ||
| width: 40vw; | ||
| padding: 30px 30px; | ||
| border-radius: 20px; | ||
| } | ||
| .successMessege h1 { | ||
| font-size: clamp(1.5rem, 5vw, 2.5rem); | ||
| margin: 20px 0 0 0; | ||
| } | ||
| .successMessege p { | ||
| font-size: clamp(0.8rem, 2vw, 1.2rem); | ||
| } | ||
| .success-icon { | ||
| height: 50px; | ||
| width: 50px; | ||
| } | ||
| .successMessege .dismiss { | ||
| margin-top: 20px; | ||
| background-color: hsl(234, 29%, 20%); | ||
| color: white; | ||
| height: 40px; | ||
| width: 100%; | ||
| padding: 10px; | ||
| cursor: pointer; | ||
| border-radius: 5px; | ||
| border: none; | ||
| } | ||
| .successMessege .dismiss:hover { | ||
| background: linear-gradient(90deg, #ff4f81, #ff8a24); | ||
| box-shadow: 0 10px 25px rgba(255, 90, 80, 0.4); | ||
| } | ||
|
|
||
| @media (max-width: 500px) { | ||
| .signUpBox { | ||
| display: flex; | ||
| flex-direction: column; | ||
| width: 100vw; | ||
| height: 100vh; | ||
| border-radius: 0; | ||
| padding: 0; | ||
| } | ||
| .signUpBox img { | ||
| content: url("assets/images/illustration-sign-up-mobile.svg"); | ||
| position: sticky; | ||
| height: 35vh; | ||
| width: 100vw; | ||
| border-radius: 0; | ||
| max-width: 100%; | ||
| } | ||
|
|
||
| .textSide { | ||
| align-items: right; | ||
| text-align: left; | ||
| padding: 20px 20px; | ||
| } | ||
| .textSide h1 { | ||
| font-size: clamp(1.5rem, 8vw, 3rem); | ||
| } | ||
| .textSide p { | ||
| font-size: clamp(0.8rem, 3vw, 1.1rem); | ||
| } | ||
| .emailSection h4 { | ||
| text-align: left; | ||
| } | ||
|
|
||
| .emailSection { | ||
| width: 100%; | ||
| } | ||
| .checkMarks img { | ||
| content: none; | ||
| height: 20px; | ||
| width: 20px; | ||
| } | ||
| .successMessege.active { | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: center; | ||
| align-items: flex-start; | ||
| background-color: white; | ||
| position: static; | ||
| height: 100vh; | ||
| width: 100vw; | ||
| border-radius: none; | ||
| } | ||
| .successMessege h1 { | ||
| font-size: clamp(1.5rem, 8vw, 2.5rem); | ||
| margin: 20px 0 0 0; | ||
| } | ||
| .successMessege p { | ||
| font-size: clamp(0.9rem, 4vw, 1.3rem); | ||
| } | ||
| } | ||
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.
Graet