Product preview card component

Hello! Nicely done!

• HTML
  • use main and footer for semantics. Change <div class="section"> to <main class="section">, and <div class="attribution"> to <footer class="attribution">.
  • look at the picture element for providing different images to the different viewport widths, plus it has a lot more uses, check it up.
  • don't use id for styling, use only classes.
  • look at providing additional information for people who use screen readers as they will not understand what two prices mean. I'm still learning about accessibility...

Your CSS has some issues, keep learning and you will notice them yourself. Feel free to look at other people's solutions for learning purposes.

Keep coding! Have a great day!

the easiest way will be to display the prices in inline-block, and use margin: auto 0; or you specifically set a margin to help center it, and use media query to control the spacing when it's displayed on mobile. I hope this was helpful @Udy-Johnson10