Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Meet landing page Responsive with Flexbox, Grid

P
Matthew 190

@MattJM1007

Desktop design screenshot for the Meet landing page coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are you most proud of, and what would you do differently next time?

Figuring out the background image and overlay

What challenges did you encounter, and how did you overcome them?

figuring out the layout and responsiveness

What specific areas of your project would you like help with?

any feedback on layout and responsiveness would be great!

Community feedback

P
andiaz 150

@andiaz

Posted

Overall very nice job, this implementation also works well across many screen sizes! :)

Some small things I noticed is that the font weight of the headers should be higher (900).

Also the background color of the footer image should be a darker color as well, compare to the design.

It's worth playing with if you can make the header images span outside of the viewport, while at the same time avoiding horizontal scrollbars :) I managed to get that work on mobile resolutions if you want to check out my solution, but unfortunately not on higher resolutions (yet!).

1

P
Matthew 190

@MattJM1007

Posted

@andiaz thanks! I was playing around with background color on the footer but couldn't get it to be darker with the way I was doing it so wasn't sure how to do it.

0
P
andiaz 150

@andiaz

Posted

@MattJM1007 Ah I see! I think I solved the background color using this one (example for the mobile version, need to replace URL depending on which resolution):

background:linear-gradient(0deg, rgba(77, 150, 169, 0.9), rgba(77, 150, 169, 0.9)), url(../assets/mobile/image-footer.jpg);  
background-size: cover;

You can check my solution here if you want: https://andiaz.github.io/html-css-learnings/meet-landing-page/

1

Please log in to post a comment

Log in with GitHub
Discord logo

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