Skip to content
Submitted 29 days ago

Responsive Huddle Landing Page using React Vite and Tailwind.

react, vite, tailwind-css
Esther Inyang•20
@Esther-Inyang
A solution to the Huddle landing page with curved sections challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

I am proud of being able to add the curved sections and style them to blend with the sections' background.

What challenges did you encounter, and how did you overcome them?

I encountered a bit of a challenge adding the curved images as backgrounds to the sections. I figured that adding them as svg images allows the background color to be changed to white, making the curved edges visible.

What specific areas of your project would you like help with?

I used the design images, not the figma file, since I am on a free plan. There might be inconsistencies with the font sizes, margins, and paddings.

Code

Please log in to post a comment

Log in

Community feedback

  • TobbyFranc•160
    @TobbyFranc

    Amazing work!

    Few points:

    • The text 'Message sent' under the '2.7m+' is not properly aligned in desktop vs mobile. On mobile, the text should break.(little detail)
    • Really nice work and extra effort with the form in the footer. Few notes. The error message should be given a fixed room (perhaps in an absolute position under the marginated input tag... or toggle between 0 and 100 visibility) so it won't affect other content on display. Also, the sub,it button is about 50% of the width of the input on mobile view.

    Thanks.

    PS: I will appreciate an objective review on my own solution of similar challenge. T for Tnx

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