Skip to content
Submitted about 2 years ago

Responsive Huddle Landing Page using Flexbox

Odalloc•170
@Odalloc
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Huddle landing page with alternating feature blocks
  • HTML
  • CSS
2junior

Design comparison

SolutionDesign

Solution retrospective

Still not good in responsiveness and I'm trying to use flex to equal the width of the column on desktop design but it's not working. So I just use some other methods to fix it. Any suggestions on how to improve it will be helpful. Thanks!

Community feedback

  • バレンタイン 😈•64,170
    @VCaramesPosted about 2 years ago

    Hey @Odalloc, great job on this project!

    To make you code semantically correct, you'll want to set up your code in this manner:

        <body>
      <header>
        <nav></nav>
        <section>Build The Community Your Fans Will Love</section>
      </header>
      <main>
        <section>Grow Together</section>
        <section>Flowing Conversations</section>
        <section>Your Users</section>
        <section>Ready To Build Your Community?</section>
      </main>
      <footer></footer>
    </body>

    All introductory content is place inside the <header> element.

    Following that, everything that's not introductory gets placed inside the <main> element>.

    Happy Coding!

    Marked as helpful
    1
    Odalloc•170
    @OdallocPosted about 2 years ago

    Hi @vcarames! Thanks for your suggestion. I'll apply it and update my code 😁

    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