Responsive product preview card component with only html and css

Hey DlnosMpo, Well done! your solution looks perfect but there are some improvement which could be made

1. For aligning the whole content to the center you can replace .container{ width: 600px; height: 450px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, 50%);} with body{ min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; } and you can see content is well aligned to center of the page.

2. You can use <picture> tag when you want to show different images at different screen sizes and this will not require setting display: hidden or display: block property to the images.

hope this helps...

Hello, DinosMpo. Congratulations for your work. From what I can see, the HTML tag tag is missing the alt text. This text is a clear description of the image that helps improve the accessibility of the web page. Here is some useful information so you can improve this aspect of the code: https://www.w3schools.com/tags/att_img_alt.asp I hope this has been helpful. Greetings.