inspired by google forum
<!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>CSS Layouts Free 2 Column Business Template</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type='text/css'>
html, body {
margin : 0;
padding : 0;
}
body {
font-family : helvetica, arial, sans-serif;
background-color : #e5ecf9;
background-image : url(inspired by google forum-images/hedbg.jpg);
background-repeat : repeat-x;
font-size : 80%;
}
p {
margin : 10px 10px 10px 10px;
}
label {
display : block;
font-weight : bold;
margin : 5px 0;
}
input {
padding : 3px;
border : 1px solid #1918ff;
font : normal 1em arial, sans-serif;
color : #777;
}
textarea {
width : 350px;
padding : 3px;
font : normal 1em arial, sans-serif;
border : 1px solid #1918ff;
height : 100px;
display : block;
color : #777;
}
input.button {
margin : 0;
font : bolder 12px arial, Sans-serif;
border : 1px solid #1918ff;
padding : 2px 3px;
background : #fff;
color : #a8ea6a;
margin-top : 1px;
}
form.search {
position : absolute;
top : 43px;
right : 15px;
padding : 0;
margin : 0;
border : none;
background-color : transparent;
}
form.search input.textbox {
margin : 0;
width : 120px;
border : 1px solid #1918ff;
background : #fff;
color : #333;
vertical-align : top;
}
form.search input.button {
width : 60px;
vertical-align : top;
}
#top {
height : 30px;
margin-bottom : 1px;
margin-top : 5px;
color : #b1b1b1;
}
#top h1#lineone {
position : absolute;
font-size : 1.7em;
font-weight : lighter;
font-family : helvetica, arial, sans-serif;
margin : 0;
padding : 0;
color : #a8ea6a;
border : none;
top : 0;
left : 14px;
}
#top h1#lineone span {
color : #adbbf0;
}
#top h2#linetwo {
position : absolute;
margin : 0;
padding : 0;
font-size : 0.9em;
font-family : helvetica, arial, sans-serif;
text-transform : none;
top : 25px;
left : 14px;
}
#top ul {
margin : 0;
padding : 0;
list-style : none;
float : right;
margin-top : 10px;
margin-right : 25px;
color : #8ac752;
}
#top li {
display : inline;
}
#top a {
color : #8ac752;
}
#header h1 {
height : 28px;
line-height : 24px;
margin : 0;
padding-left : 10px;
padding-top : 20px;
color : #a8ea6a;
font-size : 1.9em;
font-weight : lighter;
}
#blockquote {
line-height : 1.4;
border : 1px solid #e5e5e5;
padding : 5px;
text-align : justify;
}
blockquote p {
background-image : url(inspired by google forum-images/pbg.jpg);
background-repeat : repeat-x;
}
#content p {
line-height : 1.4;
border : 1px solid #e5e5e5;
padding : 5px;
text-align : justify;
}
#content h2 {
color : #9f9f9f;
font-size : 1.4em;
margin-left : 10px;
margin-right : 10px;
background-image : url(inspired by google forum-images/h3bg.jpg);
background-repeat : repeat-x;
border : 1px solid #e5ecf9;
padding-left : 5px;
padding-bottom : 5px;
}
#right {
background : #e5ecf9;
}
.navigation a {
font-size : 0.9em;
text-decoration : none;
color : #575757;
font-weight : bold;
}
.navigation ul {
padding : 0;
margin-top : 20px;
margin-left : 0;
margin-bottom : 0;
margin-right : 0;
}
.navigation ul li {
list-style : none;
margin : 1px 0 1px -1px;
border-left : 1px solid #1918ff;
}
.navigation ul li a {
display : block;
width : 150px;
margin : 0;
padding : 5px;
background-color : #e5ecf9;
padding-left : 20px;
padding-right : 55px;
}
.navigation ul li a:hover {
background-color : #fffff1;
border-left : 1px solid #fff;
border-top : 1px solid #1918ff;
border-right : 1px solid #1918ff;
border-bottom : 1px solid #1918ff;
margin-left : -1px;
margin-top : -2px;
}
.navigation ul li a.current {
background-color : #fffff1;
border-left : 1px solid #fff;
border-top : 1px solid #1918ff;
border-right : 1px solid #1918ff;
border-bottom : 1px solid #1918ff;
margin-left : -1px;
}
#right h3 {
color : #86c215;
font-size : 1em;
padding-top : 0.2em;
padding-left : 0.7em;
line-height : 0.1em;
vertical-align : 1em;
}
.ads ul {
margin-left : 0.2em;
list-style : none;
margin-left : 1em;
}
.ads li {
color : #575757;
line-height : 1.3em;
}
.ads a {
color : #575757;
}
#footer {
background : #fff;
color : #333;
margin-top : 5px;
border-top : 1px solid #1918ff;
border-bottom : 1px solid #1918ff;
text-align : center;
}
#footer p {
margin : 0;
padding : 5px 10px;
}
#wrapper {
float : left;
width : 100%;
}
#content {
margin-right : 250px;
background : #fff;
border-top : 1px solid #1918ff;
border-right : 1px solid #1918ff;
border-bottom : 1px solid #1918ff;
}
#right {
float : left;
width : 250px;
margin-left : -250px;
background-color : #e5ecf9;
}
#space {
clear : left;
width : 100%;
background-color : #e5ecf9;
}
</style>
</head>
<body>
<div id="top">
<h1 id="lineone">Free <span>Template</span></h1>
<h2 id="linetwo">provided by: Get CSS Web Design and Templates for Free</h2>
<ul>
<li><a href="#">Home</a> :</li>
<li><a href="#">Sitemap</a> :</li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
<div id="header"><h1>Something Comes Here</h1>
<form method="post" class="search" action="#">
<p>
<input name="search_query" class="textbox" type="text" />
<input name="search" class="button" value="Search" type="submit" />
</p>
</form>
</div>
<div id="wrapper">
<div id="content">
<h2>Free CSS template</h2>
<blockquote><p> This is a free 100% CSS/XHTML valid <strong>web site design</strong> from <a href="http://www.getcsstemplates.com">Get CSS Web Designs for Free</a>. You can link back to my site if you use this template but you don't have to.</p></blockquote>
<h2>Lorem Ipsum</h2>
<p>Duis sem urna, dictum ac, vehicula in, luctus eget, lectus. Aliquam erat volutpat. Nulla facilisi. Mauris elementum eros a purus aliquam rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam laoreet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. In pharetra lorem a tortor. Phasellus volutpat euismod tellus. Nulla facilisi... <a href="#">read more</a></p>
<h2>Lorem Ipsum</h2>
<p>Duis sem urna, dictum ac, vehicula in, luctus eget, lectus. Aliquam erat volutpat. Nulla facilisi. Mauris elementum eros a purus aliquam rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam laoreet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. In pharetra lorem a tortor. Phasellus volutpat euismod tellus. Nulla facilisi... <a href="#">read more</a> </p>
</div>
</div>
<div id="right">
<h3>Navigation</h3>
<div class="navigation">
<ul>
<li><a href="http://www.getcsstemplates.com"class="current">Free CSS Web Design</a></li>
<li><a href="#">Link Two</a></li>
<li><a href="#">Link Three</a></li>
<li><a href="#">Link Four</a></li>
<li><a href="#">Link Five</a></li>
<li><a href="#">Link Six</a></li>
</ul>
</div>
<h3>Ads here</h3>
<div class="ads">
<ul>
<li><a href="#">Link One</a></li>
<li><a href="#">Link Two</a></li>
<li><a href="#">Link Three</a></li>
<li><a href="#">Link Four</a></li>
</ul>
</div>
</div>
<div id="space">
</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 © 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>
</body>
</html>
Related examples in the same category