Stats preview card component

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello Virlus, congratulations on your solution!

  Nice code and nice solution! You did a good job here putting everything together. I’ve some suggestions for you:

  Use a CSS reset to avoid all the problems you can have with the default CSS setup, removing all margins, and making the images easier to work, see the article below where you can copy and paste this CSS code cheatsheet: https://piccalil.li/blog/a-modern-css-reset/

  To get closer to overlay effect on the photo as the Figma Design its better you use mix-blend-mode. All you need is the div under the image with this background-color: hsl(277, 64%, 61%); and apply mix-blend-mode: multiply and opacity: 80% on the img or picture selector to activate the overlay blending the image with the color of the div. See the code bellow:

  img {
  mix-blend-mode: multiply;
  opacity: 80%;
  }
  

  Here's a good article explaining these effects with mix-blend-mode: https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  0
• 

  バレンタイン 😈•64,170

  @VCaramesPosted about 2 years ago

  Hey @vjeanty02, some suggestions to improve you code:

  • The stat numbers are not headings. They should be wrapped in a Paragraph Element.

  • The statistics section is a list of statistics, so it should be built using an Unordered List along with a List Items Element.

  • The image serve no other purpose than to be decorative; It adds no value. The Alt Tag should left blank and have an aria-hidden=“true” to hides it from assistive technology.

  • To get the image to look like the FEM example, you are going to want to use the Mix-Blend-Mode along with the Multiply Value and include a Opacity with the value of 0.8. (Courtesy of @correlucas)

  Code:

  img {
    opacity: 0.8;
    mix-blend-mode: multiply;
   
  }
  

  Happy Coding! 👻🎃

  Marked as helpful

  0

  ---

  

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  @vcarames @vcarames Hey Bro, can you kindly stop to tag in multiple solutions with this thing of mix-blend-mode ? I'm getting spammed in my notifications and I'm unable to see other stuff by the amount of your tagged comments.. Just give the feedback and that's fine. 👏 Keep doing the amazing work helping people here. Have a nice day.

  0

  

  Virlus Jeanty•170

  @vjeanty02Posted about 2 years ago

  @vcarames, @correlucas thank you, I will dedicate a special time to make modifications after finishing all the newbie challenges.

  Can you take a look at my new challenge?

  When I use Font awesome it causes errors.

  0