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

responsive landing page using html,tailwindcss and javascript

#tailwind-css
Ose 490

@oseji

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


How can i implement the side navigation bar on mobile screens? Also how could i have included a transition animation to the dropdown menu for FEATURES and COMPANY?

Community feedback

Abhik 4,840

@abhik-b

Posted

Hello Ose , Your solution looks great on large screen & nice use of tailwind , well done 💯

Just some opinions :

  • Give your .invisible-container this position:absolute so that main does not shift when you click on a dropdown link
  • Check this video for responsive navbar in mobile
  • To add animation to features & company , since you are already using .hidden class , give some transform:translateY(20px);opacity:0; to hidden class. What will happen is as soon as hidden class is removed from 1 of the ul , the transform & opacity will become default. Also add some transition to the ul

Hope this help 🤞& Please keep Coding such nice solutions 🥳

Marked as helpful

0

Ose 490

@oseji

Posted

@abhik-b thank you very much 🙏🙏

1

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