Intro section with dropdown, React

Hi Joel, this looks good! The mobile nav works, and the dropdowns also. I think you did well also in keeping the image and text containers at a good size and at optimal views.

Some other comments:

1. I notice that at mobile view before the breakpoint changes, the image becomes stretched out. You'll need to add an object-fit: contain, and that should fix it!

2. For .hero at mobile view, you can try width: min(100%, 80rem) instead so that the text doesn't stretch out as much, and then at desktop view, you can either just use width: 100% or width: min(100%, 80rem) so that things don't stretch out too far here. If you use min(), be sure also to add margin-inline: auto.

3. For the React side, I think you can try making a component for the links since they appear quite repetitive, and they can practically can be made into a component.

That's about it, great work since it is not easy to make this look good!

Hello Joel. Congrats on finishing the challenge.

A few of suggestions in your styling would be to :

• Remove the height on .hero-img selector so that image can be displayed in correctly through different viewports.

• Add z-index greater than 0 on your .dropdown selector to elevate it obove main content:

.dropdown {
     z-index: 1;
}