Skip to content
Submitted almost 3 years ago

Meet Landing Page

Lawrence Caudle•100
@ltc870
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Meet landing page
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Here's another project I've completed. Could anyone give me some feedback on this project, I have a few issues I would like to address. The color of the footer photo doesn't match the design, which I've noticed when there's an overlay color on a photo, they never really match the design. I was wondering is there a way to fix this? Or do I just go with what Frontend Mentor provides? Also, the footer itself doesn't matches the design fully. Am I being nitpicky or is there a way I can fix this? Any tips would be awesome, thank you!

Community feedback

  • Anthony•355
    @ACdev27Posted almost 3 years ago

    For the footer, one thing I did to make it more match the design is to set a height for it. I think I used 300px.

    Also, for the color of the footer. Using color modes is just one way to get something similar.

    Another good technique is where you basically add the photo to the footer first, and then add "another colored layer" over the photo, using pseudo-class ::before on the footer element with the photo background. Then you can adjust the opacity of this layer to get the effect you want. Kind of like something you would do in photoshop instead of using blend modes. Just add a transparency colored layer over the photo.

    If you never used pseudo class ::before it is very useful, but it took me awhile to figure it out, but it is working knowing.

    1
    Lawrence Caudle•100
    @ltc870Posted almost 3 years ago

    @ACdev27 Thanks! I actually tried a method similar to this, but I think how I had the HTML laid out, it affected the overlay. I really do appreciate your suggestion though!

    0
  • David Turner•4,150
    @brodiewebdtPosted almost 3 years ago

    This is what I did, it worked for me.

    background: linear-gradient( hsla(192, 37%,48%, 0.9), hsla(192, 37%,48%, 0.9) ), url(../assets/mobile/image-footer.jpg);

    I haven't used the background-blend-mode, so I don't know if that is the reason.

    1
    Lawrence Caudle•100
    @ltc870Posted almost 3 years ago

    @brodiewebdt Thanks a bunch! I was wondering, what made you think of this solution to double up on the gradient? I wouldn't have ever thought of this.

    0
    David Turner•4,150
    @brodiewebdtPosted almost 3 years ago

    @ltc870 I don't know, I found that out a while ago. I use google a lot and watch a lot of design tutorials and content creators.

    0
    Lawrence Caudle•100
    @ltc870Posted almost 3 years ago

    @brodiewebdt gotcha! Well I appreciate it!

    0
    David Turner•4,150
    @brodiewebdtPosted almost 3 years ago

    @ltc870 Glad I can help.

    0

Please log in to post a comment

Log in with GitHub

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