My Solution for Product preview card component

👾Hello @elliottkan, congratulations for your first solution! 👋 Welcome to the Frontend Mentor Coding Community!

👏 Great start and great first solution! You’ve done really good work here putting everything together, I’ve some suggestions you can consider applying to your code:

1.You did a good work putting everything together in this challenge, something you can do to improve the image that needs to change between mobile and desktop is to use <picture> instead of <img> wrapped in a div. You can manage both images inside the <picture> tag and use the html to code to set when the images should change setting the device max-width depending of the device (phone / computer) Here’s a guide about how to use picture: https://www.w3schools.com/tags/tag_picture.asp

2.The box-shadow is a bit too evident, this is due the opacity and blur. The secret to create a perfect and smooth shadow is to have low values for opacity and increase blur try this value instead: box-shadow: 12px 7px 20px 6px rgb(57 75 84 / 8%);

If you’re not familiar to box-shadow you can use this site to create the shadow design and then just drop the code into the CSS: https://html-css-js.com/css/generator/box-shadow/

✌️ I hope this helps you and happy coding!

Hi! Congratulations for your first challenge! After taking a look at your code it seems that you didn't import properly the fonts that you need, that's why your solution doesn't match the design, to fix it you only need to paste this line in the head of your main CSS:

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,[email protected],700&family=Montserrat:wght@500;700&display=swap');

Hope that it helps!