// syntex highlighter // syntex highlighter

EngiGuide

Navigation: Weblog / Archive by category '5.Info Zone / Computer & IT / HTML'

Archive for the ‘HTML’ Category

How To Design Effective Login Page ?

Posted by Vasanth Kamal On October - 2 - 2010

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.

</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.

</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
HTML

HOT LINKS

About Me

There is something about me..

Twitter

    Join Us. . .