Stats Preview Card with HTML and CSS

Community feedback

• 

  Danilo Blas•6,300

  @Sdann26Posted over 2 years ago

  Hi Brian I'll help you with the color.

  It's not too complicated you just need to use mix-blend-mode, which is a CSS attribute that mixes an element with the background color of its parent.

  Then you will give your image the following styles:

  .hero-img {
      max-width: 100%;
      max-height: 85vh;
      opacity: 0.75;
      border-radius: 0 0.5rem 0.5rem 0.5rem 0;
      mix-blend-mode: multiply;
  }
  

  And then to the parent box the following styles:

  #container-hero {
      background: var(--soft-violet);
      border-radius: 0 0.5rem 0.5rem 0.5rem 0;
  }
  

  And that would be all, as you will see it is a little difficult to realize and has a special use case but every day you learn something new, which by the way I can only help you so far, even your design lacks the responsive for mobile view, you can do it with media queries, but try it.

  That would be all, I hope I helped you, good luck :D!

  Marked as helpful

  1

  ---

  

  Brian•60

  @briansegura15Posted over 2 years ago

  @Sdann26 Hey hermano gracias! Definitely going to read into that mix blend mode you mentioned above and try to implement that into my code. As for the media queries I should have been doing them for all my challenges but have been putting them off due to intimidation with a hint of lazyness lol. I am planning to go back and make them all responsive in the near future.

  1