Challenge #1
Create a sign up page (HTML+CSS or React+SCSS) following this template: https://dribbble.com/shots/11879454-Sign-Up-Form
Minimum requirements
- Get as close as possible to the original mockup (image and icons can be different but sizes and spacing should be the same)
- The page must look and behave the same in all browsers (Chrome, Firefox, IE)
- On Sign up click console.log('Signing up!'), on Sign in click console.log('Signing in!')
- Each social media button should console.log('x!') as in console.log('Twitter!')
- Should be responsive
- Color palette (buttons, font colors) of the whole page should match the image you pick for the side (see resources)
- Code must be well indented and organized
- The project must be pushed to Github
Bonus points
- Sign up button must be deactivated until the form's inputs are filled and terms and conditions checked
- Show error message if the email doesn't contain @ and .
- Show error message if the password doesn't contain at least one uppercase character
- Show error message if name is less than 4 characters or more than 50
- Terms and Conditions must open two different modals (one for each) with Lorem Ipsum text on it
- Click on sign up submits the form (post request with body { username, password, email }
- Use BEM or another methodology for the CSS
Resources:
Code Formatter: www.prettier.io www.freeformatter.com
For the side image: www.pexels.com www.unsplash.com
For the icons: https://material-ui.com/components/material-icons/ https://icons8.com/ https://fontawesome.com/
For the color palette: https://coolors.co/53dd6c-63a088-56638a-483a58-56203d
Fonts: https://fonts.google.com/