Stats Preview Card Component

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello Ritik, congratulations for your new solution!

  Here's some tips for you:

  In this case the container is a bit bigger around max-width: 1115px

  .card { 
     display: grid; 
     grid-template-columns: 1fr 1fr; 
     width: 700px; 
     background-color: #1c1938; 
     border-radius: 10px; 
     margin: 20px; 
   }
  

  To have your image purple with the same overlay effect, you need to use mix-blend-mode to make this color blend between the image and the background-color of the container. See the steps below to apply to the img or picture selector:

  img {
  mix-blend-mode: multiply;
  opacity: 75%;}
  

  👋 I hope this helps you and happy coding!

  Marked as helpful

  1

  ---

  

  Ritik Saxena•350

  @ritiksaxena124Posted about 2 years ago

  @correlucas Thank you so much for the tips I will definitely apply these

  1

  

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  @ritiksaxena124 then say me if works, keep it up 👏

  0
• 

  Pulkit saxena•890

  @Pulkit-s21Posted about 2 years ago

  In the desktop version, the font size and card size aren't as big as they can be. User will have to try hard to read whats written in the text area and will move away from the site. Readability is very important for sites and help user get it without any changes or any effort. Try fixing that and font size is good at mobile version

  1

  ---

  

  Ritik Saxena•350

  @ritiksaxena124Posted about 2 years ago

  @Pulkit-s21 I'll fix that thank you.

  0