Stats-Preview-Card-Component

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello @barnilsarma, congratulations on your first solution!

  Nice code and nice solution! You did a good job here putting everything together. I’ve some suggestions for you:

  1.Prefer CLASS instead of ID to give style to your elements, choosing id is not a good idea because it’s a too specific selector and it's better to use it for forms or Javascript code. It is not advisable to use IDs as CSS selectors because if another element in the page uses the same/similar style, you would have to write the same CSS again.

  2.Instead of using a long code for the IMAGE OVERLAY. You can do it using a shortcut with a few lines of code mix-blend-mode, that in my opinion is a better way and makes the color tone really close to the challenge design. All you need is the div under the image with this background-color: hsl(277, 64%, 61%); and apply mix-blend-mode: multiply and opacity: 80% on the img or picture selector to activate the overlay blending the image with the color of the div. See the code bellow:

  img {
  mix-blend-mode: multiply;
  opacity: 80%;
  }
  

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  0