Sunday, January 20, 2013


HTML & CSS design login pages



                                             Demo              Download


HTML code:


<html >
<head >
    <title>  Webxteria Free login page styles  </title>
    <link href="Css/style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="script/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="script/ss.js"></script>

  
</head>
<body>
<div id="bar">
<br>
<center> <strong>Home</strong></center>
</div>
<div id="logo"><img id="pic" src="Images/logo.png" width=200px height=200px></div>
<div id="login"> Login </div>
<div id="login2"> Register </div>
<div id="admin"> Admin</div>
<div id="client"> Workers </div>
<div id="contentlog">
<div id="username">
<img id="un" src="Images/user.png" />
                 <input type="text" ID="TextBox1" class="utxt"  value=" Login id ">
</div>
<div id="password">
<img id="un" src="Images/lock.png"/>
                 <input type="password" ID="TextBox2" class="utxt"  value=" Login password ">
</div>
<Button class="consub"> Login </button>
</div>
<div id="reg">
<div id="username">
<img id="un" src="Images/user.png" />
                <input type="text" ID="TextBox3" class="utxt" value="Login Username "></asp:TextBox>
</div>
<div id="password">
<img id="un" src="Images/lock.png"/>
                <input type="password" ID="TextBox4"  class="utxt" value=" Login password "></asp:TextBox>
</div>
<div id="validdb">
<img id="un" src="Images/lock.png"/>
                <input type="text" ID="TextBox5" class="utxt" value=" Database password "></asp:TextBox>
</div>
<br>
            <Button  class="consub" ID="Button1"  >Login </button>

</div>
</body>
</html>



CSS Code :

body{

background:url("../Images/back.gif");
background-repeat: repeat;

}

#bar{
left:300px;
width:500px;
height:40px;
border-radius:10px;
position:absolute;
top:-15px;
background: -webkit-linear-gradient(top, #E7BC14, #B96100);
border-color: #C57805;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
color: white;
box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.25);
padding: 8px 12px;
padding-right: 30px;
font-size:15px;
opacity:0;
z-index:99999999999999;
}

#logo{
position:absolute;
left:450px;
top:80px;
width:200px;
height:200px;
margin-bottom:50%;
padding-bottom:15px;
z-index:888888;
opacity:0;

}


#name{
position:absolute;
left:900px;
top:380px;
opacity:0;
}
#login{

 position:absolute;
left:500px;
top:350px;

width: 15%;
float:left;
height: 45px;
color: rgba(0, 0, 0, 0.75);
text-shadow: rgba(255, 255, 255, 0.5) 0px 1px 0px;
font: bold 14px/45px HelveticaNeue, Helvetica, Arial;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2), 0px -1px 0px rgba(255, 255, 255, 0.3) inset;
padding: 0px;
text-align: center;
border-radius: 4px;
border: 0px;
background-image: -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.35));
background-color: #FFD000;
cursor: pointer;
opacity:0;
}

#login2{

position:absolute;
width: 15%;
float:left;
height: 45px;
color: rgba(0, 0, 0, 0.75);
text-shadow: rgba(255, 255, 255, 0.5) 0px 1px 0px;
font: bold 14px/45px HelveticaNeue, Helvetica, Arial;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2), 0px -1px 0px rgba(255, 255, 255, 0.3) inset;
padding: 0px;
text-align: center;
border-radius: 4px;
border: 0px;
background-image: -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.35));
background-color: #FFD000;
cursor: pointer;
left:700px;
top:350px;
opacity:0;

}

#admin{
position:absolute;
left:900px;
top:350px;

width: 15%;
float:left;
height: 45px;
color: rgba(0, 0, 0, 0.75);
text-shadow: rgba(255, 255, 255, 0.5) 0px 1px 0px;
font: bold 14px/45px HelveticaNeue, Helvetica, Arial;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2), 0px -1px 0px rgba(255, 255, 255, 0.3) inset;
padding: 0px;
text-align: center;
border-radius: 4px;
border: 0px;
background-image: -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.35));
background-color: #FFD000;
cursor: pointer;
opacity:0;

}

#admin:hover{

background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5));
}

#client{


