Login section : Login Form « CSS Controls « HTML / CSS

HTML / CSS » CSS Controls » Login Form 
Login section
   
<!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>Brain Tech</title>
<style type='text/css'>
/* CSS Document */
body {
  padding: 0px;
  margin: 18px 0 0;
  background: #590000;
  color: #CD7A7A;
  font: 12px/14px Arial, Helvetica, sans-serif;
}

div,p,ul,h2,h3,h4,h5,form,img {
  padding: 0px;
  margin: 0px;
}

ul {
  list-style-type: none;
}

/*----TOP PANEL----*/
#topPan {
  width: 778px;
  height: 113px;
  position: relative;
  margin: auto;
  background: url(braintech-images/toppan-bg.jpg0 0 repeat-x;
}

#topPan img.logo {
  width: 219px;
  height: 58px;
  position: absolute;
  top: 13px;
  left: 104px;
}

#topPan ul {
  width: 486px;
  height: 30px;
  position: absolute;
  top: 83px;
  left: 146px;
}

#topPan ul li {
  width: 81px;
  height: 30px;
  float: left;
}

#topPan ul li a {
  width: 81px;
  height: 30px;
  display: block;
  background: url(braintech-images/menu-bg.gif0 0 repeat-x #2F0000;
  color: #fff;
  font: 12px/30px "Trebuchet MS", Arial, Helvetica, sans-serif;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
}

#topPan ul li a:hover {
  background: #590000;
  color: #fff;
  text-decoration: none;
}

#topPan ul li.home {
  width: 81px;
  height: 30px;
  display: block;
  background: #590000;
  color: #fff;
  font: 12px/30px "Trebuchet MS", Arial, Helvetica, sans-serif;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
}

#topcontactPan {
  width: 153px;
  height: 40px;
  background: url(braintech-images/icon1.jpg0 0 no-repeat #CC0000;
  color: #fff;
  position: absolute;
  top: 18px;
  left: 384px;
}

#topcontactPan p.tollfree {
  width: 78px;
  height: 17px;
  background: #590000;
  color: #fff;
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
  margin: 4px 0 0 37px;
  text-align: center;
  line-height: 17px;
}

#topcontactPan p.phoneno {
  font-size: 18px;
  padding: 5px 0 0 37px;
}

#topimagePan {
  width: 209px;
  height: 83px;
  position: absolute;
  top: 0px;
  right: 0px;
  background: url(braintech-images/image1.jpg0 0 no-repeat;
}

/*----/TOP PANEL----*/
/*----BODY PANEL----*/
#bodyPan {
  width: 715px;
  position: relative;
  margin: auto;
}

/*----Left Panel----*/
#leftPan {
  width: 480px;
  float: left;
  padding: 18px 26px 0 0;
}

#leftPan p {
  padding: 14px 0 0;
}

#leftPan h2 {
  width: 220px;
  height: 26px;
  background: #590000;
  color: #fff;
  font: 26px/26px Georgia, "Times New Roman", Times, serif;
}

#leftPan h2 span {
  background: #590000;
  color: #F10000;
}

/*-------Left Block One-------*/
#leftblockonePan {
  width: 240px;
  float: left;
  padding: 10px 45px 0 0;
}

#leftblockonePan p span {
  font-weight: bold;
}

#leftblockonePan p.border {
  height: 8px;
  background: url(braintech-images/doted-line.gif0 0 repeat-x;
  padding: 0px;
  margin: 10px 0 0;
}

#leftblockonePan h3 {
  width: 180px;
  height: 40px;
  background: #590000;
  color: #fff;
  font: 26px/40px Georgia, "Times New Roman", Times, serif;
}

#leftblockonePan h3 span {
  background: #590000;
  color: #F10000;
}

#leftblockonePan h4 {
  width: 200px;
  height: 26px;
  background: #590000;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase;
}

#leftblockonePan h4 span {
  background: #590000;
  color: #CD7A7A;
  font: 28px/26px Georgia, "Times New Roman", Times, serif;
}

#leftblockoneLinkPan {
  width: 157px;
  height: 19px;
  display: block;
  margin: 5px 0 0 82px;
  clear: both;
}

#leftblockoneLinkPan ul {
  width: 157px;
  height: 19px;
}

#leftblockoneLinkPan ul li {
  height: 19px;
  float: left;
  font-size: 11px;
  text-transform: uppercase;
}

#leftblockoneLinkPan ul li.comments {
  width: 60px;
  height: 19px;
  padding: 0 30px 0 0;
  display: block;
  background: url(braintech-images/icon2.jpg100no-repeat #590000;
  color: #fff;
}

