Skip to content
Submitted about 3 years ago

Frontend Mentor | Fylo landing page with two column layout

Dmitry•665
@carlson142
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Fylo landing page with two column layout
  • HTML
  • CSS
2junior

Design comparison

SolutionDesign

Solution retrospective

Any feedback! ᄽὁȍ ̪ őὀᄿ

Community feedback

  • Andrés Gutiérrez Ramírez•2,470
    @AGutierrezRPosted almost 3 years ago

    Great job! as always!! =D, I have a few suggestions

    1. You could set the layout of the page in the body, no need to put everything in a <main> tag.
    2. Try to use the semantic tags <header>, <main> and <footer> for the respected sections of the pages.
    3. One common flex layout for the entire page is:
      • Set the <body> as display: flex with flex-direction: column and a min-height: 100vh, this will give you a body that covers the entire viewport
      • Set the <main> with flex-grow: 1 and this will ensure that the body cover the space between <header> and <footer> and the <footer> will be at the bottom of the page
    4. On the <header> you could use align-items: center to center the logo and menu
    5. Use gap to bring space between Flex Items, this can be used on .header__top--list
    6. You could use the ch unit, to set a max-width on the text that you want to wrap in a certain number of characters. This way, you don't have to rely on width + padding to achieve the text to wrap as the design.
    Marked as helpful
    2
    Dmitry•665
    @carlson142Posted almost 3 years ago

    @AGutierrezR thanks a lot for your feedback)! I will implement this in next solutions!

    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