About page layout 2
<!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>Green Solutions</title>
<style type='text/css'>
/* CSS Document */
body {
padding: 0;
margin: 0;
background: url(103x-images/main-bg.gif) 0 0 repeat-x #FCFAE6;
font: 14px/20px Arial, Helvetica, sans-serif;
color: #3D3C2C;
font-weight: normal;
}
div,p,h1,h2,h3,ul,img {
padding: 0px;
margin: 0px;
}
ul {
list-style-type: none;
}
/* TOP PANEL */
#topPan {
width: 778px;
height: 96px;
position: relative;
margin: 0 auto;
padding: 0;
}
#topPan img {
width: 204px;
height: 57px;
display: block;
padding: 23px 0 0 6px;
}
/* Menu Panel */
#topPan ul {
width: 520px;
height: 96px;
display: block;
position: absolute;
top: 0px;
right: 9px;
margin: 0;
padding: 0;
}
#topPan ul li {
float: left;
width: 104px;
display: block;
text-align: center;
}
#topPan ul li a {
width: 104px;
height: 35px;
display: block;
font: 14px/14px "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #2E4E00;
background: url(103x-images/menu-bg.gif) 0 0 repeat-x #F4F1DD;
text-decoration: none;
margin: 0;
padding: 61px 0 0 0;
}
#topPan ul li a:hover {
width: 104px;
height: 96px;
display: block;
background: #FCFAE6;
color: #2E4E00;
text-decoration: none;
}
#topPan ul li span {
width: 104px;
height: 35px;
display: block;
background: url(103x-images/menu-devider1.gif) 100% 0 no-repeat #FCFAE6;
color: #2E4E00;
text-decoration: none;
padding: 61px 0 0 0;
line-height: 14px;
}
/* /TOP PANEL */
/* HEADER PANEL */
#headerPan {
width: 778px;
height: 307px;
position: relative;
margin: 0 auto;
padding: 0;
}
#headerPan h1 {
width: 526px;
height: 236px;
position: absolute;
top: 35px;
right: 0px;
background: url(103x-images/header-img.jpg) 0 0 no-repeat #FCFAE6;
color: #fff;
font-size: 36px;
line-height: 18px;
text-transform: uppercase;
text-indent: -2000px;
}
#headerPanleft {
width: 237px;
height: 214px;
position: absolute;
top: 48px;
left: 9px;
}
#headerPan #ourblog {
float: left;
width: 237px;
height: 62px;
position: relative;
margin: 0 auto;
background: url(103x-images/icon1-nor.gif) 0 0 no-repeat;
}
#headerPan #ourblog h2 {
width: 90px;
height: 10px;
background: #fff;
display: block;
position: absolute;
left: 0px;
top: 0px;
margin: 14px 0 5px 81px;
font: 16px/14px Georgia, "Times New Roman", Times, serif;
color: #CC0000;
z-index: 1;
text-transform: uppercase;
}
#headerPan #ourblog p {
width: 103px;
height: 10px;
display: block;
position: absolute;
font: 12px/14px "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #2E5000;
background: #fff;
margin: 34px 0 0 81px;
z-index: 1;
}
#headerPan #ourblog a {
text-decoration: none;
display: block;
width: 237px;
height: 62px;
}
#headerPan #ourblog a:hover {
text-decoration: none;
background: url(103x-images/icon1-hover.gif) no-repeat 0 0;
}
#headerPan #possib {
float: left;
width: 237px;
height: 62px;
position: relative;
margin: 13px 0 0 0;
background: url(103x-images/icon2-nor.gif) 0 0 no-repeat;
}
#headerPan #possib h2 {
width: 90px;
height: 10px;
background: #fff;
display: block;
position: absolute;
left: 0px;
top: 0px;
margin: 14px 0 5px 81px;
font: 16px/14px Georgia, "Times New Roman", Times, serif;
color: #CC0000;
z-index: 1;
text-transform: uppercase;
}
#headerPan #possib p {
width: 103px;
height: 10px;
display: block;
position: absolute;
font: 12px/14px "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #2E5000;
background: #fff;
margin: 34px 0 0 81px;
z-index: 1;
}
#headerPan #possib a {
text-decoration: none;
display: block;
width: 237px;
height: 62px;
}
#headerPan #possib a:hover {
text-decoration: none;
background: url(103x-images/icon2-hover.gif) no-repeat 0 0;
}
#headerPan #solution {
float: left;
width: 237px;
height: 62px;
position: relative;
margin: 13px 0 0 0;
background: url(103x-images/icon3-nor.gif) 0 0 no-repeat;
}
#headerPan #solution h2 {
width: 90px;
height: 10px;
background: #fff;
display: block;
position: absolute;
left: 0px;
top: 0px;
margin: 14px 0 5px 81px;
font: 16px/14px Georgia, "Times New Roman", Times, serif;
color: #CC0000;
z-index: 1;
text-transform: uppercase;
}
#headerPan #solution p {
width: 103px;
height: 10px;
display: block;
position: absolute;
font: 12px/14px "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #2E5000;
background: #fff;
margin: 34px 0 0 81px;
z-index: 1;
}
#headerPan #solution a {
text-decoration: none;
display: block;
width: 237px;
height: 62px;
}
#headerPan #solution a:hover {
text-decoration: none;
background: url(103x-images/icon3-hover.gif) no-repeat 0 0;
}
/* BODY PANEL */
#bodyPan {
width: 778px;
height: 887px;
position: relative;
margin: 0 auto;
padding: 0;
}
/*Left Panel */
#leftPan {
width: 239px;
height: 611px;
position: absolute;
top: 0px;
left: 8px;
margin: 0;
padding: 0px;
}
#leftmemberPan {
width: 237px;
height: 196px;
position: relative;
margin: 0 auto;
padding: 0;
border: 1px solid #DCDAC2;
background: #fff;
color: #000;
}
#leftmemberPan h2 {
height: 48px;
background: url(103x-images/symbol4.gif) 0 0 no-repeat #fff;
display: block;
position: relative;
padding: 0 0 0 57px;
margin: 12px 0 20px 13px;
font: 16px/48px Georgia, "Times New Roman", Times, serif;
color: #5EA000;
text-transform: uppercase;
}
#leftmemberPan h2 span {
background: #fff;
color: #3D3C2C;
}
#leftPan form {
width: 220px;
height: 108px;
background: #EBE9D7;
padding: 0;
margin: 0 0 0 8px;
color: #333227;
}
#leftPan form label {
width: 72px;
display: block;
float: left;
padding: 14px 15px 0 16px;
}
#leftPan form label.emailpadding {
padding: 2px 15px 0 16px;
}
#leftPan form input {
float: left;
display: block;
width: 101px;
height: 16px;
margin: 14px 0 9px 0
}
#leftPan form input.fieldpadding {
margin: 2px 0 9px 0
}
#leftPan h3 {
height: 48px;
background: #FCFAE6;
display: block;
float: right;
padding: 0 0 0 57px;
margin: 12px 0 22px 13px;
font: 28px/48px Georgia, "Times New Roman", Times, serif;
color: #3D3C2C;
}
#leftPan ul {
display: block;
float: right;
width: 150px;
height: 327px;
}
#leftPan ul li {
background: url(103x-images/arrow3.gif) 140px 10px no-repeat;
padding: 0px 20px 0 0;
text-align: right;
}
#leftPan ul li a {
text-decoration: underline;
color: #3D3C2C;
background: #FCFAE6;
}
#leftPan ul li a:hover {
text-decoration: none;
}
#leftPango {
width: 220px;
height: 25px;
position: absolute;
top: 160px;
left: 8px;
border-top: 1px solid #fff;
background: #B0AD93;
display: block;
padding: 0;
margin: 0;
font-size: 12px;
color: #FFFFFA;
line-height: 23px;
font-weight: bold;
}
#leftPango p.textposition a {
float: left;
padding: 0 0 0 20px;
margin: 0;
text-decoration: none;
color: #FFFFFA;
background: #B0AD93;
}
#leftPango p.textposition a:hover {
text-decoration: underline;
background: none;
}
#leftPan form input.gobutton {
float: right;
background: url(103x-images/arrow4.gif) no-repeat 30px 0 #63614F;
border: none;
width: 45px;
height: 21px;
display: block;
margin: 2px 0 0 0;
padding: 0 0 0 5px;
text-decoration: none;
color: #fff;
font: 14px/21px "Trebuchet MS", Arial, Helvetica, sans-serif;
text-transform: uppercase;
text-align: left;
}
#leftPango a:hover {
background: url(103x-images/arrow4.gif) no-repeat 30px 1px #333229;
text-decoration: none;
color: #fff;
}
/*/Left Panel */
/*Right Panel */
#rightPan {
width: 504px;
height: 875px;
position: absolute;
top: 0px;
right: 10px;
border: 1px solid #DCDAC2;
background: #fff;
color: #3D3C2C;
}
#rightbodyPan {
width: 484px;
height: 855px;
position: absolute;
top: 10px;
left: 10px;
background: #FCFAE6;
color: #3D3C2C;
}
#rightbodyPan h2 {
width: 266px;
height: 31px;
display: block;
position: relative;
background: url(103x-images/symbol5.gif) 100% 0 no-repeat #FCFAE6;
padding: 24px 0 0 0;
font: 28px/28px Georgia, "Times New Roman", Times, serif;
color: #3D3C2C;
margin: 20px 0 20px 80px;
}
#rightbodyPan p {
padding: 0 80px 30px;
}
#rightbodyPan p.redtext {
background: #FCFAE6;
color: #CC0000;
font-size: 18px;
line-height: 20px;
padding: 0 80px 26px;
}
#rightbodyPan p span {
background: #FFFFFA;
color: #3D3C2C;
}
#rightbodymore {
width: 306px;
height: 25px;
border: 1px solid #fff;
background: #B0AD93;
display: block;
padding: 2px;
margin: 0 60px 0 80px;
font-size: 12px;
color: #FFFFFA;
line-height: 25px;
font-weight: bold;
}
#rightbodymore p.textposition {
float: left;
padding: 0 0 0 20px;
margin: 0;
}
#rightbodymore a {
float: right;
background: url(103x-images/arrow4.gif) no-repeat 58px 1px #63614F;
width: 66px;
display: block;
position: relative;
margin: 1px 0 0 0;
padding: 0 0 0 10px;
height: 23px;
text-decoration: none;
color: #fff;
font: 14px/23px "Trebuchet MS", Arial, Helvetica, sans-serif;
text-transform: uppercase;
}
#rightbodymore a:hover {
background: url(103x-images/arrow4.gif) no-repeat 58px 1px #333229;
text-decoration: none;
color: #fff;
}
#rightbodyPan h3 {
width: 268px;
height: 31px;
display: block;
position: relative;
background: url(103x-images/symbol6.gif) 100% 0 no-repeat #FCFAE6;
padding: 24px 0 0 0;
font: 28px/28px Georgia, "Times New Roman", Times, serif;
color: #3D3C2C;
margin: 27px 0 20px 80px;
}
#rightbodyPan ul {
width: 328px;
height: 92px;
position: relative;
top: 5px;
left: 80px;
margin: 0 0 30px 0;
}
#rightbodyPan li {
width: 340px;
background: url(103x-images/arrow2.gif) 0 7px no-repeat;
font: 14px/24px Arial, Helvetica, sans-serif;
padding: 0 0 0 20px;
}
#rightbodyPan li a {
width: 235px;
height: 60px;
background: #FCFAE6;
color: #CC0000;
text-decoration: underline;
line-height: 24px;
}
#rightbodyPan ul li a:hover {
width: 235px;
height: 60px;
text-decoration: none;
line-height: 24px;
}
#rightbodymorenext {
width: 306px;
height: 25px;
border: 1px solid #fff;
background: #B0AD93;
display: block;
padding: 2px;
margin: 0 60px 0 80px;
font-size: 12px;
color: #FFFFFA;
line-height: 25px;
font-weight: bold;
}
#rightbodymorenext p.textposition {
float: left;
padding: 0 0 0 20px;
margin: 0;
}
#rightbodymorenext a {
float: right;
background: url(103x-images/arrow4.gif) no-repeat 58px 1px #63614F;
width: 66px;
display: block;
position: relative;
margin: 1px 0 0 0;
padding: 0 0 0 10px;
height: 23px;
text-decoration: none;
color: #fff;
font: 14px/23px "Trebuchet MS", Arial, Helvetica, sans-serif;
text-transform: uppercase;
}
#rightbodymorenext a:hover {
background: url(103x-images/arrow4.gif) no-repeat 58px 1px #333229;
text-decoration: none;
color: #fff;
}
/* /BODY PANEL */
/* FOOTER PANEL */
#footerPan {
width: 778px;
height: 231px;
position: relative;
margin: 0 auto;
padding: 0;
}
#footernextPan {
width: 506px;
height: 150px;
position: absolute;
top: 0px;
right: 10px;
background: #B0AD93;
color: #fff;
margin: 0;
}
#footerPan ul {
width: 380px;
display: block;
position: absolute;
right: 40px;
top: 33px;
}
#footerPan li {
float: left;
font: 12px/15px "Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight: normal;
}
#footerPan ul li a {
padding: 0 10px;
color: #FFFFFA;
background: #B0AD93;
text-decoration: none;
}
#footerPan ul li a:hover {
text-decoration: underline;
}
#footerPan ul li a.padl {
padding: 0 0 0 14px;
}
#footerPan ul.templateworld {
width: 190px;
background: #B0AD93;
color: #fff;
display: block;
position: absolute;
top: 110px;
right: 49px;
}
#footerPan ul.templateworld li a {
background: #B0AD93;
display: block;
color: #fff;
text-decoration: none;
}
#footerPan ul.templateworld li a:hover {
text-decoration: underline;
}
#footerPan p {
background: #B0AD93;
margin: 54px 45px 0 0;
display: block;
position: absolute;
top: 0px;
right: 40px;
color: #FCFAE6;
font: 12px/15px "Trebuchet MS", Arial, Helvetica, sans-serif;
}
#footerPanhtml {
width: 64px;
height: 19px;
display: block;
position: absolute;
top: 78px;
right: 170px;
}
#footerPanhtml a {
width: 59px;
height: 19px;
background: url(103x-images/arrow5.gif) no-repeat 45px 0px #D0CEB8;
display: block;
position: absolute;
top: 0px;
left: 0px;
margin: 0;
padding: 0 0 0 5px;
border: 1px solid #FFFFFA;
color: #353427;
text-transform: uppercase;
text-decoration: none;
}
#footerPanhtml a:hover {
background: url(103x-images/arrow5.gif) no-repeat 45px 0px #B0AD93;
color: #353427;
text-decoration: none;
}
#footerPancss {
width: 64px;
height: 19px;
display: block;
position: absolute;
top: 78px;
right: 89px;
}
#footerPancss a {
width: 59px;
height: 19px;
background: url(103x-images/arrow5.gif) no-repeat 45px 0px #D0CEB8;
display: block;
position: absolute;
top: 0px;
left: 0px;
margin: 0;
padding: 0 0 0 5px;
border: 1px solid #FFFFFA;
color: #353427;
text-transform: uppercase;
text-decoration: none;
}
#footerPancss a:hover {
background: url(103x-images/arrow5.gif) no-repeat 45px 0px #B0AD93;
color: #353427;
text-decoration: none;
}
</style>
</head>
<body>
<div id="topPan"><a href="index.html"><img src="103x-images/logo.gif" title="Green Solutions" alt="Green Solutions" width="204" height="57" border="0"/></a>
<ul>
<li><span>Home</span></li>
<li><a href="#">About us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Client</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div id="headerPan">
<div id="headerPanleft">
<div id="ourblog">
<h2>Our blog</h2>
<p>Desktop publishing</p>
<a href="#"> </a>
</div>
<div id="possib">
<h2>possibilities</h2>
<p>Desktop publishing</p>
<a href="#"> </a>
</div>
<div id="solution">
<h2>Solutions</h2>
<p>Desktop publishing</p>
<a href="#"> </a>
</div>
</div>
<h1>best Fresh Solution</h1>
</div>
<div id="bodyPan">
<div id="leftPan">
<div id="leftmemberPan">
<h2>member <span>login</span></h2>
<form name="login" id="login" action="" method="post">
<label>Your Name</label>
<input type="text" name="textfield" />
<label class="emailpadding">Email ID</label>
<input class="fieldpadding" type="text" name="textfield" />
<div id="leftPango"><p class="textposition"><a href="#">Resister now</a></p><input type="submit" class="gobutton" value="Go" />
</div>
</form>
</div>
<h3>More tips</h3>
<ul>
<li><a href="#">Lorem Ipsum has</a></li>
<li><a href="#">been the industry's</a> </li>
<li><a href="#">standard dum</a></li>
<li><a href="#">text ever since the </a></li>
<li><a href="#">1500s, when an</a></li>
<li><a href="#">unknown printer</a> </li>
<li><a href="#"> galley of type </a></li>
<li><a href="#">and scrambled</a> </li>
<li><a href="#">make a typ</a></li>
<li><a href="#">especimen</a> </li>
<li><a href="#">has survived</a> </li>
<li><a href="#">been the dummy </a></li>
<li><a href="#">text ever</a> </li>
<li><a href="#">since1500s,an</a> </li>
</ul>
</div>
<div id="rightPan">
<div id="rightbodyPan">
<h2>About Us</h2>
<p class="redtext">This is a free, tableless, W3C-compliant web design layout by Template World.</p>
<p>Green Solutions is a free, tableless, W3C-compliant web design layout by Template World. This template has been tested and proven compatible with all major browser environments and operating systems. You are free to modify the design to suit your tastes in any way you like.</p>
<p>We only ask you to not remove <span>"Design by Template World"</span> and the link http://www.templateworld.com from the footer of the template.</p>
<div id="rightbodymore"><p class="textposition">sbut also the leap into electronic</p><a href="#">more</a></div>
<h3>Latest services</h3>
<ul>
<li><a href="#">Lorem Ipsum has been the industry's standardd</a></li>
<li><a href="#">Text ever since the 1500s, when an unknownpri</a></li>
<li><a href="#">Took a galley of type and scrambled it to make</a> </li>
<li><a href="#">Especimen book. It has</a> </li>
</ul>
<p>been the industry's standard dummy text ever since the 1500s, when an unknown printer when an been took a galley of type and </p>
<div id="rightbodymorenext"><p class="textposition">sbut also the leap into electronic</p><a href="#">more</a></div>
</div>
</div>
</div>
<div id="footerPan">
<div id="footernextPan">
<ul>
<li><a href="#">Home </a>| </li>
<li><a href="#">About us</a> | </li>
<li><a href="#">Support </a>| </li>
<li><a href="#">Clients</a> | </li>
<li><a href="#">Contact </a> </li>
</ul>
<p>>>green solution all right reaserved</p>
<ul class="templateworld">
<li>Design By:</li>
<li><a href="http://www.templateworld.com" target="_blank">Template World</a></li>
</ul>
<div id="footerPanhtml"><a href="http://validator.w3.org/check?uri=referer" target="_blank">XHTML</a></div>
<div id="footerPancss"><a href="http://jigsaw.w3.org/css-validator/check/referer" target="_blank">CSS</a></div>
</div>
</div>
</body>
</html>
Related examples in the same category