#leftblockoneLinkPan ul li.more {
  width: 58px;
  height: 19px;
  margin: 0 0 0 8px;
}

#leftblockoneLinkPan ul li.more a {
  width: 58px;
  height: 19px;
  background: url(braintech-images/arrow1.gif1002px no-repeat #590000;
  color: #fff;
  text-decoration: none;
  padding: 0 20px 0 0;
}

#leftblockoneLinkPan ul li.more a:hover {
  width: 58px;
  height: 19px;
  background: url(braintech-images/arrow2.gif1002px no-repeat #590000;
  color: #fff;
  text-decoration: none;
}

#leftblockoneLinktwoPan {
  width: 157px;
  display: block;
  margin: 5px 0 0 82px;
  clear: both;
}

#leftblockoneLinktwoPan ul {
  width: 157px;
}

#leftblockoneLinktwoPan ul li {
  height: 19px;
  float: left;
  font-size: 11px;
  text-transform: uppercase;
}

#leftblockoneLinktwoPan ul li.comments {
  width: 60px;
  height: 19px;
  padding: 0 30px 0 0;
  display: block;
  background: url(braintech-images/icon2.jpg100no-repeat #590000;
  color: #fff;
}

#leftblockoneLinktwoPan ul li.more {
  width: 58px;
  height: 19px;
  margin: 0 0 0 8px;
}

#leftblockoneLinktwoPan ul li.more a {
  width: 58px;
  height: 19px;
  background: url(braintech-images/arrow1.gif1002px no-repeat #590000;
  color: #fff;
  text-decoration: none;
  padding: 0 20px 0 0;
}

#leftblockoneLinktwoPan ul li.more a:hover {
  width: 58px;
  height: 19px;
  background: url(braintech-images/arrow2.gif1002px no-repeat #590000;
  color: #fff;
  text-decoration: none;
}

/*----Left Block Two Panel----*/
#leftblocktwoPan {
  width: 192px;
  float: left;
  padding: 10px 0 0;
}

#leftblocktwoPan h3 {
  width: 180px;
  height: 50px;
  background: #590000;
  color: #fff;
  font: 26px/50px Georgia, "Times New Roman", Times, serif;
}

#leftblocktwoPan h3 span {
  background: #590000;
  color: #F10000;
}

#leftblocktwoPan ul {
  width: 192px;
}

#leftblocktwoPan ul li {
  float: left;
}

#leftblocktwoPan ul li.bookname {
  width: 150px;
  height: 18px;
  display: block;
  background: url(braintech-images/arrow.gif0 6px no-repeat #590000;
  color: #CD7A7A;
  font-size: 12px;
  line-height: 18px;
  padding: 0 0 0 10px;
}

#leftblocktwoPan ul li.price {
  width: 25px;
  height: 18px;
  display: block;
  background: #590000;
  color: #fff;
  font-weight: bold;
  line-height: 18px;
}

#leftblocktwoPan p {
  width: 190px;
  height: 42px;
  float: left;
  display: block;
  background: url(braintech-images/icon3.gif100no-repeat #590000;
  color: #fff;
  font-size: 16px;
  text-transform: uppercase;
  margin: 10px 0 0;
}

#leftblocktwoPan p span {
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
}

/*----/Left Block Two Panel----*/
/*----/Left Panel----*/
/*---- Right Panel----*/
#rightPan {
  width: 209px;
  float: left;
  padding: 42px 0 0;
}

#rightPan form.form1 {
  width: 209px;
  height: 138px;
  background: url(braintech-images/form1-bg.gif0 0 no-repeat #590000;
  color: #fff;
}

#rightPan form.form1 h2 {
  width: 189px;
  height: 36px;
  background: url(braintech-images/member-bg.gif0 0 no-repeat;
  padding: 0 0 0 20px;
  font: 20px/36px Georgia, "Times New Roman", Times, serif;
  margin: 0 0 8px 0;
}

#rightPan form.form1 label {
  width: 66px;
  height: 18px;
  float: left;
  display: block;
  font-size: 13px;
  line-height: 18px;
  padding: 0 0 0 21px;
  margin: 9px 0 0;
}

#rightPan form.form1 label.label1 {
  width: 138px;
  height: 16px;
  float: left;
  display: block;
  background: #2F0000;
  color: #FC0404;
  font-size: 10px;
  text-transform: uppercase;
  margin: 9px 0 0 2px;
  padding: 0 0 0 19px;
}

