add task solution #4490
add task solution #4490
Conversation
Ga1dar
commented
Sep 26, 2024
Ga1dar
commented
- DEMO LINK
- TEST REPORT LINK
There was a problem hiding this comment.
Hey there! You've done a great job so far, but there are a few critical issues that need your attention before we can move forward 🛠️. The pseudo-classes need to be fixed to ensure proper functionality, and there are some important corrections to be made regarding CSS properties and values. Also, let's make sure the @font-face rule is set up correctly for different font weights and styles. Keep up the good work, and with these adjustments, your code will be even better! 💪
✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨
| <form | ||
| class="search-container" | ||
| action="#" | ||
| method="post" | ||
| data-qa="keypress" |
There was a problem hiding this comment.
Keep your attributes correctly formatted. Since the <form> element has more than two attributes, start each one on a new line with 2-space indentation related to the tag.
| <div class="search-field large"> | ||
| <input | ||
| type="text" | ||
| placeholder="Try “Los Angeles“" | ||
| data-qa="big" | ||
| /> | ||
| </div> |
There was a problem hiding this comment.
Remember about correct indentation between parent and child elements. The <input> tag should be indented two spaces from the <div> tag.
| <div class="search-field small"> | ||
| <input | ||
| type="text" | ||
| data-qa="small" | ||
| placeholder="Try “Los Angeles“" | ||
| /> |
There was a problem hiding this comment.
Remember about correct indentation between parent and child elements. The <input> tag should be indented two spaces from the <div> tag.
| html { | ||
| font-family: Avenir, sans-serif; | ||
| font-size: 16px; | ||
| font-weight: 300px; |
There was a problem hiding this comment.
The font-weight property should be specified using numeric values, not pixels. For example, font-weight: 300;.
| font-family: Avenir, sans-serif; | ||
| font-size: 16px; | ||
| font-weight: 300px; | ||
| line-height: 21.86px; |
There was a problem hiding this comment.
The line-height property typically does not require a unit unless it's relative to the font size, in which case 'em' or unitless values are commonly used. For example, line-height: 1.35;.
| font-family: Avenir, sans-serif; | ||
| padding: 0; | ||
| width: 100vw; /* Полная ширина окна */ | ||
| height: 100vh; /* Полная высота окна */ |
There was a problem hiding this comment.
Setting height to 100vh on the body tag is not recommended as it can lead to unwanted overflow issues with the content. Use min-height if you want to ensure the body takes at least the viewport height.
| height: 70px; /* Высота для большой строки поиска */ | ||
| box-sizing: border-box; | ||
| font-size: 18px; /* Размер текста побольше */ | ||
| margin-bottom: 20px; /* Отступ между строками */ |
There was a problem hiding this comment.
The margin-bottom property is being set on the input element. According to the checklist, it's recommended to use either margin-top or margin-bottom but not both to avoid potential margin collapse issues.
| height: 50px; /* Меньшая высота для второй строки поиска */ | ||
| box-sizing: border-box; | ||
| font-size: 16px; /* Меньший размер текста */ | ||
| box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.25); |
There was a problem hiding this comment.
The box-shadow property here is using pixel units for blur and spread radius, which is fine, but ensure consistency with the box-shadow in .search-field.large input.
| box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.25); | ||
| } | ||
|
|
||
| .search-field :hover { |
There was a problem hiding this comment.
The :hover pseudo-class should be attached to the class without a space (e.g., .search-field:hover) to ensure it is applied when the user hovers over the .search-field element.
| box-shadow: 1px 5px 5px 1px rgba(0, 0, 0, 0.25); | ||
| } | ||
|
|
||
| .search-field :focus { |
There was a problem hiding this comment.
The :focus pseudo-class should be attached to the class without a space (e.g., .search-field:focus) to ensure it is applied when the .search-field element is focused.
