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

Home
HTML / CSS
1.CSS
2.CSS Controls
3.Form
4.IE Firefox
5.Layout
6.Marquee Attributes
7.Meta Tags
8.Microsoft Attributes
9.Object
10.Reference
11.Style Basics
12.Tags
13.Templates
14.XML
HTML / CSS » CSS Controls » Login Form 
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 : 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 : 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 : 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
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.