Submitted almost 2 years ago

News Homepage using Grid and Javascript

Talasa•130

@TalasaDev

Preview site View code

This is a solution for...News homepage

HTML
CSS
JS

2junior

Design comparison

SolutionDesign

Solution retrospective

Hello everyone, I just finished this project.

I had a really hard time figuring out how to create the darkening effect in the site when the hamburger menu is open. I tried creating a <div class="shadow"> and then:

place in the after the <main> as <div class="shadow"></div> and give through CSS size, position, background-color, and then apply a blend-mode with multiply and transparency. I wanted to place over the main container another empty container of same size with only a transparent dark color that would display only when clicking the '.openMenu'. It didn't work and I sensed like my own computer was judging me. It was wear.
the second option I tried was, in mobile display, to add a second column in the '.navbar' element and style it with a dark color and transparency.

        <logo>    
         <div>  
            **// right here I place the <div class="shadow></div>**
             <ul class="navbar">            
                 <li>Home</li>
                 <li>New</li>
                 <li>Popular</li>
                 <li>Trending</li>
                 <li>Categories</li>            
             </ul>          
        </div>        
        <burger-menu>                
      </nav>```

 Could somebody provide any orientation on how to get that effect? 

Thank you,
happy codding!!

Community feedback

Htoo Myat Kyaing•100
@Htoomyat-KyaingPosted almost 2 years ago
Hello. This is how I did the dark filter effect. I put a class in <body> tag. The dark filter effect is set on that class using CSS "before" property and the display is set to "none". Then, when the hamburger menu is clicked, the display is toggled back to unset thus a dark filter is appeared between the page and the menu. If my explanation is confusing(sorry, my English is a little bit rusty), you can check the solution I've submitted recently. I hope this helps!
Marked as helpful
0
Talasa•130
@TalasaDevPosted almost 2 years ago
@Htoomyat-Kyaing

Hello Htoo,

Thank you so much for your reply. It helped me to finally complete the challenge and learned another way to get the result using a different approach.

Have an awesome day, Happy coding!!

Tal.
0
Victor Ibironke•520
@victoribironkePosted almost 2 years ago
You can try using the box shadow property. box-shadow: 0px 0px 1000px 5px black;. It will create a shadow all around the parent with the color you set. You can reduce the 1000px if it is too much.
0
Talasa•130
@TalasaDevPosted almost 2 years ago
@vdiqbd

Hi Victor,

Thank you so much for taking the time to check my code and provide feedback. I really appreciated.

Have an awesome day. Happy coding!!!

Tal.
0

Please log in to post a comment

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