Product Preview Card Component

👾Hello @Majid-Arab, Congratulations on completing this challenge!

You've uploaded your solution using codepen and this is nice. But this makes hard to us to analyze your code since this creates a lots of accessibility issuesif you look the solution report panel you'll see that you've ACCESSIBILITY ISSUES 72 and HTML ISSUES 93. This error are not created due your solution, its due the code pen because the report comes from your page.

My advice for you is to use vercel.com or netlify.com that are really easier platforms for live sites and totally user-friendly, in a matter of 5min your live site is online. All you need to do is to connect the Github account, import the repository and deploy it. Really fast.

Fixing that you've to update the solution with the new link and we'll be able to see your live site and help you.

✌️ I hope this helps you and happy coding!

Good job for you first challenge. I just have some remarks to help you make the solution more like the desired one: You need to deploy your website so that we can see it live, you can use github pages for example. Also be careful on the font, the paragraphs should have their own font, different form the header tags. You don't need to use a dive with class of main in this case, you just have to use the <main> tag instead, it's better for accessibility. At a certain break point, the width of the infoBox starts shrinking, this is due to the width being in percentages, it should remain the same until it actually reaches the desired breakpoint, let's say of 700px so that you change the flex direction without having to change the width before. A last remark is that the button should have a darker color on hover and the property cursor of value pointer.