Skip to content
Submitted over 2 years ago

Huddle Landing Page

DarkDev56•330
@dotfivesix
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Huddle landing page with a single introductory section
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Was easy and fun, but I am a bit unsure about the styling of hero section, when in desktop mode, I want both image and text to increase simultaneously in a specific ratio (lets say 8:5) but couldn't do that, Any suggestion or feedback is valuable.

Community feedback

  • Lucas 👾•104,340
    @correlucasPosted over 2 years ago

    👾Hello DarkDev, congratulations for your new solution!

    Another great solution! I think you;ve done pretty much anything, the design is perfect and the rest too. Something you can improve is the vertical alignment in the desktop version thats more aligned top than center.

    See how can you fix this issue of the alignment with min-height: 100vh and the flex properties:

    }
body {
    min-height: 100vh;
    width: 100%;
    background-color: var(--violet);
    display: flex;
    align-items: center;
    justify-content: center;
}

    👋 I hope this helps you and happy coding!

    Marked as helpful
    1
    DarkDev56•330
    @dotfivesixPosted over 2 years ago

    @correlucas Thanks for appreciating my work. The idea of min-height: 100vh in body tag is great, this technique is amazing, I couldn't think about this. It really helped me a lot, thanks again !

    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