Stats preview card component solution

Community feedback

• 

  hitmorecode•6,680

  @hitmorecodePosted over 1 year ago

  Congratulations well done. I took a quick look at your markup and css and from what I've seen, it's not that bad. I've seen worst than this. You are in the right track.

  /* Q1 as for the images you can use the picture element, you'll have to do some adjustments to fit you page, but this works */
  <div class="right_card card">
  <picture>
  <source media="(min-width: 900px)" srcset="images/image-header-desktop.jpg">
  <source media="(min-width: 700px)" srcset="images/image-header-mobile.jpg">
  <img src="images/image-header-desktop.jpg" alt="">
  </picture>
  </div>
  

  /* Q2 this is how you can solve ti*/
  /* add a background color to right card, you are going to use this to blend with the image */
  .right_card {
  background-color: var(--soft-violet-accent);
    
  }
    
  .right_card img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0 10px 10px 0 ;
  mix-blend-mode: multiply; /* to blend the background color of the card with the image, you can use mix-blend-mode and set it to multiply */
  opacity: 0.8; /* add opacity to it, and play with the opacity until you get what you want */
  }
  

  Marked as helpful

  0

  ---

  

  Ashwani Pandey•180

  @ashwanipydevPosted over 1 year ago

  Thank you for the invaluable feedback on our code! Your suggestions have been truly unique and will undoubtedly lead to significant improvements. Grateful for your time and expertise@hitmorecode

  0