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

Landing page using CSS grid and Flexbox

Renata 190

@An-Renata

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


I was unsuccessful with darkening the main window after a hamburger menu was active. Instead, I just used a light shadow on the left side, to make an illusion that the menu is put forward. Maybe someone would share their knowledge of how to implement that, which would be very helpful.

Community feedback

P
visualdennis 8,375

@visualdenniss

Posted

Hello Renata,

very nice work with the challenge! It looks pretty good and also responsive.

Regarding background overlay, there are several ways you can achieve that. Basically you need an extra div or a container that contains the ul + the empty overlay div. You can add a new div for an overlay and give it a background color and make it fill the whole page and position it absolute. But adjust its z-index so its not covering the links with its container (ul).

You can find two different examples of how i implemented it: News Home Page or E-commerce Challenge. I'd suggest you to inspect the HTML Structure in the Browser Dev tools instead of the source code.

Hope you find this feedback helpful!

Marked as helpful

1

Renata 190

@An-Renata

Posted

@visualdenniss Thank you for the suggestion. I managed to implement this. :)

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