Challenge#4-Perfume

Hi Luis, I saw your code and would like to give you some tips:

You use preconnect to import fonts, there is a better way to do this:

In your style.css file put @import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,[email protected],700&family=Montserrat:wght@500;700&display=swap");

@import will get the url that google fonts generates to use in the code.

In your button the photo of the cart is misaligned, you can change your code to:

<button><img id="cart" src="images/icon-cart.svg" alt="" />Add to Cart</button>

That way the image will be correct and aligned with the button, and the fonts will be imported faster, I hope these tips help you, the result was great!

Congratulations on completing the challenge, that's great!

As for the photo you could do this:

Add to .perfume object-fit: cover; height: 100%; width: 100%;

and add in @media .perfume: max-height:300px;

Object-Fit serves as a property to adjust your image depending on the value you pass to it. Also, we use a max-height 300px to limit the height of the image, and finally, we say that it fills 100% of the container, so that it is displayed correctly.

Happy Coding!