Hello @samoina,
Congratulations on completing this challenge! You've done a fantastic job. The image overlay on hover makes this task more intricate than it initially seems.
I noticed you submitted your solution a while ago without receiving any feedback. It's unfortunate to see a decline in the number of people offering feedback and advice in this forum.
Turning to your code, a minor discrepancy caught my eye: the child elements within .main__avatar aren't flush with the left edge of the card, unlike the other elements. Since you've already configured it with display: flex, rectifying this is straightforward. Simply specify width: 100% to ensure this div mirrors the size of its parent component, excluding the padding.
Additionally, there seems to be a tad too much padding on the card. Reducing the padding should bring it closer to the intended design:
.main {
padding: 1.2rem;
}
Something more to think about - CSS Variables Should Convey Purpose:
Adopting meaningful names for CSS variables not only adds code clarity but also fosters design flexibility and better collaboration. Naming conventions based on appearance, like --main--very-dark-blue, don't convey their intended application or adjust gracefully with design alterations. Context-based naming, for example, --primary-background, offers more intuitive understanding and provides flexibility in Theming if you decide to change your design theme later, and the primary background color is updated.
I, too, often overlook this aspect, but it's a valuable point to bear in mind for the future.
I hope you find these suggestions helpful! Let me know if you have any questions or if there's anything else I can assist with. Keep up the great work ! 🚀🌟😊
