This challenge is not perfect and still needs some improvements, but the result so far is very nice, I will improve the responsiveness and the functioning of the ranking, but in general, I liked the first result.
Great job, well done! Just adjust the borders and width of the card. In its mobile version, it appears too large, and some borders are not clearly defined. I recommend using variables for frequently repeated styles, such as colors. The default height is automatic, but if you want to adjust it, you can use the "aspect-ratio" property. Regarding the card's width, I suggest using relative width with absolute min-width and max-width values. Lastly, avoid using the "!important" flag; it's considered bad practice. I have never encountered a situation where its use is justified. Best regards.
Feedback is greatly appreciated, so that I can continue to improving my skills 💕
What did you find challenging? Well, I'm not an expert, but I hope to help you a bit. From what I can see, you didn't adjust the font size correctly. When hovering over the cards, they grow too much, and I think the animation is a bit long. Make sure the cards have the same size. You can use the CSS property "aspect-ratio" or manually set the width and height. The theme color change seems to take too long. I'm not sure if it's due to JavaScript or an HTML/CSS issue. In the mobile version, the images overflow, and the title next to the header is too large. Apart from that, everything looks good. Great job! Congratulations, bro.
What did you find difficult while building the project?
R: the position of the component
Which areas of your code are you unsure of? R: the mobile resolution
What do you mean by "mobile resolution"? Could you please clarify?
I wasn't able to get the hover over the main image to work. Hope someone can teach me how I could integrate this feature into my code. Thanks.
You can achieve this using CSS pseudo-elements, such as "after" or "before," which have a display property of "block" or "flex." When hovering over the image, the pseudo-element should be visible, and when not hovering, it should have a display property of "none." Alternatively, you can also use other elements like "img" or "div," and the steps would remain the same.
