Skip to content
Submitted over 2 years ago

Responsive Huddle landing page with curved sections

Rickyā€¢470
@pyaetheiN
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Huddle landing page with curved sections
  • HTML
  • CSS
2junior

Design comparison

SolutionDesign

Solution retrospective

Huddle-landing-page-with-curved-sections This was an amazing challenge to work on, I learned lots of new things!

Things I learned:

  • adding background curve images using background-position: top/bottom;
  • the two values in background-size: 100% 100%; stand for width and height, using just width 100% is amazing for responsiveness
  • invalid email error message pop-up using :not(:focus):not(:placeholder-shown):invalid

References I took while taking on this challenge:

  • Vanza Setia's solution

here's his repository link

  • https://github.com/vanzasetia/huddle-landing-page-with-curved-section

My questions:

  • I used FontAwesome webkit to display icons but why are there HTML issues from the script source of FontAwesome? Is there any way to fix this?
  • I added a label tag for accessibility but it still says form input needs label... any feedback would be very appreciated!

Community feedback

  • Shashree Samuelā€¢9,260
    @shashreesamuelPosted over 2 years ago

    Hey good job completing this challenge

    Keep up the good work

    Your solution looks great however I think that the titles in the website needs to be a bit bigger. I think the form in the footer section has as bit too much space between the input field and the button. Lastly I think the text in the button below the title "Ready to build your community"

    In terms of accessibility issues simply wrap all your content between main tags

    I hope this helps

    Cheers Happy coding šŸ‘

    1
    Rickyā€¢470
    @pyaetheiNPosted over 2 years ago

    Thanks for your feedback Sam! About your feedback on accessbility issues, I don't quite get what you mean, do you mean putting header and footer inside main tag?

    0
    Shashree Samuelā€¢9,260
    @shashreesamuelPosted over 2 years ago

    pyaetheiN I mean enclosing all the content between your body tags within a main tag.

    I hope this clarifies

    Cheers Happy coding šŸ‘

    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