Stats preview card

👾Hello @joaovitorwitt, Congratulations on completing this challenge!

Great code and great solution! I’ve few suggestions for you that you can consider adding to your code: You’re on the right track I can see that you’ve used semantic tags well and the site is very responsive, the only thing you might have missed is the image mix-blend mode on the image in the image-wrapper div. I personally recommend going with background-blend-mode approach of blending the a linear-gradient() with your img to get it looking like the figma design rather than the filter style for this particular solution.

/*filter approach*/
.image-wrapper img { 
    filter: invert(10%) sepia(68%) saturate(4400%) hue-rotate(241deg) brightness(50%) contrast(89%);
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
}

/*mix-blend-mode approach*/
.image-wrapper {
  flex: 1;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px
  background: linear-gradient(rgba(72, 15, 107, 0.6), rgba(170, 92, 219, 0.2)),
    url(./images/image-header-desktop.jpg);
  background-blend-mode: multiply;
  background-size: cover;
  background-repeat: no-repeat;
}

✌️ I hope this helps you and happy coding!