add layout-catalog#6241
Conversation
Vanders1989
commented
May 29, 2026
Vanders1989
commented
- DEMO LINK
- TEST REPORT LINK
mateacademy-ai-mentor
left a comment
mateacademy-ai-mentor
left a comment
There was a problem hiding this comment.
Review Summary
Your implementation has three critical blockers that prevent it from meeting the task requirements: 1. Class mismatch blocking grid layout: Your HTML uses class="cards" on the container, but _catalog.scss defines the responsive grid on .catalog class. This means the grid with media queries is never applied, and cards use flexbox instead. [CHECKLIST ITEM #3] 2. Missing card hover scale effect: The .card:hover rule with transform: scale(1.2) is completely absent from all SCSS files. The card must increase by 20% on hover as specified in the requirements. 3. Missing card title color change: The .card:hover .card__title rule with color: #34568b is completely missing. The title text must change color on hover. Medium priority issues: - Colors like #f3f3f3 and #fff should use variables from _variables.scss instead of hardcoded values - Transition time 300ms is hardcoded instead of using $transition-time variable. The core functionality (grid layout and hover effects) is not implemented. These are explicit requirements from the checklist, not minor style preferences. Once you fix the class mismatch and add the hover rules, the implementation should meet the requirements.
✨ Please rate this review in the Platform's notification center1. I will be grateful for your feedback! ✨
Important
Fix the issues, commit the changes, and then re-request my review using the Re-request review button2 in the Reviewers tab.
Tip
If you have any comments about this review, please leave a message in the Add a comment section below and mention me with the @mateacademy-ai-mentor tag3.
I will read your message during my next review of your pull request. Please do not reply directly to my comments, as that feature is not supported yet.
Caution
Do not close the pull request until the review is complete. Closing it early can lead to unexpected behavior and disrupt the review process.
Footnotes
| .cards__card:nth-last-child(-n + 4) { | ||
| margin-bottom: 0; | ||
| } | ||
|
|
There was a problem hiding this comment.
Missing transition property on .card - need to add transition: transform 0.3s; for smooth scale effect.
| border: 1px solid #f3f3f3; | ||
| border-radius: 5px; | ||
| padding: 32px 16px 16px; | ||
| background: #fff; |
There was a problem hiding this comment.
Missing .card:hover rule - need to add transform: scale(1.2); to increase card by 20 percent as required.
| font-size: 12px; | ||
| line-height: 18px; | ||
| font-weight: 500; | ||
| color: var(--text-accent-color); |
There was a problem hiding this comment.
Missing .card:hover .card__title rule - need to add color: $title-hover-color; (or #34568b) to change title text color on hover as required by the task.
| .catalog { | ||
| display: grid; |
There was a problem hiding this comment.
Missing grid layout for cards - checklist item #3 requires using grid for columns. Currently using flexbox (display: flex; flex-wrap: wrap;) which doesn't match the requirement.
| .catalog { | ||
| display: grid; | ||
| grid-template-columns: repeat(1, $card-width); |
There was a problem hiding this comment.
CSS variables are defined in _header.scss but should be in _variables.scss per checklist item #2. Variables should be centralized.
| > | ||
| Photo | ||
| </a> | ||
| </li> |
There was a problem hiding this comment.
Use variable $transition-time instead of hardcoded value.
| </a> | ||
| </li> | ||
|
|
||
| <li class="nav__item"> |
There was a problem hiding this comment.
Use variable $white-color instead of hardcoded #fff.
| href="#" | ||
| class="nav__link is-active" | ||
| > | ||
| Apple |
There was a problem hiding this comment.
Add transition to card title: transition: color $transition-time; so the color change on hover is smooth.
| @import './variables'; | ||
| @import './header'; | ||
| @import './stars'; |
There was a problem hiding this comment.
CSS variables are defined in html {} selector but should use SCSS variables from _variables.scss. Variables defined as CSS custom properties in html {} are not available to _catalog.scss which uses SCSS $variables.
| .stars { | ||
| display: flex; | ||
| } | ||
|
|
||
| .stars__star { | ||
| width: 16px; | ||
| height: 16px; | ||
| margin-right: 4px; |
There was a problem hiding this comment.
The .cards selector uses flexbox but should be replaced with the .catalog grid layout. Either remove the flexbox rules from .cards or rename the HTML class to match the grid styles.
mateacademy-ai-mentor
left a comment
mateacademy-ai-mentor
left a comment
There was a problem hiding this comment.
Sorry, the pull request review was unsuccessful for the following reasons:
Warning
No changes were made in the pull request since the last review. Please make sure that you have added files to the pull request and committed the changes.
[CODE: NCM]
If the issue is within your control, please address it.
The next review attempt will automatically launch in about 1 hour.
If you believe this is an error or need assistance, please contact the support team.
mateacademy-ai-mentor
left a comment
mateacademy-ai-mentor
left a comment
There was a problem hiding this comment.
Review Summary
Your implementation successfully meets all task requirements. The grid layout with responsive breakpoints, card hover effects, data-qa attributes, semantic HTML, BEM naming, and SCSS variables are all correctly implemented and functional.
One cleanup item to address: There's unused ".cards" block (lines 1-21) in _card.scss with flexbox layout that never gets applied—your HTML uses class="catalog" which pulls grid styles from _catalog.scss. This dead code creates confusion and should be removed to keep the codebase clean.
Once you remove that unused ".cards" block, the implementation will be complete and clean. Great work on getting all the core functionality working correctly!
✨ Please rate this review in the Platform's notification center1. I will be grateful for your feedback! ✨
Footnotes
| .cards { | ||
| display: flex; | ||
| flex-wrap: wrap; | ||
|
|
||
| box-sizing: border-box; | ||
| width: 1024px; | ||
| margin: 0 auto; | ||
| padding: 50px 40px; | ||
|
|
||
| &__card { | ||
| margin-right: 48px; | ||
| margin-bottom: 46px; | ||
| } | ||
|
|
||
| &__card:nth-child(4n) { | ||
| margin-right: 0; | ||
| } | ||
|
|
||
| &__card:nth-last-child(-n + 4) { | ||
| margin-bottom: 0; | ||
| } |
There was a problem hiding this comment.
This .cards class is dead code - it's never used in the HTML (the container uses class="catalog"). Its flexbox layout rules conflict with the grid layout defined in _catalog.scss. Since checklist item #3 requires using grid for columns, and the .catalog class correctly implements grid, this .cards block should be removed to avoid confusion and code redundancy.
2 participants
