Stats page with flexbox, switching direction for mobile

Community feedback

• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted over 1 year ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have other recommendations regarding your code that I believe will be of great interest to you.

  ---

  iMAGE BLEND 📸:

  • The header image is not properly blended with the primary color of this website

  ---

  • Just quickly resolve it by adding mix-blend-mode property for the overlay and add the violet color as the background.

  ---

  • Example:

  .overlay {
    background-color: rgba(170, 92, 219, 0.75);
  }
  
  .rightPanel img {
   background: #AA5CDB;
    mix-blend-mode: multiply;
    opacity: .75;
  }
  

  ---

  • Now you got the desired result where the image is perfectly blended with the background violet, and the result will accurately match the design image .

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  Marked as helpful

  0
• 

  hitmorecode•6,340

  @hitmorecodePosted over 1 year ago

  Do these changes to make the overlay look like the one on the design.

  .overlay {
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: rgb(170, 92, 219); /* change it to this */
    mix-blend-mode: multiply; /* add this line */
    opacity: 0.8; /* add this line, play with the opacity to get as close as possible to the design */
    border-radius: 0 10px 10px 0;
  }
  

  Marked as helpful

  0