Stats Preview Card Component

Community feedback

• 

  Adriano•38,100

  @AdrianoEscarabotePosted almost 2 years ago

  Hello Claudio Roberto, how are you? I truly loved your project's outcome, however I have some advice that I hope you'll find useful:

  To get closer to the photo overlay effect, you'd better use mix-blend-mode. All you need is the div under the image with this background color: hsl(277, 64%, 61%); and position mix-blend-mode: multiply and opacity: 80% on the image or apply image to activate the overlay by blending the image with the div's color. See the code below:

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

  You can read this content which is explaining these effects with mix-blend-mode: click here

  You have used <br> , using <br> is not only bad practice, it is problematic for people who navigate with the aid of screen reading technology. Screen readers may announce the presence of the element. This can be a confusing and frustrating experience for the person using the screen reader. You can read more in MDN.

  The remainder is excellent.

  I hope it's useful. 👍

  Marked as helpful

  1

  ---

  

  Claudio Roberto•170

  @claudio-dev1993Posted almost 2 years ago

  @AdrianoEscarabote Thank you for comment and give your tips. I'll review my code and try to apply what you said for improve the accessibility and best practice for HTML coding. Thanks for indicate the MDN articles too!

  1