.Net For RealTime: LoginPage Using jQuery and CSS With Remember me, Forgot Password and Registration in Asp.Net

LoginPage :

Register Popup :

Forgot Password PopUp:

Code in ASpx Page:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JQueryPopUp.aspx.cs"

Inherits="Jquerytest.JQueryDraggable" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>RaffiApp</title>

<link href="Styles/popup1.css" rel="stylesheet" type="text/css" />

<script src="Scripts/jquery-1.8.2.js" type="text/javascript"></script>

<script type='text/javascript'>

$(function () {

var overlay = $('<div id="overlay"></div>');

$('.x').click(function () {

$('.popup').hide();

overlay.appendTo(document.body).remove();

return false;

});

$('.Forgotx').click(function () {

$('.Forgotpopup').hide();

overlay.appendTo(document.body).remove();

return false;

});

$('.click').click(function () {

overlay.show();

overlay.appendTo(document.body);

$('.popup').show();

return false;

});

$('.forgot').click(function () {

overlay.show();

overlay.appendTo(document.body);

$('.Forgotpopup').show();

return false;

});

});

</script>

</head>

<body style="background-image: url(Images/BG.jpg);">

<form id="form1" runat="server">

<div class='popup'>

<div class='content'>

<a href="#" class="x">✖</a>

<p>

<b>RegisterHere</b></p>

<label>

Enter FirstName :</label>

<asp:TextBox ID="txtFirstName" class="Logintext" runat="server"></asp:TextBox>

<label>

Enter UserName :</label>

<asp:TextBox ID="txtRegUserName" class="Logintext" runat="server"></asp:TextBox>

<label>

Password :</label>

<asp:TextBox ID="txtRegpassword" TextMode="Password" class="Logintext" runat="server"></asp:TextBox>

<label>

Confirm Password :</label>

<asp:TextBox ID="txtRegCpassword" TextMode="Password" class="Logintext" runat="server"></asp:TextBox>

<asp:Button ID="btnSubmit" class="Loginbutton" OnClick="btnSubmitClick" runat="server"

Text="Submit" />

</div>

</div>

<div class='Forgotpopup'>

<div class='Forgotcontent'>

<a href="#" class="Forgotx ">✖</a>

<p>

<b>Forgot Password</b></p>

<label>

Enter UserName/EmailId :</label>

<asp:TextBox ID="txtEmailId" class="Logintext" runat="server"></asp:TextBox><br />

<asp:Button ID="btnSend" runat="server" Text="Send" OnClick="btnSendClick" class="Loginbutton" />

</div>

</div>

<div class='login'>

<asp:Label ID="lblUserName" runat="server" Text="UserName :" class="Loginlable"></asp:Label>

<asp:TextBox ID="txtUserName" runat="server" class="Logintext"></asp:TextBox>

<asp:Label ID="lblPassword" runat="server" Text="Password :" class="Loginlable"></asp:Label>

<asp:TextBox ID="txtPassword" TextMode="Password" runat="server" class="Logintext"></asp:TextBox>

<div id="lower">

<input type="checkbox" /><label for="checkbox">Remember Me</label>

<asp:Button ID="btnLogin" runat="server" Text="Login" OnClick="btnLoginClick" class="Loginbutton" /><br />

<br />

<a href='' class='click'>Register Here</a><a href='' class='forgot'>Forgot Password</a>

</div>

</div>

</form>

</body>

</html>

