Skip to content
Submitted almost 3 years ago

Fylo Dark Theme Landing Page with Vanilla JS, SCSS, and BEM

Ken•4,915
@kens-visuals
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

The overall layout was simple and easy to put together, the only tricky part was the background pattern. As for the last couple of projects, I added some IntervalObservers as well. I really like how they can make a single page simple layout to be more interactive. That's why I tend to add some simple animations ever since I've learned about this technique. In brief, fun and cool project, I'd also like if it had a theme switcher from dark to light. I'd implement it by myself, but I still have two projects left to do.

Got some feedback? Feel free to leave a comment 👨🏻‍💻 Cheers 👾

Community feedback

  • Vegeta•60
    @Shyam101Posted almost 3 years ago

    excellent

    1
    Ken•4,915
    @kens-visualsPosted almost 3 years ago

    @Shyam101 appreciate it 😇

    0
  • IgMoMiNkhAN•50
    @IgMominKhanPosted almost 3 years ago

    How did you use images instead of using background images? Nothing like positioning or z-index has been used?

    0
    Ken•4,915
    @kens-visualsPosted almost 3 years ago

    Hi @IgMominKhan 👋🏻

    There's picture tag in HTML where you can add two images and specify a viewport width, so it changes them accordingly. Then I gave it a width, height, and object-fit properties, which makes the image to act similarly to the background-image property. And here's the result 🙃

    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