Flip Effect: Log In and Sign Up

Submitted by mark gerryl mi… on Tuesday, August 2, 2016 - 10:02.

Language

Simple login and sign up form built in bootstrap. A flip effect to change from login form to signup form. Easier to direct to other forms without reloading the page. Another way than using the tab class. Hope you like it.

Sample Source Code

This simple source code for the Log In Form for the user, where they can type their username and password to log in​. 
  1. <div class="panel panel-default">
  2. 	<form class="form-horizontal">
  3. 	<br>
  4. 		<h1 class="text-center">
  5. 			LOGO
  6. 		</h1>
  7. 	<br>
  8. 	<input class="form-control" placeholder="Username"/>
  9. 	<input class="form-control" placeholder="Password"/>
  10. 	<p class="text-right">
  11. 		<a href="">Forgot Password</a>
  12. 	</p>
  13. 	<button class="btn btn-primary btn-block">LOG IN</button>
  14. 	<p class="blue">Sign in with</p>
  15. 	<p>
  16. 		<i class="fa fa-facebook-f fa-lg"></i>
  17. 		<i class="fa fa-google-plus fa-lg"></i>
  18. 		<i class="fa fa-twitter fa-lg"></i>
  19. 	</p>
  20. 	<hr>
  21. 		<p class="text-center">
  22. 			<a href="#" class="fliper-btn">Create new account?</a>
  23. 		</p>
  24. 	</form>
  25. </div>
Also, we have a Sign Up Form for the user to register their account before they can log in. 
  1. <div class="panel panel-default">
  2. 	<form class="form-horizontal">
  3. 	<br>
  4. 	<h1 class="text-center">
  5. 		LOGO
  6. 	</h1>
  7. 	<br>
  8. 	<label>
  9. 		Basic Information
  10. 	</label>
  11. 	<input class="form-control" placeholder="Fullname"/>
  12. 	<input class="form-control" placeholder="Email"/>
  13. 	<label>
  14. 		Private Information
  15. 	</label>
  16. 	<input class="form-control" placeholder="Password"/>
  17. 	<input class="form-control" placeholder="Mobile Number"/>
  18. 	<button class="btn btn-primary btn-block">SIGN UP</button>
  19. 		<p class="text-center">
  20. 			<a href="#" class="fliper-btn">Already have an account?</a>
  21. 		</p>  
  22. 	</form>
  23. </div>
Bootsnip Link So what can you say about this work? Share your thoughts in the comment section below. Practice Coding. Thank you very much.

Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.

FOR YOUR OWN SAFETY, PLEASE:

1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

Tags

Comments

Add new comment

About text formats