Login form 2
<!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=iso-8859-1" />
<title>Time Manager</title>
<style type='text/css'>
/* CSS Document */
body{background:url(105x-images/main-bg.gif) 0 0 repeat-x #A8A39D; color:#1A1917; margin:84px 0 0; padding:0; font:14px/20px Arial, Helvetica, sans-serif;}
div, p, h1, h2, h3, ul{padding:0px; margin:0px;}
ul{list-style-type:none;}
/*--TOP PANEL--*/
#topPan{width:464px; height:398px; position:relative; margin:0 auto;}
#topPan ul {width:464px;}
#topPan ul li{float:left; font:12px/30px "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight:bold; text-transform:uppercase;}
#topPan ul li a{width:92px; height:30px; display:block; background:url(105x-images/menubg-normal.gif) 0 0 no-repeat #66605B; color:#FDFDFD; text-decoration:none; text-align:center;}
#topPan ul li a:hover{background:url(105x-images/menubg-hover.gif) 0 0 no-repeat #66605B; color:#1A1917;}
#topPan ul li.menupadding{margin:0 0 0 1px;}
#topPan ul li.home{width:92px; height:30px; display:block; background:url(105x-images/menubg-hover.gif) 0 0 no-repeat #FDFDFD; color:#1A1917; text-align:center;}
#topPan h1{display:block; width:464px; height:198px; background:url(105x-images/header.jpg) 0 0 no-repeat; text-indent:-2000px; margin:0; clear:both;}
#toplinkPan{width:464px; height:159px; position:relative; margin:0 auto;}
#toplinkfastPan{width:148px; height:140px; float:left; background:url(105x-images/blog-normal.jpg) 0 0 no-repeat #5B5550; margin:8px 0 0; color:#fff;}
#toplinkfastPan a{text-decoration:none; display:block; width:148px; height:140px;}
#toplinkfastPan a:hover{text-decoration:none; background:url(105x-images/blog-hover.jpg) 0 0 no-repeat;}
#toplinkfastPan p{display:block; width:90px; height:15px; position:absolute; top:0px; left:0px; font:12px/14px "Trebuchet MS", Arial, Helvetica, sans-serif; margin:54px 0 0 21px;}
#toplinksecondPan{width:148px; height:140px; float:left; background:url(105x-images/chat-normal.jpg) 0 0 no-repeat #5B5550; margin:8px 10px 0; color:#fff;}
#toplinksecondPan a{text-decoration:none; display:block; width:148px; height:140px;}
#toplinksecondPan a:hover{text-decoration:none; background:url(105x-images/chat-hover.jpg) 0 0 no-repeat;}
#toplinksecondPan p{display:block; width:90px; height:15px; position:absolute; top:0px; left:157px; font:12px/14px "Trebuchet MS", Arial, Helvetica, sans-serif; margin:54px 0 0 21px; }
#toplinkthirdPan{width:148px; height:140px; float:left; background:url(105x-images/tools-normal.jpg) 0 0 no-repeat #5B5550; margin:8px 0 0; color:#fff;}
#toplinkthirdPan a{text-decoration:none; display:block; width:148px; height:140px;}
#toplinkthirdPan a:hover{text-decoration:none; background:url(105x-images/tools-hover.jpg) 0 0 no-repeat;}
#toplinkthirdPan p{display:block; width:90px; height:15px; position:absolute; top:0px; right:34px; font:12px/14px "Trebuchet MS", Arial, Helvetica, sans-serif; margin:54px 0 0 21px; }
/*--/TOP PANEL--*/
/*--BODY PANEL--*/
#bodyPan{width:352px; background:url(105x-images/bodytopbg.jpg) 0 0 no-repeat #fff; color:#1A1917; position:relative; margin:0 auto; padding:0 56px;}
#bodyPan h1{width:352px; height:32px; display:block; background:url(105x-images/welcomebg.gif) 0 100% repeat-x; font:28px/26px Georgia, "Times New Roman", Times, serif; padding:42px 0 0;}
#bodyPan h1 span{background:#F9F9F9; color:#9A0000; font-size:26px;}
#bodyPan h2{width:350px; height:32px; display:block; background:url(105x-images/dotline.gif) 0 100% repeat-x #fff; font:28px/26px Georgia, "Times New Roman", Times, serif; padding:42px 0 0; color:#9A0000;}
#bodyPan p{padding:18px 0 0 0;}
#bodyPan p.bigtext{background:#fff; font-size:18px; color:#B3A7A0; font-weight:bold; padding:18px 0 0;}
#bodyPan p.more{width:89px; height:39px;}
#bodyPan p.more a{display:block; width:89px; height:39px; background:url(105x-images/more1.jpg) 0 0 no-repeat #FBFBFB; color:#fff; font:14px/36px "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight:bold; text-transform:uppercase; text-decoration:none; margin:0 0 0 262px; text-align:center;}
#bodyPan p.more a:hover{text-decoration:none; background:url(105x-images/more2.jpg) 0 0 no-repeat;}
#bodyPan p.morenext{width:89px; height:60px; right:0px; top:0px; clear:both;}
#bodyPan p.morenext a{display:block; width:89px; height:39px; background:url(105x-images/more2.jpg) 0 0 no-repeat #FBFBFB; color:#fff; font:14px/36px "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight:bold; text-transform:uppercase; text-decoration:none; margin:0 0 0 262px; text-align:center;}
#bodyPan p.morenext a:hover{text-decoration:none; background:url(105x-images/more1.jpg) 0 0 no-repeat;}
#bodybottomPan{width:464px; height:42px; background:url(105x-images/bodybottombg.jpg) 0 0 no-repeat; position:relative; margin:0 auto; clear:both; }
#bodyPan ul{width:352px; height:110px; margin:20px 0 0;}
#bodyPan ul li{background:url(105x-images/arrow.jpg) 0 4px no-repeat; padding:0 0 0 20px;}
#bodyPan ul li a{background:#fff; color:#9A0000; text-decoration:none;}
#bodyPan ul li a:hover{text-decoration:underline;}
#bodyPan form{width:350px; height:162px; background:url(105x-images/formarea.jpg) 0 100% no-repeat; padding:0px; margin:30px 0 0;}
#bodyPan form h2{display:block; width:310px; height:45px; background:url(105x-images/formtop.gif) 0 0 no-repeat #F9F9F9; color:#fff; font:20px/39px Georgia, "Times New Roman", Times, serif; margin:0; padding:0 0 0 40px;}
#bodyPan form input{width:165px; height:18px; margin:0 0 10px 130px;}
#bodyPan form input.paddingtop{margin-top:16px;}
#bodyPan form input.button{width:54px; height:25px; display:block; background:url(105x-images/button.gif) 0 0 no-repeat #EBEBEB; border:none; color:#fff; font:14px/25px "Trebuchet MS", Arial, Helvetica, sans-serif; text-transform:uppercase; margin:0 0 0 262px; text-align:center;}
/*--/BODY PANEL--*/
/*--FOOTER PANEL--*/
#footermainPan{height:155px; background: url(105x-images/footerbg.gif) 0 0 repeat-x #000; color:#fff; margin:43px 0 0; padding:51px 0 0;}
#footerPan{width:330px; height:90px; display:block; position:relative; margin:0 auto;}
#footerPan p{padding:51px 0 0;}
#footerPan p span{background:#1C1B19; color:#AC2626; font-size:10px;}
#footerPan p.copyright{ background:#1F1D1B; margin:0; display:block; position:absolute; bottom:0px; right:23px; color:#fff; font:11px/15px Tahoma,Arial, Helvetica, sans-serif; padding:0;}
#footerPan ul{width:330px; display:block; position:absolute; left:0px; top:0; padding:0; }
#footerPan li{float:left; font:12px/15px "Trebuchet MS",Arial, Helvetica, sans-serif; font-weight:normal;}
#footerPan ul li a{padding:0 0 0 12px; color:#fff; background:#181716; text-decoration:none;}
#footerPan ul li a:hover{text-decoration:underline;}
#footerPan ul.info{width:330px; height:45px; display:block; position:absolute; left:0px; top:29px; padding:0;}
#footerPan ul.info li{display:block; width:109px;}
#footerPan ul.info li.address{width:97px; background:url(105x-images/vertical-dot.gif) 100% 0 repeat-y #1C1B19; color:#7B746B; font-size:10px; font-weight:bold; padding:0 0 0 12px;}
#footerPan ul.info li.phone{width:94px; background:url(105x-images/vertical-dot.gif) 100% 0 repeat-y #1C1B19; color:#7B746B; font-size:10px; padding:0 0 0 15px; font-weight:bold;}
#footerPan ul.info li.fax{width:94px; background:#1C1B19; color:#7B746B; font-size:10px; padding:0 0 0 15px; font-weight:bold;}
#footerPan ul li span{background:#1C1B19; color:#AC2626; font-size:10px; font-weight:bold; line-height:14px;}
#footerPan ul.templateworld{width:158px; background:#1C1B19; color:#fff; display:block; position:absolute; top:97px; left:152px;}
#footerPan ul.templateworld li a{background:#1C1B19; display:block; color:#fff; text-decoration:none;}
#footerPan ul.templateworld li a:hover{text-decoration:underline;}
</style>
</head>
<body>
<!--TopPan-->
<div id="topPan">
<ul>
<li class="home">Home</li>
<li class="menupadding"><a href="#">About us</a></li>
<li class="menupadding"><a href="#">Support</a></li>
<li class="menupadding"><a href="#"> Solution</a></li>
<li class="menupadding"><a href="#">contact</a></li>
</ul>
<h1>Time Manager</h1>
<div id="toplinkPan">
<div id="toplinkfastPan">
<p>Phasellus felis</p>
<a href=""> </a>
</div>
<div id="toplinksecondPan">
<p>Phasellus felis</p>
<a href=""> </a>
</div>
<div id="toplinkthirdPan">
<p>Phasellus felis</p>
<a href=""> </a>
</div>
</div>
</div>
<!--TopPan Close-->
<!--BodyPan-->
<div id="bodyPan">
<h1><span>Welcome</span></h1>
<p class="bigtext">This is a free, tableless, W3C-compliant web design layout by Template World.</p>
<p>Time Manager is a free, tableless, W3C-compliant web design layout by Template World. This template has been tested and proven compatible with all major browser environments and operating systems. You are free to modify the design to suit your tastes in any way you like.</p>
<p>We only ask you to not remove "Design by Template World" and the link http://www.templateworld.com from the footer of the template.</p>
<p>If you are interested in seeing more of our free web template designs feel free to visit our website, Template World. We intend to add at least 25 new free templates in the coming month.</p>
<p class="more"><a href="#">more</a></p>
<form action="" method="post">
<h2>member login</h2>
<input type="text" class="paddingtop" value="Your Name" />
<input name="" type="text" value="Email ID" />
<input name="" type="submit" class="button" value="GO" />
</form>
<h2>Why choose us ?</h2>
<p class="bigtext">amet,conadipscingelit.sectetueradipis ngelit.adipiscing elit. Donec vitae leo. Integer</p>
<p>Phasellus dui lectus, . Pellentesque molestiepellensque quisPellentesque, molestie sed, tempus eu,nc. Pelle</p>
<p>ntesque luctus, convallis at, metus. Nullam lectus mi, consectetuer quis, pellentesque vitae, . Pellentesque tempus sit amet, ante. Pellentesque </p>
<ul>
<li><a href="#">vitae facilisis diam elit sed massa. Curabitursem</a> </li>
<li><a href="#">vitae facilisis diam elit sed massa. Curabitursem</a> </li>
<li><a href="#">vitae facilisis diam elit sed massa. Curabitursem</a> </li>
<li><a href="#">vitae facilisis diam elit sed massa. Curabitursem</a> </li>
<li><a href="#">vitae facilisis diam elit sed massa. Curabitursem</a> </li>
</ul>
<p class="morenext"><a href="#">more</a></p>
</div>
<div id="bodybottomPan"> </div>
<!--BodyPan Close-->
<!--FooterPan-->
<div id="footermainPan">
<div id="footerPan">
<ul>
<li><a href="#">Home </a>| </li>
<li><a href="#">About us</a> | </li>
<li><a href="#">Support </a>| </li>
<li><a href="#">Clients</a> | </li>
<li><a href="#">Contact </a> </li>
</ul>
<ul class="info">
<li class="address">23-Ambush road 0128thonhill <br />CANADA</li>
<li class="phone"><span>PH: </span><br />
012-2568-6897 <br />
012-2568-6898</li>
<li class="fax"><span>FAX:</span> <br />
012-2568-6897 <br />
012-2568-6898</li>
</ul>
<p class="copyright">>>time manager all right reaserved </p>
<ul class="templateworld">
<li>Design By:</li>
<li><a href="http://www.templateworld.com" target="_blank">Template World</a></li>
</ul>
</div>
</div>
</body>
</html>
Related examples in the same category