Skip to content
Submitted about 3 years ago

HTML,SASS

tomas938•385
@tomas938
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

Another challenge 🎈🎈🎈 feedback is welcome i have no idea how to do pixel perfect design i tried chrome extension but i need definitly improve

Community feedback

  • j5•2,290
    @jmnyaregaPosted about 3 years ago

    Hi, my name is Josiah. I have a few suggestions for you:

    • main should not be a descendent of section. Make it a descendant of body instead. I suggest the following layout. 
      <body>
   <main>
        <nav>
          // header here...
         </nav>
         <section>
           // image & content here....
         </section>
   </main>
</body>

    
- Add a focus state to the buttons and links, this will allow keyboard users to use your site. 

- You can use `align-items: center` to align content inside `main`  instead of using `padding`.

Otherwise, good job on the challenge 👏👏
    Marked as helpful
    1
    tomas938•385
    @tomas938Posted about 3 years ago

    @jmnyarega Thank you for nice feedback i change the markup it make sense to put section in main tag i also added focus to button. For icons i just added ' aria-hidden="true" ' for accessibility I'm not sure how to add focus to icon probably i need to put it anchor tag. And im not really sure about that align-items: center i know that padding is not really nice but it's only because i want to match the design 😀

    0
    j5•2,290
    @jmnyaregaPosted about 3 years ago

    @tomas938 Happy to help, align-items: center aligns content vertically in a display: flex. Anyways, padding works too 🙂

    0
  • Hafizan Adli•1,190
    @hafizanadliPosted about 3 years ago

    I can't say anything, It's almost perfect! Really like your solution!

    0
    tomas938•385
    @tomas938Posted about 3 years ago

    @hafizanadli Thank you !!!

    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