Stats preview card components Using CSS grid

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  👾Hello Omar, congratulations for your new solution!

  Great solution again, there are two things you can improve about the component image.

  1.The border radius are only in the right size you can fix that adding to the image border-radius: 12px 12px 0 0;

  About the image color, to have the exact same purple overlay effect for the image, matching the design files you can use, filter or mix-blend-mode. See the code below

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

  👋 I hope this helps you and happy coding!

  Marked as helpful

  0
• 

  cacosted•570

  @cacostedPosted over 2 years ago

  Hello @omarsaleh11 don't worry about the fonts your solution looks very nice, but if you want the actual size, in the starter files in style-guide.md there is a font-size recommended.

  Testing your solution I found that there is no padding in the grid__desc is important to set some padding to give the content some space to breathe. This is more clear when the width of the screen is around 748px, the content is alongside the border because there is no padding.

  0