Stats Preview Card Component

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello @Deolabest, Congratulations on completing this challenge!

  Great code and great solution! I’ve few suggestions for you that you can consider adding to your code:

  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%, also add to the div containing the background-color: hsl(277, 64%, 61%);` to blend the image + bg color. See the code below:

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

  ✌️ I hope this helps you and happy coding!

  0

  ---

  

  Adeola Ganiu•1,320

  @DeolabestPosted about 2 years ago

  @correlucas Thanks. I tried this option but it didn't cover the whole image.

  1
• 

  Nneoma Njoku•1,210

  @SatellitePeacePosted about 2 years ago

  Hello @Deolabest you did a wonderful job so congrats

  • to get the purplish overlay on the image you can use a CSS property called mix-blend-mode and set its value to color

  .image {
      display: block;
      height: 450px;
    mix-blend-mode: color;
  }
  

  • Also instead of wrapping your solutions ina bunch of div why not use HTML5 semantic tags like section and article

  • for example, you can wrap your images in a figure container like so

   <figure class="image">
            <img src="images/image-header-desktop.jpg" alt="Office Staff" class="imagedesktop">
            <img src="images/image-header-mobile.jpg" alt="Office Staff" class="imagemobile">
        </figure>
  

  • you can also wrap your contents in an HTML article tag

  I hope this helps

  0

  ---

  

  Adeola Ganiu•1,320

  @DeolabestPosted about 2 years ago

  @SatellitePeace Thanks. I really need to improve the wrappings.

  0