Skip to content
Submitted over 1 year ago

Responsive Signup form using HTML, CSS & JavaScript

accessibility, lighthouse, bem
Rebecca Padgett•2,100
@bccpadge
A solution to the Intro component with sign-up form challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hello everyone,

This is my solution to the Intro component with Signup form challenge. I changed the the background color and button text color to fix the contrast issue so it not going to look like the design files. All feedback is welcome and greatly appreciated.

Thanks,

Rebecca

Code

Please log in to post a comment

Log in with GitHub

Community feedback

  • Alper•1,090
    @adonmez04

    Hi @bccpadge, that's a good solution. Keep coding. I haven't solved this challenge yet, but I can give you some quick tips:

    • You don't need to use the width property for your form class. This breaks the responsive behavior of HTML, use the max-width or max-inline-size property instead. In fact, it's better not to use the width and height properties in CSS with explicit values (the width property can be used with the percentage size unit, it behaves the same as block-level elements).
    • You can add the max-width property to your form__headline class to avoid making your button the full width of the page.
    • You can use the flexbox for the components and you can use the grid for an entire layout, but it's a good project to get some practice with the grid property.

    I hope these will help you. Keep coding and have a nice day...

    Marked as helpful
  • Nikhil Tanwar•260
    @NikNT

    Nice work, Rebecca! Your solution looks unique!

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