Skip to content
Submitted about 1 year ago

New-homepage with CSS Grid, Flexbox and Javascript

Meribe Victor•90
@Mervic05
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...News homepage
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

I couldn't get the mobile menu bar to overshadow the whole content. Only the header was left out and don't seem to understand why.

Community feedback

  • Nayan Bhatt•980
    @freaky4wrldPosted about 1 year ago

    Hey there buddy.....hope you doing great!! Here's what you can do to achieve the design goals

    • first of all you don't need to have two overlay containers, you can do so by having a div with a class of overlay and put it below body
    <body>
    <div class="overlay"></div>
     ............
     ............
     ............
</body>
    • now give it the following property........
    .overlay{
       display: none;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1;
        background-color: rgba(0,0,0,0.7);
}
.overlay.enabled{
        display: initial;
}
    • do remember to toggle the class of enabled on button clicks.............

    I hope this works and help you, glad to be of any use!!!!

    Marked as helpful
    0
    Meribe Victor•90
    @Mervic05Posted about 1 year ago

    @freaky4wrld Thanks alot buddy

    0
  • mikeqd•40
    @mikeqdPosted about 1 year ago

    Thank you Nayan, I really appreciate it.

    0

Please log in to post a comment

Log in with GitHub

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