CSS CODE:
form {
margin: 0 auto;
margin-top: 20px;
}
body
{
/*background-image:url(../Images/BG.jpg);*/
width: 24%;
height: 119px;
font-family: "Helvetica Neue", Helvetica, sans-serif;
color: #444;
-webkit-font-smoothing: antialiased; background: #f0f0f0;
}
#overlay
{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
z-index: 100;
display: none;
}
.content a
{
text-decoration: none;
}
.popup
{
width: 100%;
margin: 0 auto;
display: none;
position: fixed;
z-index: 101;
}
.content
{
min-width: 200px;
width: 350px;
min-height: 440px;
margin: 100px auto;
background: #f3f3f3;
position: relative;
z-index: 103;
padding: 10px;
border-radius: 5px;
box-shadow: 0 2px 5px #000;
}
.content p
{
clear: both;
color: #555555;
text-align: justify;
}
.content p a
{
color: #d91900;
font-weight: bold;
}
.content .x
{
float: right;
height: 25px;
left: 22px;
position: relative;
top: -20px;
width: 25px;
display:block;
text-transform:uppercase;
text-decoration:none;
color:#fff;
font-family:"Tahoma", Helvetica, sans-serif;
text-align:center;
font-size:18px;
line-height:1.4em;
border-color: #1472ad;
background-color: #F00;
background-image: -webkit-gradient(linear, left top, left bottom, from(#F00), to(#cc0000));
background-image: -webkit-linear-gradient(top, #F00, #cc0000);
background-image: -moz-linear-gradient(top, #F00, #cc0000);
background-image: -o-linear-gradient(top, #F00, #cc0000);
background-image: linear-gradient(to bottom, #F00, #cc0000);
box-shadow:0px 0px 2px 0px #666;
-moz-box-shadow:0px 0px 2px 0px #666;
-webkit-box-shadow:0px 0px 2px 0px #666;
border-radius:50%;
-moz-border-radius:50%;
-webkit-border-radius:50%;
text-indent:1px;
font-weight:bold;
}
.content .x:hover
{
cursor: pointer;
}

.Forgotcontent a
{
text-decoration: none;
}
.Forgotpopup
{
width: 100%;
margin: 0 auto;
display: none;
position: fixed;
z-index: 101;
margin-top:69px;
}
.Forgotcontent
{
min-width: 200px;
width: 350px;
min-height: 270px;
margin: 100px auto;
background: #f3f3f3;
position: relative;
z-index: 103;
padding: 10px;
border-radius: 5px;
box-shadow: 0 2px 5px #000;
}
.Forgotcontent p
{
clear: both;
color: #555555;
text-align: justify;
}
.Forgotcontent p a
{
color: #d91900;
font-weight: bold;
}
.Forgotcontent .Forgotx
{
float: right;
height: 25px;
left: 22px;
position: relative;
top: -20px;
width: 25px;
display:block;
text-transform:uppercase;
text-decoration:none;
color:#fff;
font-family:"Tahoma", Helvetica, sans-serif;
text-align:center;
font-size:18px;
line-height:1.4em;
border-color: #1472ad;
background-color: #F00;
background-image: -webkit-gradient(linear, left top, left bottom, from(#F00), to(#cc0000));
background-image: -webkit-linear-gradient(top, #F00, #cc0000);
background-image: -moz-linear-gradient(top, #F00, #cc0000);
background-image: -o-linear-gradient(top, #F00, #cc0000);
background-image: linear-gradient(to bottom, #F00, #cc0000);
box-shadow:0px 0px 2px 0px #666;
-moz-box-shadow:0px 0px 2px 0px #666;
-webkit-box-shadow:0px 0px 2px 0px #666;
border-radius:50%;
-moz-border-radius:50%;
-webkit-border-radius:50%;
text-indent:1px;
font-weight:bold;
}
.Forgotcontent .x:hover
{
cursor: pointer;
}

p a {
font-size: 11px;
color: #aaa;
float: right;
margin-top: -13px;
margin-right: 20px;
}
p a:hover {
color: #555;
}
.login
{
position: fixed;
width: 360px;
height: 280px;
top: 50%;
left: 50%;
margin-top: -140px;
margin-left: -170px;
background: #fff;
border-radius: 3px;
border: 1px solid #ccc;
box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
}
.Loginlable
{
color: #555;
display: inline-block;
margin-left: 18px;
padding-top: 10px;
font-size: 14px;
}

.Logintext
{
color: #777;
padding-left: 10px;
margin: 10px;
margin-top: 12px;
margin-left: 18px;
width: 290px;
height: 35px;
color: #777;
border: 1px solid #c7d0d2;
border-radius: 2px;
box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .4), 0 0 0 5px #f5f7f8;
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
transition: all .4s ease;
}
.Logintext: hover
{
border: 1px solid #b6bfc0;
box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .7), 0 0 0 5px #f5f7f8;
}
.Logintext: focus
{
border: 1px solid #a8c9e4;
box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .4), 0 0 0 5px #e6f2f9;
}
input[type=checkbox] {
margin-left: 20px;
margin-top: 30px;
}
.check {
margin-left: 3px;
}

.Loginbutton
{
float: right;
margin-right: 35px;
margin-top: 20px;
width: 80px;
height: 30px;
font-size: 14px;
font-weight: bold;
color: #fff;
background-color: #acd6ef; /*IE fallback*/
background-image: -webkit-gradient(linear, left top, left bottom, from(#acd6ef), to(#6ec2e8));
background-image: -moz-linear-gradient(top left 90deg, #acd6ef 0%, #6ec2e8 100%);
background-image: linear-gradient(top left 90deg, #acd6ef 0%, #6ec2e8 100%);
border-radius: 30px;
border: 1px solid #66add6;
box-shadow: 0 1px 2px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .5);
cursor: pointer;
}
.Loginbutton : hover
{
background-image: -webkit-gradient(linear, left top, left bottom, from(#b6e2ff), to(#6ec2e8));
background-image: -moz-linear-gradient(top left 90deg, #b6e2ff 0%, #6ec2e8 100%);
background-image: linear-gradient(top left 90deg, #b6e2ff 0%, #6ec2e8 100%);
}
.Loginbutton:active {
background-image: -webkit-gradient(linear, left top, left bottom, from(#6ec2e8), to(#b6e2ff));
background-image: -moz-linear-gradient(top left 90deg, #6ec2e8 0%, #b6e2ff 100%);
background-image: linear-gradient(top left 90deg, #6ec2e8 0%, #b6e2ff 100%);
}

#lower {
background: #ecf2f5;
width: 100%;
height: 89px;
margin-top: 20px;
}
.click
{
margin-left: 25px;
width:100px;
left:20px;
font-size:12px;
}
.forgot
{
margin-left: 25px;
width:100px;
left:20px;
font-size:12px;

}

.Net For RealTime

C#

Friday, January 24, 2014

LoginPage Using jQuery and CSS With Remember me, Forgot Password and Registration in Asp.Net

LoginPage :

No comments:

Post a Comment