Stats preview card

Community feedback

• 

  Ssembatya Dennis Duncan•260

  @ssembatya-dennisPosted about 2 years ago

  👾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!

  Marked as helpful

  0

  ---

  

  joaovitorwitt•250

  @joaovitorwittPosted about 2 years ago

  @ssembatya-dennis Thank you for the suggestion. I will definitely look into that

  1