A
Anonymous

Login and Sign Up Modal with Overlay

Create a modal popup for a login and sign up form with an overlay. The modal should be divided into two sections: 'Sign Me Up!' on the left for new users, and 'Already Signed Up' on the right for returning users. General Layout: Add a blue header at the top with the message 'Want to see what your friends like?' and a close button (X) on the right side. The left side should have a large blue button labeled 'Continue with Facebook' with a Facebook logo for signing up via Facebook. Below that, provide a standard form with three input fields labeled 'Email,' 'Password,' and 'Name,' for user sign up. Add a checkbox option for 'Keep me updated with news!' under the name field, followed by a reCAPTCHA 'I’m not a robot' checkbox. At the bottom of the left side, include a blue button labeled 'LET'S GO' for submitting the sign up form. Right Section (Sign In Form): Title this section 'Already Signed Up' with input fields for 'Email' and 'Password.' Below the password field, add a blue button labeled 'SIGN IN.' Include a small link labeled 'Forgot Password' below the 'Sign In' button. Add a note that explains, 'By clicking "Let's Go" or "Sign Up with Facebook" you accept the Terms of Service and Privacy Policy.' Footer: At the bottom of the modal, include an optional action with text 'Quit bugging me about signing up! Continue Planning as a guest' and a grey 'GUEST MODE' button next to it. Design Style: Use a modern, clean layout with a white background for form fields. Use blue for the primary buttons (Facebook, Sign In, Let's Go), grey for the 'Guest Mode' button, and light grey text for the smaller descriptions. Make sure the entire modal is responsive and works well on both desktop and mobile devices.

Prompt
Component Preview

About

Design a modern, responsive modal for user login and sign up using Bootstrap, featuring Facebook integration, forms, and guest mode options for seamless user experience.

Share

Last updated 1 month ago