I had some issue with the scaling of the font so i added another breakpoint, and i also modified the breakpoint for mobile use. Was that a good thing to do ?
Also how could I have made the html code cleaner (most importantly in the rating where i copied the star icon 5 times) ?
For the scaling of the font, you could have used the clamp function to achieve that by specifying the max and min font-size. This function is new to me and I'm yet to use it. However, there is nothing wrong with setting different font-sizes at the various break-points.
Moreover, I don't know any other way of displaying the five stars without repeating or copying and pasting the same line 5 times. This is HTML so you can't use js directly in here unless you're implementing this solution with a template engine or a library like React. A cleaner way around I think is to group all the stars into one SVG🧐.
Lastly, I realized that the footer info showed up at the top of the cards rather than the bottom when viewing on mobile. I think you should take a look at that. Also, there was no SVG background image in your solution as well.
But all the same I like how close your solution is to the design. Nice work done👏!
You're almost there. You can work on the images within the card so that they don't overflow their boundaries. Also, you will need to check your white-spacing especially at the header section where you have a heading and a paragraph of text.
