add task solution #4844
add task solution #4844
Conversation
Vladyslava-hub
commented
Nov 12, 2024
Vladyslava-hub
commented
- DEMO LINK
- TEST REPORT LINK
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:
-
Grid Usage for Cards: The requirement specifies using a grid layout for the cards, but currently, flexbox is being used. This needs to be corrected to meet the task requirements.
-
HTML Tag Issue: The
<html>tag is not properly closed, which could lead to rendering issues. Please ensure it is correctly formatted. -
Card Hover Effect: The hover effect on the
.card__buyelement makes the text color the same as the border, which can make it unreadable. Consider adjusting the color for better readability. -
Responsive Design: The fixed width for
.cardsmight not be responsive on smaller screens. Consider using a percentage-based width or media queries to ensure the layout adapts to different screen sizes. -
Placeholder Content: All product cards have the same content, which seems to be placeholder data. Please update each card with unique product details.
Once these issues are addressed, your code will be in great shape! Keep up the great work, and don't hesitate to reach out if you need any help. 😊
✨ 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
| @@ -1,5 +1,8 @@ | |||
| <!doctype html> | |||
| <html lang="en"> | |||
| <html | |||
There was a problem hiding this comment.
The <html> tag is not properly closed. It should be <html> instead of <html /++2++/>.
src/index.html
Outdated
| <img | ||
| class="card__image" | ||
| src="images/imac.jpeg" | ||
| alt="iMac" | ||
| /> | ||
|
|
||
| <h2 class="card__title"> | ||
| APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A) | ||
| </h2> | ||
| <div class="card__code">Product code: 195434</div> | ||
| <div class="card__review-container"> | ||
| <div class="stars stars--4"> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| </div> | ||
|
|
||
| <div class="card__review-count">Reviews: 5</div> | ||
| </div> | ||
| <div class="card__price-container"> | ||
| <div class="card__price-label">Price:</div> | ||
| <div class="card__price">$2,199</div> | ||
| </div> | ||
| <a | ||
| class="card__buy" | ||
| href="#" | ||
| > | ||
| Buy | ||
| </a> | ||
| </div> | ||
|
|
||
| <div class="card cards__card"> | ||
| <img | ||
| class="card__image" | ||
| src="images/imac.jpeg" | ||
| alt="iMac" | ||
| /> | ||
|
|
||
| <h2 class="card__title"> | ||
| APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A) | ||
| </h2> | ||
| <div class="card__code">Product code: 195434</div> | ||
| <div class="card__review-container"> | ||
| <div class="stars stars--4"> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| </div> | ||
|
|
||
| <div class="card__review-count">Reviews: 5</div> | ||
| </div> | ||
| <div class="card__price-container"> | ||
| <div class="card__price-label">Price:</div> | ||
| <div class="card__price">$2,199</div> | ||
| </div> | ||
| <a | ||
| class="card__buy" | ||
| href="#" | ||
| > | ||
| Buy | ||
| </a> | ||
| </div> | ||
|
|
||
| <div class="card cards__card"> | ||
| <img | ||
| class="card__image" | ||
| src="images/imac.jpeg" | ||
| alt="iMac" | ||
| /> | ||
|
|
||
| <h2 class="card__title"> | ||
| APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A) | ||
| </h2> | ||
| <div class="card__code">Product code: 195434</div> | ||
| <div class="card__review-container"> | ||
| <div class="stars stars--4"> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| </div> | ||
|
|
||
| <div class="card__review-count">Reviews: 5</div> | ||
| </div> | ||
| <div class="card__price-container"> | ||
| <div class="card__price-label">Price:</div> | ||
| <div class="card__price">$2,199</div> | ||
| </div> | ||
| <a | ||
| class="card__buy" | ||
| href="#" | ||
| > | ||
| Buy | ||
| </a> | ||
| </div> |
There was a problem hiding this comment.
All product cards have the same content, including the image, title, product code, reviews, and price. This might be placeholder content and should be updated with unique data for each product.
src/styles/card.scss
Outdated
| &:hover { | ||
| transform: scale(1.2); | ||
| color: $main-color; | ||
| background-color: #fff; |
There was a problem hiding this comment.
The hover effect on .card__buy changes the text color to $main-color, which is the same as the border color. This can make the text unreadable against the white background. Consider using a different color for the text or the border to ensure readability.
src/styles/cards.scss
Outdated
| flex-wrap: wrap; | ||
|
|
||
| box-sizing: border-box; | ||
| width: 1024px; |
There was a problem hiding this comment.
The fixed width of 1024px for .cards might not be responsive on smaller screens. Consider using a percentage-based width or media queries to ensure the layout adapts to different screen sizes.
There was a problem hiding this comment.
Great job on your progress! 🎉 Your code is shaping up well, but there are a few key areas to focus on for improvement:
-
Card Hover Effect: The hover effect on the
.card__buyelement needs attention. The text color becomes the same as the border, making it unreadable. Adjust the button background to#fffand text color to#00acdcon hover for better contrast. -
Unique Product Details: All product cards currently have placeholder content. Ensure each card has unique product details to meet the task requirements.
These adjustments will enhance the functionality and readability of your project. Remember, addressing these issues will not only improve your current work but also help you grow as a developer. Keep up the great work and continue learning from these experiences! 🚀
✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨
| <img | ||
| class="card__image" | ||
| src="images/imac.jpeg" | ||
| alt="iMac A1419" | ||
| /> | ||
|
|
||
| <h2 class="card__title"> | ||
| APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A) | ||
| </h2> | ||
| <div class="card__code">Product code: 195434</div> | ||
| <div class="card__review-container"> | ||
| <div class="stars stars--4"> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| </div> | ||
|
|
||
| <div class="card__review-count">Reviews: 5</div> | ||
| </div> | ||
| <div class="card__price-container"> | ||
| <div class="card__price-label">Price:</div> | ||
| <div class="card__price">$2,199</div> | ||
| </div> | ||
| <a | ||
| class="card__buy" | ||
| href="#" | ||
| > | ||
| Buy | ||
| </a> | ||
| </div> | ||
|
|
||
| <div class="card cards__card"> | ||
| <img | ||
| class="card__image" | ||
| src="images/imac.jpeg" | ||
| alt="iMac A1419" | ||
| /> | ||
|
|
||
| <h2 class="card__title"> | ||
| APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A) | ||
| </h2> | ||
| <div class="card__code">Product code: 195434</div> | ||
| <div class="card__review-container"> | ||
| <div class="stars stars--4"> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| </div> | ||
|
|
||
| <div class="card__review-count">Reviews: 5</div> | ||
| </div> | ||
| <div class="card__price-container"> | ||
| <div class="card__price-label">Price:</div> | ||
| <div class="card__price">$2,199</div> | ||
| </div> | ||
| <a | ||
| class="card__buy" | ||
| href="#" | ||
| > | ||
| Buy | ||
| </a> | ||
| </div> | ||
|
|
||
| <div class="card cards__card"> | ||
| <img | ||
| class="card__image" | ||
| src="images/imac.jpeg" | ||
| alt="iMac A1419" | ||
| /> | ||
|
|
||
| <h2 class="card__title"> | ||
| APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A) | ||
| </h2> | ||
| <div class="card__code">Product code: 195434</div> | ||
| <div class="card__review-container"> | ||
| <div class="stars stars--4"> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| </div> | ||
|
|
||
| <div class="card__review-count">Reviews: 5</div> | ||
| </div> | ||
| <div class="card__price-container"> | ||
| <div class="card__price-label">Price:</div> | ||
| <div class="card__price">$2,199</div> | ||
| </div> | ||
| <a | ||
| class="card__buy" | ||
| href="#" | ||
| > | ||
| Buy | ||
| </a> | ||
| </div> |
There was a problem hiding this comment.
All product cards have the same content, which appears to be placeholder data. Please update each card with unique product details as per the task requirements.
| &:hover { | ||
| transform: scale(1.2); | ||
| color: #fff; /* Ensure this contrasts well with the border color */ |
There was a problem hiding this comment.
The hover effect on the .card__buy element makes the text color the same as the border, which can make it unreadable. Consider adjusting the color for better readability.
| .card__buy:hover { | ||
| -webkit-transform: scale(1.2); | ||
| transform: scale(1.2); | ||
| color: #fff; /* Ensure this contrasts well with the border color */ |
There was a problem hiding this comment.
The hover effect on the .card__buy element makes the text color the same as the border, which can make it unreadable. Consider adjusting the color for better readability.
