stats-preview-card-component-main

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello @hashmi7917, Congratulations on completing this challenge!

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

  To have the better color for the image overlay its better to use multiply and the background color the same purple as the word insights. See the fixes bellow:

  .color-overlay {
      background-color: rgb(155 58 215);
      border-radius: 10px 10px 0 0;
      height: 100%;
      width: 100%;
      mix-blend-mode: multiply;
      opacity: 0.8;
  }
  

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  1

  ---

  

  Muqtadeer•340

  @hashmi7917Posted about 2 years ago

  @correlucas thanks for that correction, i have added to my solution

  0
• 

  バレンタイン 😈•64,170

  @VCaramesPosted about 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 section is a list of statistics, so it should be built using an Unordered List along with a List Items Element.

  • Having empty divs is considered bad practice. to apply the image, you instead want to use the Picture Element 🎑 in your HTML code. This element will allow you to switch between images during different breakpoints.

  Syntax:

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

  Source:

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

  https://web.dev/learn/design/picture-element/

  If you have any questions or need further clarification, let me know.

  Happy Coding! 👻🎃

  0