Develop #4961
Develop #4961
Conversation
olhakostovetska
commented
Dec 29, 2024
olhakostovetska
commented
- DEMO LINK
- TEST REPORT LINK
There was a problem hiding this comment.
Great job on your submission! 🎉 While there are some areas for improvement, such as optimizing the hover effect on the .card class and considering dynamic generation of repeated elements, these are minor issues that don't impact the core functionality. Keep up the good work and consider these suggestions for future enhancements! 😊
✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨
| <div class="card__price"> | ||
| <div class="card__price-price">Price:</div> | ||
|
|
||
| <div class="card__price-value">$2,199</div> | ||
| </div> | ||
|
|
||
| <a | ||
| href="#" | ||
| class="card__buy" | ||
| data-qa="card-hover" | ||
| > | ||
| BUY | ||
| </a> | ||
| </div> | ||
|
|
||
| <div | ||
| class="card" | ||
| data-qa="card" | ||
| > | ||
| <img | ||
| class="card__iMac" | ||
| src="images/imac.jpeg" | ||
| alt="iMac 27" | ||
| /> | ||
|
|
||
| <p class="card__title"> | ||
| APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A) | ||
| </p> | ||
|
|
||
| <p class="card__code">Product code: 195434</p> | ||
|
|
||
| <div class="card__stars"> | ||
| <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__reviews">Reviews: 5</div> | ||
| </div> | ||
|
|
||
| <div class="card__price"> | ||
| <div class="card__price-price">Price:</div> | ||
|
|
||
| <div class="card__price-value">$2,199</div> | ||
| </div> | ||
|
|
||
| <a | ||
| href="#" | ||
| class="card__buy" | ||
| data-qa="card-hover" | ||
| > | ||
| BUY | ||
| </a> | ||
| </div> | ||
|
|
||
| <div | ||
| class="card" | ||
| data-qa="card" | ||
| > | ||
| <img | ||
| class="card__iMac" | ||
| src="images/imac.jpeg" | ||
| alt="iMac 27" | ||
| /> | ||
|
|
||
| <p class="card__title"> | ||
| APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A) | ||
| </p> | ||
|
|
||
| <p class="card__code">Product code: 195434</p> | ||
|
|
||
| <div class="card__stars"> | ||
| <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__reviews">Reviews: 5</div> | ||
| </div> | ||
|
|
||
| <div class="card__price"> | ||
| <div class="card__price-price">Price:</div> | ||
|
|
||
| <div class="card__price-value">$2,199</div> | ||
| </div> | ||
|
|
||
| <a | ||
| href="#" | ||
| class="card__buy" | ||
| data-qa="card-hover" | ||
| > | ||
| BUY | ||
| </a> | ||
| </div> |
There was a problem hiding this comment.
The product cards are repeated multiple times with the same content. Consider using a templating engine or JavaScript to dynamically generate these cards. This will make your code more maintainable and easier to update in the future.
| &:hover { | ||
| transform: scale(1.2); |
There was a problem hiding this comment.
The hover effect on the .card class uses transform: scale(1.2), which can cause layout shifts and affect the user experience. Consider using a more subtle transformation or adding will-change: transform; to optimize performance and prevent layout shifts.
| } | ||
|
|
||
| body { | ||
| font-family: Roboto, serif; |
There was a problem hiding this comment.
Consider adding a generic fallback font after 'Roboto', such as 'sans-serif', to ensure that the text is displayed correctly if the primary font fails to load.
