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

Fylo landing with scss, grid, cool hover/focus effects

Roman Filenko• 3,335

@rfilenko

Desktop design screenshot for the Fylo dark theme landing page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hey y'all, tackled another challenge here. Grid for positioning some sections, scss and ccss variables and a little js for animations. Added fancy hover and focus effect. Feel free to leave some comments if you spot any issues or just liked my solution. Happy coding :)

Community feedback

Shashi Lo• 1,345

@shashilo

Posted

Another great job Roman. The nav link CSS transitions are really cool and the mobile implementation is awesome. I did find some things that can be improved:

  • The style guide calls for the max-width for desktop to be 1440px. Yours is set at 1170px. This causes the site to look thinner and the columns to not match the design.
  • All of your headings are using the wrong font. They should be using var(--ff-heading) instead of var(--ff-body)
  • The Stay productive, wherever you are seems to be incomplete on desktop. The heading is small and not vertically aligned to the section.
  • The Get early access today CTA container is too thin. It causes the content to feel squished in, but it also doesn't match the design specs.
  • I like the sticky header, but the transition is wonky. It looks like it's growing then shrinking. When you scroll back up and the sticky header is removed, it jumps a few times before it's removed. I would like to see this get smoothened out.
  • Fixing the button :hover transition would be nice too. A nice smooth gradient transition would make this implementation even better.
2

Roman Filenko• 3,335

@rfilenko

Posted

@shashilo hi Shashi, appreciate your feedback, will work on those to polish this up😉

1

@nasratt

Posted

I can only say WOW WOW, man; keep it up. Any points to learn animations on JS?

0

Roman Filenko• 3,335

@rfilenko

Posted

@NasratTalash thanks, generally it's better to make animations via css, they are more performant and quite functional

0

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