FLEXBOX|GRID

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

• It is best practice ✅ to use, classes for styling purposes, while using ids solely for JavaScript.

• Remove all br elements you added , they are being used incorrectly ❌ and not needed for this challenge.

• This challenges requires the use of two images 🎑 at different breakpoints. ⚠️ The picture element will facilitate this.

Syntax:

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

More Info: 📚

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

• For improved accessibility 📈 for your content, it is best practice to use em for media-queries. Using this unit gives users the ability to scale elements up and down, relative to a set value.

• Implement a "Mobile First" approach 📱 > 🖥

Mobile devices are now the dominant 👑 way in which people browse the web, it is critical that your website/content looks perfect on all mobile devices.

More Info: 📚

Mobile First

If you have any questions or need further clarification, feel free to reach out to me.

Happy Coding! 🎆🎊🪅

Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here

For the color of the image, give .picholder a background-color of soft-violet and add object-fit: cover; mix-blend-mode: multiply and opacity: 0.8 to the img .

.picholdet{
background-color: hsl();
}
img{
width: 100%;
height: 100%;
object-fit: cover;
mix-blend-mode: multiply;
opacity: 0.8;
}

In the media query increase the width value of .cardholder.

Hope am helpful.

Well done for completing this challenge. HAPPY CODING