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

A very Responsive Landing Page using vanilla Html Css and Javascript

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


All feed Back are Welcome

Community feedback

P
visualdennis 8,375

@visualdenniss

Posted

Congrats on completing the challenge successfully! Everything looks great and it is responsive as well.

However one large screen sizes, it looks like there is a white space on the right side of the whole app. You could center your whole app with a margin: 0 auto; so that it looks centered even when the browser is 2500px wide.

So add this margin: 0 auto; to hero like so:

.hero { width: 100%; min-height: 100vh; background-color: hsl(0, 0%, 90%); max-width: 1440px; overflow: hidden; margin: 0 auto; }

Hope you find this feedback helpful!

Marked as helpful

0
S MD suleman 3,530

@sulemaan7070

Posted

hey 😄Idiagbon Saadu Abdulrahman, congratulations on completing the challenge... here are a few tips to make your site better.

1.I see that you have applied only the desktop-image on both the desktop and the mobile versions.. you will find the image-web3-mobile in the images folder.. you can responsively change the image based on the media-query..

2.Add an overlay in the background when mobile-menu is opened.. more about the overlay here📚

3.Increase font-weight for the h1.

4.Add line-height property to the p tag which is inside the div .para to give spacing between the lines and make sure you are using the right background color for the whole site..

Hope that helps, Happy coding💯👍🏻✅

0

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