Stats preview card component

Community feedback

• 

  Danilo Blas•6,300

  @Sdann26Posted over 2 years ago

  Hi Dmitriy!

  To the body add this and remove the height.

  min-height: 100vh;
  padding: 2em 0;
  

  The first value is for if the elements inside exceed the screen size this can be enlarged and the second is to give it a spacing, it doesn't look nice the elements stuck together.

  By the way to make the image and is the same color is a bit complicated I have done when I made the challenge, the idea is:

  • To have a parent box, in your case it can be the div with the class stats-card__img. To this one you will put of bottom of the following color: background-color: rgb(170, 92, 219).
  • Now inside this div you will place the image with the following attributes:

  width: 100%;
  height: 100%;
  mix-blend-mode: multiply;
  opacity: 0.75;
  

  In your case you have done everything in a single div, I tell you to use a div for the background color and then the image inside the div. The idea is that mix-blend-mode will merge your image with the pink background. That is, it blends the image with the background color of the parent. And with that you can achieve interesting effects, and the opacity to the image is only so that they have the same color.

  If you want you can add the attribute: object-fit: cover to the image if you see that it becomes amorphous but it does not depend on the design of how you have created it.

  That would be all, the rest I think you got it pretty good.

  Good luck, good coding!

  Marked as helpful

  1

  ---

  

  Dmitriy Smirnov•40

  @Teor99Posted over 2 years ago

  @Sdann26 initially, I tried to do something similar with the picture, played with opacity, but nothing came of it. I haven't come across the mix-blend-mode property on the internet. Thanks, all your tips are very helpful 👍

  0