Product preview card

Hello Edoardo

You did some great work on this project

However, to make your site more accessible, try using the <main> tag for the <div> that has the class of "card".

Also, you can use the <footer> tag on the <div> with a class of "attribution".

If you do not want to do that, you can as well add a role attribute to the respective <div> tags For example:

For the main content, do this: <div role="main" class="card">

And for the footer, do this: <div role="contentinfo" class="attribution">

To read more about the use and importance of semantic HTML and the role attribute, check these sites:-

Semantic HTML - w3schools

HTML Role Attribute Explained

Once again, You did well on your project.

Keep it up

Hi, a great idea for responsive images is to use the <picture></picture> tag. You can specify multiple images inside one tag, set media queries inside the tag, and when you resize the browser, the correct image will render it's a really cool.

w3Schools has some good information on how to use it, just be sure to set your images to "display: block" in the CSS else you get some weird behaviour but other than it's a great way to handle multiple images like in this challenge.

https://www.w3schools.com/tags/tag_picture.asp

Hope this helps ☺️

You can give flex to the body;

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

So the content will be in the middle of the page

also you can use border-top-left-radius / border-bottom-left-radius for image.

I think you can put the image inside a div container and give the container a border radius... so that you can get the image with rounded corner

Just realised i havent used white for the card...