All solutions

Hi everyone,

this is a new solution for the News Homepage and the first junior-level challenge I've completed. I finally got to figure out how to get the dimmer effect in the main element when toggling the menu in mobile design. I add an empty <div class="dimmer"> element to the <main> and use styling to overlay it and toggle the background color with Javascript.

I will appreciate any feedback to learn about different approaches.

Happy coding!!!

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!!

Hi everyone,

I just finished the single-price-grid-component challenge. There are "things" happening when in desktop design. The component is not centered in the screen but the margin is set to auto. Does anyone see the problem?

Thanks, Happy coding!!

Talasa

Hi everyone,

I was wondering if I could get some feedback about different layouts options for this challenge.

I used display: grid and grid-template-columns: 1fr 1fr 1fr for desktop screen size and for mobile screen size I changed grid-template -columns: 1fr.

Thank you. Happy coding!!!