Stats preview card component using flex and overlay

Community feedback

• 

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  👾Hello , congratulations on your solution!

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

  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,190

  @VCaramesPosted about 2 years ago

  Hey @PizzaNCoding88, some suggestions to improve you code:

  • All the text font-size need to adjusted to better match the FEM example.

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

  • You do not want to have or use empty divs in you HTML code, since this is considered to be bad practice. Instead use the Picture Element

  Picture Element will allow your to switch between images in different breakpoints

  Syntax:

    <picture>
      <source media="(min-width: )" srcset="">
      <img src="" alt="">
    </picture>
  

  Source:

  https://www.w3schools.com/html/html_images_picture.asp

  https://web.dev/learn/design/picture-element/

  • 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,400

  @correlucasPosted about 2 years ago

  @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