orangeblue
<!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>Orange Blue</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type='text/css'>
* {
padding : 0;
margin : 0;
}
body {
font-family : Arial, Helvetica, sans-serif;
color : #ccc;
font-size : 12px;
background-image : url(orangeblue-images/bbg.jpg);
}
img {
padding : 3px;
border : 1px solid #d0660a;
border : 1px solid #9cf449;
}
img.floatTL {
float : left;
margin-right : 7px;
margin-bottom : 2px;
margin-top : 12px;
margin-left : 10px;
}
img.floatTR {
float : right;
margin-left : 7px;
margin-bottom : 2px;
margin-top : 12px;
margin-right : 10px;
}
.blue {
color : #3f4858;
}
.orange {
color : #d0660a;
}
#wrapper {
width : 770px;
margin : 0 auto;
background-color : #3f4857;
min-height : 950px;
}
* html #wrapper {
height : 950px;
}
#topnav {
height : 30px;
background-color : #3f4857;
}
#topnav {
margin-right : 10px;
background-color : #3f4857;
text-align : right;
color : #d0660a;
}
#topnav a {
padding-top : 10px;
color : #d0660a;
text-decoration : none;
}
#header-{
height : 170px;
background-color : #fff;
background-image : url(orangeblue-images/5.jpg);
background-repeat : no-repeat;
background-position : right 0%;
}
.name {
background-image : url(orangeblue-images/logopic.jpg);
background-repeat : no-repeat;
}
.name h1 {
font-size : 2em;
margin-top : 5px;
margin-left : 30px;
font-weight : lighter;
font-family : Arial, Helvetica, sans-serif;
padding-top : 110px;
}
.name h3 {
font-size : 0.9em;
margin-left : 30px;
font-family : Arial, Helvetica, sans-serif;
color : #999;
}
#menu {
margin : 0 auto;
padding : 5px 0 6px 0;
width: 480px;
position: relative;
top: -173px;
left: 50px;
padding: 5px 0em 6px 0em;}
#menu ul {
margin : 0;
padding : 0;
list-style : none;
text-align : center;
}
#menu li {
display : inline;
}
#menu a {
text-transform : uppercase;
text-decoration : none;
font-size : 9px;
color : #f1f1f1;
font-weight: lighter;
padding: 5px 10px 5px 10px;
color: #f05507;}
#menu a:hover {
color: #ccc;
padding: 5px 10px 5px 10px;}
#leftcolumn {
display : inline;
width : 210px;
float : left;
min-height : 695px;
background-color : #3f4857;}
* html #leftcolumn {
height : 695px;
}
#leftcolumn h3 {
font-size : 1.2em;
padding-left : 20px;
padding-top : 2px;
padding-bottom : 5px;
color : #d0660a;
font-weight : bolder;
}
form {
margin-top : 0;
width : 150px;
margin-left : 20px;
margin-right : 5px;
margin-bottom : 15px;
background-color : #fff;
border : 1px solid #d0660a;
}
form p {
padding-top : 10px;
padding-left : 5px;
padding-bottom : 5px;
color : #cd6209;
}
.reg p {
padding-left : 20px;
color : #ffe;
}
.reg a {
color : #d0660a;
text-decoration : none;
}
#leftcolumn h4 {
color : #d0660a;
text-align : center;
font-size : 1.1em;
margin-top : 25px;
text-decoration : underline;
}
.lefttext p {
text-align : justify;
padding : 10px;
}
.lefttext a {
color : #d0660a;
text-decoration : none;
}
#rightcolumn {
display : inline;
margin-right : 10px;
width : 550px;
float : left;
min-height : 695px;
background-color : #fff;
background-image: url(orangeblue-images/rcbg.jpg);
background-repeat: no-repeat;
background-position: bottom;}
* html #rightcolumn {
height : 695px;
}
blockquote {
margin-top : 10px;
margin-left : 5px;
margin-bottom : 10px;
margin-right : 10px;
border : 1px solid;
padding : 3px;
}
#rightcolumn p {
padding : 10px;
text-align : justify;
color : #3f4856;
}
#rightcolumn h2 {
margin-left : 15px;
margin-top : 10px;
font-size : 1.7em;
font-family : Arial, Helvetica, sans-serif;
font-weight : lighter;
color : #3f4856;
text-decoration : underline;
}
#rightcolumn h3 {
margin-left : 15px;
margin-top : 10px;
font-size : 1.2em;
font-family : Arial, Helvetica, sans-serif;
font-weight : bolder;
color : #3f4856;
text-decoration : underline;
letter-spacing : 0.3em;
}
#rightcolumn a {
color : #d0660a;
text-decoration : none;
}
.lb {
background-image : url(orangeblue-images/lb.jpg);
background-repeat : repeat-x;
width : 530px;
height : 5px;
margin-left : 10px;
}
#footer {
margin-top : 5px;
background-color : #3f4847;
display : inline;
float : left;
width : 770px;
text-align : center;
padding-top : 10px;
padding-bottom : 10px;
}
#footer p {
color : #f7f7f7;
}
#footer a {
color : #f7f7f7;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="topnav"> <a href="http://www.free-css.com/">Home</a> | <a href="http://www.free-css.com/">Sitemap</a> | <a href="http://www.free-css.com/">Contact</a> </div>
<div id="header">
<div class="name">
<h1 class="top"><span class="blue">website</span><span class="orange">dot</span><span class="blue">com</span></h1>
<h3 class="top">Nice Slogan Here</h3>
</div>
</div>
<div id="menu">
<ul>
<li><a href="http://www.free-css.com/">Free Templates</a></li>
<li><a href="http://www.free-css.com/">Link Two</a></li>
<li><a href="http://www.free-css.com/">Link Three</a></li>
<li><a href="http://www.free-css.com/">Link Four</a></li>
<li><a href="http://www.free-css.com/">Link Five</a></li>
</ul>
</div>
<div id="leftcolumn">
<h3>User Login</h3>
<form action="#" method="get" >
<p> Username: <br />
<input name="a" type="text" size="16" />
<br />
Password: <br />
<input name="a" type="password" size="16" />
<br />
<br />
<input name="a" type="submit" class="login" value="Login" />
</p>
</form>
<div class="reg">
<p>New User Register <a href="http://www.free-css.com/">here</a>.</p>
</div>
<h4>Lorem ipsum dolor sit amet</h4>
<div class ="lefttext"> <img src="orangeblue-images/sl0.jpg" class="floatTR" alt="" />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <a href="http://www.free-css.com/">Donec rutrum</a> neque eu nisl. Morbi eget felis. Vestibulum feugiat lectus ut magna. Ut interdum ipsum nec metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut eget augue in velit elementum bibendum.</p>
</div>
<h4>Lorem ipsum dolor sit amet</h4>
<div class ="lefttext"> <img src="orangeblue-images/sl1.jpg" class="floatTL" alt="" />
<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 metus. <a href="http://www.free-css.com/">Vestibulum ante</a> ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut eget augue in velit elementum bibendum.</p>
</div>
</div>
<div id="rightcolumn">
<blockquote>
<p>This is a free 100% CSS/XHTML valid <strong>Web Site Design</strong> from Get CSS Web Design Templates for Free. You can link back to my site if you use my template but you don't have to.</p>
</blockquote>
<h2>Lorem ipsum dolor sit</h2>
<img src="orangeblue-images/sl2.jpg" class="floatTL" alt="" />
<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 metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; <a href="http://www.free-css.com/">Ut eget augue</a> in velit elementum bibendum. 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 metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut eget augue in velit elementum bibendum.</p>
<div class="lb"></div>
<h3>Vestibulum ante ipsum primis in faucibus</h3>
<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 metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; <a href="http://www.free-css.com/">Ut eget augue</a> in velit elementum bibendum. 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 metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut eget augue in velit elementum bibendum. </p>
<div class="lb"></div>
<h2>Lorem ipsum dolor sit</h2>
<img src="orangeblue-images/sl3.jpg" class="floatTL" alt="" />
<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 metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; <a href="http://www.free-css.com/">Ut eget augue</a> in velit elementum bibendum. 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 metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut eget augue in velit elementum bibendum. </p>
</div>
<div id="footer">
<p><a href="http://validator.w3.org/">Valid CSS</a> :: <a href="http://validator.w3.org/">Valid XHTML</a> Copyright © 2007 by Free CSS Templates and Layouts :: Designed by: <a href="http://www.getcsstemplates.com">GET CSS Web Design</a> </p>
</div>
</div>
</body>
</html>
Related examples in the same category