Stat Preview Card Component

Community feedback

• 

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  👾Hello @ColonelSandurz, congratulations for your new solution!

  To have the same exact color without needing to add many lines of code you can use mix-blend-mode and opacity to manage the colors. To add the exact same purple overlay effect for the image, matching the design files you can use, filter or mix-blend-mode. See the code below

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

  To improve the image responsiveness you can use object-fit: cover to make it have a better behavior inside the column and Instead of importing the card image with CSS you can manage it inserting the tag <picture> to wrap both desktop and mobile images together in the same tag, and render each image depending of the device (phone / computer) by the settings for the width you'll insert in the html

  👋 I hope this helps you and happy coding!

  Marked as helpful

  0

  ---

  

  ColonelSandurz•90

  @ColonelSandurzPosted about 2 years ago

  @correlucas Thank you, this was very helpful. Some of these tags I have not seen yet even throughout the courses I have taken, appreciate all the help.

  1
• 

  ColonelSandurz•90

  @ColonelSandurzPosted about 2 years ago

  The design does not have the black margins on the side like the original .jpg file had, so the solution looks smaller. Checking out the live site gives a more accurate look.

  https://colonelsandurz.github.io/Stat-Preview-Card-Component/

  I may edit out those black margins at a later time

  0