Responsive Product Card (HTML & CSS)

👋 Hey, Jonas! I have a few suggestions for your project:

Use <picture> for Multiple Images

<picture class="image">
  <source srcset="images/desktop.jpg" media="(min-width: 768px)">
  <img src="images/mobile.jpg" alt="Product image">
</picture>

You no longer need to use display: none; the browser will take care of which image to display.

Use <footer> Instead of <header> for .attribution

Use <section> for Grouping Related Content For example, the .information div could be wrapped in a <section> element.

<section class="information">
...
</section>

Use Classes (.class) Instead of IDs (#id) for Styling Use IDs when working with JavaScript or accessibility.

More info:

• MDN HTML Element Picture

I hope this helps you! 😊