Create product card #5125
Create product card #5125
Conversation
There was a problem hiding this comment.
Great job on your work! 🎉 The code is well-structured and meets most of the task requirements. Just a small note: make sure to correct the typo in the variable name from $main-font-weigh to $main-font-weight for consistency. Keep up the great work! 🚀
✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨
| data-qa="card" | ||
| > | ||
| <div class="card__content"> | ||
| <div class="card__item-image"></div> |
There was a problem hiding this comment.
use image tag to show imac picture.
There was a problem hiding this comment.
thank you so much for review and suggestions, will fix it :)
| class="card" | ||
| data-qa="card" | ||
| > | ||
| <div class="card__content"> |
There was a problem hiding this comment.
This tag is redundant here, please remove it.
| > | ||
| <div class="card__content"> | ||
| <div class="card__item-image"></div> | ||
| <div class="card__item"> |
There was a problem hiding this comment.
| <div class="card__item"> |
There was a problem hiding this comment.
This tag is redundant here, please remove it.
| class="card" | ||
| data-qa="card" | ||
| > | ||
| <div class="card__content"> |
There was a problem hiding this comment.
| <div class="card__content"> |
| <div class="card__item-name"> | ||
| APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A) | ||
| </div> | ||
| <div class="card__item-code">Product code: 195434</div> |
There was a problem hiding this comment.
use semantic tags for text. Please make it for everywhere.
| <div class="card__item-name"> | |
| APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A) | |
| </div> | |
| <div class="card__item-code">Product code: 195434</div> | |
| <h3 class="card__item-name"> | |
| APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A) | |
| </h3> | |
| <pclass="card__item-code">Product code: 195434</p> |
| <div | ||
| class="buy" | ||
| data-qa="hover" | ||
| > | ||
| <a class="buy__button">Buy</a> | ||
| </div> |
There was a problem hiding this comment.
| <div | |
| class="buy" | |
| data-qa="hover" | |
| > | |
| <a class="buy__button">Buy</a> | |
| </div> | |
| <a class="buy__button">Buy</a> |
| .card { | ||
| width: 200px; | ||
| height: 400px; | ||
| margin: 40px; |
There was a problem hiding this comment.
this margin is redundant here, please remove it
| height: 400px; | ||
| margin: 40px; | ||
|
|
||
| padding: 32px 19px 16px; |
There was a problem hiding this comment.
| padding: 32px 19px 16px; | |
| padding: 32px 16px 16px; |
| &-stars { | ||
| background-image: url(../images/star.svg); | ||
| background-repeat: no-repeat; | ||
| width: 16px; | ||
| height: 16px; | ||
| padding: 2px; |
There was a problem hiding this comment.
| &-stars { | |
| background-image: url(../images/star.svg); | |
| background-repeat: no-repeat; | |
| width: 16px; | |
| height: 16px; | |
| padding: 2px; | |
| &-stars { | |
| background-image: url(../images/star.svg); | |
| background-repeat: no-repeat; | |
| background-position: center; | |
| width: 16px; | |
| height: 16px; | |
| margin-right: 4px; |
DEMO LINK
TEST REPORT LINK
there 2 BEM blocks
cardandstarseach in their own fileSCSS Nesting is used for
elements,modifiersandpseudo-classesSCSS Variables are used for main values and placed in a separate file
all
stars--Nmodifiers work as expected (Highlight firstNstars)Code follows all the Code Style Rules ❗️