Stats preview using HTML & CSS

Community feedback

• 

  Lucas 👾•104,160

  @correlucas

  Posted almost 3 years ago

  👾Hello 101Amine, Congratulations on completing this challenge!

  You’ve done really good work here putting everything together, I’ve some suggestions to improve the design:

  Add the correct size for the container max-width: 1110px to dont have it growing more than it should:

  main {
      max-width: 1110px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      margin-inline: 150px;
      background-color: var(--clr-primary-500);
  }
  

  If you want to add the same effect of the design for the image overlaying it with purple there's a shortcut that is by using mix-blend-mode with the mode multiply and with an opacity around opacity: 82%. See the code below:

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

  ✌️ I hope this helps you and happy coding!

  12
• 

  101Amine•260

  @101Amine

  Posted almost 3 years ago

  I've actually struggled hard how to get image to look like that, with the purple layout.

  I would love if someone knows how to do it with css, I've tried mix-blend-mode : multiply but it just made it almost completely invisible.

  Thanks for that challenge it was pretty interesting, see you in the next one!

  00