Stats Card Component using Flexbox

Community feedback

• 

  👾 Ekaterine Mitagvaria 👾•7,600

  @catherineisonlinePosted almost 2 years ago

  For the image, I did something like this, I hope that helps:

              <div class="image-container">
                  <img class="main-image" src="images/image-header-mobile.jpg" alt="">
              </div>
  

  .image-container {
    display: inherit;
    position: relative;
    width: 100%;
    border-radius: 0 10px 10px 0;
    background-color: hsl(277, 64%, 61%);
  }
  .main-image {
    width: 100%;
    height: 100%;
    position: relative;
    background-size: cover;
    border-radius: 0 10px 10px 0;
    mix-blend-mode: multiply;
    opacity: 0.75;
  }
  

  0

  ---

  

  David Pelo•110

  @DavidPeloPosted almost 2 years ago

  @catherineisonline That's a great solution. I like it because I don't have to add any unnecessary HTML. I applied it to my solution and it looks great. Thank you!

  0
• 

  Sinisa Vukmirovic•1,690

  @SinisaVukmirovicPosted almost 2 years ago

  Hello!

  About your questions:

  1. I didn't do this challenge so I don't know do you get color values or not, but if you don't, eyeballing is what you should de to get it looking as close as the desing. One thing is for sure...Don't stress about things like that too much, as long as it looks close, you got nothing to worry about.

  2. Your solution for overlay is fine.

  3. It is a little much, but, if you wanted it to be perfect, than it is fine. Again, don't stress about "making it look fluid", since ordinary user will not see "fluidity". Only other developers could see it if they go into responsive mode in the console.

  4. Looks fine to me...

  Good luck on your journey!

  0

  ---

  

  David Pelo•110

  @DavidPeloPosted almost 2 years ago

  @SinisaVukmirovic Awesome, thanks for quick feedback!

  0