Scribd Logo
Upload

Welcome to Scribd!

  • Login Form

    Uploaded by

    Bipul Vikrant
    3 views3 pages
    html

    Copyright

    © © All Rights Reserved

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    html

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    3 views3 pages

    Login Form

    Uploaded by

    Bipul Vikrant
    html

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 3

    <!

    DOCTYPE html>
    <html>
    <head>
    <title>Page Title</title>
    <style type="text/css">
    @import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400,700);
    *{margin:0;padding:0;}
    body{
    background:#567;
    font-family:'Open Sans',sans-serif;
    }
    .button{
    width:100px;
    background:#3399cc;
    display:block;
    margin:0 auto;
    margin-top:1%;
    padding:10px;
    text-align:center;
    text-decoration:none;
    color:#fff;
    cursor:pointer;
    transition:background .3s;
    -webkit-transition:background .3s;
    }
    .button:hover{
    background:#2288bb;
    }
    #login{
    width:400px;
    margin:0 auto;
    margin-top:8px;
    margin-bottom:2%;
    transition:opacity 1s;
    -webkit-transition:opacity 1s;
    }
    #triangle{
    width:0;
    border-top:12x solid transparent;
    border-right:12px solid transparent;
    border-bottom:12px solid #3399cc;
    border-left:12px solid transparent;
    margin:0 auto;
    }
    #login h1{
    background:#3399cc;
    padding:20px 0;
    font-size:140%;
    font-weight:300;
    text-align:center;
    color:#fff;

    }
    form{
    background:#f0f0f0;
    padding:6% 4%;
    }
    input[type="email"],input[type="password"]{
    width:92%;
    background:#fff;
    margin-bottom:4%;
    border:1px solid #ccc;
    padding:4%;
    font-family:'Open Sans',sans-serif;
    font-size:95%;
    color:#555;
    }
    input[type="submit"]{
    width:100%;
    background:#3399cc;
    border:0;
    padding:4%;
    font-family:'Open Sans',sans-serif;
    font-size:100%;
    color:#fff;
    cursor:pointer;
    transition:background .3s;
    -webkit-transition:background .3s;
    }
    input[type="submit"]:hover{
    background:#2288bb;
    }
    </style>
    <script>
    $('#toggle-login').click(function(){
    $('#login').toggle();
    });
    </script>
    </head>
    <body>
    <span href="#" class="button" id="toggle-login">Log in</span>
    <div id="login">
    <div id="triangle"></div>
    <h1>Log in</h1>
    <form>
    <input type="email" placeholder="Email" />
    <input type="password" placeholder="Password" />
    <input type="submit" value="Log in" />
    </form>
    </div>

    </body>
    </html>

    You might also like