Responsive landing page using media queries

Hi @sam-mantey 👋, good job for completing this challenge! 🎉

You can use mobile-first approach because you would already have a responsive page from the beginning, in my opinion it is easier, congratulations for using it..

Tips:

• You can use <picture> tag when you need to change the image on different viewports, using this tag will prevent the browser from loading both images, saving bandwidth. More information here

Example:

<picture>
   <source media="(max-width: 625px)" srcset="./images/image-product-mobile.jpg">
   <img src="./images/image-product-desktop.jpg" alt="your_alt_text" class="product-img">
</picture>

• You could use the <del> tag to display the old price:

<del class="old-price">
   <span class="sr-only">Old price: </span>$169.99
</del>

Note that I added the <span> with the sr-only class to the del element, this will provide more information about what your old price is about.

The sr-only class is a class that you can add to hide content visually but is only visible to screen-readers:

.sr-only {
  clip: rect(0 0 0 0); 
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap; 
  width: 1px;
}

More information here

I hope those tips will help you.

Good Job and happy coding !