Stats preview card component with HTML, CSS, Flexbox

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello @Targitay2012, 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

  1

  ---

  

  Purbo•330

  @Targitay2012Posted about 2 years ago

  @correlucas thanks for the good advice!

  I did as you said, it turned out great!

  Only initially I had a pseudo-element :bifore with which I made a suitable color by eye as on the layout. In it, I did as you described.

  Best Regards

  Purbo

  0
• 

  Mahendran-C•130

  @Mahendran-CPosted about 2 years ago

  font family and font weight differs from two areas 1. title, 2. companies (this line).

  The layout looks good and clean also responsive.

  the code is readable, well-structured and reusable.

  html file has the semantic tags also.

  overall every this is except those miss matchings

  I like the coding structures. coder used scss and ordinary css also

  0

  ---

  

  Purbo•330

  @Targitay2012Posted about 2 years ago

  @Mahendran-C thanks for the feedback! I don’t have a pro account, so there may be misses with fonts)

  Best Regards

  Purbo

  1