stats-preview card

Community feedback

• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted 8 months ago

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

  • I have a suggestion regarding your doubt that I believe will be of great interest to you.

  ---

  • Currently you're adding a div on top of img to replicate your solution as per the design with Purple overlay.

  ---

  • This is how you implemented it right now,

  <div class="relative block lg:hidden">
    <img
      src="/assets/image-header-mobile-fYqb8l1J.jpg"
      alt="desk"
      class="w-full rounded-t-lg"
    />
    <div class="absolute top-0 left-0 w-full h-full rounded-r-lg bg-[hsl(277,64%,61%)] opacity-40"></div>
  </div>
  

  ---

  • Instead of using an empty div to create an purple overlay, we can just use a css property called mix-blend-mode for the img element, and want to apply the purple background color for the container which wraps the img element.

  ---

  • For Example:

  <div style="" class="relative block bg-[hsl(277,64%,61%)] lg:hidden">
    <img
      src="/assets/image-header-mobile-fYqb8l1J.jpg"
      alt="desk"
      class="w-full rounded-t-lg mix-blend-multiply opacity-75"
    />
  </div>
  

  • Here we have applied the background color for img parent element and for img we have added mix-blend-multiply to multiply the bg color and opacity-75 for giving a .75 opacity to img so that it would look like exact replicate of design image.

  ---

  .

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

  Happy coding!

  0

  ---

  

  TUSHAR KUMAR SHAH•210

  @tusharshah21Posted 8 months ago

  damn! I really forget about it, thanks for letting me know would implement it in this in some time! Thanks a lot man @0xabdulkhalid

  0

  

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted 8 months ago

  Glad you found it helpful @tusharshah21 🤠

  0
• 

  Shukhrat Turdiev•90

  @shukhratgithubPosted 8 months ago

  in mobiles, there is margin around the card. check out one more time! You can just remove the margin or the padding around the component and it will be user-friendly! It looks a little ugly when I open it on my 13 pro. Thank you!

  0

  ---

  

  TUSHAR KUMAR SHAH•210

  @tusharshah21Posted 8 months ago

  @shukhratgithub

  alright noted that! Would update this till the end of the day and would keep this in mind from the next time

  thanks for the feedback and letting me know!!

  0