Stats Preview Card Component

Community feedback

• Account deletedPosted almost 3 years ago

  Hey @RobicaCodeaza, great job on this project!

  To help keep your CSS code organized and easier to use, I suggest implementing CSS Variables. This will come in handy when building large websites, using light/dark mode, etc…

  It’ll look something like this:

  :root {
    --primary-color: value;
    --secondary-color: value;
    --tertiary-color: value;
  }
  

  And to use the variables you’ll use the var() function. So it’ll look like this.

  h1 {
  color: var(—primary-color);
  }
  

  Heres are some articles regarding CSS Variables.

  You can also take a look at my projects and see how I use it.

  https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties

  https://www.w3schools.com/css/css3_variables.asp

  Happy Coding!

  00

  Marked as helpful
• 

  Lucas 👾•104,160

  @correlucas

  Posted almost 3 years ago

  👾Hello @RobicaCodeaza, Congratulations on completing this challenge!

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

  Instead of using this long code:

  .imgBx::after {
      position: absolute;
      content: "";
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      background: rgba(147, 92, 219, 0.247);
  }
  
  

  You can use this code shortcut to reach the same color of the challenge. First add to the div containing the background-color: hsl(277, 64%, 61%);, then use mix-blend-mode to make the color blend between the image and the background-color of the container. See the steps below to apply to the img or picture selector:

  img {
  mix-blend-mode: multiply;
  Opacity
  
  

  ✌️ I hope this helps you and happy coding!

  00