Stats Preview Card Component

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  👾Hello Carl , congratulations for your new solution!

  I've checked your new solution live site and seems really good, you've build the correct html structure and with the correct semantic tags. This is really nice!

  There are only two things I think you can improve here. Here`s my tips:

  1.Use the tag picture to wrap the mobile and desktop images, this way you save time and have more control over both images, because you can render both images with a single tag and set when they should switch betwen devices.

  2.Add the overlay effect using mix-blend-mode: multiply instead of using a linear-gradient to the image. See the code below:

  img {
  mix-blend-mode: multiply;
  opacity: 0.8;}
  

  👋 I hope this helps you and happy coding!

  Marked as helpful

  1

  ---

  

  Carl Eder P. Ballenas•290

  @CarlTheBeginnerPosted over 2 years ago

  @correlucas I've done what you said on the responsive image side but I chose on linear-gradient because that's what I am comfortable here it is:

  .card-img { order: 1; object-fit: cover; background: linear-gradient( to bottom, hsla(277, 51%, 42%, 0.5), hsla(277, 64%, 61%, 0.5) ), url("../images/image-header-mobile.jpg") no-repeat top center/cover; height: 19rem; }

  @media screen and (min-resolution: 192dpi) and (min-width: 1120px), screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 1120px), screen and (min-width: 1120px) { .card-img { order: 1; object-fit: cover; background: linear-gradient( to bottom, hsla(277, 51%, 42%, 0.5), hsla(277, 64%, 61%, 0.5) ), url("../images/image-header-desktop.jpg") no-repeat top center/cover; height: 19rem; } }

  0