Responsive landing page using Flex

Hey there! 👋 Here are some tips to help improve your code:

• Your whole content is supposed to be wrapped in a main html element

More Info:📚https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main#:~:text=The%20HTML%20element%20represents,central%20functionality%20of%20an%20application.

• The image’s doesn’t have an alt tag description, this needs to be improved upon ⚠️. It improves accessibility for screen readers

More Info:📚https://www.w3.org/WAI/tutorials/images/

• The HTML <picture> element allows you to display different pictures for different devices or screen sizes. ⚠️. The picture element will facilitate this.

Here is an example of how it works: EXAMPLE

Syntax:
  <picture>
    <source media="(min-width: )" srcset="">
    <img src="" alt="">
  </picture> 

More Info:📚 https://www.w3schools.com/html/html_images_picture.asp

• The old price (169.99) is not being properly announced to screen readers. To fix this, you are going to wrap the the price in a del element and inside it you will add a span element with an sr-only class that will state something like “The previous price was…” and use CSS to make it only visible to screen readers.

More Info:📚https://developer.mozilla.org/en-US/docs/Web/HTML/Element

• The only heading in this component, is the name of the perfume; “Gabrielle Essence Eau De Parfum” . The rest of the text should be wrapped in a paragraph element.

• Your "button" was created with the incorrect element. It should be created using the button element. So that when the user clicks on the button (with the help of JS) it should add the product to the cart.

More Info:📚 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button

Happy Coding!

First of all give some padding at mobile size by using @media query , such as: @media screen and (max-width:768px){ };

then make the previous radius 0 and set the new radius as you wanted. Make Sure you give some responsive width like width: min(1440px,100% - "subtract the padding that u want here"); e,g --container-padding:2rem; min(1440px,100% -var(--container-padding));

By using above method u can easily target the mobile view . for more information visit: https://github.com/Samcode001/product-preview-card

for same card preview website.