Intro section with dropdown navigation

Hi Ekaterine,

That is a great project, I can't find no bad side in it. Everything is clean, good work! very good work Great project, I just have 2 minor stylistic comments that I think would be helpful. use vue js use vutify

This will help you in rapid work and development without any time and effort, write much shorter code, and improve the performance of your site.

But you did a very good job, of course, very excellent and wonderful

Hi Ekaterine,

That is a great project, I can't find no bad side in it. Everything is clean, good work!

Muito bom o trabalho, parabéns.... achei perfeito, bem dinâmico, semântica boa demais.

Hi @catherineisonline. Congratulations on completing this challenge. Your solution looks amazing.

I do have a few suggestions on how you can improve the solution further:

• Right now the dropdown navigation shows only when a user hovers over it. A lot of users don't like using a mouse and just use keyboards. To make the menu more accessible for them, you can cause the dropdown to show on focus (you'll have to use the property focus-within. I consulted this link for creating keyboard accessible dropdown menu while doing this challenge. Hope you find it useful as well.

• Second suggestion is that you have used a max-width for the main container which prevents it from stretching out. You can use the same for the nav as well. Right now for very large screens, the nav bar stretches out considerably.

Hope you find the feedback helpful. All the best for your future challenges.

This has been giving me a challenge for weeks now😭 . Your solution looks amazing. I would like to get your thought process on how you got to the solution 😅.

Great job👌🏾

Hello Ekaterine, Congratulations!! you aced this challenge. I have some insights that may help you.

• in your media query use 375px as max-width to ensure responsiveness in mobile devices. -Reduce the font size of your intro header on small devices. nevertheless, I do love the idea of a sticky hamburger, on scroll. good job!

Hey @catherineisonline,

• if not provide any hyperlink in the anchor tag. then use # ex (<a href="#">Todo List</a>)
• add line-height: normal; in the button element.
• replace min-width:1000px; with min-width:1200px; in the main element.

Hi Ekaterine,

Great project, I just have 2 minor stylistic comments that I think would be helpful.

1. When the menu is dropped down, it hugs the navigation menu too tightly. I would advise that you create some small space between the navigation and the menu that is dropped down. You can either do it by increasing the value that it is offsetted from the top or just use transform: translateY() and give it a larger value.
2. There also seems to be a scrolling issue. When I view this on Google Chrome, the bottom portion of the website is cut off and there doesn't seem to be a scrolling option to see them. So I can't see the padding at the bottom or the icons. To fix that you might have to look at how you set the overflow property.

Hope you found this feedback helpful.

Aside from that, very well done.

• From User Experience Perspective

• Problem::

• In mobile version, inside [Menu List] when I hover over [Features] it opens list and increase in size due to which the position of [Company List] goes down and when I go down the [Feature List] and get past the last item in [Feature List], the [Feature List] shrinks, taking the [Company List] and [Feature List] back to its position before hover state and User has to hover over [Company List] by bringing the cursor from bottom of the [Menu List] and it becomes irritating to go up and down again again to see these lists.

• Solution::

• I think it would be better if there is a delay for closing [Feature List] so that User has time to go over [Company List].

• I am not as good as you are and I learn from your projects and get inspiration from you.

• I hope You find this UX feedback useful.