Skip to content
Submitted almost 3 years ago

Huddle Landing Page using HTML, CSS and Flexbox

Wesley•330
@wesleyjacoby
A solution to the Huddle landing page with a single introductory section challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I seem to struggle with the layout of the webpage - especially with the desktop versions.

Is it correct to add the background images to the body and then have a main container that wraps everything? Then within that main container, have other smaller containers for the various elements.

Thanks for the help!

Code

Please log in to post a comment

Log in

Community feedback

  • Lucas 👾•104,160
    @correlucas

    👾 Hello Wesley, congratulations for your solution!

    Nice that you've used mobile first approach for this solution!

    Everything works good, there's only a quick for the mobile background image that's not filling all the background. Swapping from background-size: contain; to cover. See the code below:

        background-image: url(./images/bg-mobile.svg);
    background-repeat: no-repeat;
    background-position: top;
    background-size: cover;
    background-color: var(--violet);
}

    Hope it helps, congrats!

    Marked as helpful

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