Stats preview card with flexbox

Community feedback

• 

  Guillermo Mulvihill•190

  @guilleoemPosted over 2 years ago

  Hi @Lau-San, it's easy and you just need only two lines of code. First set a background color to the img container (<div class="img">), and then blend the img with its container with mix-blend-mode css property. So in your code:

  <div class="img">
    <div class="violet"></div>   /*<------ delete this*/
    <img class="img-mobile" src="./assets/images/image-header-mobile.jpg" alt="">
    <img class="img-desktop" src="./assets/images/image-header-desktop.jpg" alt="">
  </div>
  

  and in your css file delete all the .img .violet. properties. Also delete the opacity: 0.5; in the .img .img. Finally add this two lines

  .img {
    width: 100%;
    position: relative;
    background-color: hsl(277, 64%, 61%); /*<------add this line*/
    border-radius: 0.5rem 0.5rem 0 0; /*<------you need add this also*/
  }
  .img img {
    width: 100%;
    border-radius: 0.5rem 0.5rem 0 0;
    mix-blend-mode: multiply; /*<------add this line*/
    display: block;
  }
  

  Hope this will helpfull.

  Marked as helpful

  4

  ---

  

  LauSan•190

  @Lau-SanPosted over 2 years ago

  @guilleoem Thank you so much! This was really helpful!

  0
• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  Hi, LauSan! 👋

  Congratulations on completing your first Frontend Mentor challenge! 🎉

  Before creating the purple overlay, I would recommend fixing the HTML markup first.

  • I suggest using picture element to let the browser choose the best image based on the given option.
  • There should not be text in span and div alone whenever possible. Instead, wrap the text with a meaningful element like a paragraph element.
  • I would recommend making the stats as a ul element. It is actually a list with three bullet points.
  • Next time, try to write the HTML markup without any styling to help you decide what would be the best element for each content.

  To create the purple overlay, you already use mix-blend-mode property, so all you need to do is to adjust the opacity of the img element to get it matched with the design. Try to set the opacity to 0.75.

  That's it! I hope you find this useful!

  0