Product preview card

Hi, good job!

A few suggestions:

HTML:

• "Perfume" is a <p>, and should be written with normal capitalization. Style it in CSS using text-transform: uppercase.

• The 2 different prices might confuse a screen reader since the old price is indicated using a visual cue. To make it clearer, I would add <span class="visually-hidden">Old price: </span>, with the following styles applied:

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

Here is an article that explains what each of the properties does.

• Since the cart icon is purely decorative, the alt text should be empty:alt="". The button gets its accessible name from the "Add to cart" text.

CSS:

• Including a CSS Reset at the top is good practice.

• I recommend adding a bit of padding, for example 16px, on the body, to ensure the card doesn't touch the edges on small screens.

• On the body, change height to min-height: 100svh - this way, the content will not get cut off if it grows beneath the viewport.

• On the button, it's recommended to use border: transparent instead of border: none.

• I would set font-size in rem instead of em. Remember, setting font-size in px causes major accessibility issues.

• Media queries should be in em or rem.

• Remember, inside a media query you don't need to repeat already set declarations. Thus, you can remove display: flex and justify-content: center on body, as well as display: flex on the card.

good