create product card

[Roksolana14]

• DEMO LINK

• TEST REPORT LINK

• there 2 BEM blocks card and stars each in their own file

• SCSS Nesting is used for elements, modifiers and pseudo-classes

• SCSS Variables are used for main values and placed in a separate file

• all stars--N modifiers work as expected (Highlight first N stars)

• Code follows all the [Code Style Rules ❗️]

[mateacademy-ai-mentor]

Thank you for your hard work on this project! 😊 There are a few critical issues that need to be addressed before we can approve the pull request. The most important ones are:

1. BEM Blocks: The task requires separate files for the card and stars BEM blocks, which is not currently implemented.
2. SCSS Variables: SCSS variables should be placed in a separate file, which is missing.
3. SCSS Compilation: The stylesheet link is pointing to an SCSS file instead of a compiled CSS file. Please ensure the SCSS is compiled and linked correctly.
4. Class Name Typo: There's a typo in the class name card-price__velue, which should be card-price__value.

Please address these issues to meet the core requirements of the task. Once these are resolved, your code will be in great shape! Keep up the great work! 🚀

✨ 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.

[mateacademy-ai-mentor]

The stylesheet link is pointing to an SCSS file (index.scss). SCSS files need to be compiled to CSS before they can be used in an HTML document. Ensure that the SCSS is compiled to a CSS file and link to that CSS file instead.

[mateacademy-ai-mentor]

There is a typo in the class name card-price__velue. It should be card-price__value.

[mateacademy-ai-mentor]

There is a typo in the class name &__velue. It should be &__value to match the corrected class name in the HTML file.

[mateacademy-ai-mentor]

Great job on addressing the previous issues and aligning your code with the task requirements! 🎉 The BEM blocks for card and stars are now correctly separated into their respective SCSS files, and the SCSS variables are organized in a dedicated variables.scss file. The SCSS files are properly linked in the HTML using the Parcel bundler, and the class name typo has been fixed.

However, there are a few areas for improvement:

• Consider defining the color #060b35 as an SCSS variable in the variables.scss file for consistency.
• Ensure that SCSS variables such as $button-text-color, $background-button-color, $second-text-color, $main-text-color, and $border-color are defined in the variables.scss file.
• Verify that the stars block is correctly separated into its own BEM block file and that the HTML structure reflects this separation.

These adjustments will enhance the maintainability and readability of your code. Keep up the great work, and continue to refine your skills! 🚀

✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨

[mateacademy-ai-mentor]

The stars block should be separated into its own BEM block file as per the task requirements. Ensure that the HTML structure reflects this separation.

[mateacademy-ai-mentor]

Ensure that the SCSS variable $border-color is defined in a separate variables file as per the task requirements.

[mateacademy-ai-mentor]

Ensure that the SCSS variable $main-text-color is defined in a separate variables file as per the task requirements.

[mateacademy-ai-mentor]

Ensure that the SCSS variable $second-text-color is defined in a separate variables file as per the task requirements.

[mateacademy-ai-mentor]

Ensure that the SCSS variables $button-text-color and $background-button-color are defined in a separate variables file as per the task requirements.

[mateacademy-ai-mentor]

Consider defining the color #060b35 as an SCSS variable in the separate variables file to maintain consistency and ease of maintenance.