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

Huddle landing page curves HTML, CSS, Vanilla JavaScript

@Duyen-codes

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


I am still stuck with how to position background images for sections on both mobile and desktop and also the JS part. Please give me some hints. Thanks a lot!

Community feedback

Chanda 700

@Chanda-Abdul

Posted

  • Absolute/relative positioning is just for css. It may be helpful with your section/curve border positioning. Take a look at this article

https://www.freecodecamp.org/news/css-positioning-position-absolute-and-relative/

For the JavaScript email input box

  • I would add a placeholder to the input, [email protected]
  • onClick or onSubmit of the Subscribe button, capture the user input and run a function to validate the email input. I would probably use some kind of regex for this. Research "JavaScript email validation regex"
  • if the validation function returns true display some kind of confirmation to the user that their email was captured. This can be an alert or maybe a div underneath the input box. If the validation function returns false, ask the user to input a valid email

https://stackoverflow.com/questions/46155/whats-the-best-way-to-validate-an-email-address-in-javascript

Marked as helpful

0

@Duyen-codes

Posted

@Chanda-Abdul Hey, thanks you very much for your help! I really appreciate it. And keep up the great work! I've learned a lot from you and your solutions!

0
Chanda 700

@Chanda-Abdul

Posted

  • Try adding more top margin/padding to the footer and the sections you can do this in your media queries.

  • You can also try placing the border images outside of the section with a top and bottom margin of 0 and updating the sections' background-color.

  • Maybe look into absolute and relative css positioning.

Hope that helps!

Marked as helpful

0

@Duyen-codes

Posted

@Chanda-Abdul Hey! Thanks a lot for taking time to look into my solutions and giving me advice. I have managed to do the first two bulllet points of your comments. But the last one remains unsolved since I have trouble with JS, I wanna show error when email is empty/ is wrong format on form submit. I know absolute and relative positioning help position the error to the right place but my real problem lies in JS part I believe.

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