add task solution #4492
add task solution #4492
Conversation
osidanych
commented
Sep 26, 2024
osidanych
commented
- 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 Mistakes from BEM lesson theory are checked.
- Code follows all the Code Style Rules ❗️
There was a problem hiding this comment.
Great job addressing the CSS issues! 👍 Remember, it's all about making your code more maintainable and scalable. Keep up the good work, and always aim for best practices like using fallback fonts and proper attribute formatting. Your effort is paying off! 😊
✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨
| class="search-bar__input search-bar__input--big" | ||
| type="text" | ||
| data-qa="keypress" | ||
| placeholder="Try “Los Angeles“" |
There was a problem hiding this comment.
Keep your attributes correctly formatted. For the <input> element with multiple attributes, each attribute should start on a new line with a 2-space indentation relative to the tag. The closing bracket should be on the same level as the opening one.
| class="search-bar__input search-bar__input--small" | ||
| type="text" | ||
| data-qa="hover" | ||
| placeholder="Try “Los Angeles“" |
There was a problem hiding this comment.
Keep your attributes correctly formatted. For the <input> element with multiple attributes, each attribute should start on a new line with a 2-space indentation relative to the tag. The closing bracket should be on the same level as the opening one.
| <form | ||
| class="search-bar search-bar--big" | ||
| data-qa="big" | ||
| > | ||
| <input | ||
| class="search-bar__input search-bar__input--big" | ||
| type="text" | ||
| data-qa="keypress" | ||
| placeholder="Try “Los Angeles“" | ||
| /> |
There was a problem hiding this comment.
Add empty lines between multiline sibling blocks of HTML to add some "air" and simplify reading. There should be an empty line separating the two <form> elements.
| } | ||
|
|
||
| body { | ||
| font-family: Avenir, 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 instance, you could use 'font-family: Avenir, Arial, sans-serif;'
| .search-bar { | ||
| width: 100%; | ||
| border: 1px solid #e1e7ed; | ||
| border-radius: 4px; | ||
| box-shadow: 0 1px 8px 0 #3d4e611a; | ||
| margin-top: 20px; | ||
| box-sizing: border-box; | ||
| } |
There was a problem hiding this comment.
Don't fix container size (if there is no such a requirement). The width is set to 100% which is good, but ensure that the container's size is flexible enough to accommodate various content sizes.
| border: 1px solid #e1e7ed; | ||
| border-radius: 4px; | ||
| box-shadow: 0 1px 8px 0 #3d4e611a; | ||
| margin-top: 20px; |
There was a problem hiding this comment.
Be consistent with your margins (Add only top or bottom, but not both). In this case, only 'margin-top' is used which is good.
| .search-bar__logo { | ||
| width: 19px; | ||
| height: 19px; | ||
| top: 25px; | ||
| padding-left: 26px; | ||
| } | ||
|
|
||
| .search-bar__logo--small { | ||
| width: 11px; | ||
| height: 11px; | ||
| top: 15px; | ||
| padding-left: 13px; |
There was a problem hiding this comment.
Don't use tag names for styling (except 'html' and 'body'). It is recommended to use classes for styling. If '.search-bar__logo' and '.search-bar__logo--small' are meant to style 'img' tags, consider adding a class to the 'img' tags instead.
| .search-bar__input { | ||
| box-sizing: border-box; | ||
| width: 100%; | ||
| background-image: url('./images/Search.svg'); |
There was a problem hiding this comment.
It's a good practice to use relative paths for images that consider the current file's location. Ensure that the path './images/Search.svg' is correct relative to the CSS file location.
