Stats card Responsive

Community feedback

• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  wrap <div class="attribution"> in the footer tag to fix the accessibility issue.

  For the color of the image, Add a background-color of soft violet, background-blend-mode of multiply and opacity of 0.8 to .photo.

  .photo{
  background-image: url();
  background-size: cover;
  background-color: hsl()
  background-blend-mode: multiply;
  opacity: 0.8;
  }
  

  To center . wrapper on the page using flexbox, replace the height in the main with min-height:100vh.

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  Marked as helpful

  1

  ---

  

  Lauryne•260

  @lauryne921Posted almost 2 years ago

  @Hassiai Thank you for your advice, it's very useful, I'll try this.

  Once again, thank you, have a nice day !

  Happy Coding

  1
• 

  Lauryne•260

  @lauryne921Posted almost 2 years ago

  I don't know how to put a violet filter on the photo, could someone tell me how to do this ? 🙂

  0

  ---

  

  Max•60

  @maxp421Posted almost 2 years ago

  @lauryne921 What i did was that I added a linear gradient to the background image. You could also use an ::after selector for an overlay but in this particular case i found the linear gradient overlay solution the easiest.

  background-image: linear-gradient(hsla(277, 64%, 61%, 0.8), hsla(277, 64%, 61%, 0.8)), url("../images/image-header-desktop.jpg");
  background-blend-mode: multiply;
  

  For my solution the missing piece to make the colours just like in the original design was background-blend-mode: multiply; but Hassia pointed that out for me.

  Marked as helpful

  1

  

  Lauryne•260

  @lauryne921Posted almost 2 years ago

  @maxp421 Thank you for your answer, I'll try what Hassia said and I'll also try your solution.

  Thank your for taking time to answer me !

  Have a nice day

  0

  

  Lauryne•260

  @lauryne921Posted almost 2 years ago

  @maxp421 Thank you for your answer, I'll try what Hassia said and I'll also try your solution.

  Thank your for taking time to answer me !

  Have a nice day

  0

  

  Lauryne•260

  @lauryne921Posted almost 2 years ago

  @maxp421 Thank you for your answer, I'll try what Hassia said and I'll also try your solution.

  Thank your for taking time to answer me !

  Have a nice day

  0

  

  Lauryne•260

  @lauryne921Posted almost 2 years ago

  @maxp421 Thank you for your answer, I'll try what Hassia said and I'll also try your solution.

  Thank your for taking time to answer me !

  Have a nice day

  0

  

  Lauryne•260

  @lauryne921Posted almost 2 years ago

  @maxp421 Thank you for your answer, I'll try what Hassia said and I'll also try your solution.

  Thank your for taking time to answer me !

  Have a nice day

  0