GET ADMISSION in any stream CONTACT :: Mr. JAYDEEP MEHTA :: CONTACT NO :: 9228217183
Get & share knowledge with us... Be a part of GTU-MATERIAL. send study Material at gtumca1@gmail.com with your Name - College name...

Tuesday, April 5, 2011

How To Design Effective Login Page ?

3:46 AM  Mr. VISHAL PANDYA  No comments

Hi guys, today i am going to learn you that how to Design Effective Login Page for your website project.

login-grooveshark
login-grooveshark

A completely distraction-free log in page. These are becoming more and more popular with web applications which require you to log in before you can do very much. The log in page can be a great place to have fun with design and do something unique. Lets start …
First of all you need to create a form for login.html page.Design simple login page with -form- tag.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
</code>
<!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>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 
 <title>Login Page</title>
 
 <link rel="shortcut icon" href="/favicon.ico">
 <link rel="stylesheet" type="text/css" href="style.css" />
</head>
 
<body>
 
 <form id="login-form" action="#" method="post">
 <fieldset>
 
 <legend>Log in</legend>
 
 <label for="login">Email</label>
 <input type="text" id="login" name="login"/>
 <div></div>
 
 <label for="password">Password</label>
 <input type="password" id="password" name="password"/>
 <div></div>
 
 <label for="remember_me" style="padding: 0;">Remember me?</label>
 <input type="checkbox" id="remember_me" style="position: relative; top: 3px; margin: 0; " name="remember_me"/>
 <div></div>
 
 <br />
 
 <input type="submit" style="margin: -20px 0 0 287px;" name="commit" value="Log in"/>
 </fieldset>
 </form>
 
</body>
 
</html>
<code>
Now create style.css file wits css , keep in mind you should need some css knowledge.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
</code>*                    { margin: 0; padding: 0; }
body                { font-family: Georgia, serif; background: url(images/login-page-bg.jpg) top center no-repeat #c4c4c4; color: #3a3a3a;  }
 
.clear                { clear: both; }
 
form                { width: 406px; margin: 170px auto 0; }
 
legend                { display: none; }
 
fieldset            { border: 0; }
 
label                { width: 115px; text-align: right; float: left; margin: 0 10px 0 0; padding: 9px 0 0 0; font-size: 16px; }
 
input                { width: 220px; display: block; padding: 4px; margin: 0 0 10px 0; font-size: 18px;
 color: #3a3a3a; font-family: Georgia, serif;}
input[type=checkbox]{ width: 20px; margin: 0; display: inline-block; }
 
.button                { background: url(images/button-bg.png) repeat-x top center; border: 1px solid #999;
 -moz-border-radius: 5px; padding: 5px; color: black; font-weight: bold;
 -webkit-border-radius: 5px; font-size: 13px;  width: 70px; }
.button:hover        { background: white; color: black; }<code>
Now design effective login image background.you can design it in photoshop or other designing software.
TITLE: Effective Login Page
Demo Clik Here !!
Download Link: Login.rar

Posted in:

0 comments:

Post a Comment

Twitter Delicious Facebook Digg Stumbleupon Favorites More