stats-preview-card-component

Community feedback

• 

  Hassia Issah•50,650

  @HassiaiPosted over 1 year ago

  To center .main-container on the page using flexbox, replace the height in the main with min-height: 100vh.

  For the color of the image , give image-container a background-color of soft violet and the img a width and height of 100% , mix-blend-mode: multiply , object-fit: cover and opacity: 0.8.

  .image-container{
  background-color: hsl();
  }
  img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: multiply;
  opacity: 0.8;
  }
  

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  1
• 

  P

  visualdennis•8,375

  @visualdennissPosted over 1 year ago

  Hey there,

  good work overall! Regarding background filter, you can use this instead of filter to get better results and match the design more:

  • Remove this: filter: sepia(80%) hue-rotate(225deg) brightness(80%) saturate(420%);
  • Then just give that container of the img a background color like hsl(277, 64%, 61%),
  • then apply this css rules to the img: mix-blend-mode: multiply; opacity: .75;
  • finally add display:block to the img to get rid of little space below it.

  Hope you find my feedback helpful!

  1