add solution

[Vl-Tsr]

• DEMO LINK
• TEST REPORT LINK

[mateacademy-ai-mentor]

Hey there! It looks like we need to make a few adjustments regarding the way we're styling elements. Specifically, we should avoid styling directly using tag names and instead use classes. This is a best practice that helps keep our CSS maintainable and our HTML semantic. Also, let's make sure that our margins are consistent to avoid any layout issues, and we should tidy up our HTML formatting for better readability. Keep up the great work, and with these changes, your code will be even more solid! 👍💻

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

[Vl-Tsr]

add solution

[vadiimvooo]

Almost done, just one suggestion.

[vadiimvooo]

It can be simplified:

Suggested change

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

[etojeDenys]

lgtm