Develop #4792
Develop #4792
Conversation
There was a problem hiding this comment.
Great job! 🎉 Your SCSS files are well-structured and follow best practices. Just make sure all paths and variables are correctly defined to maintain consistency. Keep up the excellent work!
✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨
| <li class="nav__item"> | ||
| <a | ||
| href="#" | ||
| data-qa="nav-hover" |
There was a problem hiding this comment.
The 'data-qa' attribute for the fourth navigation link is correctly set to 'nav-hover' as per the task requirements.
| <main class="main"> | ||
| <div | ||
| class="card" | ||
| data-qa="card" |
There was a problem hiding this comment.
The 'data-qa' attribute for the first card is correctly set to 'card' as per the task requirements.
|
|
||
| <button | ||
| class="card__button" | ||
| data-qa="card-hover" |
There was a problem hiding this comment.
The 'data-qa' attribute for the 'Buy' button inside the first card is correctly set to 'card-hover' as per the task requirements.
| font-size: 12px; | ||
| font-weight: 500; | ||
| line-height: 18px; | ||
| color: $main-text-color; |
There was a problem hiding this comment.
Ensure that the variable '$main-text-color' is defined in your variables file. This is important for maintaining consistency across your styles.
| width: 98px; | ||
| height: 14px; | ||
| margin: 0 0 16px; | ||
| color: $secondary-text-color; |
There was a problem hiding this comment.
Ensure that the variable '$secondary-text-color' is defined in your variables file. This is important for maintaining consistency across your styles.
| padding: 50px 40px; | ||
| display: grid; | ||
|
|
||
| --column-count: 4; |
There was a problem hiding this comment.
The CSS variable '--column-count' is correctly used to manage the number of columns in the grid layout, which aligns with the task requirement for responsive design.
|
|
||
| --column-count: 4; | ||
|
|
||
| grid-template-columns: repeat(var(--column-count), 200px); |
There was a problem hiding this comment.
The grid-template-columns property is correctly set to use the '--column-count' variable, ensuring the layout adapts to different screen sizes as specified in the task.
| --column-count: 4; | ||
|
|
||
| grid-template-columns: repeat(var(--column-count), 200px); | ||
| gap: 46px 48px; |
There was a problem hiding this comment.
The gap between grid items is set to '46px 48px', which matches the task requirement for horizontal and vertical gaps.
| @media (min-width: 300px) { | ||
| .main { | ||
| --column-count: 1; | ||
| } | ||
| } | ||
|
|
||
| @media (min-width: 488px) { | ||
| .main { | ||
| --column-count: 2; | ||
| } | ||
| } | ||
|
|
||
| @media (min-width: 768px) { | ||
| .main { | ||
| --column-count: 3; | ||
| } | ||
| } | ||
|
|
||
| @media (min-width: 1024px) { | ||
| .main { | ||
| --column-count: 4; | ||
| } | ||
| } |
There was a problem hiding this comment.
The media queries are correctly implemented to adjust the '--column-count' variable based on screen width, ensuring the grid layout adapts to different screen sizes as required.
| &:nth-child(-n + 4) { | ||
| background-image: url(../images/star-active.svg); | ||
| } |
There was a problem hiding this comment.
The use of ':nth-child(-n + 4)' selector is correct for applying the active star background to the first four stars. Ensure the path to 'star-active.svg' is correct and the image is available in the specified directory.
DEMO LINK
TEST REPORT LINK
All component follow BEM and use SCSS
repaeted sizes and special colors are put to variables
Grid is used for the columns
cards are shown in 1, 2, 3 or 4 columns based on screen resolution
All changes on
:hoverare smoothCode follows all the Code Style Rules ❗️