.aspx
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Admin Login</title>
<link href="../styles/login-box.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div style="padding: 100px 0 0 420px;">
<div id="login-box">
<h2>Login</h2>
Please Enter Your Login Details
<br /> <br />
<div id="login-box-name" style="margin-top:20px;">
Email:
</div>
<div id="login-box-field" style="margin-top:20px;">
<asp:TextBox ID="txtun" runat="server" class="form-login" title="Username" value="" size="30" maxlength="2048"></asp:TextBox>
</div>
<div id="login-box-name">
Password:
</div>
<div id="login-box-field">
<asp:TextBox ID="txtpass" runat="server" class="form-login" title="Password"
value="" size="30" maxlength="2048" TextMode="Password"></asp:TextBox>
</div>
<br />
<span class="login-box-options">
<input type="checkbox" name="1" value="1"> Remember Me <a href="#" style="margin-left:30px;">Forgot password?</a>
</span>
<br />
<br />
<asp:ImageButton ID="ImageButton1" runat="server"
ImageUrl="../images/login-btn.png" width="103" height="42"
style="margin-left:90px;" onclick="ImageButton1_Click"/>
<br />
<br />
<asp:Label ID="Label1" runat="server" Font-Bold="True" Font-Size="Medium"
ForeColor="#FF3300"></asp:Label>
</div>
</div>
</form>
</body>
.css
#login-box {
width:333px;
height: 352px;
padding: 58px 76px 0 76px;
color: #ebebeb;
font: 12px Arial, Helvetica, sans-serif;
background: url(../images/login-box-backg.png) no-repeat left top;
}
#login-box img {
border:none;
}
#login-box h2 {
padding:0;
margin:0;
color: #ebebeb;
font: bold 44px "Calibri", Arial;
}
#login-box-name {
float: left;
display:inline;
width:80px;
text-align: right;
padding: 14px 10px 0 0;
margin:0 0 7px 0;
}
#login-box-field {
float: left;
display:inline;
width:230px;
margin:0;
margin:0 0 7px 0;
}
.form-login {
width: 205px;
padding: 10px 4px 6px 3px;
border: 1px solid #0d2c52;
background-color:#1e4f8a;
font-size: 16px;
color: #ebebeb;
transition:.2s linear;
-webkit-transition:.2s linear;
-moz-transition:.2s linear;
}
.form-login:focus
{
outline: none;
box-shadow: 0px 0px 10px #61C5FA;
border-color: #61C5FA;
}
.login-box-options {
clear:both;
padding-left:87px;
font-size: 11px;
}
.login-box-options a {
color: #ebebeb;
font-size: 11px;
}
images
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Admin Login</title>
<link href="../styles/login-box.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div style="padding: 100px 0 0 420px;">
<div id="login-box">
<h2>Login</h2>
Please Enter Your Login Details
<br /> <br />
<div id="login-box-name" style="margin-top:20px;">
Email:
</div>
<div id="login-box-field" style="margin-top:20px;">
<asp:TextBox ID="txtun" runat="server" class="form-login" title="Username" value="" size="30" maxlength="2048"></asp:TextBox>
</div>
<div id="login-box-name">
Password:
</div>
<div id="login-box-field">
<asp:TextBox ID="txtpass" runat="server" class="form-login" title="Password"
value="" size="30" maxlength="2048" TextMode="Password"></asp:TextBox>
</div>
<br />
<span class="login-box-options">
<input type="checkbox" name="1" value="1"> Remember Me <a href="#" style="margin-left:30px;">Forgot password?</a>
</span>
<br />
<br />
<asp:ImageButton ID="ImageButton1" runat="server"
ImageUrl="../images/login-btn.png" width="103" height="42"
style="margin-left:90px;" onclick="ImageButton1_Click"/>
<br />
<br />
<asp:Label ID="Label1" runat="server" Font-Bold="True" Font-Size="Medium"
ForeColor="#FF3300"></asp:Label>
</div>
</div>
</form>
</body>
.css
#login-box {
width:333px;
height: 352px;
padding: 58px 76px 0 76px;
color: #ebebeb;
font: 12px Arial, Helvetica, sans-serif;
background: url(../images/login-box-backg.png) no-repeat left top;
}
#login-box img {
border:none;
}
#login-box h2 {
padding:0;
margin:0;
color: #ebebeb;
font: bold 44px "Calibri", Arial;
}
#login-box-name {
float: left;
display:inline;
width:80px;
text-align: right;
padding: 14px 10px 0 0;
margin:0 0 7px 0;
}
#login-box-field {
float: left;
display:inline;
width:230px;
margin:0;
margin:0 0 7px 0;
}
.form-login {
width: 205px;
padding: 10px 4px 6px 3px;
border: 1px solid #0d2c52;
background-color:#1e4f8a;
font-size: 16px;
color: #ebebeb;
transition:.2s linear;
-webkit-transition:.2s linear;
-moz-transition:.2s linear;
}
.form-login:focus
{
outline: none;
box-shadow: 0px 0px 10px #61C5FA;
border-color: #61C5FA;
}
.login-box-options {
clear:both;
padding-left:87px;
font-size: 11px;
}
.login-box-options a {
color: #ebebeb;
font-size: 11px;
}
images
