Failed to decode param 'V%E1clav'
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

Intro Section with dropdown navigation in HTML/CSS/Javascript

@debriks

Desktop design screenshot for the Intro section with dropdown navigation coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hi Guys! Here’s my solution to this challenge. My JS is still very poor and even something as easy as a dropdown navigation is still hard for me. So I checked around on Frontend for a JS Code I could almost understand and I found the one of Adarsh (@adram3l3ch) that seemed to be quite efficient. I really want to learn new concepts in JS and I was very interested by the fact that he was using the ‘scrollHeight’ JS property to solve this challenge.

For the CSS part, it’s getting better I think :)

As usual, any feedback is more than welcome ✨

Community feedback

Lucas 👾 104,540

@correlucas

Posted

Nice solution Deborah! Perfect design and super responsive. I liked a lots how smooth is the interaction/transition with the dropdown menu.

I think the dropdown box shadow is a bit too hard (maybe its the exact file from the Figma file, I don't know). Something I like to do for this kind of shadows to have it smoother is to decrease the opacity, increase the blur and use a color tone near blue instead of black. Like this value: box-shadow: 0 0 5rem 0px rgb(24 50 67 / 16%);. This is only a small detail, you don't really need to change it 🤓

Keep it up =)

Marked as helpful

1

@debriks

Posted

@correlucas Hi Lucas! I will check it out once I’m back on the computer. I also don’t like when the box-shadow is too hard. Thank you! Have a nice day ✨

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