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

Responsive News Homepage Using CSS Grid🌐, Flex💪 and JavaScript📜

@Mr-NotSoCreative

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


Hello Everyone!! 👋 This is my solution to the News homepage. Most of the layout I've designed with CSS Grid and the rest CSS Flex along with other CSS custom properties. Currently I am learning JavaScript, so somehow I managed to create the mobile menu for this challenge. But I couldn't figure out how to change the background color of the whole body while mobile menu is open. I've tried my best to build out this landing page and get it looking as close to the design as much as possible.

HELP NEEDED for changing the background color of the body while mobile menu is open

If there are any mistakes or I missed something let me know in the comment section. Feedback is welcome ✨

Community feedback

@catherineisonline

Posted

Looks nice! I would also add some smoother transitions for active states

1

@Mr-NotSoCreative

Posted

@catherineisonline Thanks for the suggestion! 😊

0
Nikola D 1,450

@NikolaD93

Posted

Hi mate, nice desing well done! About changing bg color while mobile menu is open, you can put your unordered list inside a div and stretch it across the whole body, than just give it bg color of black with some opacity, for example 50% or 0.5. If you have any questions you can contact me on my LinkedIn profile. Here is the url: https://www.linkedin.com/in/nikoladojcinovic93/

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