add solution

[clavigo]

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

[mateacademy-ai-mentor]

Great work on this Pull Request! 👏 There are a few minor issues to keep in mind for next time, such as formatting long attribute values and maintaining consistent indentation. Also, remember to keep an eye out for typos, like the one in the .stars--5 selector. Nevertheless, these are small improvements and don't impact the overall functionality of your code. Keep up the good work! 💻🚀

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

[mateacademy-ai-mentor]

Add empty lines between multiline sibling blocks of HTML to add some 'air' and simplify reading. For example, add an empty line between the closing of one '.stars' block and the opening

of the next one.

[mateacademy-ai-mentor]

Keep your attributes correctly formatted. If the HTML element has long attribute values or a number of attributes is more than 2, start each one on a new line with 2-space indentation relative to the tag. The tag content attribute value is too long and should be broken down into multiple lines.

[mateacademy-ai-mentor]

The use of the * selector is discouraged due to performance reasons. In this case, it is not present, but keep this in mind for future reference.

[mateacademy-ai-mentor]

It's good practice to use classes for styling instead of tag names. However, in this code, you're properly using classes, which is great.

[mateacademy-ai-mentor]

There seems to be a typo in the selector .stars--5 .stars__star:nth-of-type(-n + 6). It should be -n + 5 to match exactly five stars. Please correct it to .stars--5 .stars__star:nth-of-type(-n + 5).