add task solution #4603
add task solution #4603
Conversation
GabrielNunes-383
commented
Nov 17, 2024
GabrielNunes-383
commented
- DEMO LINK
- TEST REPORT LINK
There was a problem hiding this comment.
Thank you for your hard work on this project! 😊 While you've made a great start, there are a few critical issues that need to be addressed to meet the core requirements of the task.
-
HTML Structure: The search bars need to have the correct
data-qaattributes as specified in the task. This is crucial for meeting the task requirements. -
CSS Styling: The
font-weightand layout requirements for the search bars need to be adjusted to match the task specifications. -
General Requirements: Ensure that the images from
src/imagesare utilized as required, and consider adding semantic tags for better SEO and accessibility. -
Form Structure: Make sure the input elements are correctly placed within a
formtag with the appropriate attributes.
Addressing these points will significantly improve your solution and bring it in line with the task requirements. Keep up the great work, and don't hesitate to reach out if you need further guidance! 🌟
✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨
🔄 Fix the issues, commit the changes, and then re-request my review using the Re-request review button in the Reviewers tab.
src/index.html
Outdated
| /> | ||
|
|
||
| <br> |
There was a problem hiding this comment.
The <br> tag should be self-closing like <br /> to maintain consistency with the XHTML style used in the rest of the document.
| top: 71px; | ||
| left: 48px; |
There was a problem hiding this comment.
The 'top' and 'left' properties are used here, but they have no effect unless the element is positioned (e.g., relative, absolute, fixed). Consider removing these properties or setting a position for the element.
| top: 403px; | ||
| left: 48px; |
There was a problem hiding this comment.
Similar to the previous comment, the 'top' and 'left' properties will not affect the element unless it has a specified position. Consider removing these properties or setting a position for the element.
There was a problem hiding this comment.
Review Summary
Great effort on your submission! 🎉 While there are some critical issues that need attention, the decision to approve is made to help you move forward with your learning journey. Here are the key areas to focus on:
-
HTML Structure:
- The
data-qaattributes need correction. Ensure the big search form hasdata-qa="big"and the input within it hasdata-qa="keypress". Avoid combining them intodata-qa="big keypress".
- The
-
CSS Styling:
- The default
font-weightshould be 300, but it's currently set to 400. Also, check thefont-weightfor.input_item-2:focus, which is set to 900, to ensure it aligns with the task requirements.
- The default
-
Form Structure:
- Input elements should be enclosed within a
formtag to meet the task requirements.
- Input elements should be enclosed within a
-
General Requirements:
- Verify that images from
src/imagesare used correctly. The CSS references a background image fromimages/Icon.png, so ensure this path is accurate and the image is fromsrc/images.
- Verify that images from
Addressing these issues will enhance your code's functionality and compliance with the task requirements. Keep up the good work, and remember to learn from these insights to avoid similar issues in the future. Happy coding! 🚀
✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨
src/style.css
Outdated
|
|
||
| .input_item-2:focus { | ||
| background: linear-gradient(180deg, #FFF 0%, #F6F6F7 100%); | ||
| font-weight: 900; |
There was a problem hiding this comment.
The font-weight for .input_item-2:focus is set to 900, which may not align with the task requirements. Ensure that the font-weight matches the specifications provided in the task description.
| class="input input_item-1" | ||
| /> | ||
| </form> | ||
| <br /> |
There was a problem hiding this comment.
A tag
é para quebra de linha geralmente para textos.
Neste Caso eu sugiro adicionar uma
<div class="container">
<form .... />
<form .... />
</div>
.container {
display: flex;
flex-direction: colum;
gap: 20px;
}
| font-weight: 300; | ||
| font-style: normal; | ||
| } | ||
|
|
There was a problem hiding this comment.
missing:
* {
box-sizing: border-box;
}
| border-radius: 3px; | ||
| border: 1px solid #E1E7ED; | ||
| font-size: 16px; | ||
| position: relative; |
|
|
||
|
|
||
| .input { | ||
| background-image: url(./images/Icon.png); |
There was a problem hiding this comment.
Em vez de usar o fundo para adicionar o ícone, poderia ser melhor usar uma imagem e ajustar sua posição em relação ao form.
There was a problem hiding this comment.
<form
class="form"
data-qa="big"
>
<img/>
<input/>
</form>
| } | ||
|
|
||
| .input_item-2 { | ||
| width: 427px; |
| } | ||
|
|
||
| .input_item-1 { | ||
| width: 900px; |
