Frontend Mentor | Stats preview card component

Community feedback

• 

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  👾Hello @maxted83, congratulations for your new solution!

  🎨 You’ve done really good work here putting everything together, I’ve some suggestions to improve the design:

  1.Think about using relative units as rem or em instead of px to improve your performance by resizing fonts between different screens and devices.Anyhow, if we want a more accessible website, then we should use rem instead of px. REM does not just apply to font size, but to all sizes as well.

  2.Add a margin of around margin: 20px to avoid the card touching the screen edges while it scales down.

  3.If you want to add the same effect of the design for the image overlaying it with purple there's a shortcut that is by using mix-blend-mode with the mode multiply and with an opacity around opacity: 82%. See the code below:

  Instead of using this lines of code:

  .card-image-overlay-mobile::before {
      position: absolute;
      content: "";
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      width: 100%;
      height: 100%;
      background: #7a18c05d;
      border-radius: 1em 1em 0 0;
  }
  

  Use this:

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

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  1