Skip to content
Submitted about 2 years ago

Huddle landing page with alternating feature blocks using Vanilla CSS

Troy•170
@troy03
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

This my second submitting Junior challenge and next goal News homepage so if anyone can provide a link about grid that I'm going to study.

Community feedback

  • Adriano•38,250
    @AdrianoEscarabotePosted about 2 years ago

    Hi Troy, how are you? I really liked the result of your project, but I have some tips that I think you will enjoy:

    It is not possible to use an href in the button tag, as href stands for hyper link reference and is part of the a tag which is an anchor to another page!

    <button class=main__btn href=#>

    We have to make sure that all the content is contained in a reference region, designated with HTML5 reference elements.

    HTML5 reference elements:

    <body>
    <header>This is the header</header>
    <nav>This is the nav</nav>
    <main>This is the main</main>
    <footer>This is the footer</footer>
</body>

    The rest is great!

    I hope it helps... 👍

    Marked as helpful
    1
    Troy•170
    @troy03Posted almost 2 years ago

    @AdrianoEscarabote Oh sorry late to read this reply I study grid for the News homepage challenge and thank you so much for this great feedback

    0
    Troy•170
    @troy03Posted almost 2 years ago

    @AdrianoEscarabote so nestinng main and nav is a bad idea like this?

    <main> <nav> <nav> </main>
    0
    Adriano•38,250
    @AdrianoEscarabotePosted almost 2 years ago

    @troy03 yes!

    Marked as helpful
    0
    Account deleted

    @troy03 https://www.youtube.com/watch?v=rg7Fvvl3taU You can learn grid here

    Marked as helpful
    1
  • yishak abrham•2,150
    @yishak621Posted about 2 years ago

    Good design on the cards but on the navbar the logo and button are too large for Mobile version so u should scale them down and also the text font is also should be minimised for Mobile version

    Marked as helpful
    1

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