Zulamir's Stats Preview Card Component

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello Zulamir, Congratulations on completing this challenge!

  I’ve few suggestions for you that you can consider adding to your code:

  1.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%;
  }
  

  2.Improve the card's overall look by adding the rounded borders to the component and also the image using border-radius: 15px

  • Add rounded borders to the left side of the image with border-radius: 15px 0px 0px 15px;
  • Then do the same thing for the component but in the opposite borders border-radius: 0px 15px 15px 0px;

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  1

  ---

  

  Zulamir•180

  @zulamirsofianPosted about 2 years ago

  @correlucas

  Hi Lucas,

  Thank you very much for your feedback. I definitely will look into your feedback as I understand my code is a huge mess 😂 as I am still learning to understand the concepts. I look forward to commit some fixes and improvements in the future.

  Thank you again and take care.

  1