Product Card with CSS & HTML

Hi, developer! Congratulations on completing this challenge! I have seen your layout and in the desktop design it seems to me that you have some details, but, I have brought you some modifications to improve your design!

body{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

.product-card {
    width:90%;
    height: 75%;
    display: grid;
    grid-template-rows: 40% 60%;
    background-color: white;
    border-radius: 20px;
}
@media (min-width: 1440px) {
     .product-card{
        grid-template-rows: unset;
        grid-template-columns: 1fr 1fr;
        height: 60%;
        width: 50%;
     }
}

.image-container{
    background-image: url('./images/image-product-mobile.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
}
@media (min-width: 1440px) {
     .image-container{
        background-image: url('./images/image-product-desktop.png');
        border-top-right-radius: unset;
        border-bottom-left-radius: 20px;
     }
}

h1,p{
    margin: 0;
}
.info-container{
    padding-top: 2rem;
    width: 90%;
    text-align: left;
    margin: 0 auto;
    box-sizing: border-box;
}
@media (min-width: 1440px) {
     .info-container{
        display: flex;
        flex-direction: column;
        gap: 1rem;
        width: 85%;
        justify-content: center;
     }
}
.info-container h1{
    font-family: 'Fraunces';
    font-size: 2rem;
}

Also, I have some comments for you. 1 If you decide to put an image inside a div, it ALWAYS has to have an alt="" and inside the quotes goes a small description of the image. 2. Never put more than one h1 in each HTML file. Both points will help you obtain a good score in good practices when carrying out the deployment. I hope my comments and solutions will be of great help to you, take care

Hey there! 👋 Here are some suggestions to help improve your code:

• To identify the main content of you site you will want to encase your entire component inside a Main Element.

• The Alt Tag Description for the image needs to be improved upon. You want to describe what the image is; they need to be readable. Assume you’re describing the image to someone.

• This challenges requires the use of two images 🎑 for different breakpoints. The Picture Element will facilitate this.

Here is an example of how it works: EXAMPLE

Syntax:

  <picture>
    <source media="(min-width: )" srcset="">
    <img src="" alt="">
  </picture>

More Info:

https://www.w3schools.com/html/html_images_picture.asp

https://web.dev/learn/design/picture-element/

• The only heading in this challenge is the name of the perfume, “Gabrielle Essence Eau De Parfum” . The rest of the text should be wrapped in a Paragraph Element.

• The old price 🏷 is not being announced properly to screen readers. You want to wrap it in a Del Element and include span element with an sr-only text explaining that this is the old price.

Your content is not fully responsive. Here is a link to Google Developer’s site that will teach you how make it 100% responsive:

https://web.dev/learn/design/

If you have any questions or need further clarification, let me know.

Happy Coding! 👻🎃