Responsive landing page with only html and css

Hi Lea! How are you?

I really liked the design of the project, but I have some tips that I think you will like.

I noticed that you used flex-box in this challenge, the best would be to use grid, because we have more control of the columns.

I made some changes to show you and I would like you to do it too:

I changed the image size:

.card img {
    height: 460px;
    width: 300px;
}

I made the change to the grid:

.card {
    display: grid;
    grid-template-columns: repeat(2, 300px);
}

To have a code with better accessibility we will work with the picture tag in the html, to change the mobile image. link to read more about the tag --> click here

I removed the two img tags, and added:

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

Now to make the switch from the mobile version, we will use a media query:

@media (max-width: 650px) {
    .card {
        grid-template-columns: repeat(1, 80%);
    }
}

Remember to prioritize relative measurement units.

The rest is really good!!

Hope this helps! 👍