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 dropdown navigation homepage using Sass, html & javaScript

@jen67

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


Hey awesome folks! 🌟 Just wanted to share my excitement—I just wrapped up this cool dropdown navigation homepage challenge. 🚀 While figuring out the dropdown positioning, I faced a bit of a challenge, but I managed to tackle it in the end! 🎉 It might not be flawless, but I'm still in the learning zone. 📚💡 Open to any tips or corrections you might have! Let's learn and grow together! 🌱💪😊

Community feedback

@JBlezi

Posted

Hi Gift! It looks great overall, really good work :)

Apart from the advice already given by Matias, the only thing I would change is that you can make it so the menus close when you open another menu, so when the 'Features' menu is open and you click on the 'Company' menu, then the 'Features' menu closes. This helps the user focus better on the menu they just clicked on.

By doing that it is also easier to align the dropdown with the menu item, because then the other dropdown won't be in the way ;)

Hope this helps, keep up the good work!

Marked as helpful

1

@jen67

Posted

@JBlezi Thank you so much

1

@matiasluduena23

Posted

Hi Gift Amachree’s! Nice work!!! Just one advice that might help you.

  • In desktop design the both side of the page looks like two boxes with the same width. One has the image, the other one the text. To approach this you can use grid or flex. Since you used flex let look at it with flex
you have

@media (min-width: 768px) {
  main {
    display: flex;
    gap: 2rem;
    flex-direction: row-reverse;
    padding-left: 3rem;
    padding-right: 3rem;
  }

(and add)
.main-section-texts, 
.wrapper-figure {
width: 50%;
}
(I thing is better to use a wrapper for you picture tag.) 

We set the width of the children elements to 50%.

Hope this help you!

Good code!

Matias

Marked as helpful

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