Login form with registration link
<!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>Blog Division</title>
<style type='text/css'>
? /* CSS Document */
body {
padding: 0px;
margin: 0px;
background: url(9blog-division-images/mainbg.gif) 0 0 repeat-x #fff;
color: #705D20;
font: 14px/18px Arial, Helvetica, sans-serif;
}
div,p,ul,h1,h2,h3,form,img {
padding: 0px;
margin: 0px;
}
ul {
list-style-type: none;
}
a {
background: #FEFEFE;
color: #fff;
text-decoration: none;
}
a:hover {
background: #FEFEFE;
color: #fff;
text-decoration: underline;
}
#topPan {
width: 748px;
height: 231px;
position: relative;
margin: 0 auto;
}
#topHeaderPan {
width: 332px;
height: 231px;
background: url(9blog-division-images/header.jpg) 0 100% no-repeat;
position: relative;
}
#topHeaderPan img {
width: 191px;
height: 84px;
display: block;
position: absolute;
top: 120px;
left: 0px;
}
#topHeaderPan ul {
width: 298px;
height: 59px;
position: absolute;
top: 31px;
left: 0px;
padding: 0px;
}
#topHeaderPan ul li {
width: 74px;
height: 59px;
background: url(9blog-division-images/menu-div.gif) 100% 0 no-repeat;
float: left;
}
#topHeaderPan ul li a {
width: 73px;
height: 59px;
display: block;
background: url(9blog-division-images/topmenubg.gif) 0 0 repeat-x #fff;
color: #88763D;
text-align: center;
font-size: 13px;
font-weight: bold;
line-height: 59px;
}
#topHeaderPan ul li a:hover {
width: 73px;
height: 59px;
background: url(9blog-division-images/topleftmenu-hover.gif) 50% 100%
no-repeat;
text-decoration: none;
}
#topHeaderPan ul li.company {
width: 74px;
height: 59px;
background: url(9blog-division-images/company-bg.gif) 0 0 no-repeat;
text-decoration: none;
text-align: center;
line-height: 59px;
}
#topHeaderPan ul li.client {
width: 74px;
height: 59px;
background: none;
float: left;
}
#toprightPan {
width: 417px;
height: 218px;
background: url(9blog-division-images/rightsidebg.jpg) 0 0 no-repeat;
position: absolute;
top: 13px;
right: 0px;
}
#toprightPan ul {
width: 320px;
height: 49px;
display: block;
margin: 16px 0 0 16px;
}
#toprightPan ul li {
width: 104px;
height: 49px;
border-right: 1px dashed #C1B79A;
float: left;
}
#toprightPan ul li.home {
width: 104px;
height: 20px;
font-size: 13px;
font-weight: bold;
text-align: center;
background: url(9blog-division-images/icon1.gif) 50% 0 no-repeat #fff;
color: #81BE28;
padding: 29px 0 0;
}
#toprightPan ul li.about {
width: 104px;
height: 20px;
font-size: 13px;
font-weight: bold;
text-align: center;
background: url(9blog-division-images/icon2-normal.gif) 50% 0 no-repeat
#fff;
color: #81BE28;
padding: 29px 0 0;
text-decoration: none;
}
#toprightPan ul li.about a {
width: 104px;
height: 20px;
font-size: 13px;
font-weight: bold;
text-align: center;
background: url(9blog-division-images/icon2-normal.gif) 50% 0 no-repeat
#fff;
color: #0880BC;
padding: 29px 0 0;
text-decoration: none;
}
#toprightPan ul li.about a:hover {
width: 104px;
height: 20px;
font-size: 13px;
font-weight: bold;
text-align: center;
background: url(9blog-division-images/icon2-hover.gif) 50% 0 no-repeat
#fff;
color: #81BE28;
padding: 29px 0 0;
text-decoration: none;
}
#toprightPan ul li.contact {
width: 104px;
height: 20px;
font-size: 13px;
font-weight: bold;
text-align: center;
background: url(9blog-division-images/icon3-normal.gif) 50% 20%
no-repeat #fff;
color: #81BE28;
border: none;
padding: 29px 0 0;
text-decoration: none;
}
#toprightPan ul li.contact a {
width: 104px;
height: 20px;
font-size: 13px;
font-weight: bold;
text-align: center;
background: url(9blog-division-images/icon3-normal.gif) 50% 20%
no-repeat #fff;
color: #0880BC;
padding: 29px 0 0;
text-decoration: none;
}
#toprightPan ul li.contact a:hover {
width: 104px;
height: 20px;
font-size: 13px;
font-weight: bold;
text-align: center;
background: url(9blog-division-images/icon3-hover.gif) 50% 20% no-repeat
#fff;
color: #81BE28;
padding: 29px 0 0;
text-decoration: none;
}
/*----/TOP PANEL----*/
/*----BODY PANEL----*/
#bodyPan {
width: 748px;
position: relative;
margin: 0 auto;
}
/*----BODY LEFT PANEL----*/
#bodyleftPan {
width: 331px;
float: left;
}
#bodyleftPan h2 {
width: 196px;
height: 30px;
font: 30px/30px Georgia, "Times New Roman", Times, serif;
background: #fff;
color: #006EA6;
margin: 43px 0 0;
}
#bodyleftPan h3 {
width: 196px;
height: 30px;
font: 30px/30px Georgia, "Times New Roman", Times, serif;
background: #fff;
color: #006EA6;
margin: 20px 0 0;
}
#bodyleftPan p {
padding: 14px 28px 0 0;
}
#bodyleftPan p.greentext {
background: #fff;
color: #5E9908;
font-size: 16px;
font-weight: bold;
padding: 14px 0 0;
}
#bodyleftPan p.browntext {
background: #fff;
color: #705D20;
font-size: 24px;
padding: 10px 0 0;
}
#bodyleftPan ul {
width: 270px;
height: 24px;
margin: 20px 0 0;
}
#bodyleftPan ul li {
width: 118px;
height: 24px;
float: left;
margin: 0 5px 0 0;
}
#bodyleftPan ul li.more {
width: 118px;
height: 24px;
float: left;
}
#bodyleftPan ul li a {
width: 90px;
height: 24px;
display: block;
background: url(9blog-division-images/reedmore-bg.gif) 0 0 no-repeat
#FEFEFE;
color: #fff;
font-size: 13px;
font-weight: bold;
line-height: 20px;
padding: 0 0 0 28px
}
#bodyleftPan ul li a:hover {
background: url(9blog-division-images/reedmore-hover.gif) 0 0 no-repeat;
text-decoration: none;
}
#bodyleftPan ul li.comment {
width: 98px;
height: 24px;
background: url(9blog-division-images/commentbg.gif) 0 0 no-repeat
#FEFEFE;
color: #fff;
font-size: 13px;
font-weight: bold;
line-height: 24px;
text-decoration: none;
float: left;
padding: 0 0 0 20px
}
/*----/BODY LEFT PANEL----*/
/*----BODY RIGHT PANEL----*/
#bodyrightPan {
width: 359px;
float: left;
}
/*----Login Panel----*/
#loginPan {
width: 359px;
height: 199px;
background: url(9blog-division-images/formbg.gif) 0 0 repeat-y;
}
#loginPan h2 {
width: 230px;
height: 81px;
display: block;
background: url(9blog-division-images/icon.gif) 0 50% no-repeat #fff;
color: #5EA000;
font: 30px/80px Georgia, "Times New Roman", Times, serif;
padding: 0 0 0 64px;
margin: 0 0 0 18px;
}
#loginPan h2 span {
background: #fff;
color: #017FC0;
}
#loginPan form {
width: 321px;
height: 76px;
background: #FCF6E6;
color: #705D20;
position: relative;
border: 1px dashed #BFB492;
margin: 0 0 0 18px;
padding: 6px 0 0;
}
#loginPan form label {
width: 91px;
height: 22px;
display: block;
float: left;
padding: 0 0 0 20px;
margin: 9px 0 0;
}
#loginPan form input {
width: 130px;
height: 18px;
font-size: 12px;
display: block;
float: left;
margin: 9px 12px 0 0;
}
#loginPan form input.button {
width: 49px;
height: 52px;
display: block;
position: absolute;
top: 6px;
right: 16px;
background: url(9blog-division-images/button.gif) 0 0 no-repeat #FCF6E6;
border: none;
color: #fff;
margin: 9px 0 0;
font: 16px/52px Georgia, "Times New Roman", Times, serif;
text-align: center;
padding: 0px;
}
#loginPan ul {
width: 323px;
height: 25px;
margin: 6px 0 0 18px;
}
#loginPan ul li {
width: 166px;
height: 25px;
float: left;
}
#loginPan ul li.nonregister {
width: 156px;
height: 25px;
float: left;
background: url(9blog-division-images/not-memberbg.gif) 0 0 no-repeat
#FEFEFE;
color: #fff;
font-weight: bold;
line-height: 25px;
text-align: center;
}
#loginPan ul li.register {
width: 165px;
height: 25px;
float: left;
background: url(9blog-division-images/new-registerbg.gif) 0 0 no-repeat
#FEFEFE;
color: #fff;
font-weight: bold;
line-height: 25px;
margin: 0 0 0 1px;
}
#loginPan ul li.register a {
width: 141px;
height: 25px;
display: block;
background: url(9blog-division-images/arrow1.gif) 95% 60% no-repeat;
text-decoration: none;
padding: 0 0 0 25px;
}
#loginPan ul li.register a:hover {
background: url(9blog-division-images/arrow2.gif) 95% 60% no-repeat;
text-decoration: none;
}
/*----/Login Panel----*/
#bodyrightPan p.hours {
width: 323px;
height: 83px;
margin: 33px 0 33px 18px;
}
#bodyrightPan p.hours a {
width: 323px;
height: 83px;
display: block;
background: url(9blog-division-images/24hours.gif) 0 0;
text-indent: -2000px;
}
#bodyrightPan p.hours a:hover {
width: 323px;
height: 83px;
background: url(9blog-division-images/24hours.gif) 0 0;
text-indent: -2000px;
}
/*----Login Panel----*/
#loginBottomPan {
width: 359px;
height: 25px;
background: url(9blog-division-images/form-bottombg.gif) 0 0 no-repeat;
}
/*----/Login Panel----*/
/*----Services Panel----*/
#servicesPan {
width: 359px;
height: 21px;
background: url(9blog-division-images/servicestop-bg.gif) 0 0 no-repeat;
}
#servicesBodyPan {
width: 359px;
background: url(9blog-division-images/servicesbody-bg.gif) 0 0 repeat-y;
}
#servicesBodyPan p {
padding: 10px 25px 0 34px;
}
#servicesBodyPan p.services {
width: 140px;
height: 60px;
font: 30px/60px Georgia, "Times New Roman", Times, serif;
background: #fff;
color: #006EA6;
margin: 0 0 0 34px;
padding: 0px;
}
#servicesBodyPan p.boldbrowntext {
font-size: 16px;
font-weight: bold;
padding: 4px 25px 0 34px;
}
#servicesBodyPan p.bluetext {
background: url(9blog-division-images/servicesbody-bg.gif) 0 0 repeat-y
#fff;
color: #007EC1;
font-size: 15px;
font-style: italic;
}
#servicesBodyPan p.largebrowntext {
font-size: 30px;
padding: 10px 25px 10px 34px;
}
#servicesBodyPan p.link {
width: 289px;
height: 23px;
background: #FCF6E6;
color: #705D20;
margin: 0 36px;
padding: 0px;
}
#servicesBodyPan p.link a {
width: 289px;
height: 23px;
display: block;
background: #FCF6E6;
color: #705D20;
line-height: 23px;
text-decoration: none;
text-align: center;
}
#servicesBodyPan p.link a:hover {
width: 289px;
height: 23px;
background: #F9E09F;
color: #705D20;
text-align: center;
text-decoration: none;
}
#servicesBottomPan {
width: 359px;
height: 25px;
background: url(9blog-division-images/form-bottombg.gif) 0 0 no-repeat;
padding: 10px 0 0;
}
/*----/Services Panel----*/
/*----FOOTER PANEL----*/
#footermainPan {
height: 126px;
background: url(9blog-division-images/footerbg.gif) 0 0 repeat-x #705D20;
color: #fff;
font: 12px/22px "Trebuchet MS", Arial, Helvetica, sans-serif;
clear: both;
padding: 82px 0 0;
}
#footerPan {
width: 748px;
position: relative;
margin: 0 auto;
}
#footerlogoPan {
display: block;
width: 215px;
height: 40px;
position: absolute;
top: 0px;
right: 15px;
}
#footerPan ul {
width: 546px;
position: absolute;
top: 0px;
left: 0px;
}
#footerPan li {
float: left;
}
#footerPan ul li a {
padding: 0 10px 0;
color: #fff;
background: url(9blog-division-images/footermenubg.gif) 0 0 repeat-x
#705D20;
text-decoration: none;
}
#footerPan ul li a:hover {
text-decoration: underline;
}
#footerPan ul.templateworld {
width: 300px;
background: #705D20;
color: #fff;
display: block;
position: absolute;
top: 40px;
left: 10px;
}
#footerPan ul.templateworld li a {
background: #705D20;
display: block;
color: #fff;
text-decoration: none;
}
#footerPan ul.templateworld li a:hover {
text-decoration: underline;
}
#footerPan ul.validation {
width: 250px;
background: #705D20;
color: #fff;
display: block;
position: absolute;
top: 60px;
left: 10px;
}
#footerPan ul.validation li a {
background: #705D20;
display: block;
color: #fff;
text-decoration: none;
}
#footerPan ul.validation li a:hover {
text-decoration: underline;
}
#footerPan p.copyright {
width: auto;
background: url(9blog-division-images/copyrightbg.gif) 0 0 repeat-x
#705D20;
color: #fff;
position: absolute;
top: 23px;
left: 10px;
}
</style>
</head>
<body>
<div id="topPan">
<div id="topHeaderPan">
<ul>
<li class="company">Company</li>
<li><a href="#">Solutions</a></li>
<li><a href="#">Partners</a></li>
<li class="client"><a href="#">Client </a></li>
</ul>
<a href="index.html"><img src="images/logo.jpg" title="Blog Division" alt="Blog Division" width="191" height="84" border="0" /></a> </div>
<div id="toprightPan">
<ul>
<li class="home">Home</li>
<li class="about"><a href="#">About us</a></li>
<li class="contact"><a href="#">contact</a></li>
</ul>
</div>
</div>
<div id="bodyPan">
<div id="bodyleftPan">
<h2>Coordination</h2>
<p class="greentext">M Robert</p>
<p class="browntext">23rd september 2006</p>
<p>Blog Division 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>
<ul>
<li class="more"><a href="#">Read more</a></li>
<li class="comment">Comments: 03</li>
</ul>
<h3>Destination</h3>
<p class="greentext">L Piterson</p>
<p class="browntext">03rd october 2006</p>
<p>Maecenas cursus risus et orci. In sit amet purus ac mauris egestas pharetra. Vivamus nibh. Vestibulum congue. Maecenas nunc. In hac habMitasse platea dictumst. PraesentMaecenas aucto Maecenas odio in ante id risus.sapien. Quisque lacus. Phasellus f </p>
<p>ermentum ante id risus. Surispendisse tempuss. Maecenas dolor puruspusdted, sodales tedaseccumsan sed, congue at, loremcongue sedapsucong enas cursus </p>
<ul>
<li class="more"><a href="#">Read more</a></li>
<li class="comment">Comments: 03</li>
</ul>
</div>
<div id="bodyrightPan">
<div id="loginPan">
<h2>members <span>login</span></h2>
<form action="" method="post">
<label>Email Id</label><input name="email" type="text" id="email" />
<label>Password</label><input name="pass" type="password" id="pass" />
<input name="Input" type="submit" class="button" value="Login" />
</form>
<ul>
<li class="nonregister">Not a member ?</li>
<li class="register"><a href="#">Resister now</a> </li>
</ul>
</div>
<div id="loginBottomPan"> </div>
<p class="hours"><a href="#">24/7 hours</a></p>
<div id="servicesPan"> </div>
<div id="servicesBodyPan">
<p class="services">Services</p>
<p class="boldbrowntext">Morbi sodales ante a mauris. Vestibuc netmomaurisle </p>
<p>quamsectetuer mauris et quam.odio loremsto, molestie ut, laoreet vitae, luctus vitae, nisi. Cur abitur nibh justo, tincidunt nec, tempor eget te, tincidunt amet, libero</p>
<p class="bluetext">"risus et orci. In sit amet purus ac maurisege egestas pharetra. Vivamus nibh. Vestibulum congue."</p>
<p class="largebrowntext">tincidunt amet libero</p>
<p class="link"><a href="#">click here to know more</a></p>
</div>
<div id="servicesBottomPan"> </div>
</div>
</div>
<div id="footermainPan">
<div id="footerPan">
<div id="footerlogoPan"><a href="index.html"><img src="images/footerlogo.gif" title="Blog Division" alt="Blog Division" width="189" height="87" border="0" /></a></div>
<ul>
<li><a href="#">Home</a>| </li>
<li><a href="#">About Us</a> | </li>
<li><a href="#">Company</a>| </li>
<li><a href="#">Solutions</a> | </li>
<li><a href="#">Partners</a> |</li>
<li><a href="#">Client</a> |</li>
<li><a href="#">Contact</a> </li>
</ul>
<p class="copyright">>> 9blog division. All rights reserved.</p>
<ul class="templateworld">
<li>design by:</li>
<li><a href="http://www.templateworld.com" target="_blank">Template World</a></li>
<li><a href="http://www.ehostinfo.com" target="_blank">Web Hosting</a></li>
</ul>
<ul class="validation">
<li>Valid:</li>
<li><a href="http://validator.w3.org/check?uri=referer" target="_blank">XHTML</a></li>
<li> Valid:</li>
<li><a href="http://jigsaw.w3.org/css-validator/check/referer" target="_blank">CSS</a></li>
</ul>
</div>
</div>
</body>
</html>
Related examples in the same category