Log In Page

by Pankaj Sapkal

HTML

<div class="Loginpanel" runat="server" id="LoggedIn">
     <h2 align="center">
           <a style="color: #fff;">Login</a>
        <img src="../../Images/Button images/icon_login.png" alt="" width="15px" onclick="pankaj();"
            id='img' />
    </h2>

    <div id="LoginDiv" runat="server">
        <div id="LogindivRemove" style="z-index: 1; position: absolute; top: 0px; right: 0px;
            width: 25.8em;">
            <section class="main">
                <form class="form-2">
                    
<h1>
       <a onclick="ShowLoginDiv();" style="color: #fff;">Login</a>
    <span class="log-in">Log in</span> or <span class="sign-up">sign up</span>
</h1>

                    <p class="float">
                        <label for="login"> <i class="icon-user"></i>Username</label>
                        <input type="text" name="login" placeholder="Username or email" id="idUserName">
                    </p>
                    <p class="float">
                        <label for="password"> <i class="icon-lock"></i>Password</label>
                        <input type="password" name="password" placeholder="Password" class="showpassword" id="idPassword">
                    </p>
                    <p class="clearfix" style="text-align: right">
                        <button type="button" class="DivMapbutton" id="LoginBtnSubmit" onclick="pankaj();">LogIn</button>
                    </p>
                </form>​​</section>
        </div>
    </div>
</div>

CSS

.Loginpanel {
    z-index: 1;
    position: absolute;
    top: 24px;
    right: 30px;
    padding: 0px 0px 5px;
    width: 132px;
    border: 0px solid #999;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
}
.Loginpanel h2 {
    color: #FFF;
    font-size: 18px;
    font-weight: normal;
    margin: 0px;
    padding: 4px;
    background: #153250 url(/Images/Controls/arrow-up.gif) no-repeat 310px;
    border-bottom: 1px solid #999;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-top: 0px solid #FFF;
    border-right: 0px solid #FFF;
    border-left: 0px solid #FFF;
}
.Loginpanel h2:hover {
    cursor: pointer;
    background-color: #005691;
}
.Loginmenu-ui {
    background: #fff;
    position: absolute;
    top: 33px;
    right: 0px;
    z-index: 1;
    width: 132px;
    border: 1px solid #2a658e;
}
@import url('demo.css');
 @import url('font-awesome.css');

/* GLOBALS */
 *, *:after, *:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
.clearfix:after {
    content:"";
    display: table;
    clear: both;
}
.form-1 {
    /* Size & position */
    width: 300px;
    margin: 60px auto 30px;
    padding: 10px;
    position: relative;
    /* For the submit button positioning */
    /* Styles */
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 3px 7px rgba(0, 0, 0, 0.3), inset 0 1px rgba(255, 255, 255, 1), inset 0 -3px 2px rgba(0, 0, 0, 0.25);
    border-radius: 5px;
    background: white;
    /* Fallback */
    background: -moz-linear-gradient(#eeefef, #ffffff 10%);
    background: -ms-linear-gradient(#eeefef, #ffffff 10%);
    background: -o-linear-gradient(#eeefef, #ffffff 10%);
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#eeefef), color-stop(0.1, #ffffff));
    background: -webkit-linear-gradient(#eeefef, #ffffff 10%);
    background: linear-gradient(#eeefef, #ffffff...

JavaScript

function capture() {
     alert("Inside");
     html2canvas($('body'), {
         onrendered: function (canvas) {
             var imgString = canvas.toDataURL("image/png");
             window.open(imgString);
         }
     });
 }

function pankaj()
{
    alert("Pankaj : Inside");
}