#rightPan form.form1 input {
  width: 100px;
  height: 18px;
  float: left;
  display: block;
  padding: 0px;
  margin: 9px 0 0;
}

#rightPan form.form1 input.botton {
  width: 30px;
  height: 14px;
  float: left;
  display: block;
  background: url(braintech-images/botton.gif1003px no-repeat #2F0000;
  color: #fff;
  font-size: 12px;
  border: none;
  padding: 0 10px 0 0;
  margin: 9px 0 0;
  line-height: 14px;
}

#rightPan h3 {
  width: 188px;
  height: 33px;
  background: #3C0101;
  color: #fff;
  font: 20px Georgia, "Times New Roman", Times, serif;
  padding: 18px 0 0 21px;
  margin: 13px 0 0;
}

#rightPan ul {
  width: 188px;
  height: 129px;
  padding: 0 0 0 21px;
  background: #3C0101;
  color: #fff;
  margin: 0 0 13px 0;
}

#rightPan ul li {
  width: 141px;
  height: 18px;
}

#rightPan ul li a {
  width: 141px;
  height: 18px;
  background: url(braintech-images/arrow3.gif0 5px no-repeat #3C0101;
  color: #fff;
  font-size: 12px;
  text-decoration: none;
  line-height: 18px;
  padding: 0 0 0 15px;
}

#rightPan ul li a:hover {
  width: 141px;
  height: 18px;
  background: url(braintech-images/arrow4.gif0 5px no-repeat #3C0101;
  color: #FFD6D6;
  text-decoration: none;
}

#rightform2Pan {
  width: 209px;
  position: relative;
  margin: auto;
}

#rightPan form.form2 {
  width: 209px;
  height: 111px;
  background: url(braintech-images/form1-bg.gif0 0 no-repeat #2F0000;
  color: #fff;
  font-size: 12px;
}

#rightPan form.form2 h2 {
  width: 189px;
  height: 36px;
  background: url(braintech-images/member-bg.gif0 0 no-repeat;
  padding: 0 0 0 20px;
  font: 20px/36px Georgia, "Times New Roman", Times, serif;
  margin: 0 0 8px 0;
}

#rightPan form.form2 label {
  width: 43px;
  height: 18px;
  float: left;
  display: block;
  font-size: 12px;
  padding: 0 0 0 12px;
  line-height: 18px;
}

#rightPan form.form2 input {
  width: 100px;
  height: 18px;
  float: left;
  display: block;
  padding: 0px;
}

#rightPan form.form2 select {
  width: 41px;
  height: 20px;
  float: left;
  display: block;
  background: #fff;
  color: #000;
  font-size: 14px;
  margin: 0 0 0 4px;
}

#rightPan form.form2 input.search {
  width: 60px;
  height: 20px;
  float: right;
  display: block;
  background: url(braintech-images/botton2.gif1006px no-repeat #2F0000;
  border: none;
  color: #fff;
  font-size: 12px;
  line-height: 20px;
  padding: 0 25px 0 0;
  position: absolute;
  top: 78px;
  right: 8px;
}

/*----/BODY PANEL----*/
/*----BOTTOM BODY PANEL----*/
#bodyBottomPan {
  width: 778px;
  height: 40px;
  background: url(braintech-images/body-bottombg.gif0 0 repeat-x #590000;
  color: #CD7A7A;
  position: relative;
  margin: auto;
  clear: both;
  padding: 52px 0 0;
}

#BottomLeftPan {
  width: 178px;
  float: left;
}

#BottomLeftPan p {
  background: #590000;
  color: #fff;
  font: 30px/25px Georgia, "Times New Roman", Times, serif;
  padding: 0 0 0 32px;
}

#BottomLeftPan p span {
  font-size: 21px;
  text-transform: uppercase;
}

#BottomMiddlePan {
  width: 393px;
  float: left;
  background: url(braintech-images/image2.gif100no-repeat;
  padding: 0 206px 0 0;
}

#BottomMiddlePan p.more {
  width: 70px;
  height: 16px;
  margin: 5px 0 30px 318px;
}

#BottomMiddlePan p.more a {
  width: 60px;
  height: 16px;
  display: block;
  background: url(braintech-images/botton2.gif8550% no-repeat #3C0101;
  color: #fff;
  text-transform: uppercase;
  font-size: 11px;
  line-height: 18px;
  text-decoration: none;
  padding: 0 0 0 10px;
}

#BottomMiddlePan p.more a:hover {
  background: url(braintech-images/botton2.gif8550% no-repeat #3C0101;
  color: #F10000;
  text-decoration: none;
}

