To practise HTML, CSS and a bit of Javascript, in this project, I build a sign up form based on a design by @violetadev as part of a coding challenge & mentorship.
- 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)
- The design should be responsive
- On Sign up click console.log('Signing up!'), on Sign in click console.log('Signing in!')
- Each social media button should open a new tab with the corresponding social media URL (www.twitter.com / www.facebook.com / www.instagram.com )
- 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
- Credit the artist anywhere in the project: Pattern vector created by pikisuperstar - www.freepik.com
- Use BEM or another methodology for the CSS
- 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 including username, password and email
The beautiful illustration is a pattern vector created by pikisuperstar - www.freepik.com