Skip to content
Submitted over 2 years ago

👨‍💻 Intro section w/ dropdown w/ (HTML + SASS + JS Dark/Light Mode)

accessibility, bootstrap, sass/scss
Adriano•42,870
@AdrianoEscarabote
A solution to the Intro section with dropdown navigation challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

👨‍💻 Hello everyone.

DAY 7/7 🎉🎊

Finally the end ahuauha, I can't describe how productive this week was, I learned a lot of new things and managed to practice a lot! Within what I learned the two most important things are:

  • Bootstrap
  • SASS

Plus my javascript skills have improved a lot!

Anyway, I leave a tip for those who want to improve, whether with a developer or anything else, persist! Resist the challenges that the world will put in your life, and most importantly learn from them, I guarantee you that at the end of the day all the effort will be worth it.

After this week I feel like I can learn anything, after all, it only depends on me!

I added some details:

  • 👨‍💻 Custom menu bugger!
  • 🎨 Custom colors and hover!
  • 👨‍🎨 Dark/Light Mode!

Feel free to leave comments on how I can improve my code.

Thanks! 😊

Code

Please log in to post a comment

Log in

Community feedback

  • Lucas 👾•104,160
    @correlucas

    Congratulations bro, you’re an inspiration and you did great doing 7 projects on 7 days, this is insane, considering the projects are advanced and with JS. The design is amazing and I liked a lots that you placed the dark mode in the burger menu. Congrats for the 7/7 and the motivation. 😎

    Marked as helpful
  • Rodrigo Pires•410
    @rodrigompires

    Hello Adriano.
    Nice work, but I think there is a small detail in the mobile version in the theme change icons.
    On the first click, the rotation animation occurs, but on the second click, the animation no longer occurs.
    I don't know if it's on purpose, but it only comes back when clicking outside the menu.
    Hugs and nice work.

  • Asha•1,210
    @livinglifemeaning

    Congratulations Adriano for finishing your challenge! What's going to be your next one? Only tip is to use align-items property and change it's default from stretch so those brand icons don't look ugly on desktop. Also, can I ask how you implement different color schemes? I took a look through your code but couldn't tell how, and it's something I'm trying to learn.

  • MX•290
    @xingxing-prog

    The dark theme and day theme are so cool. You are so productive this week. Congratulations.

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