HTML and CSS

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  👾Hello Yashvir, congratulations for your solution!

  I know thats is tricky to apply this overlay effect if you're not familiar to the property that does this change, I knew it only because someone told me here. But there are 3 ways to do that:

  1.You can use the div background and the image blending with opacity.

  2.You can use filter and play with the contrast and opacity values.

  3.The best way and easier is using mix-blend-mode: multiply and aplying 75% for the opacity.

  img {
  mix-blend-mode: multiply;
  opacity: 0.8;}
  

  Hope it helps bro, keep it up!

  0

  ---

  

  Yashvir Singh•120

  @Yashvir821Posted about 2 years ago

  @correlucas thank you so much:)

  0
• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  Hi, Yashvir Singh! 👋

  I would recommend fixing the indentation of the HTML. At the moment, it is really hard to understand the HTML. You can install a code formatter like Prettier to automatically do the formatting for you.

  Next, I suggest moving all the CSS into a separate file. It may not a big deal since this is just a small project. But, it is a good thing to get into the habit of separating the HTML and CSS. Not only, it makes it easier understand but also, it can potentially make the styling easier to maintain.

  After that, try to make the website responsive first. If you don't have any resources to learn responsive web design, then I suggest reading the responsive design guide from MDN.

  Finally, you can start improving the site by trying to create the overlay. You can try using mix-blend-mode and adjust the opacity of the img to make it looks closer to the design.

  That's it! Happy coding! 👍

  0

  ---

  

  Yashvir Singh•120

  @Yashvir821Posted about 2 years ago

  @vanzasetia Thank you so much it was helpful.

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted about 2 years ago

  @Yashvir821 Happy to hear that was helpful! 😊

  0