Skip to content
Submitted over 4 years ago

Mobile first Fylo landing page using CSS vars

Gerben Dol•3,115
@GerbenDol
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

Hey guys! So, I enjoyed putting together this layout. It really showed me the ease of using flexbox for all these sections. Keeping the site mobile first was super easy this way.

I also loved using grid for the footer, as it just made the layout a breeze.

My question to you: how would you spice up a layout like this? Maybe add some animations on scroll? Would really like seeing your solution and hearing what you're missing. 😁

Community feedback

  • Bo Allan Johansen•350
    @boallanPosted over 4 years ago

    Hi Gerben, I was looking to your solution to see how you position the curve image. Good stuff, definitely bookmarked.

    I currently place the curve images in a picture element with an alt="". It works fine, and it should be acceptable for assistive technologies too. I however feel like it's not semantically optimal, since it's purely decorative, and I was considering the object element or to simply place a div with the curve as a background image. Or maybe just place it as a background image within my stayproductive section and see if I can position it correctly in the top of element.

    But then I saw you using ::before to place the image and now I'm confused on an even higher level :)

    Would you mind sharing your thoughts about using ::before in this situation? I'm trying to wrap my head around what the best solution is, but I'm hitting a dead-end, I would be grateful for any suggestions :)

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

    @boallan Hey Boallan, great to see you reaching out!

    How about we hit each other up on Slack? That'll talk a bit easier. I'm in the Frontend Mentor channel as Gerben Dol, so it shouldn't be too hard to find me.

    Just send me a message and we'll talk when I have the time! 🙌🏻

    1
  • Matt Studdert•13,611
    @mattstuddertPosted over 4 years ago

    Awesome work on this challenge, Gerben! Animations would definitely be a good shout. Do you have any animation libraries that you typically use?

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

    @mattstuddert Thanks Matt! I'll usually try sticking to CSS only, but lately I've really enjoyed using GSAP. Especially the stagger functionality can make a page that much nicer.

    I tried using it on the svg image on this solution: https://www.frontendmentor.io/solutions/huddle-landing-page-with-gsap3-animations-H7R5Dy7si

    I should've reordered the SVG for the stagger to make sense though, haha.

    0
    Matt Studdert•13,611
    @mattstuddertPosted over 4 years ago

    @GerbenDol yeah, GSAP is great!

    1

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