Skip to content
Submitted about 5 years ago

Huddle Single Landing Page Intro Section using FLEXBOX and CSS GRID

Shahin NJ•1,190
@SJ-Nosrat
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

Hi, Any feedback is appreciated! Also, for the Kindle Fire Tablet had to add a "background: repeat-y" since the bottom was just showing the violet colour, which didn't flow well.

Also, added a very basic transition on the "Register" button to highlight when the end-user is signing up for the service.

Thanks in advance!

Code

Please log in to post a comment

Log in

Community feedback

  • Leon Michalak•545
    @NinjaInShade

    I just completed this challenge myself, and you have commented a few times on my solutions, so I'd like to give some feedback which I think could improve your code and design :)

    1. Add a container (or seperate containers) so that everything is aligned at bigger screens into one area. Looking at the design, everything is contained within 1250px

    2. The background repeats on my monitor, so I'd suggest normally adding:

    background-size: cover;

    However, you have already done this, and the reason it repeats is because you made it to. The design is 800px high, so I'd perhaps atleast set a max-height to your content so the background fits nicer.

    If you check my solution, I used a flexbox column for the main 3 sections, nav, header and footer, with a justify of space-between and min-height of 800. Then I added some paddings/margins to elements (taken from the design file) and everything more or less fit inside the 800px height.

    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