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 Dark Theme Landing Page with Vanilla JS, SCSS, and BEM

#accessibility#sass/scss#bem
P
Ken 4,915

@kens-visuals

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


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

@Shyam101

Posted

excellent

1

P
Ken 4,915

@kens-visuals

Posted

@Shyam101 appreciate it 😇

0

@IgMominKhan

Posted

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

0

P
Ken 4,915

@kens-visuals

Posted

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
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