Product Preview Card Component using Flex, CSS Variables & ARIA

Hello there 👋. Good job on completing the challenge !

I have some suggestions about your code that might interest you.

ARIA 🔊:

• div elements are not interactive, so they do not require a label, and they do not work on div elements; if you use a screen reader, you will notice that no aria-label with the div, section, or main tags is announced.

• The aria-label attributes are not required for paragraphs because the text content of the p and h1 elements is already accessible to screen readers. When the aria-label attribute is applied to a paragraph element, screen reader users will hear the text specified in the attribute's value rather than the text of the paragraph.

• aria-label="Add to cart": Don't repeat what the cart button says in the HTML; if you change the text of the button, it's very likely that the aria-label attribute will be forgotten to update.

• One component is not a complete page, there should not be a <header> and <footer> in the solution.

I hope you find it useful! 😄

Happy coding!

Fixed the left and right side height mismatch that was likely caused by the way flexbox handles paddings and margins behind the scenes, by centering using body instead:

! Don't use this to center the card:

  .product-container {
    display: flex;
    justify-content: center;
    align-items: center;

    min-height: 100vh;
    margin-inline: auto;
  }

! Use this instead:

body {
   min-height: 100vh;
   align-items: center;
   justify-content: center;
}