Stats preview card component

Hello bociKond! Congratulation on completing this challenge! If I may, I could give you some solutions to the issues (accessibility and HTML)

• Replace <section class="card"> for a <main class="card"> tag this will get rip of the accesibiltiy issues
• Replace <article class="card__text"> for a <section class="card__text">, new the h1 issue will be fix.
• You could replace the <div class="stats"> for a <ul class="stats"> and each <article class="stat"> tag in it replaces them for a <li class="stat">, you may need to remove the default style of a list but you will get a more semantic HTML.

In regards to the image color blending, I use these CSS rules (adapted to your markup)

.img {
  background-color: var(--clr-softviolet); /* hsl(277, 64%, 61%) */
  background-blend-mode: multiply;
  background-size: cover;
  background-repeat: no-repeat;
}

.img img {
  display: block;
  mix-blend-mode: multiply;
  opacity: 0.8;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Other than that, you may need to try various font sizes regarding the title and the stats.

Replace <section class="card"> with the main tag to fix the accessibility issue.

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

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

Hope am helpful.

Well done for completing this challenge. HAPPY CODING

Hi Bocikond, congrats on completing this solution, your solution looks really great, about the responsiveness, you did pretty good, However, you'll want to make the container take a column flex direction from 850px because that is the width where the image begins to shrink.

I hope you find this helpful.

Happy Coding! 🎉