stats preview card

Community feedback

• 

  バレンタイン 😈•64,170

  @VCaramesPosted about 2 years ago

  Hey @Mikssxed, great job on this project!

  Some suggestions to improve you code:

  • When using different images for responsiveness, it’s far more efficient to use the <picture> element.

    <picture>
      <source media="(min-width: )" srcset="">
      <img src="" alt="">
    </picture>
  

  • 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

  Marked as helpful

  1
• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello @Mikssxed, Congratulations on completing this challenge!

  I've just opened your live site and I can say that you did a great job putting everything together! There are some tips to improve your solution:

  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

  1

  ---

  

  Wojtek•650

  @MikssxedPosted about 2 years ago

  @correlucas Corrected, thanks a lot :D

  0
• 

  Lucas Cerri•1,140

  @llKryptonixllPosted about 2 years ago

  Hey first off all great work but it is not full responsive you should add a min height or make the card bigger at some point because the text ist not staying in his container.

  1

  ---

  

  Wojtek•650

  @MikssxedPosted about 2 years ago

  @llKryptonixll Added min height and width, thanks

  0