layout_product-cards #5014
layout_product-cards #5014
Conversation
SerhiiSevriuhin
commented
Nov 26, 2024
SerhiiSevriuhin
commented
- DEMO LINK
- TEST REPORT LINK
There was a problem hiding this comment.
Thank you for your hard work on this pull request! 🌟 While you've done a great job meeting many of the task requirements, there are a few critical issues that need to be addressed before we can approve it:
-
SCSS Compilation: The stylesheet link in your HTML file is pointing to an SCSS file. Browsers cannot interpret SCSS directly, so please ensure that the SCSS is compiled to CSS and update the link accordingly.
-
Variable Definitions: There are multiple instances where SCSS variables like
$secondary-color,$blue-color,$white-color, and$main-colorare used. Please ensure these are defined in yourvariables.scssfile to avoid compilation errors. -
Padding Property: The padding property is set to 'auto', which is not valid. Please specify padding in appropriate units like px, em, or %.
-
Image and Background Paths: Ensure that all image paths, such as those for background images and the
srcattribute, are correct relative to the compiled CSS and HTML files. Incorrect paths can lead to images not displaying.
Once these issues are resolved, your code will be in great shape! Keep up the great work, and don't hesitate to reach out if you need any help. 😊
✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨
🔄 Fix the issues, commit the changes, and then re-request my review using the Re-request review button in the Reviewers tab.
| <link | ||
| href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" | ||
| rel="stylesheet" | ||
| /> | ||
| <link | ||
| rel="stylesheet" | ||
| href="./styles/index.scss" |
There was a problem hiding this comment.
The href attribute is pointing to an SCSS file. Browsers cannot directly interpret SCSS files; they need to be compiled into CSS first. Ensure that the SCSS is compiled to CSS and the link is updated accordingly.
| data-qa="card" | ||
| > | ||
| <img | ||
| src="../src/images/imac.jpeg" |
There was a problem hiding this comment.
The src attribute for the image uses a relative path ('../src/images/imac.jpeg'). Ensure that this path is correct relative to the location of the HTML file, or consider using an absolute path if the image is not displaying correctly.
| @@ -0,0 +1,85 @@ | |||
| .card { | |||
| box-sizing: border-box; | |||
| background-color: $white-color; | |||
There was a problem hiding this comment.
The variable $white-color is used here. Ensure that this variable is defined in your SCSS files. If it's not defined, the SCSS compilation will fail.
| } | ||
|
|
||
| &__name { | ||
| color: $main-color; |
There was a problem hiding this comment.
The variable $main-color is used here. Ensure that this variable is defined in your SCSS files. If it's not defined, the SCSS compilation will fail.
| } | ||
|
|
||
| &__product-code { | ||
| color: $secondary-color; |
There was a problem hiding this comment.
The variable $secondary-color is used here. Ensure that this variable is defined in your SCSS files. If it's not defined, the SCSS compilation will fail.
| &:hover { | ||
| border: 1px solid $blue-color; | ||
| background-color: $white-color; | ||
| color: $blue-color; |
There was a problem hiding this comment.
The variable $blue-color is used here. Ensure that this variable is defined in your SCSS files. If it's not defined, the SCSS compilation will fail.
| } | ||
|
|
||
| html { | ||
| color: $secondary-color; |
There was a problem hiding this comment.
The variable $secondary-color is used here. Ensure that this variable is defined in your SCSS files. If it's not defined, the SCSS compilation will fail.
| display: flex; | ||
|
|
||
| &__stars { | ||
| background-image: url(../images/star.svg); |
There was a problem hiding this comment.
The background-image URL uses a relative path ('../images/star.svg'). Ensure that this path is correct relative to the location of the compiled CSS file, or consider using an absolute path if the image is not displaying correctly.
| } | ||
|
|
||
| .stars :nth-child(-n + 4) { | ||
| background-image: url(../images/star-active.svg); |
There was a problem hiding this comment.
The background-image URL uses a relative path ('../images/star-active.svg'). Ensure that this path is correct relative to the location of the compiled CSS file, or consider using an absolute path if the image is not displaying correctly.
| body { | ||
| margin: 0; | ||
| } | ||
| @import './utils/variables'; |
There was a problem hiding this comment.
Ensure that the './utils/variables' file exists and contains definitions for all the variables used in the imported SCSS files, such as $white-color, $main-color, $secondary-color, and $blue-color. Missing variable definitions will cause compilation errors.
