Meet landing page Responsive with Flexbox, Grid

Community feedback

• 

  P

  andiaz•150

  @andiazPosted 5 months ago

  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•200

  @MattJM1007Posted 5 months ago

  @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

  @andiazPosted 5 months ago

  @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