Thursday 18 August 2016

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Material Login Form</title>

    <link rel="stylesheet" href="https://googledrive.com/host/0B-CxWBF6hsj-RndhZ0dVbzJoMmc">
    <link rel="stylesheet" href="https://googledrive.com/host/0B-CxWBF6hsj-UG95X2dYcXgzeTg">

    <link rel='stylesheet prefetch' href='http://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900|RobotoDraft:400,100,300,500,700,900'>
    <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'>

</head>

<body>

    <div class="container">
        <div class="card"></div>
        <div class="card">
            <h1 class="title">Login</h1>
            <form>
                <div class="input-container">
                    <input type="text" id="Username" required="required" />
                    <label for="Username">Username</label>
                    <div class="bar"></div>
                </div>
                <div class="input-container">
                    <input type="password" id="Password" required="required" />
                    <label for="Password">Password</label>
                    <div class="bar"></div>
                </div>
                <div class="button-container">
                    <button><span>Go</span></button>
                </div>
                <div class="footer"><a href="#">Forgot your password?</a></div>
            </form>
        </div>
        <div class="card alt">
            <div class="toggle"></div>
            <h1 class="title">Register
      <div class="close"></div>
    </h1>
            <form>
                <div class="input-container">
                    <input type="text" id="Username" required="required" />
                    <label for="Username">Username</label>
                    <div class="bar"></div>
                </div>
                <div class="input-container">
                    <input type="password" id="Password" required="required" />
                    <label for="Password">Password</label>
                    <div class="bar"></div>
                </div>
                <div class="input-container">
                    <input type="password" id="Repeat Password" required="required" />
                    <label for="Repeat Password">Repeat Password</label>
                    <div class="bar"></div>
                </div>
                <div class="button-container">
                    <button><span>Next</span></button>
                </div>
            </form>
        </div>
    </div>

    <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

    <script>
        $('.toggle').on('click', function() {
            $('.container').stop().addClass('active');
        });

        $('.close').on('click', function() {
            $('.container').stop().removeClass('active');
        });
    </script>

</body>

</html>
step in

No comments:

Post a Comment