Stats preview card component

Community feedback

• 

  👾 Ekaterine Mitagvaria 👾•7,600

  @catherineisonlinePosted almost 2 years ago

  Hey, for the image to match the color, I did something like this, I hope that helps, sizes might not fit your solutions but you can adapt it depending to your own code:

  <div class="image-container">
  img class="main-image" src="images/image-header-mobile.jpg" alt="">
  </div>
  
  .image-container {
    display: inherit;
    position: relative;
    width: 100%;
    border-radius: 0 10px 10px 0;
    background-color: hsl(277, 64%, 61%);
  }
  .main-image {
    width: 100%;
    height: 100%;
    position: relative;
    background-size: cover;
    border-radius: 0 10px 10px 0;
    mix-blend-mode: multiply;
    opacity: 0.75;
  }
  
  

  IF THIS WAS HELPFUL PLEASE MARK IT AS HELPFUL 🤩

  Marked as helpful

  0
• 

  バレンタイン 😈•64,170

  @VCaramesPosted almost 2 years ago

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

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

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

  Here is an example of how it works: EXAMPLE

  Syntax:

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

  More Info:📚

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

  • To get the image to look like the FEM example, you are going to want to use the mix-blend-mode along with the multiply value and include a opacity with the value of 0.8.

  Code:

  img {
    opacity: 0.8;
    mix-blend-mode: multiply;
  }
  

  • Implement a Mobile First approach 📱 > 🖥

  With mobile devices being the predominant way that people view websites/content. It is more crucial than ever to ensure that your website/content looks presentable on all mobile devices. To achieve this, you start building your website/content for smaller screen first and then adjust your content for larger screens.

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

  Happy Coding!🎄🎁

  Marked as helpful

  0

  ---

  

  Maicon Rodrigues Monteiro•120

  @maiconrmonteiroPosted almost 2 years ago

  @vcarames muito obrigado pelo seu comentario meu amigo. É de extrema importancia a revisão dos colegas mais experientes. Vou melhorar meu codigo.

  0