Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive Huddle Landing Page With Curved Sections

@Tzienom

Desktop design screenshot for the Huddle landing page with curved sections coding challenge

This is a solution for...

  • HTML
  • CSS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hello, everyone. Doing this challenge was quite a big task for me, but I absolutely loved it. But I had some issues I couldn't resolve. Here:

  • What is the best solution to adding the background image to the sections?
  • How do you make the image fill the entire width of the figure element?

Thanks for the help.

Community feedback

David 8,000

@DavidMorgade

Posted

Hello Gabriel, congrats on finishing the challenge! pretty good job in my opinion!

Let me try to answer your question:

  • In this type of challenges is better just use flexbox, use them as a column for lower size devices and rows for desktop sizes.

  • You need to do a little "hacky" trick, change the vertical-align from baseline to vergical-align: top on your img tag!

Apart from those questions, regarding your project I would like too se some little transitions on your buttons instead of just the hover effect, you can use transition: background 0.5s ease and the will look much more smoother!

Hope my feedback helps you, if you have any questions, don't hesitate to ask!

Marked as helpful

0

@Tzienom

Posted

@DavidMorgade Thank you for helping out. Again, I'm now having accessibility issue with my form. It says I should have my labels, but my input elements do have labels on them. Is there something I'm missing?

0
David 8,000

@DavidMorgade

Posted

@Tzienom Hey man! to pass that validation you need to wrap the input inside the label like this

<label> <input /* your input props */> </label>

0

Please log in to post a comment

Log in with GitHub
Discord logo

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