Responsive Product Card with HTML and CSS

Hi

I'm afraid this has some very serious accessibility issues in it due to the html. The good news is they'll be easy to fix.

Before anything else, I recommend you read my post about planning html using this challenge as a case study

You must change these things

• all content should be contained within landmarks. The attribution should be in a footer outside of main.
• remove all the non breaking spaces you've added to perfume. That's not how you increase letter spacing.
• perfume is not a heading its a paragraph. It's extremely important to use headings appropriately and in the correct order.
• the heading on this card must not be a h1. Think about the context of where this component would be used on a real Web page. It would never act as a page title so cannot be a h1.
• the price is not a heading. It's a paragraph (or span inside a paragraph containing both prices)
•   is not valid. But spacing should be done with margin or gap in css not by changing the html anyway.
• the card must not have a height or width. Instead give it a max width in rem only. Let the browser do it's job and decide what height is needed based on the content.
• similar with the button. Never limit the height of elements that contain text. Use padding not height on that button.

More general guidance you'll need for every project

• get into the habit of including a full modern css reset at the start of the styles in every project. Andy Bell or Josh Comeau both have good ones you can look up and use.
• style mobile first. That means the mobile styles should be the default. Then override specific properties that need to change inside a min width media query.
• media queries must be defined in rem or em not px.
• the border radius on components like this can be set on the component along with overflow hidden to crop out the overflowing child corners.
• use the object fit property on the image so it doesn't get distorted.
• the line breaks in this look odd and I think it's because you've changed the whitespace property to pre-line. It's rare you'll ever need that. Let lines break naturally unless there is a good reason to change the behaviour.
• don't style on IDs. That's not what they are for, is unexpected and drastically increases css specificity.
• set font size in rem. Don't rely on key words which can differ between browsers.