Skip to content
Submitted over 4 years ago

Responsive Landing Page (CSS Grid, CSS Flexbox, Sass, No Bootstrap)

Fatih•865
@fatihcandev
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Fylo dark theme landing page
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

It's not a question but i wanna say that after learning CSS grid, you'll see how easier it is than Bootstrap to design responsive layouts. It was a great experience designing this. Learned many things. Have a nice day people!

Edit: Well, the early access section is hiding somewhere in the preview but I can see it on the live site or my code. It is an absolute section, do you think that causes it? (SOLVED! Thanks to Gerben for his solution.) And comparison looks different, I don't know why but preview site looks normal.

Community feedback

  • Gerben Dol•3,115
    @GerbenDolPosted over 4 years ago

    Hey Fatih, I'm sure the position: absolute is breaking your early acces area.

    I think you might want to rewrite it without it and try pulling it down over the footer using a negative margin-bottom or move it down using transform: translateY().

    Otherwise great looking page! I agree that CSS grid is a huge help in these layouts!

    0
    Fatih•865
    @fatihcandevPosted over 4 years ago

    @GerbenDol Thank you very much! Looks great now.

    0
    Gerben Dol•3,115
    @GerbenDolPosted over 4 years ago

    @fatihcaen Yeah, that's looking solid now!

    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