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

News Homepage Using Single Breakpoint

@DepressedPenguin

Desktop design screenshot for the News homepage coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


What challenges did you encounter, and how did you overcome them?

The mobile navbar toggle works, but the rest of the page doesn't darken when the navbar is toggled, as intended. Additionally, the code is currently hard-coded ):. If you know how, could you guide me on managing that

Community feedback

@R3ygoski

Posted

Hello Penguin, first of all, congrats, your project is really good.

to darken the page you could use your <div className={styles.mobile_side_bar}> as a "filter", you can make it take the whole screen, and then you just need to change it background color to some color with alpha, like rgba or hsla, then you reduce the alpha value, and done.

If you want, feel free to look at my solution, it was made in Vue, but probably you will understand.

And I noticed you forgot to change the hover state of the header links, and the button.

Congrats again, your project is very good, very similar to proposed design, if something I said was unclear, please, comment below and I will try to help in the best possible way.

Marked as helpful

0

@DepressedPenguin

Posted

Hello Bernardo, Thank you for your interest. I will try to add everything you said. I will take a look at how you did that and Thank again you for reading the code, I really appreciate it

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