Stats preview card component

Community feedback

• 

  Deborah Robbiano•600

  @debriksPosted about 2 years ago

  Hi Mohamed,

  Great solution! Just have some suggestions for you to improve it:

  • to center the box vertically, you can use a display: flex property on the body, like so: display: flex; align-items: center; min-height: calc(100vh - 1px);

  Giving an height to the body, then using the flex property align-items: centerwill center the box vertically on the page.

  • also I see you created a z-index class but with no z-index property in it. The z-index property is used to place element in front of each other but here, you don't need it. Here is a ressource on the z-index property and when you should use it: https://css-tricks.com/almanac/properties/z/z-index/

  • when changing the screen size, your image is repeating in its container, to avoid that, you can use the object-fit: cover flex property like so: width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; opacity: 0.7;

  • for the right effect on the image, you can use the css-property 'mix-blend-mode' as seen above.

  Hope you find these comments helpful.

  Happy coding :)

  Marked as helpful

  1

  ---

  

  Mohamed Nejjar•170

  @NJR911Posted about 2 years ago

  @debriks Hi, Your comment really helpful, i'll try to do that in the future and thank you.

  1

  

  Deborah Robbiano•600

  @debriksPosted about 2 years ago

  @NJR911 glad it could help! Happy coding :)

  Marked as helpful

  0

  

  Mohamed Nejjar•170

  @NJR911Posted about 2 years ago

  @debriks Thank you

  1