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

Mobile first Fylo landing page using CSS vars

Gerben Dol 3,115

@GerbenDol

Desktop design screenshot for the Fylo landing page with two column layout coding challenge

This is a solution for...

  • HTML
  • CSS
2junior
View challenge

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

P

@boallan

Posted

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

@GerbenDol

Posted

@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
P
Matt Studdert 13,611

@mattstuddert

Posted

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

@GerbenDol

Posted

@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
P
Matt Studdert 13,611

@mattstuddert

Posted

@GerbenDol yeah, GSAP is great!

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