Stats Preview Card using CSS Flexbox

Community feedback

• 

  バレンタイン 😈•64,170

  @VCaramesPosted almost 2 years ago

  Hey there! 👋 Here are some suggestions to help improve your code:

  • The only heading ⚠️ in this component is the “Get insights that help your business grow” everything else will be wrapped in a paragraph element.

  • The statistics at the bottom are a list ⚠️, so it should be built using an unordered List element.

  More Info: 📚

  MDN <ul>: The Unordered List element

  • This challenges requires the use of two images 🎑 at different breakpoints. ⚠️ The picture element will facilitate this.

  Syntax:

    <picture>
      <source media="(min-width: )" srcset="">
      <img src="" alt="">
    </picture>
  

  More Info: 📚

  https://www.w3schools.com/html/html_images_picture.asp

  • The “image” in this component are purely decorative. ⚠️ Their alt tag should be left blank to hide them from assistive technology.

  More Info:📚

  https://www.w3.org/WAI/tutorials/images/

  If you have any questions or need further clarification, feel free to reach out to me.

  Happy Coding! 🎆🎊🪅

  Marked as helpful

  1
• 

  Kyrylo Haiduk•420

  @superpooperxxxPosted almost 2 years ago

  Hi, I am not sure how to make it with actual <img>, but it is easy to do with background-image.

  Your right side can be just <div> with a height 100% and lets say width 40%. Then add image as a background-image like this

  background-image: 
    #purple(but make it rgba, to het this transparency), 
    url("./path to image")
  

  Marked as helpful

  1
• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  For the color of the image, in the html wrap the img in a div and give the div a class for the styling. <div class="stat-image"><img><img></div>

  Give .stats-image a background-color of soft violet and give the img a width of 100%, height of 100% object-fit of cover , a mix-blend-mode of multiply and opacity of 0.8.

  .stats-image{
  background-color: hsl();
  }
  img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: multiply;
  opacity: 0.8;
  }
  

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  Marked as helpful

  1
• 

  Jeanco Volfe•460

  @engsofjvolfePosted almost 2 years ago

  Hey... nice there...

  To change the color of the image you need to set a background color for the "container" where the image is, so you change the opacity of the image. Doing this way you can see the color of the "container"where the image is set.

  An example would be (CSS):

  .container-img {
       background-color: var(--softViolet);
  }
  
  .container-img>.img-mobile,
  .container-img>.img-desktop {
      opacity: 0.6;
  }
  

  Try something like this, adapt to your own code... if you don't get it, i can provide an answer based on your own coding. Apologize the bad english...

  See you.. Happy coding

  Marked as helpful

  1