/*----/BOTTOM BODY PANEL----*/
/*----FOOTER PANEL----*/
#footerPan {
  width: 778px;
  height: 107px;
  background: #2F0000;
  color: #fff;
  position: relative;
  margin: auto;
  font: 12px/16px "Trebuchet MS", Arial, Helvetica, sans-serif;
  clear: both;
  padding: 26px 0 0;
}

#footerPan ul {
  width: 400px;
  position: relative;
  margin: auto;
}

#footerPan li {
  float: left;
}

#footerPan ul li a {
  padding: 0 10px 0;
  color: #fff;
  background: #2F0000;
  text-decoration: none;
}

#footerPan ul li a:hover {
  text-decoration: underline;
}

#footerPan p.copyright {
  width: 204px;
  background: #2F0000;
  color: #fff;
  position: absolute;
  top: 48px;
  left: 198px;
  font-size: 12px;
}

#footerPan ul.templateworld {
  width: 250px;
  background: #2F0000;
  color: #fff;
  display: block;
  position: absolute;
  top: 68px;
  left: 198px;
  font-size: 10px;
}

#footerPan ul.templateworld li {
  height: 20px;
}

#footerPan ul.templateworld li a {
  background: #2F0000;
  display: block;
  color: #fff;
  text-decoration: none;
}

#footerPan ul.templateworld li a:hover {
  text-decoration: underline;
}

#footerPanhtml {
  width: 62px;
  height: 12px;
  display: block;
  position: absolute;
  top: 50px;
  left: 400px;
}

#footerPanhtml a {
  width: 48px;
  height: 12px;
  display: block;
  background: url(braintech-images/xhtml-normal.gif8560% no-repeat
    #B70000;
  color: #fff;
  line-height: 12px;
  font-size: 11px;
  font-weight: bold;
  text-decoration: none;
  padding: 0 0 0 10px;
}

#footerPanhtml a:hover {
  background: url(braintech-images/css-normal.gif8560% no-repeat
    #913C3C;
  color: #fff;
}

#footerPancss {
  width: 50px;
  height: 12px;
  display: block;
  position: absolute;
  top: 50px;
  left: 460px;
}

#footerPancss a {
  width: 40px;
  height: 12px;
  display: block;
  background: url(braintech-images/css-normal.gif35px 3px no-repeat
    #913C3C;
  color: #fff;
  line-height: 12px;
  font-size: 11px;
  font-weight: bold;
  text-decoration: none;
  padding: 0 0 0 10px;
  text-transform: uppercase;
}

#footerPancss a:hover {
  background: url(braintech-images/xhtml-normal.gif35px 3px no-repeat
    #B70000;
  color: #fff;
}
</style>


</head>

<body>
<div id="topPan">
  <a href="index.html"><img src="images/logo.gif" title="Brain Tech" alt="Brain Tech" width="219" height="58" border="0"  class="logo"/></a>
  
    <div id="topimagePan"><img src="images/blank.gif" alt="" /></div>
  <ul>
    <li class="home">home</li>
    <li><a href="#">about us</a></li>
    <li><a href="#">support</a></li>
    <li><a href="#">solutions</a></li>
    <li><a href="#">books</a></li>
    <li><a href="#">contact</a></li>
  </ul>
</div>

