Submitted about 2 years ago

Meet landing page

Jax Teller• 670

@piushbhandari

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Meet landing page

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

pros / cons please.

I had one issue with the footer, specifically with the background img blending with the cyan color. how did you guys do it?

this is what i did: background-image: url("./assets/desktop/image-footer.jpg"); background-size: cover; background-position: center; background-color: #4d96a9; background-blend-mode: multiply;

Community feedback

Lucas 👾• 104,420

@correlucas

Posted about 2 years ago

Hello Jax Teller, congratulations for your solution.

To improve the image in the footer blending you need to apply an opacity around 30% 35% to have it less strong and more transparent.

Try it opacity: 0.3;

Maybe multiplyburns too much the image you can try or overlay or soft light for the mix-blend-mode

I did this same solution and I've fixed doing color management with low opacity.

See if works, happy coding!

Marked as helpful

Jax Teller• 670

@piushbhandari

Posted about 2 years ago

@correlucas that wasn't working for me. I ended up doing => background-image: linear-gradient( rgba(77, 150, 169, 0.9), rgba(77, 150, 169, 0.9) ), url("./assets/desktop/image-footer.jpg");

and it worked. thanks!

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord