Login form 7 : Login Form « CSS Controls « HTML / CSS






Login form 7

  
<!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">
<head>
<title>Business web site design provided by http://www.getcsstemplates.com</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type='text/css'>
* { 
padding : 0;
margin : 0;
} 
.blue { 
color : #3f4858;
} 
.orange { 
color : #24c84d;
} 
body { 
font-family : Arial, Helvetica, sans-serif;
color : #666666;
font-size : 12px;
} 
blockquote { 
border : 1px solid #bcd2e6;
margin : 15px;
padding : 10px;
line-height : 1.5em;
font-size : 1.2em;
} 
img { 
padding : 3px;
border : 1px solid #bcd2e6;
} 
img.floatTL { 
float : left;
margin-right : 7px;
margin-bottom : 2px;
margin-top : 5px;
margin-left : 5px;
} 
img.floatTR { 
float : right;
margin-left : 7px;
margin-bottom : 2px;
margin-top : 5px;
margin-right : 5px;
} 
#navbar { 
margin : 0 0 0;
padding : 19px;
background-color : #81d726;
} 
#navbar ul { 
margin-right : 125px;
list-style : none;
float : right;
color : #254aef;
font-weight : bolder;
} 
#navbar li { 
display : inline;
} 
#navbar a { 
color : #254aef;
} 
#wrapper { 
width : 770px;
margin : 0 auto;
} 
.name h1 { 
margin-top : 20px;
font-size : 2.1em;
font-weight : lighter;
font-family : Times, "Times New Roman", serif;
} 
.name h3 { 
font-size : 1.2em;
color : #3f4858;
font-family : Times, "Times New Roman", serif;
font-weight : lighter;
margin-bottom : 10px;
} 
.name a { 
color : #24c84d;
text-decoration : none;
} 
#header { 
margin : 5px 0;
height : 160px;
background-color : #fff;
background-image : url(34 seaside real estate-images/header1.jpg);
background-repeat : no-repeat;
} 
.headertext { 
margin-left : 30px;
width : 220px;
height : 130px;
position : relative;
top : 15px;
} 
.headertext h2 { 
color : #f07006;
font-size : 1.8em;
padding-left : 5px;
padding-top : 5px;
font-family : Times, "Times New Roman", serif;
font-weight : lighter;
text-decoration : underline;
} 
.headertext p { 
font-size : 1.3em;
padding-left : 5px;
text-align : justify;
padding-right : 5px;
margin-top : 3px;
line-height : 1.1em;
color : #045f1a;
font-family : Times, "Times New Roman", serif;
font-weight : lighter;
} 
#leftcolumn { 
display : inline;
width : 546px;
float : left;
min-height : 300px;
} 
* html #leftcolumn { 
height : 300px;
} 
#leftcolumn h2 { 
margin-top : 10px;
margin-right : 10px;
font-family : Times, "Times New Roman", serif;
font-size : 2.1em;
font-weight : lighter;
color : #ec845b;
background-image : url(34 seaside real estate-images/devider.jpg);
background-repeat : repeat-x;
background-position : bottom 0%;
} 
#leftcolumn h4 { 
margin-top : 10px;
margin-right : 10px;
font-family : Times, "Times New Roman", serif;
font-size : 1.4em;
font-weight : lighter;
color : #ec845b;
background-image : url(34 seaside real estate-images/devider.jpg);
background-repeat : repeat-x;
background-position : bottom 0%;
} 
#leftcolumn a { 
color : #0ce91a;
} 
.lefttext { 
background-image : url(34 seaside real estate-images/devider.jpg);
background-repeat : repeat-x;
background-position : bottom 0%;
margin-right : 10px;
} 
.lefttext p { 
margin-top : 10px;
text-align : justify;
line-height : 1.5em;
padding-bottom : 5px;
} 
#box { 
margin-top : 5px;
margin-bottom : 10px;
} 
.content_right { 
margin : 0 auto;
display : inline;
float : right;
width : 255px;
text-align : justify;
margin-right : 5px;
padding-left : 5px;
padding-bottom : 5px;
padding-right : 5px;
padding-top : 2px;
line-height : 1.5em;
} 
.content_left { 
margin : 0 auto;
padding : 5px;
display : inline;
float : left;
width : 255px;
text-align : justify;
line-height : 1.5em;
} 
.content_left h3 { 
padding-left : 5px;
font-size : 1.2em;
margin-bottom : 5px;
font-family : Times, "Times New Roman", serif;
color : #ec845b;
} 
.content_right h3 { 
font-size : 1.2em;
margin-bottom : 2px;
margin-top : 5px;
font-family : Times, "Times New Roman", serif;
color : #ec845b;
} 
#rightcolumn { 
display : inline;
width : 220px;
float : left;
min-height : 300px;
} 
* html #rightcolumn { 
height : 300px;
} 
#rightcolumn h2 { 
font-family : Times, "Times New Roman", serif;
color : #7480b5;
font-size : 1.6em;
font-weight : lighter;
margin-top : 0.9em;
background-image : url(34 seaside real estate-images/devider.jpg);
background-repeat : repeat-x;
background-position : bottom 0%;
margin-bottom : 5px;
} 
#rightcolumn h3 { 
color : #7480b5;
font-size : 1.1em;
} 
#rightcolumn p { 
text-align : justify;
font-size : 0.9em;
} 
#rightcolumn a { 
color : #0ce91a;
} 
form { 
background-color : #81c7f5;
margin-top : 15px;
padding-top : 10px;
margin-right : 4px;
margin-left : 4px;
padding-bottom : 5px;
padding-left : 10px;
} 
input.text { 
font-family : Arial, Helv, sans-serif;
font-size : 11px;
color : #628bc4;
background : transparent;
border : 1px solid #ccc;
font-weight : bold;
} 
input.submit { 
font-family : Arial, Helv, sans-serif;
font-size : 11px;
font-weight : bold;
color : #06c;
background : transparent;
border-width : 0;
} 
input.login { 
font-family : Arial, Helv, sans-serif;
font-size : 11px;
color : #628bc4;
background : transparent;
border : 1px solid #ccc;
font-weight : bold;
} 
.news p { 
font-size : 0.8em;
padding-left : 15px;
padding-bottom : 5px;
margin-top : 5px;
margin-left : 10px;
margin-right : 10px;
text-align : justify;
padding-right : 20px;
background-color : #e3e5ff;
border : 1px solid #9bacd3;
} 
.news a { 
margin-left : 135px;
margin-bottom : 2px;
font-size : 0.8em;
font-weight : bold;
padding : 2px;
color : #9bacd3;
} 
#footer { 
margin-top : 3px;
background-color : #fff;
display : inline;
float : left;
width : 100%;
border-top : 1px solid #bcd2e6;
font-size : 0.8em;
text-align : center;
} 
#footer a { 
color : #8badcf;
}

</style>


</head>

<body>
   <div id="navbar">
  <ul>
    <li><a href="#">Home</a> :</li> 
    <li><a href="#">About Us</a> :</li> 
    <li><a href="#">Contact Us</a> :</li>
    <li><a href="#">Find Property</a></li>
       </ul>
   </div>

   <div id="wrapper">
   <div class="name">
  <h1 class="top"><span class="blue">seaside</span> <span class="orange">real</span> <span class="blue">estate</span></h1>
  <h3 class="top">real estate web site template provided by: <a href="http://www.getcsstemplates.com">website design and templates for free</a></h3>   
   </div>
   <div id="header">
   <div class="headertext">
   <h2>Lorem Ipsum Dolor Sit</h2>
   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec rutrum neque eu nisl. Morbi eget felis. Vestibulum feugiat lectus ut magna. Ut interdum ipsum nec.</p>
   </div>
   </div>
   

   
   <div id="leftcolumn">

    <h2>Lorem Ipsum dolor sit amet</h2>

                        <blockquote>
                       <p>This is free 100% CSS/XHTML valid <strong>web site design</strong> from <a href="http://www.getcsstemplates.com">Get CSS Web Site Design for Free</a>. You can link back to my  site if you use this template but you don't have to.</p>
                      </blockquote>

    <h4>Lorem Ipsum dolor sit amet</h4>
    <div class="lefttext">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut 
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation 
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor 
in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at 
vero eros et accumsan et iusto odio dignissim qui blandit praesent.</p>
</div>
<div id="box">

<div class="content_left">
<h3>Lorem Ipsum</h3>


<img src="34 seaside real estate-images/img1.jpg" alt="best properties" />

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut 
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation 
ullamcorper suscipit lobortis.</p>
<a href="#">read more</a>

</div>

<div class="content_right">

<h3>Lorem Ipsum</h3>

 <img src="34 seaside real estate-images/img2.jpg" class="floatTL" alt="our agents" />

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut 
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation 
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor 
in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at 
vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum.</p>
<a href="#">read more</a>
</div>

</div>
   </div>
   
   <div id="rightcolumn">
   <h2>Lorem Ipsum dolor sit amet</h2>
<img src="34 seaside real estate-images/img3.jpg" class="floatTR" alt="our agents" />

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod.</p>
<a href="#">read more</a>
    <form action="a" method="get" >
    <p>
    Username: <br /><input name="a" type="text" size="23" /><br />
    Password: <br /><input name="a" type="password" size="23" /><br /><br />
    <input name="a" type="submit" class="login" value="Login" />
    </p>
    </form>
 <h2>New Listings</h2>
<div class="news">
       <h3>Mar.19.07.</h3>
           <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec rutrum neque eu nisl. Morbi eget ...  </p>
<a href="#">read more</a>
       <h3>Mar.11.07.</h3>
           <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec rutrum neque eu nisl. Morbi eget ...  </p>
<a href="#">read more</a>
</div>
   </div>
    <div id="footer"><p><a href="http://validator.w3.org/">Valid CSS</a> :: <a href="http://validator.w3.org/">Valid XHTML</a> <br /> Copyright &copy; 2007 by Free CSS Templates and Layouts :: Designed by: <a href="http://www.getcsstemplates.com"title="free css templates and layouts">GET FREE CSS WEB DESIGN AND TEMPLATES</a> </p>
   </div>
   
</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 section
8.Login form 5
9.Login form 6
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