Stats preview card component

Community feedback

• 

  Enmanuel Otero Montano•2,155

  @Enmanuel-Otero-MontanoPosted over 2 years ago

  Hello luca!

  Another way to implement the color overlay on the image, I already saw that you used the "filter" property on the image, but for this challenge the correct way is like this:

  filter: opacity(.6) drop-shadow(0 0 0 hsl(277, 64%, 61%));

  Cheers!

  Marked as helpful

  0
• 

  romila•3,570

  @romila2003Posted over 2 years ago

  Hi @joglidze,

  Congratulations 🎉 on completing this challenge. It was a great attempt but there are a number of issues I want to address:

  1. Regarding the 'overlay color', you need to give your image an opacity of 0.5 e.g. img { opacity: 0.5 }. Then give the div that wraps your image, a background-color. In your case, it will look something like this .desktop-image { background-color: var(--soft-violet) }. So, you do not need to add the filter property.
  2. The font-size for your title/h1 is very large and the line-height looks quite big too.
  3. The paragraph does not have the correct font-family.
  4. For the media queries, it is ideal to use the mobile-first approach as it will be easier to adjust the elements as you increase the screen size. Your desktop version looks good however when you decrease the screen size to tablet and mobile screens, it does not fit the screen and looks similar to the design. If this is unfamiliar to you, you should research more about this concept in depth through various of other sources e.g. YouTube, articles, technical documentation

  Overall, good attempt and wish you success for future projects so keep coding 👍.

  Marked as helpful

  0