Stats preview card component solution

Community feedback

• 

  Lucas 👾•104,400

  @correlucasPosted over 2 years ago

  👾Hello Priyanshu Chouhan, congratulations for your solution!

  Your html structure is already done, my advice for you is to build this component using grid that's the simplest way ever.

  To built this component with 2 columns all you need to do is to add max-width: 900px (its the container size) and display: grid / grid-template-column: 1fr 1fr(this means that your component will have two columns with 50% each thats 450px).

  After that you give your solution the missing styling for the text and its gaps/paddings.

  To add the overlay effect you can use mix-blend-mode, see the code below:

  img {
  mix-blend-mode: multiply;
  opacity
  

  Hope it helps bro!

  Marked as helpful

  0