Stats preview card component solution

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 3 years ago

  👋Hi Jacqueline dos Santos Braga! My name is Vanza!

  I have some feedback that will improve this solution:

  • First, instead of writing this:

  .card-stats{
      background-color: var(--dark-desaturated-blue);
      border-radius: 10px;
      display: flex;
      flex-direction: row-reverse;
      justify-content: space-between;
      height: 446px;
      width: 90%;
      max-width: 1110px;
  }
  
  .card-image::before{
      background-color: hsla(277, 64%, 61%, 0.452);
      border-top-right-radius: 10px;
      border-bottom-right-radius: 10px;
      content: "";
      display: block;
      position: absolute;
      width: 100%;
      height: 100%;
  }
  
  .card-stats__image{
      border-top-right-radius: 10px;
      border-bottom-right-radius: 10px;
      width: 100%;
      height: 100%;
      object-fit: cover;
  }
  

  • You can just write this:

  .card-stats{
      background-color: var(--dark-desaturated-blue);
      border-radius: 10px;
      display: flex;
      flex-direction: row-reverse;
      justify-content: space-between;
      height: 446px;
      width: 90%;
      max-width: 1110px;
      overflow: hidden;
  }
  
  .card-image::before{
      background-color: hsla(277, 64%, 61%, 0.452);
      content: "";
      display: block;
      position: absolute;
      width: 100%;
      height: 100%;
  }
  
  .card-stats__image{
      width: 100%;
      height: 100%;
      object-fit: cover;
  }
  

  • That way, you don't have to repeat border-radius, just by adding overflow: hidden to its parent element.
  • For the image purple overlay, I recommend to try this method:

  1. HTML (You don't need img tag)

  <div class="card-image">
  </div>
  

  2. CSS (You can change the background-image for the desktop using media query)

  .card-image {
    background: url('../images/image-header-mobile.jpg') no-repeat center center;
    background-color: hsl(277, 64%, 61%);
    background-blend-mode: multiply;
    background-size: cover;
    width: 50%;
  }
  

  That's it! Hopefully this is helpful!

  0