Flip Effect: Log In and Sign Up

[lazenes]

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.

<div class="panel panel-default">
    <form class="form-horizontal">
    <br>
        <h1 class="text-center">
            LOGO
        </h1>
    <br>
    <input class="form-control" placeholder="Username"/>
    <input class="form-control" placeholder="Password"/>
    <p class="text-right">
        <a href="">Forgot Password</a>
    </p>
    <button class="btn btn-primary btn-block">LOG IN</button>
    <p class="blue">Sign in with</p>
    <p>
        <i class="fa fa-facebook-f fa-lg"></i>
        <i class="fa fa-google-plus fa-lg"></i>
        <i class="fa fa-twitter fa-lg"></i>
    </p>
    <hr>
        <p class="text-center">
            <a href="#" class="fliper-btn">Create new account?</a>
        </p>
    </form>
</div>

Also, we have a Sign Up Form for the user to register their account before they can log in.

<div class="panel panel-default">
    <form class="form-horizontal">
    <br>
    <h1 class="text-center">
        LOGO
    </h1>
    <br>
    <label>
        Basic Information
    </label>
    <input class="form-control" placeholder="Fullname"/>
    <input class="form-control" placeholder="Email"/>
    <label>
        Private Information
    </label>
    <input class="form-control" placeholder="Password"/>
    <input class="form-control" placeholder="Mobile Number"/>
    <button class="btn btn-primary btn-block">SIGN UP</button>
        <p class="text-center">
            <a href="#" class="fliper-btn">Already have an account?</a>
        </p> 
    </form>
</div>

So what can you say about this work? Share your thoughts in the comment section below. Practice Coding. Thank you very much.
Download Source Code

 

[burtron1]

thx you