Challenge #1

Hi, Xhoni👋

Great job on this challenge. Your solution looks good and it scales pretty well. 👍

I only suggest some things 😉:

• On mobile viewport the menu isn't centered. As I'm seeing on your project that's because you set a margin-left to the anchor links (.hero > .navbar > .nav-links > li a) , I'd delete the margin-left and add align-items: center; on the ul which in this case you selected as: .hero > .navbar > .nav-links.

• Be careful with specificity. I mean, you have extra large selectors like the one I mentioned above, you could simplify that setting a class to those elements and just selecting the class. As an example, adding this class to the anchor link <a class= nav__link>, you could select it on CSS as .nav__link, and it is easier to read than the other selector

I hope this would help you, have a nice day, keep coding!💙

Great looking solution, Xhoni! The only thing I would have to knit pick is that the hero isn't dimmed. Making it dim will make the white text on it pop out more and appear more readable.

.hero {
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url(../assets/image-hero.jpg) no-repeat center center/cover
}

Otherwise, this looks really good! Looking forward to your progress :)

It's really good but some important détails missed out, like the heading who is bold (in solution not) or text-align ! But really nice !