Stats Preview Card Component using both grid and Flex Box

Community feedback

• 

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  👾Hello Natasha, congratulations for your new solution!

  Your solution is already really good, you can improve it fixing the alignment vertically like David said and also reducing your code for the overlay effect with 2 lines. To add 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: 75%;}
  

  Instead of importing the card image with CSS you can manage it inserting the tag <picture> to wrap both desktop and mobile images together in the same tag, and render each image depending of the device (phone / computer) by the settings for the width you'll insert in the html

  👋 I hope this helps you and happy coding!

  0
• 

  David•8,000

  @DavidMorgadePosted about 2 years ago

  Hello Nathasha, congrats on finishing the challenge, pretty good job in my opinion!

  Just a little suggestion if you don't mind.

  If you want to center your card in the middle of the screen, try using flexbox for a perfect center instead of margin, you just have to set up the minimum height of the body to 100vh (wich will make the body take the full screen), and then use flexbox to center the child content, you can try by getting rid of the margins on your div class='main-container' and adding this to your body:

  body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  }
  

  With this your component will be completely centered on the screen!

  Hope my feedback helps you!

  0