Stats Preview Card Component Solution - HTML & CSS

Community feedback

• 

  Anna Leigh•5,135

  @brasspetalsPosted over 3 years ago

  Hi, Fatima! Congrats on submitting your first solution! 🎉 Overall you did a good job, and it repsonds nicely!

  Here's my suggestion to better deal with the image and coloring:

  1. Set the background-color of the .card-preview to the soft violet color.
  2. Change the .card-image from a div to a picture element instead.
  3. Set mix-blend-mode: multiply as well as slight opacity on the img.

  You may have to do some adjusting for the image once you switch it to the picture element. The object-fit property might come in useful as well. I'd remove the 60vh height, which can really mess up the image depending on the height of the window (play around with the height of the window in the dev tools, and you should see what I mean). If you have to set a height, viewport units are not a good choice here. Percentage or a set value with px, em, or rem would probably be better.

  Marked as helpful

  2

  ---

  

  Fatima Lazan•100

  @fatimalazanPosted over 3 years ago

  @brasspetals Hello Anna. Nice to meet you :)

  I've tried to apply your suggestion to my code and I was amazed because it actually works. I'm not sure if I did it right as what you've been instructed to do but I'm glad I have learned something new.

  I really appreciate your help Anna. Thank you :)

  0

  

  Anna Leigh•5,135

  @brasspetalsPosted over 3 years ago

  @fatimalazan Awesome! So glad it worked! Just checked it out again. The coloring looks great, and it responds even better than before. 😄 Glad my suggestion helped! Happy coding!

  0
• 

  abdul•45

  @binary01-specPosted over 3 years ago

  it's looks good and responsive😃

  0

  ---

  

  Fatima Lazan•100

  @fatimalazanPosted over 3 years ago

  @binary01-spec Hey thank youuu!!!

  0