Stats-Preview-Card

Community feedback

• 

  Adriano•38,120

  @AdrianoEscarabotePosted almost 2 years ago

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

  Consider using rem for font size .If your web content font sizes are set in absolute units, such as pixels, the user will not be able to re-size the text or control the font size based on their needs. Relative units “stretch” according to the screen size and/or user’s preferred font size, and work on a large range of devices.

  if you want to continue coding with px, you can download a very useful extension in vscode, it converts px to rem! link -> px to rem

  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

  The remainder is excellent.

  I hope it's useful. 👍

  Marked as helpful

  1

  ---

  

  Sami NASRI•240

  @SilverWings47Posted almost 2 years ago

  @AdrianoEscarabote Thank you my friend for the helpful feedback. I implemented the mix-blend-mode with the image and it looks great. I also changed the font-size from px to rem.

  1