Stats preview card component

Community feedback

• 

  George Manimbo•180

  @GeorgenicoPosted over 1 year ago

  Hi there!

  Great job! I suggest that you can remove the absolute position on the image, as it may no longer be necessary. You could consider incorporating this change into your code.

  class name of your image { mix-blend-mode: multiply; opacity: 0.75; }

  Hope you this helps you!

  1

  ---

  

  Munsif Ali•200

  @Munsif-AliPosted over 1 year ago

  @Georgenico Thanks for your valuable feedback actually the absolute position is for a reason i want to position the ::after(which is the filter) with that element by position relative. I haven't taken a separate tag for the filter but i am applying filter on the image using ::after.

  0
• 

  Hassia Issah•50,650

  @HassiaiPosted over 1 year ago

  For the color of the image, Give .image-section background-color of soft violet and add mix-blend-mode: multiply and opacity:0.8 to the img.

  .image-section{
  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

  0
• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted over 1 year ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have other recommendations regarding your code that I believe will be of great interest to you.

  ---

  HTML 🏷️:

  • This solution generates accessibility error reports, "All page content should be contained by landmarks" is due to non-semantic markup, which lack landmark for a webpage

  ---

  • So fix it by replacing the <div class="card"> element with the semantic element <main> along with <div class="attribution"> into a <footer> in your index.html file to improve accessibility and organization of your page.

  ---

  • What is meant by landmark ?, They used to define major sections of your page instead of relying on generic elements like <div> or <span>

  ---

  • They convey the structure of your page. For example, the <main> element should include all content directly related to the page's main idea, so there should only be one per page

  ---

  .

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  0