Submitted about 2 years ago

RESPONSIVE LANDING PAGE WITH DROP DOWN MENU USING HTML,CSS,AND JAVASCR

Blessing Oluwapelumi• 20

@blessingOluwapelumi

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Intro section with dropdown navigation

HTML
CSS
JS

2junior

View challenge

Design comparison

SolutionDesign

Solution retrospective

What did you find difficult while building the project? I was not able to use the arrow icon beside the main menu. I couldn't get how to make it change to the arrow down on hover.

Which areas of your code are you unsure of? The media queries

Do you have any questions about best practices? Please, how do I make use of the arrow down and arrow up icon and also make it interchange on HOVER?

Community feedback

mubizzy• 1,520

@mubizzy

Posted about 2 years ago

nice work @blessingOluwapelumi you did a great job. about the hover features, you need to rotate the icon using CSS properties for Example.

.dropdown:hover .dropdown__icon {
  transform: rotate(180deg);
}

.dropdown__icon {
  transition: .5s;
}

hope it helps :)

Blessing Oluwapelumi• 20

@blessingOluwapelumi

Posted about 2 years ago

@mubizzy Thanks for your response I tried this but both the "Features" text and the icon is affected. I mean, both the text and icon rotates on HOVER

mubizzy• 1,520

@mubizzy

Posted about 2 years ago

@blessingOluwapelumi then you need to rearrange your HTML.

Blessing Oluwapelumi• 20

@blessingOluwapelumi

Posted about 2 years ago

@mubizzy Alright, thanks

mubizzy• 1,520

@mubizzy

Posted about 2 years ago

@blessingOluwapelumi i will send you a js snippet of mine if that still doesn't work.

const menu-item= document.querySelectorAll('.menu-item');   

function linkAction(){
  /*Active link*/
  menu-item.forEach(n => n.classList.remove('active'));
  this.classList.add('active');
}
navLink.forEach(n => n.addEventListener('click', linkAction));

Olalekan Bello• 180

@OlaOluwalekan

Posted about 2 years ago

Hi Blessing!

I've gone through your work and it's such a nice one. I love your transitions - they are smoothly done. However, when I opened your live site, it takes time to load the main image. I don't know why. Also, on your GitHub link to the project, you don't have readme.md to hint visitors on what your work is about, the images you used, etc.

But overall, its a nice one 👍. Keep it up

Blessing Oluwapelumi• 20

@blessingOluwapelumi

Posted about 2 years ago

@OlaOluwalekan Thanks for this feedback. What do you advise I do to make the hero image load faster?

Olalekan Bello• 180

@OlaOluwalekan

Posted about 2 years ago

@blessingOluwapelumi

👍

Depending on the size, you could actually edit/resize the image without it losing quality. There are some online editors that can help

Please log in to post a comment

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