Product preview card component

Hey there! 🙋🏽‍♂️

Congrats on finishing the challenge! ✅

Your project looks awesome!

Here's a tip that might interest you:

📌 When you have different versions of the same image, consider using the <picture> tag.

This will help ensure the correct image loads on the user's device, saving bandwidth and boosting performance.

Example:

<picture>
    <source media="(min-width: 768px)" srcset="{desktop image path here}">
    <img src="{mobile image path here}" alt="{alternative text here}">
</picture>

Hope you find this useful!

Great job overall!

@OriginalMistake

Hiya! 👋

Congratulations on your solution, it looks very close to the design! I can tell you put a lot of effort into it.

Things you could improve ✍️

• Try experimenting with CSS variables, they help you make your CSS values more reusable across your code.

• I suggest using clear descriptive CSS classes like .card, .card-title and .card-description.

• Try using semantic HTML elements like main, section and article.

• Try using using relative CSS units like rem and em they make your layout more adaptable.

• Try looking into the picture element to solve your problem. It allows you to provide different images for specific viewports.

• You don't need to use position: absolute on your images, you can turn your card in a flex or grid container and position your elements that way.

I hope you find my feedback helpful! 🌟

Let me know if you have more questions and I'll do my best to answer them. 🙋‍♂️

Happy coding! 😎