All solutions

What specific areas of your project would you like help with?

Any advice on how to improve js code is welcome.

What are you most proud of, and what would you do differently next time?

I was able to animate dropdown menu on desktop, but couldn't do it on mobile, because list items wouldn't fold to 0px height (due to sag icons). It would be possible if I could animate display: none, but that is not widely supported yet :)

What challenges did you encounter, and how did you overcome them?

Mainly with the architecture for menu and how to make it slide-in-out, and getting the vertical picture right for desktop (not making it distorted)

What specific areas of your project would you like help with?

I would appreciate an advice on a way to do animation for dropdown menu for mobile (keep in mind that the nav element is one for both desktop and mobile, so no additional or secondary menu for mobile)

I've encountered a bit of a bug with this one. I'm not a big fan of creating separate menus for desktop and mobile, so usually css for the menu changes, not html. But with animations this approach backfired, because when you resize window on desktop or tablet, when the menu becomes mobile, user can see it for a second. Hot fix for it was to remove transition, but I need it to stay for smooth and consistent experience. But when mobile menu was activated, the issue remains. I'll investigate it further on how to remove this bug, but any feedback on how to cope with this issue without changing html is welcome.

(On GitHub repo's I listed the code that is used for this hack)

PS: in order to see this bug, resize the window so you you can see burger menu icon, click it, close menu, and then resize back to desktop size, and back to mobile, you'll see menu for a split second being translated to the right outside of viewport.

Any advices are welcome

Any suggestions on how to make form validation code more efficient are welcome!

Feel free to point out what needs an improvement!

would be helpful to get an advice on how to make the radial gradient closer to the example given in the design.

Would be great to get advice on how to set up backgrounds and box-shadow!

Couldn't figure the correct color for box shadow.

Changing the alpha value didn't help either🥺

Is there a way to make this component more optimised and have less css?

Or should the structure of HTML be altered?

Any advice is welcome.