Stats-Preview-Card

Community feedback

• 

  _nehal💎•6,710

  @NehalSahu8055Posted over 1 year ago

  Hello Dessidy 👋.

  Congratulations on successfully completing the challenge! 🎉

  Few suggestions regarding design.

  • Remove padding from .container as it will not dynamically center the card.

  • To properly center the card

  • USING FLEXBOX

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

  I hope you find this helpful.

  Happy coding😄

  Marked as helpful

  1

  ---

  

  Dessidy•300

  @DessidyPosted over 1 year ago

  Thanks man I really do appreciate 😁@NehalSahu8055

  1

  

  Dessidy•300

  @DessidyPosted over 1 year ago

  I just did it it worked .

  Thanks again man@NehalSahu8055

  1
• 

  hitmorecode•6,250

  @hitmorecodePosted over 1 year ago

  Congratulations well done. Just a few thing you can fix

  /* the card is horizontally not in the middle of the page. add min-height and flexbox to fix this */
  body {
  background: var(--clr-Very-dark-blue-main-background);
  font-weight: var(--fw-small);
  color: var(--Slightly-transparent-white-main-paragraph);
  font-family: inter;
  font-size: 15px;
  min-height: 100vh; /* add this line */
  display: flex; /* add this line */
  justify-content: center; /* add this line */
  align-items: center; /* add this line */
  flex-direction: column; /* add this line */
  }
  
  /* to blend the image and the overlay use mix-blend-mode */
  .img_container::before {
  content: "";
  position: absolute;
  inset: 0;
      
  background: var(--clr-Soft-violet);
  opacity: .8; /* play with the opacity until you get what you want */
  mix-blend-mode: multiply; /* add this line */
  }
  

  Marked as helpful

  1

  ---

  

  Dessidy•300

  @DessidyPosted over 1 year ago

  Well this is new😲 Thanks 😁😁@hitmorecode

  0

  

  Dessidy•300

  @DessidyPosted over 1 year ago

  Tried the mix-blend-mode and it worked thanks again man@hitmorecode

  0