(Desktop) Product Preview Card Component

Hello there 👋

Congratulations on completing the challenge

I have some tips for you on improving accessibility and semantic coding.

HTML 📰

• avoid using the <span> tag element to display text since it is used mostly to group inline elements. You can replace the <span> tag in <span id="span-title">PERFUME</span> with the <h1> tag, and replace the <h1> in <h1>Gabrielle Essence Eau De Parfum</h1> with and <h2> tag. so you will be having a top-level heading which is <h1> and a second-level heading which is <h2>. which will improve accessibility as well

• Avoid using hyphens or underscores in the alt attribute of the <img> tag. Since it should be humanly readable text. You are most welcome to use space

• use <em>, <strong> or <small> tag dispplay short texts. rather that using <span> tag. i.e <span id="price-1">$149.99</span> and <span id="price-2">$169.99</span>

Learn more about Semantic HTML here

Learn more about Accessibility here

CSS 🌈

• I think you forgot to make it for mobile version. Maybe try doing that with media queries

Nothing to say about your CSS. You have done a great job on utilizing CSS custom variables and relative units 🔥👍

I hope this was useful 😊

HAPPY CODING

Hi Sezimar, Congratulation for you job!

I noted the add to cart button broke the line.

<div class="button"> <button type="submit"> <img src="./images/icon-cart.svg" alt="icon-cart" />Add to cart </button> </div>

You could use <span> Add to cart </span>, then there will be two elements that can be organized with flex.

I hope that I helped you!