add stars box

[lucasschumann]

• DEMO LINK
• TEST REPORT LINK
• [x]Yellow stars are added with container modifier + pseudo-selector (NO extra classes)
• [x]Each BEM block has its own separate file
• [x]All Typical Mistakes from BEM lesson theory are checked.
• [x]Code follows all the Code Style Rules ❗️

[mateacademy-ai-mentor]

---

Thank you for your hard work on this pull request! 😊 However, there are a few critical issues that need to be addressed before we can approve it:

1. Active Stars Implementation: The task requires using pseudo-selectors to activate the first N stars, but the current implementation does not follow this requirement. This is crucial for meeting the core task requirements.

2. CSS for Active Stars: The method of setting the background image for active stars is not implemented as intended. Pseudo-selectors should be used instead of directly setting the background image for the entire block.

3. Flexbox Gap Usage: The task specifies not to use the gap property, but the current code does not provide an alternative method for spacing between stars, which is essential for the layout.

4. File Structure and Styling: Each BEM block should have its own file, and styling should be done using classes rather than tag names. These are important for maintaining a scalable and maintainable codebase.

5. HTML and CSS Formatting: Ensure that HTML uses 2 spaces for indentation and correct the background-repeat property value to a valid one.

Please address these issues to align with the task requirements. 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.

[mateacademy-ai-mentor]

The background-repeat property value 200% is incorrect. Valid values are repeat, repeat-x, repeat-y, no-repeat, space, or round. Consider using one of these values to achieve the desired effect.

[mateacademy-ai-mentor]

The .stars--1 class is styled with position: absolute;, but there is no context or parent element with position: relative; or similar to contain it. This may lead to unexpected positioning. Ensure that the parent element is styled appropriately to contain absolutely positioned children.

[mateacademy-ai-mentor]

Sorry, the pull request review was unsuccessful for the following reasons:

Warning

Something went wrong while processing the review.
_{[CODE: 3]}

If the issue is within your control, please address it.
The next review attempt will automatically launch in 1 hour.
If you believe this is an error or need assistance, please contact the support team.

[mateacademy-ai-mentor]

Thank you for your submission! 🎉 Your implementation of the star rating system is a great start and demonstrates a good understanding of the task requirements. However, there are a few areas that need improvement to fully align with the task guidelines:

1. Active Stars Implementation: The task requires using pseudo-selectors to activate the first N stars. Please ensure that your implementation follows this requirement to meet the core task objectives.

2. File Structure and Styling: Each BEM block should have its own file, and styling should be done using classes rather than tag names. This is crucial for maintaining a scalable and maintainable codebase.

3. Flexbox Gap Usage: Although you have used margins for spacing between stars, ensure this approach aligns with the task requirements, as the gap property is not allowed.

By addressing these issues, you'll improve the functionality and maintainability of your code. Keep up the great work, and use this feedback to enhance your skills further! 🚀

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

[mateacademy-ai-mentor]

The task requires using pseudo-selectors to activate the first N stars, but the current implementation does not follow this requirement. Consider using CSS pseudo-selectors to manage the active state of the stars.

[mateacademy-ai-mentor]

The task specifies not to use the gap property, but the current code uses margin for spacing between stars. Ensure this aligns with the task requirements, or consider alternative methods if necessary.

[mateacademy-ai-mentor]

Each BEM block should have its own file according to the task requirements. Consider separating the styles for different blocks into individual files for better maintainability.