Stat Card - Solution

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello Nathan Weber, Congratulations on completing this challenge!

  You can use this code shortcut to reach the same color of the challenge. All you need is to use mix-blend-mode to make the color blend between the image and the background-color of the container. See the steps below to apply to the img or picture selector:

  img {
  mix-blend-mode: multiply;
  Opacity
  
  

  ✌️ I hope this helps you and happy coding!

  1
• 

  Hyron•5,870

  @hyrongennikePosted about 2 years ago

  Hi @WorldWideWeb-er,

  Congrats on completing the challenge

  The image does not span the full height of the card, you can fix this by add the following.

  section#stats-header, section#stats-header img {
      height: 100%;
      object-fit: cover;
  }
  

  You can add the below to add a bit of margin below the stats.

  section#stat-stats {
      margin-bottom: 3rem;
  }
  

  Just a tip but there is no need to over complicate the HTML structure by over nesting elements for example in the .stats-card_text you wrap all the elements with .container-fluid and you don't use ID's on all the elements these can be added in as you need to target specific elements.

  Also check the report above there a few issue. Overall you did really good on to the next challenge👉

  Hope this is helpful.

  0