Stats preview card

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted over 1 year ago

  Hello there 👋. Good job on completing the challenge !

  I have some suggestions about your code that might interest you.

  • Are the numbers important enough to be heading elements? What is the content associated with those elements? This is the heading structure:

    • Get insights that help your business grow. (h1).
      • 10k+ (h2).
      • 314 (h2).
      • 12m+ (h2).

    does this make sense? more info here.

  • To recreate the exact purple color of the image you can do the following:

    .col-right {
        background-color: rgb(171, 92, 219);
    }
    
    .col-right::after {
        /* opacity: 0.3; */    
        opacity: 0.75;    
        mix-blend-mode: multiply;
    }
    

    • The second style applies a blending effect to the image by setting the mix-blend-mode property to multiply. This means that the image will blend with the background color in a way that multiplies the color values of each pixel.

  I hope you find it useful! 😄 Above all, the solution you submitted is great!

  Happy coding!

  Marked as helpful

  2

  ---

  

  Angel Estevez•100

  @AEPEX25Posted over 1 year ago

  @MelvinAguilar I really appreciate your helpful suggestions.

  0
• 

  Hassia Issah•50,650

  @HassiaiPosted over 1 year ago

  For the color of the image, add the background-image to .col-right and add background-blend-mode: multiply and opacity: 0.8 to it .

  .col-right{
  background-image: url();
  background-size: cover;
  background-color: hsl()
  background-blend-mode: multiply;
  opacity: 0.8;
  }
  

  To center .card on the page using grid, replace the height in the body with min-height: 100vh.

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  Marked as helpful

  1

  ---

  

  Angel Estevez•100

  @AEPEX25Posted over 1 year ago

  @Hassiai Thank you for your comment, it's really helpful to know other points of view about what can be done better.

  0