Jump to content
MakeWebGames

Login Page


Tezza`
 Share

Recommended Posts

Heres a quick login page ive made....

 

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

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />

  <title>Login</title>

  <style type="text/css">

   body                       {font-family:Arial, Tahoma;}
h1                         {text-decoration:underline;}
img                        {border:1px solid #000000;}
fieldset            	   {border:none}
dl 				       	   {width:400px; }
dd 					       {width:200px; float:left; padding:1px;}
dt 					       {width:100px; float:left; padding:1px;}
input 				       {border:1px solid #000000; margin:1px;}
#wrapper                   {width:1000px; margin:auto;}
#form 				       {background-color:#D3D3D3; border:1px solid #999999; width:400px; height:600px; text-align:center; float:left;}
#navigation 		       {background-color:#D3D3D3; border:1px solid #999999;width:250px; height:600px; text-align:center; float:left;}
#navigation ul li 	       {display:block; text-align:left;}
#navigation ul li a		   {display:block; padding:1px 0 0 16px; color:#3E3D23; background-repeat:no-repeat;}
#navigation ul li a 	   {background-image:url(img/bullet_blue.png); text-decoration:none;}
#navigation ul li a:hover  {background-image:url(img/bullet_red.png);}
#screenshots     		   {background-color:#D3D3D3; border:1px solid #999999; width:250px; height:600px; text-align:center; float:left;}
#footer                    {background-color:#D3D3D3; border:1px solid #999999; width:904px; text-align:center;}

  </style>

</head>

<body>

<div id="wrapper">
<div id="navigation">
<h1>Navigation</h1>
 <ul>
   [*][url="#"]Login[/url]
   [*][url="#"]Register[/url]
   [*][url="#"]Terms of Service[/url]
   [*][url="#"]Contact Us[/url]
 [/list]
</div>
<div id="form">
 <h1>Login</h1>
 <fieldset>
   <form action="authenticate.php" method="post">
     <dl>
       <dt><label for="username">Username:</label></dt>
       <dd><input type="text" id="username" name="username" maxlength="25" /></dd>
       <dt><label for="password">Password:</label>
</dt>
       <dd><input type="password" id="password" name="password" maxlength="25" />
	<input type="submit" value="Submit" />
	<input type="reset" value="Reset" /></dd>
  </dl>
   </form>
 </fieldset>
</div>
<div id="screenshots">
 <h1>Screenshots</h1>
 [url="#"][img=img/screenshot.jpg][/url]

 [url="#"][img=img/screenshot.jpg][/url]

 [url="#"][img=img/screenshot.jpg][/url]

 [url="#"][img=img/screenshot.jpg][/url]  
</div>
<div id="footer">


Login made by Tezza`. All Rights reserved</p>
</div>
</div>

</body>
</html>

 

and also a couple images you will need, make sure these are in a folder called "img" <=== without the quotes

bullet_blue.png

-

bullet_red.png

-

screenshot.jpg

Hope you like.

 

screenshot-1.jpg

 

If there is anything i can add / edit.. please... get in touch..

Thanks

Link to comment
Share on other sites

  • 2 weeks later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...