Product preview card component (Modificado según recomendaciones)

Hola muchas gracias, me funciono el fragmento de código, estaba observando el cambio de imagenes en el navegador en la parte de red, asumo que la carga es mas optima.

<div class="card-img"> <picture> <source media="(max-width:799px)" srcset="./images/image-product-mobile.jpg"> <img src="./images/image-product-desktop.jpg" alt="img product"> </picture> </div>

Another tip, your repository on github has two branches:

• main
• master (used to be the default, but now github has changed it to main, but git (on your local machine) remains master).

You can work on master, or any other, but to post the project you must switch to main, in terminal you can change the branch with git branch -m main.

To change the default in your git, so you don't have to change it in every project, you can do it with git config --global init.defaultBranch main` in your terminal.

Redme should be in the root of the project, along with index.html, and the images, styles folders

If you want to see my repository to get an idea: https://github.com/Jorggyh/product-preview-card-component

Hello, good work!

One tip: The project should have two images, this one for the mobile version, and another higher one for the desktop version, you can add both with the picture tag inside the html, or by css with background-image.

Try this, remove your img and put this in place:

<picture>
    <source media='(max-width: 799px)' srcset='images/image-product-mobile.jpg' type='image/jpg'>
    <img alt=' ' images/image-product-desktop.jpg'>
</picture>

Tell me later if it worked.