Stats preview using HTML & CSS

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 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!

  1

  ---

  

  101Amine•260

  @101AminePosted about 2 years ago

  @correlucas Thanks for taking time to review my code lucas much appreciated,

  I've tried img { mix-blend-mode: multiply; opacity: 82%;}

  It made it look really weird not like the wireframe.

  that's what I've got => https://ibb.co/tsR889V

  0

  

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  @101Amine Put the color on the div under this image like this:

  article.img_container {
      background-color: purple;
  }
  

  1
• 

  101Amine•260

  @101AminePosted about 2 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!

  0