position:absolute;
width: 15%;
float:left;
height: 45px;
color: rgba(0, 0, 0, 0.75);
text-shadow: rgba(255, 255, 255, 0.5) 0px 1px 0px;
font: bold 14px/45px HelveticaNeue, Helvetica, Arial;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2), 0px -1px 0px rgba(255, 255, 255, 0.3) inset;
padding: 0px;
text-align: center;
border-radius: 4px;
border: 0px;
background-image: -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.35));
background-color: #FFD000;
cursor: pointer;
left:900px;
top:350px;
opacity:0;

}

#client:hover{

 background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5));
}
#login2:hover{

 background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5));
}

#login:hover{

 background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5));
}

#contentlog{

width:450px;
height:110px;
background:black;
opacity:0;
position:absolute;
left:340px;
top:500px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-bottom: 0px;
border: 1px solid #555;
padding-right: 10px;
font: bold 14px/45px HelveticaNeue, Helvetica, Arial;
}


#reg{
width:450px;
height:175px;
background:black;
opacity:0;
position:absolute;
left:340px;
top:500px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-bottom: 0px;
border: 1px solid #555;
padding-right: 10px;
font: bold 14px/45px HelveticaNeue, Helvetica, Arial;

}

#submit{


position:absolute;
width: 450px;
float:left;
height: 45px;
color: rgba(0, 0, 0, 0.75);
text-shadow: rgba(255, 255, 255, 0.5) 0px 1px 0px;
font: bold 14px/45px HelveticaNeue, Helvetica, Arial;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2), 0px -1px 0px rgba(255, 255, 255, 0.3) inset;
padding: 0px;
text-align: center;
border-radius: 4px;
border: 0px;
background-image: -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.35));
background-color: #FFD000;
cursor: pointer;
left:0px;
top:160px;
opacity:1;


}

#submit:hover{

 background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5));

}

.consub{

 position:absolute;
width: 460px;
float:left;
height: 45px;
color: rgba(0, 0, 0, 0.75);
text-shadow: rgba(255, 255, 255, 0.5) 0px 1px 0px;
font: bold 14px/45px HelveticaNeue, Helvetica, Arial;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2), 0px -1px 0px rgba(255, 255, 255, 0.3) inset;
padding: 0px;
text-align: center;
border-radius: 4px;
border: 0px;
background-image: -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.35));
background-color: #FFD000;
cursor: pointer;
left:0px;
top:210px;
opacity:1;

}

.consub:hover{

 background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5));

}

#username{
width:460px;
border-bottom: 1px solid #171717;
}

#password{
width:460px;
border-bottom: 1px solid #171717;
}
#validdb{


}


#un{
margin-top:20px;
margin-left:15px;
}

.utxt{
width:80%;
padding: 15px 10px;
font-weight: bold;
color: white;
background: transparent;
border: none;
box-sizing: border-box;
border-bottom: #E1E1E1;
}


#wrapper{
display:block;
width:1000px;
margin:0px auto;
border:1px solid black;
box-shadow: 5px 5x 5px gray;

}

#delimeter{
clear:both;
}

#content{
}

#header{

}

#footer{
}



Js Code:




$(document).ready(function(){
$("#bar").animate({opacity:'0.5',background:' -webkit-linear-gradient(top, #E7BC14, #B96100)'},"slow");
$("#logo").animate({opacity:'1'},"slow");
$("#login").animate({opacity:'1',left:'370px',top:'350px'},"fast");
$("#login2").animate({opacity:'1',left:'580px',top:'350px'},"fast");
$("#bar").mouseenter(function(){
$("#bar").animate({opacity:'1',background:'#E7BC4',background:'-webkit-linear-gradient(top,#EECB40,#B96100)'});
});
$("#bar").mouseleave(function(){
$("#bar").animate({opacity:'0.7',background:' -webkit-linear-gradient(top, #E7BC14, #B96100)'});
});
$("#login").click(function(){
$("#login,#login2").animate({opacity:'0',left:'0'},"slow");
$("#admin").animate({opacity:"1",left:'350px'},"slow");
$("#client").animate({opacity:"1",left:'590px'},"slow");
});
$("#admin,#client").click(function(){
$("#admin,#client").animate({opacity:'0',left:'0'},"slow");
$("#contentlog").animate({opacity:'1',top:'300px'});
});
$("#login2").click(function(){
$("#admin,#client").animate({opacity:'0',left:'0'},"slow");
$("#reg").animate({opacity:'1',top:'300px'});
});
$("#bar").click(function(){
window.location=("index.html");
});
});


