Responsive card component using HTML , CSS Grid and Flexbox

Community feedback

• 

  dewslyse•3,025

  @dewslysePosted about 3 years ago

  You can easily create the purple filter using one of the <blend-mode> properties in css (background-blend-mode or mix-blend-mode). A value of multiply on these properties should do the trick. Try it.

  .image {
      background: url("images/image-header-desktop.jpg") no-repeat;
      width: 50%;
      border-radius: 0 10px 10px 0;
      background-blend-mode: multiply;
      background-color: hsl(277, 64%, 61%);
  }
  

  With this approach, you may not need the .filter class.

  Marked as helpful

  2

  ---

  

  youssef-404•75

  @youssef-404Posted about 3 years ago

  @dewslyse thank you sir i just learn new thing from you thank you

  1
• 

  Shreyansh shah•45

  @Shreyansh-07Posted about 3 years ago

  Good job bro. But one thing your font-weights are a bit messed up. 👍

  Marked as helpful

  1

  ---

  

  youssef-404•75

  @youssef-404Posted about 3 years ago

  @Shreyansh-07i appreciate your feedback i will try to fix it

  0