add task solution #4511
add task solution #4511
Conversation
There was a problem hiding this comment.
Great job on addressing the core functionality of your code! 🌟 Just a few minor points on best practices with font usage and attribute formatting to keep in mind for future projects. Remember, using the correct font-weight and providing fallback fonts can greatly enhance cross-browser compatibility and user experience. Also, keeping your HTML attributes neatly formatted makes your code much easier to read and maintain. Keep up the good work! 💪
✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨
| <form | ||
| action="/submit-your-form-handler" | ||
| method="post" | ||
| class="search-form" |
There was a problem hiding this comment.
The attributes in the <form> tag should start each on a new line with 2-space indentation related to the tag to keep the attributes correctly formatted. The tag’s closing bracket should be on the same level as the opening one.
| <input | ||
| type="text" | ||
| class="search__bar search__bar--top" | ||
| data-qa="keypress" | ||
| placeholder="Try “Los Angeles“" |
There was a problem hiding this comment.
The attributes in the <input> tag should start each on a new line with 2-space indentation related to the tag to keep the attributes correctly formatted. The tag’s closing bracket should be on the same level as the opening one.
| <input | ||
| type="text" | ||
| class="search__bar search__bar--bottom" | ||
| placeholder="Try “Los Angeles“" |
There was a problem hiding this comment.
The attributes in the <input> tag should start each on a new line with 2-space indentation related to the tag to keep the attributes correctly formatted. The tag’s closing bracket should be on the same level as the opening one.
| border: 1px solid rgba(225, 231, 237, 1); | ||
| width: 100%; /* Ajuste para largura total */ | ||
| box-shadow: 0 1px 8px 0 #3d4e611a; | ||
| font-family: Avenir, Arial, sans-serif; |
There was a problem hiding this comment.
Remember to use fallback fonts - alternative font-family in case the main one doesn't work. For example, 'font-family: Avenir, Arial, sans-serif;' is a good practice as you have done, but ensure that 'Arial' is not the only fallback font. Consider adding another generic family such as 'Helvetica' to improve cross-platform compatibility.
| font-family: Avenir-Book, Arial, sans-serif; /* Usar Avenir-Heavy no focus */ | ||
| font-weight: 900; | ||
| text-shadow: 0 4px 4px #00000040; |
There was a problem hiding this comment.
The font-family 'Avenir-Book' used here does not match the font-family 'Avenir' defined in the @font-face rule. Instead, you should specify the font-weight to ensure the correct font is used. Also, 'font-weight: 900;' is incorrect here because 'Avenir-Book' is a lighter weight (likely 300), not the heaviest weight (900).
| font-family: Avenir-Heavy, Arial, sans-serif; | ||
| font-weight: 900; |
There was a problem hiding this comment.
As with the previous comment, the font-family 'Avenir-Heavy' should not be used directly. Use the 'font-family: Avenir;' with the appropriate 'font-weight' to ensure the correct font is applied. The 'font-weight' should match the one defined in your @font-face rule for 'Avenir-Heavy', which is 900.
DEMO LINK
TEST REPORT LINK
Icon implemented using background-image CSS property
Inputs are written inside of 'form' tag with correctly passed attributes
All
Typical MistakesfromBEMlesson theory are checked.Code follows all the Code Style Rules ❗️