add task solution #4945
add task solution #4945
Conversation
WhiteP8wder8
commented
Dec 25, 2024
WhiteP8wder8
commented
- DEMO LINK
- TEST REPORT LINK
There was a problem hiding this comment.
Great job on your submission! 🎉 While there are a few minor improvements suggested, such as ensuring all variables are defined and considering dynamic generation for repeated elements, your implementation meets the core requirements. Keep up the good work and continue refining your skills! 😊
✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨
| <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> | ||
|
|
||
| <p class="card__review-amount">Reviews: 5</p> | ||
| </div> | ||
|
|
||
| <div class="card__price"> | ||
| <p class="card__price-label">Price:</p> | ||
|
|
||
| <p class="card__price-amount">$2,199</p> | ||
| </div> | ||
|
|
||
| <a | ||
| href="#buy-link" | ||
| class="button card__button" | ||
| > | ||
| Buy | ||
| </a> | ||
| </div> | ||
| <div class="card"> | ||
| <img | ||
| class="card__image" | ||
| src="images/imac.jpeg" | ||
| alt="iMac image" | ||
| /> | ||
|
|
||
| <h3 class="card__title"> | ||
| APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A) | ||
| </h3> | ||
|
|
||
| <p class="card__code">Product code: 195434</p> | ||
|
|
||
| <div class="card__review"> | ||
| <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> | ||
|
|
||
| <p class="card__review-amount">Reviews: 5</p> | ||
| </div> | ||
|
|
||
| <div class="card__price"> | ||
| <p class="card__price-label">Price:</p> | ||
|
|
||
| <p class="card__price-amount">$2,199</p> | ||
| </div> | ||
|
|
||
| <a | ||
| href="#buy-link" | ||
| class="button card__button" | ||
| > | ||
| Buy | ||
| </a> | ||
| </div> | ||
| <div class="card"> | ||
| <img | ||
| class="card__image" | ||
| src="images/imac.jpeg" | ||
| alt="iMac image" | ||
| /> | ||
|
|
||
| <h3 class="card__title"> | ||
| APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A) | ||
| </h3> | ||
|
|
||
| <p class="card__code">Product code: 195434</p> | ||
|
|
||
| <div class="card__review"> | ||
| <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> | ||
|
|
||
| <p class="card__review-amount">Reviews: 5</p> | ||
| </div> | ||
|
|
||
| <div class="card__price"> | ||
| <p class="card__price-label">Price:</p> | ||
|
|
||
| <p class="card__price-amount">$2,199</p> | ||
| </div> | ||
|
|
||
| <a | ||
| href="#buy-link" | ||
| class="button card__button" | ||
| > | ||
| Buy | ||
| </a> | ||
| </div> |
There was a problem hiding this comment.
The card elements are repeated multiple times with the same content. Consider using a template or a loop in your JavaScript to dynamically generate these cards if they are meant to display similar data. This will make your code more maintainable and reduce redundancy.
|
|
||
| border: 1px #f3f3f3 solid; | ||
|
|
||
| transition: transform $transition-time; |
There was a problem hiding this comment.
The variable $transition-time is used here, but it's not defined within this file. Ensure that $transition-time is defined in a global variables file or imported correctly.
| font-weight: 500; | ||
| line-height: 18px; | ||
| padding-bottom: 4px; | ||
| color: $main-color; |
There was a problem hiding this comment.
The variable $main-color is used here, but it's not defined within this file. Ensure that $main-color is defined in a global variables file or imported correctly.
| font-weight: 400; | ||
| line-height: 14px; | ||
| padding-bottom: 16px; | ||
| color: $secondary-color; |
There was a problem hiding this comment.
The variable $secondary-color is used here, but it's not defined within this file. Ensure that $secondary-color is defined in a global variables file or imported correctly.
| font-weight: 400; | ||
| line-height: 14px; | ||
| text-align: right; | ||
| color: $main-color; |
There was a problem hiding this comment.
The variable $main-color is used here, but it's not defined within this file. Ensure that $main-color is defined in a global variables file or imported correctly.
| text-transform: uppercase; | ||
| font-size: 12px; | ||
| line-height: 14px; | ||
| color: $main-color; |
There was a problem hiding this comment.
The variable $main-color is used here, but it's not defined within this file. Ensure that $main-color is defined in a global variables file or imported correctly.
| color: $main-color; | ||
| align-content: center; | ||
| text-decoration: none; | ||
| transition: color $transition-time; |
There was a problem hiding this comment.
The variable $transition-time is used here, but it's not defined within this file. Ensure that $transition-time is defined in a global variables file or imported correctly.
| transition: color $transition-time; | ||
|
|
||
| &:hover { | ||
| color: $blue-color; |
There was a problem hiding this comment.
The variable $blue-color is used here, but it's not defined within this file. Ensure that $blue-color is defined in a global variables file or imported correctly.
| } | ||
|
|
||
| &.is-active { | ||
| color: $blue-color; |
There was a problem hiding this comment.
The variable $blue-color is used here, but it's not defined within this file. Ensure that $blue-color is defined in a global variables file or imported correctly.
|
|
||
| &::after { | ||
| content: ''; | ||
| background-color: $blue-color; |
There was a problem hiding this comment.
The variable $blue-color is used here, but it's not defined within this file. Ensure that $blue-color is defined in a global variables file or imported correctly.
