add task solution #4514
add task solution #4514
Conversation
OlhaLishenko
commented
Oct 5, 2024
OlhaLishenko
commented
- DEMO LINK
- TEST REPORT LINK
There was a problem hiding this comment.
Great job on your Pull Request! There are some minor issues such as formatting and best practices that I pointed out, like using gradients correctly and specifying fallback fonts, but they don't significantly impact the overall functionality of your code. Keep up the good work, and consider these tips for future improvements to make your code even better! 😊👍
✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨
| <input | ||
| class="input-bar input-bar--big" | ||
| id="input-icon-big" | ||
| type="text" | ||
| data-qa="keypress" | ||
| placeholder="Try “Los Angeles”" |
There was a problem hiding this comment.
Keep your attributes correctly formatted. Since the element has more than two attributes, each attribute should start on a new line with 2-space indentation. The closing bracket should align with the opening tag line.
| <input | ||
| class="input-bar input-bar--small" | ||
| id="input-icon-small" | ||
| type="text" | ||
| data-qa="hover small" | ||
| placeholder="Try “Los Angeles”" |
There was a problem hiding this comment.
The attributes of the element should follow the same formatting rules as mentioned above. Each attribute should be on a new line with proper indentation.
src/style.css
Outdated
| * { | ||
| box-sizing: border-box; | ||
| } |
There was a problem hiding this comment.
Avoid using the universal selector '*' for setting box-sizing as it impacts performance. Instead, set box-sizing on specific elements that require it.
src/style.css
Outdated
| html { | ||
| font-family: Avenir, sans-serif; | ||
| } |
There was a problem hiding this comment.
Remember to use fallback fonts. In case the main font-family doesn't load, it's good to have alternative fonts specified.
src/style.css
Outdated
| .input-bar:focus { | ||
| background-color: linear-gradient(180deg, #ffff 0%, #f6f6f7 100%); |
There was a problem hiding this comment.
The value for the background-color property seems to be incorrect. To use a gradient, you should use the background or background-image property instead.
