Preview card component with HTML CSS Bootstrap and Javascript

Hello Utku, congrats on finishing the challenge!

To answer your question 2 and 3, yes there is a better approach without JS that can be quite better.

You can get the same results using html, instead of using an img tag you can use 2 <source> tags and put the mobile version on one and the desktop in the other, inside the source tag you can specify the width, just like you would do in media querys, also remember that this tags have to be wrapped in a <picture></picture> tag.

Hope my feedback helps you in future projects, if you have any questions about implementing this don't hesitate to ask, good job getting the challenge done!

Hello Utku Kaan Arasan! in the folder called "images" you have an image that is for the mobile version "image-product-mobile.jpg"

to center the element I would change the body looking like this:

body{
    background-color: var(--primary-cream);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Hope it helps, great job!