Stats preview card component main

Community feedback

• 

  Travolgi 🍕•31,400

  @denieldenPosted almost 3 years ago

  Hi Mukunde, great job!

  I had a look at your solution and I have a few suggestions for you:

  • try to use background-blend-mode for image. Look here -> blend mode
  • To center the cards on the page try using Flexbox, it can help you better: give the flexbox and height properties to the body and remove all margin from the .container class.
  • Note: Flexbox aligns to the size of the parent container. You can use the vh measurement for the height... Viewport Height handles the sizing of an element in relation to the height of the browser window.
  • to fix the heigth of image and align with the dimension of the left box change in height: 100%; the property of .card__img img class

  Hope this help ;) And keep it up!

  1
• 

  Sami NASRI•240

  @SilverWings47Posted almost 3 years ago

  Hello there !

  • Instead of using border-radius on individual elements, use border-radius: 12px on the .container class with overflow: hidden; This will allow you to use border-radius only once.
  • On the .card__stats .card__stats__child class, use gap: 2.8rem; to separate the three stat blocks instead of padding : 2.8rem 0 2.8rem 0.

  Good Luck !

  0
• 

  Mukunde Brisa•80

  @Brisa-CodesPosted almost 3 years ago

  Thank you so much, let me edit it, it was giving me a hard time

  0