Responsive Stats preview component : shank-codes

Community feedback

• 

  JuvoGenesis👾•2,010

  @AkoToSiJeromeEhPosted over 1 year ago

  Hi! Great Work Out there! In my experience with this challenge, I usually use CSS properties like mix-blend-mode: multiply or background-blend-mode: multiply to match the color overlay of an image in the design reference. Since you're using the image as a background, background-blend-mode is the more suitable option. I also noticed that you used d-flex on .stats, which is good, but personally, I prefer using d-grid to match the positioning in the design reference. That's all! I hope this information helps you. Happy coding! (the bold text is the code i modify on your source code)

  .stats {

  display: grid;

  grid-template-columns: repeat(3 ,1fr);

  /* flex-direction: row; */

  /* justify-content: space-between; */

  }

  .headerImage {

  background-image: url(/statscomponent/static/media/image-header- desktop.72d6e2a….jpg);

  background-color: blueviolet;you can change this

  background-size: cover;

  background-blend-mode: multiply;

  border-radius: 0 0.5em 0.5em 0;

  opacity: 0.7;you can adjust this

  width: 50%;

  }

  Marked as helpful

  1

  ---

  

  Shashank Hiremat•90

  @shank-codesPosted over 1 year ago

  @AkoToSiJeromeEh Thank you so much, helped a lot.

  1

  

  JuvoGenesis👾•2,010

  @AkoToSiJeromeEhPosted over 1 year ago

  @shank-codes always welcome 🚀

  0