Task Catalog #4199
Task Catalog #4199
Conversation
| > | ||
| Laptops & Computers | ||
| </a> | ||
| </li> |
There was a problem hiding this comment.
Please remember to add empty lines between sibling elements, it is requested in Code Styles Rules
src/index.html
Outdated
| </h2> | ||
| <p class="card__code">Product code: 195434</p> | ||
| <div class="card__rate"> | ||
| <div class="card__rate-stars stars"> |
There was a problem hiding this comment.
You could have declared this .stars block in a similar way as you have done in Stars task.
In the way that is implemented there, there is a modifier on stars which shows the adequate amount of active and inactive stars, as opposed to what you've made here where the styling is fixed
There was a problem hiding this comment.
The empty missing empty line between siblings repeats several times here, be sure to check the whole file when fixing it, ok?
src/styles/card.scss
Outdated
|
|
||
| &:hover { | ||
| transform: scale(1.2); | ||
| transition-duration: 300ms; |
There was a problem hiding this comment.
To keep the transition smooth when hovering an element, the transition property should be declared not inside the :hover state, but in the element itself.
You should move this declaration to .card to fix this problem.
Also, you can use the transition property instead of transition-duration
src/styles/card.scss
Outdated
| height: 134px; | ||
| box-sizing: border-box; | ||
| margin-left: 3px; | ||
| transition: 3s; |
src/styles/card.scss
Outdated
| &:hover &__title { | ||
| color: #34568b; | ||
| cursor: pointer; | ||
| transition: 3s; |
There was a problem hiding this comment.
The styling here is right, but a 3s transition for a hover, are you sure? Maybe you should check it in the Checklist
| color: #fff; | ||
| margin-top: 16px; | ||
| cursor: pointer; | ||
| text-transform: uppercase; |
There was a problem hiding this comment.
And here you are missing a transition property, so your transition when hover doesn't look abrupt
There was a problem hiding this comment.
Still unfixed, please make sure all your hover effects are smooth Reference
src/styles/stars.scss
Outdated
| width: 16px; | ||
| margin-right: 4px; | ||
|
|
||
| &:nth-child(5) { |
There was a problem hiding this comment.
I've mentioned this before, but try changing this approach so you don't have fixed styles that forces all products to be 4 stars active
There was a problem hiding this comment.
Great effort, @HigorPedroso! There is just one fix pointed out by @pedro-ruas that you may have overlooked and your solution should be good to go! 🚀
| &-reviews { | ||
| font-size: 10px; | ||
| font-weight: 400; | ||
| line-height: 14px; | ||
| } | ||
| } |
There was a problem hiding this comment.
Avoid defining one element inside another, although __rate and __rate-reviews share the beginning of the name they're actually two different elements, this nesting may cause confusion;
Same happens in __price, __price-text and __price-value
This is a personal suggestion and not a required change
| color: #fff; | ||
| margin-top: 16px; | ||
| cursor: pointer; | ||
| text-transform: uppercase; |
There was a problem hiding this comment.
Still unfixed, please make sure all your hover effects are smooth Reference
DEMO LINK
TEST REPORT LINK