<div id="bodyPan">
  <div id="leftPan">
    <h2>what is <span>braintech</span></h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sit amet neque a mauris semper sagittis. Sed facilisis turpis in elit. Nunc purus augue, ornare sed, bibendum vie</p>
  <p>Sed eros tellus, blandit in, tempus a, imperdiet at, ante. Phasellus pede. Mauris mauris nibh, euismod nec, sagittis imperdiet, nonummy at, dui. Integer sem sapien, faucibus it amet, tristique eu, blandit sit amet, massa. Nam lacinia. Proin ut velit id mauris luctus vestibulum. Aenean condimentum. Donec iaculis volutpat augue. Nulla facilisi. Praesen orci eget nisl faucibus interdum. </p>
  
    <div id="leftblockonePan">
    <h3>latest <span>blogs</span></h3>
    <h4><span>1.</span>kavin johnes</h4>
    <p><span>Lorem ipsum dolor sit amet, consectetuer</span> adipiscing elit. Cras sit amet neque a mauris semper sagittis. Sed facilisis turpis in elit. Nunc purus augue, ornare sed, bibendum vie</p>
    
      <div id="leftblockoneLinkPan">
      <ul>
        <li class="comments">comments</li>
        <li class="more"><a href="#">more</a></li>
      </ul>
    </div>
    <p class="border"><img src="images/blank.gif" alt="" /></p>
    <h4><span>2.</span>henry richard</h4>
    <p><span>Lorem ipsum dolor sit amet, consectetuer</span> adipiscing elit. Cras sit amet neque a mauris semper sagittis. Sed facilisis turpis in elit. Nunc purus augue, ornare sed, bibendum vie</p>
    <div id="leftblockoneLinktwoPan">
      <ul>
        <li class="comments">comments</li>
        <li class="more"><a href="#">more</a></li>
      </ul>
    </div>
    </div>
   
    <div id="leftblocktwoPan">
    <h3>new <span>books</span></h3>
    <ul>
      <li class="bookname">Proin ut velit id</li>
      <li class="price">$20</li>
      <li class="bookname">mauris luctus</li>
      <li class="price">$20</li>
      <li class="bookname">vestibulum. Aenea</li>
      <li class="price">$25</li>
      <li class="bookname">condimentum.</li>
      <li class="price">$20</li>
      <li class="bookname">Donec iaculis</li>
      <li class="price">$35</li>
      <li class="bookname">volutpat augue.</li>
      <li class="price">$30</li>
      <li class="bookname">Proin ut velit id </li>
      <li class="price">$29</li>
      <li class="bookname">mauris luctus</li>
      <li class="price">$40</li>
      <li class="bookname">vestibulum. Ae</li>
      <li class="price">$25</li>
      <li class="bookname">condimentum.</li>
      <li class="price">$20</li>
      <li class="bookname">Donec iaculis </li>
      <li class="price">$20</li>
      <li class="bookname">volutpat augue.</li>
      <li class="price">$20</li>
    </ul>
    <p>discount upto <br />
      <span>valid upto 05th june 2007</span></p>
  </div>
  </div>
  <div id="rightPan">
    <form action="" method="post" class="form1">
    <h2>member login</h2>
    <label>Name:</label>
    <input name="" type="text" />
    <label>Passward:</label>
    <input name="" type="password" />
    <label class="label1">a resistered member?</label>
    <input name="GO" type="submit" class="botton" id="GO" value="GO" />
  </form>
  <h3>more links</h3>
  <ul>
    <li><a href="#">www.braintech.com</a></li>
    <li><a href="#">www.brainmod.com</a></li>
    <li><a href="#">www.braintech2.com</a></li>
    <li><a href="#">www.modedu.com</a></li>
    <li><a href="#">www.modtech3.com</a></li>
    <li><a href="#">www.university.com</a></li>
  </ul>
  <div id="rightform2Pan">
  <form action="" method="get" class="form2">
    <h2>search</h2>
    <label>www.</label>
    <input name="" type="text" />
    <select name="select">
      <option>.com</option>
      <option>.org</option>
      </select>
    <input name="search" type="submit"  class="search" id="search" value="SEARCH"/>
  </form>
  </div>
  </div>
</div>
<div id="bodyBottomPan">
  <div id="BottomLeftPan">
    <p>about our <span>university</span></p>
  </div>
  
  <div id="BottomMiddlePan">
    <p>Sed eros tellus, blandit in, tempus a, imperdiet at, ante. Phasellugittiss pedeamet,. Mauris mauris nibh, euismod nec, sagittis imperdietgittise, nonummy at, dui. Integer semimp sapien, faucibus it amet, tristique eu, blandit sit amet, massa. Nam lacinia.Proin ut velit id maurisluctus urisr vestibulum. Aenean condimentum.Donec iaculis </p>
  <p class="more"><a href="#">more</a></p>
  </div>
</div>
<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="#">solutions</a>| </li>
    <li><a href="#">books</a>| </li>
    <li><a href="#">contact</a></li>
    </ul>
    <p class="copyright">>>braintech. all right reserved.</p>
    <div id="footerPanhtml"><a href="http://validator.w3.org/check?uri=referer" target="_blank">HTML</a></div>
      <div id="footerPancss"><a href="http://jigsaw.w3.org/css-validator/check/referer" target="_blank">CSS</a></div>
    <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.cssportal.com" target="_blank">CSS Portal</a></li>
      </ul>
</div>
</body>
</html>

   
    
    
  
Related examples in the same category
1.Login form
2.Login form 2
3.Login form 3
4.Login form 4
5.Member login form
6.Member login form 2
7.Login form 5
8.Login form 6
9.Login form 7
10.Login form inside the footer
11.Login form 8
12.Login form with registration link
13.Login form 9
14.A login form with submit button
15.Register page
16.Register for e-mail updates
java2s.com  | Contact Us | Privacy Policy
Copyright 2009 - 12 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.