Note :-

             You must have jquery-1.7.2.min.js .. Jquery library
Posted by Unknown at 9:09 AM 4 comments
Labels: , , ,

Asp.net Login form using c#

Saturday, January 19, 2013










LOgin in Aspx using c#

Dafult.aspx:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<head runat="server">
<title></title>
<style type="text/css">
.style1
{
width: 100%;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<table class="style1">
<tr>
<td>
<asp:Label ID="Label1" runat="server" Text="Enter your roll number"></asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label2" runat="server" Text="Enter your roll number"></asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
&nbsp;</td>
<td>
<asp:Button ID="Button2" runat="server" onclick="Button2_Click" Text="Login" />
</td>
</tr>
</table>
<div>

</div>
</form>
</body>
</html>

Default.aspx.cs:

May b you have a better idea to do this , but if you don't have have it ...

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Configuration;

public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{


}
protected void Button2_Click(object sender, EventArgs e)
{
SqlConnection a = new SqlConnection(@"Data Source=.\SQLEXPRESS;AttachDbFilename='C:\Users\Faran\Documents\Visual Studio 2008\WebSites\WebSite2\App_Data\login.mdf';Integrated Security=True;User Instance=True");
a.Open();
string query = "select count(*) from user_login where Roll='" + TextBox1.Text + "'";
SqlCommand sc = new SqlCommand(query, a);
int temp = Convert.ToInt32(sc.ExecuteScalar().ToString());
if (temp == 1)
{
string query2 = "select login_id from user_login where login_id='" + TextBox2.Text + "'";
SqlCommand sc2 = new SqlCommand(query2, a);
string log = Convert.ToString(sc2.ExecuteScalar());


if (log==TextBox2.Text)
{
Response.Write("welcome");
}
else
{
Response.Write("Invalid password ...!");
}
}
else
{
Response.Write("Invalid user name ...!");

}

}

}

Database:

Database name :login
Table name : user_login
column 1 : Roll
Column 2 : login_id

Thnx
Posted by Unknown at 9:59 AM 0 comments

Automatic Meta Generator







A meta tag is a hidden tag that lives in the <HEAD> of an HTML document. It is used to supply additional information about the HTML document. The meta tag has three possible attributescontent,http-equiv, andname. Meta tags always provide information in a name/value pair. Thenameandhttp-equivattributes provide the name information and thecontentprovides the value information. Meta tags do not have a closing tag.




Posted by Unknown at 9:07 AM 0 comments
Subscribe to: Posts (Atom)
 

Most Reading

  • Retrive Data from DataBase Using DataAdapter
                      First of all you need to create a new project, Here I am using Visual Studio 2008 Secod step is to...
  • Asp.net Login form using c#
    LOgin in Aspx using c# Dafult.aspx: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default....
  • How to Setup SEO Friendly 301 Redirect?
    SEO Friendly 301  The “301 Permanent Redirect” is the most efficient and search engine friendly method for redirecting websites. You c...
  • Create search engine in php, mysql
                                   Database Matter The first step is to open up phpMyAdmin or a database software and incorporate the bel...
  • Assigning IP on Cisco Routers
       Here I am taking the Equipment             -  Cisco 2811       -  Serial DCE       -  WIC-2T   Assigning IP address...
  • (no title)
    HTML & CSS design login pages                                               Demo                Download HTML code: ...
  • Automatic Meta Generator
    A meta tag is a hidden tag that lives in the <HEAD> of an HTML document. It is used to supply additional information about th...
  • Simple web browser in c#
    Pretty Simple no need to code bundle of lines for it, Just Drag n Drop Here all Done... Lets Start Create New project      ...
  • Custom word press login
    Here is the word press login page customization tutorial , Look's difficult but pretty easy Just follow these steps ...
  • How to change the favicon in wordpress
    Favicon is the icon that shows in the statring of the tab, Something like this In this picture you can see the favicon of t...