add task solution

[RHerheman]

• DEMO LINK

• TEST REPORT LINK

• 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 job on the functionality! While there are some suggestions for improving your CSS and HTML readability, they are minor and don't impact the core functionality of your code. Keep up the good work and consider these tips for future projects to enhance your code quality! 😊

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

[mateacademy-ai-mentor]

There should be an empty line between multiline sibling blocks of HTML to improve readability. Please add an empty line here.

[mateacademy-ai-mentor]

There should be an empty line between multiline sibling blocks of HTML to improve readability. Please add an empty line here.

[mateacademy-ai-mentor]

There should be an empty line between multiline sibling blocks of HTML to improve readability. Please add an empty line here.

[mateacademy-ai-mentor]

There should be an empty line between multiline sibling blocks of HTML to improve readability. Please add an empty line here.

[mateacademy-ai-mentor]

There should be an empty line between multiline sibling blocks of HTML to improve readability. Please add an empty line here.

[mateacademy-ai-mentor]

Avoid using tag names for styling. Instead of using ':nth-child(1)', consider using a class or another selector that doesn't involve tag names.

[mateacademy-ai-mentor]

Avoid using tag names for styling. Instead of using ':nth-child(-n + 2)', consider using a class or another selector that doesn't involve tag names.

[mateacademy-ai-mentor]

Avoid using tag names for styling. Instead of using ':nth-child(-n + 3)', consider using a class or another selector that doesn't involve tag names.

[mateacademy-ai-mentor]

Avoid using tag names for styling. Instead of using ':nth-child(-n + 4)', consider using a class or another selector that doesn't involve tag names.

[mateacademy-ai-mentor]

Avoid using tag names for styling. Instead of using ':nth-child(-n + 5)', consider using a class or another selector that doesn't involve tag names.

[vadiimvooo]

Good job, but you have to pass all tests. Feel free to ask for help in fe_chat

[vadiimvooo]

Suggested change

	.stars--0 :nth-child(0) {
	background-image: url(images/star-active.svg);
	}
	.stars--1 :nth-child(1) {
	background-image: url(images/star-active.svg);
	}
	.stars--2 :nth-child(-n + 2) {
	background-image: url(images/star-active.svg);
	}
	.stars--3 :nth-child(-n + 3) {
	background-image: url(images/star-active.svg);
	}
	.stars--4 :nth-child(-n + 4) {
	background-image: url(images/star-active.svg);
	}
	.stars--5 :nth-child(-n + 5) {
	background-image: url(images/star-active.svg);
	}
	.stars--0 :nth-child(0),
	.stars--1 :nth-child(1),
	.stars--2 :nth-child(-n + 2),
	.stars--3 :nth-child(-n + 3),
	.stars--4 :nth-child(-n + 4),
	.stars--5 :nth-child(-n + 5) {
	background-image: url(images/star-active.svg);
	}

[vadiimvooo]

use margin instead