add task solution #4807
add task solution #4807
Conversation
There was a problem hiding this comment.
Thank you for your hard work on this project! There are a few critical issues that need to be addressed before we can approve the pull request:
-
Data Attributes: The
data-qa="card-hover"attribute is missing from the "Buy" link inside the first card. This is essential for meeting the task requirements. -
Grid Layout: The current grid layout does not adjust the number of columns based on screen resolution as specified. The use of
repeat(auto-fit, minmax(200px, 200px))does not meet the requirement for responsive design. Consider using a more flexible approach likeminmax(200px, 1fr). -
Navigation Links Color: Ensure that the navigation links have the color
#060b35as specified, instead of using$main-accent. -
Hover Effects: The hover effect on the navigation link should change the text color to
#00acdc. Ensure the color matches the specified hex value.
These issues are critical as they affect the core functionality and requirements of the task. Please address them, and feel free to reach out if you need any help. Keep up the great work, and I'm confident you'll get this sorted out quickly! 😊
✨ 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
|
|
||
| <a | ||
| href="#" | ||
| class="buy" |
There was a problem hiding this comment.
The 'buy' class is used for the Buy button. Ensure that this class is styled appropriately in your CSS, and consider whether additional classes or attributes are needed for functionality or styling.
src/styles/index.css
Outdated
|
|
||
| .grid-container { | ||
| display: grid; | ||
| grid-template-columns: repeat(auto-fit, minmax(200px, 200px)); |
There was a problem hiding this comment.
The 'grid-template-columns' property is set to 'repeat(auto-fit, minmax(200px, 200px))'. Consider using a more flexible approach like 'minmax(200px, 1fr)' to allow the grid items to expand and fill the available space more effectively.
src/styles/index.css
Outdated
| } | ||
|
|
||
| .card:hover { | ||
| transform: scale(1.2); |
There was a problem hiding this comment.
The 'transform: scale(1.2)' on hover for the '.card' class may cause layout shifts and affect user experience. Consider using a smaller scale factor or other visual effects that do not significantly alter the layout.
src/styles/index.css
Outdated
| } | ||
|
|
||
| .stars--active :not(:last-child) { | ||
| background-image: url(/src/images/star-active.svg); |
There was a problem hiding this comment.
The 'background-image' URL for '.stars--active' is set to '/src/images/star-active.svg'. Ensure that the path is correct and the image is available at the specified location.
src/styles/index.scss
Outdated
|
|
||
| .grid-container { | ||
| display: grid; | ||
| grid-template-columns: repeat(auto-fit, minmax(200px, 200px)); |
There was a problem hiding this comment.
The 'grid-template-columns' property is set to 'repeat(auto-fit, minmax(200px, 200px))'. Consider using a more flexible approach like 'minmax(200px, 1fr)' to allow the grid items to expand and fill the available space more effectively.
src/styles/index.scss
Outdated
| transition: $transition-duration; | ||
|
|
||
| &:hover { | ||
| transform: scale(1.2); |
There was a problem hiding this comment.
The 'transform: scale(1.2)' on hover for the '.card' class may cause layout shifts and affect user experience. Consider using a smaller scale factor or other visual effects that do not significantly alter the layout.
src/styles/index.scss
Outdated
| } | ||
|
|
||
| &--active :not(:last-child) { | ||
| background-image: url(/src/images/star-active.svg); |
There was a problem hiding this comment.
The 'background-image' URL for '.stars--active' is set to '/src/images/star-active.svg'. Ensure that the path is correct and the image is available at the specified location.
|
@pedro-ruas , fiz as modificações que pediu mas ainda não passo nos testes, e não consegui entender o porque... se puder de dar uma luz por favor, obrigado |
| @@ -0,0 +1,20 @@ | |||
| .card__buy-button { | |||
There was a problem hiding this comment.
The size of the buttons are not corresponding to the referene because your trying to define the size of the button by just using padding. It won't work in this case. It's better to use the height and width properties to define the size.
❗️ Copy this
Checklistto thePull Requestdescription after links, and put- [x]before each point after you checked it.:hoverare smooth