rs-garden
<!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>RS Garden</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
body {
font: 12px "Trebuchet MS", Verdana, sans-serif;
color: #666666;
background: #FFFFFF;
}
* {padding:0; margin:0;}
.clear {clear:both;}
#wrap {background:url(rs-garden-images/headerbg.jpg) no-repeat; width:783px; margin:auto; border-top: solid 8px #efefef}
#header {height:128px;}
#content {padding:0 38px 25px 38px;}
#footer {background:url(rs-garden-images/footerbg.jpg) bottom no-repeat; padding-bottom:25px;}
a {color:#006600; text-decoration:none;}
a:visited,active { text-decoration:none; color:#003300;}
a:hover {color:#000; text-decoration:underline;}
#content p {line-height:22px;}
h2 {font: normal 18px "Trebuchet MS", Verdana, sans-serif;
color: #808040;}
#content h3 {font: bold 14px "Trebuchet MS", Verdana, sans-serif; color:#666;}
#content .subhead {display:block; padding:3px 5px 0 8px; margin-bottom:5px;}
/*Home Page Columns*/
#col_1 {width:30%; float:left; padding:5px;}
#col_3 {margin-left:33%; margin-right:33%; padding:5px;}
#col_2 {width:30%; float:right; padding:5px;}
#topcol { padding:45px 5px 20px 5px; margin-bottom15px;}
#col_1 p, #col_2 p, #col_3 p {padding:0 8px 5px 8px; line-height:18px; display:block;
/*Delete this Line if you don't want fixed height*/ height:120px}/*----*/
#col_1 .subhead {background:url(rs-garden-images/colsh1.jpg) no-repeat; height:22px; }
#col_2 .subhead {background:url(rs-garden-images/colsh2.jpg) no-repeat; height:22px;}
#col_3 .subhead {background:url(rs-garden-images/colsh3.jpg) no-repeat; height:22px;}
#content div img {background:#efefef; border:solid 1px #cccccc; padding:3px;}
.leftalign {float:left; margin:5px 10px 5px 0;}
.rightalign {float:right; margin:5px 5px 5px 10px;}
.linkbutton {display:block; background:url(rs-garden-images/button1.jpg) no-repeat; width:79px; height:22px;
text-align:right; padding:5px 20px 0 5px; }
.linkbutton:hover {background:url(rs-garden-images/button3.jpg) no-repeat;}
#sitename {
display:block;
padding: 60px 55px 0 45px;
color: #808040;
font: bolder small-caps 22px "Trebuchet MS", Verdana, sans-serif;
text-align:right;
}
#sitename .desc {font-size:14px; color:#ccc; font-variant:normal; display:block}
#topmenu ul {text-align:center; display:block; float:right;
/*change the value below to decrease or increase the width of top menu*/
width:500px;
/*--*/
}
#topmenu li {display: inline;}
#topmenu a, #topmenu a:visited, #topmenu a:active{
display:block; float:left; height:21px; padding: 5px 15px 0 15px; text-decoration:none; color:#000000;}
#topmenu a:hover { background: url(rs-garden-images/topmenubhvr.jpg) repeat-x bottom;}
#topmenu .active a, #topmenu .active a:visited, #topmenu .active a:active { background: url(rs-garden-images/topmenubhvr.jpg) repeat-x bottom; color:#000;}
#ft_btm{
padding:30px 230px 20px 30px;
text-align: right;
}
#btm_cont {padding:5px 45px 30px 45px; background:url(rs-garden-images/bottomend.jpg) no-repeat center bottom; }
.btm_box {width:110px; padding:5px; float:left; margin:8px;}
#rightcontent {float:right; width:475px; padding:45px 0 0 0}
#sidebar { margin:0px 500px 10px 0; padding-top:45px;}
#content table {
width:90%;
border:1px solid #A0C6EB;
margin-bottom:20px;
}
#content th {
background:#D2E3F3;
padding:5px 15px 5px 15px;
color:#000000;
font-weight:bold;
text-align:center;
border-bottom:1px solid #BDDB99;
font-size: 16px;
}
#content td {
border-bottom:1px solid #D2E3F3;
padding:5px 15px 5px 15px;
border-right:1px solid #D2E3F3;
}
.textfield {
display: block;
width:50%;
margin:3px 3px 3px 30px;
padding:3px;
border: 1px solid #D2E3F3;
background: #EEF4FB;
}
label { display: block; margin:3px; padding: 5px;}
.button {
display: block;
padding:0px;
margin:3px;
border: 2px solid #C8E9F7;
color:#000000;
background: #EEF4FB;
}
.textfield:hover {
background:#FFFFCC;
}
.textfield:focus {background:#ffffff;}
.hide {display:none;}
#rightcontent ul, #rightcontent ol {padding:10px; margin:10px;}
ol {list-style:decimal;}
#rightcontent ul {list-style: square;}
#rightcontent p {margin-bottom:20px;}
#rightcontent li {padding:3px;}
#sidebar ul {list-style:none; margin-bottom:15px;}
#sidebar li {display:block; height:25px; border-bottom:dashed 1px #CCCCCC;}
#sidebar li a {display:block; height:20px; padding:5px 5px 0 5px;}
#sidebar li a:hover {background:#efefef; text-decoration:none;}
blockquote {display:block; padding:5px 5px 5px 55px; margin:5px; background:url(rs-garden-images/quote.jpg) no-repeat;}
blockquote p {margin-bottom:0; font: normal 16px Georgia, "Times New Roman", Times, serif;}
.extract {float:left; width:300px;}
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<div id="topmenu">
<ul>
<li class="active"><a href="http://www.free-css.com/">Home</a></li>
<li><a href="styles.php">Tables & Forms</a></li>
<li><a href="notes.php">Notes</a> </li>
</ul>
</div>
<div class="clear"></div>
<h1 id="sitename"><a href="http://www.free-css.com/">Garden</a><span class="desc">A Free CSS Template</span></h1>
</div>
<div id="content">
<div id="topcol"> <img src="rs-garden-images/imgsample.jpg" alt="" width="100" height="100" class="rightalign" />
<h2>About This Template</h2>
<p>Garden is a Free CSS Template released under Creative Commons 2.5 License by Rambling Soul. You are free to download, Modify and use it for personal and non-commercial purposes. I only ask for a link back to my website. You can find more templates from my profile or website</p>
<div class="clear"></div>
</div>
<div class="clear"></div>
<div id="col_1">
<h3 class="subhead">Lorem Ipsum Dolor Sit</h3>
<p> <img class="leftalign" src="rs-garden-images/img3.jpg" alt="" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum fringilla euismod dolor. Ut sed urna vitae dui rutrum egestas. </p>
<a href="http://www.free-css.com/" class="linkbutton">Learn More </a> </div>
<div id="col_2">
<h3 class="subhead">Integer Dui Diam</h3>
<p><img class="leftalign" src="rs-garden-images/img1.jpg" alt="" />Integer dui diam, lacinia ac, commodo et, molestie id, nibh. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere.</p>
<a href="http://www.free-css.com/" class="linkbutton">Learn More </a> </div>
<div id="col_3">
<h3 class="subhead">Suspendise Vel Eros</h3>
<p><img class="leftalign" src="rs-garden-images/img2.jpg" alt="" />Suspendisse vel eros ut sapien mattis auctor. Nullam venenatis venenatis justo. Vestibulum ullamcorper consequat lacus.Ut sed urna vitae dui rutrum </p>
<a href="http://www.free-css.com/" class="linkbutton">Learn More </a> </div>
<div class="clear"></div>
</div>
<div class="clear"> </div>
<div id="footer">
<div id="btm_cont"> </div>
<div id="ft_btm"> Copyright © YourSiteName.com | <a href="http://www.free-css.com/">Some</a> <a href="http://www.free-css.com/">Links</a> <a href="http://www.free-css.com/">Goes</a> <a href="http://www.free-css.com/">Here</a><br />
<!--Credits -->
<a href="http://ramblingsoul.com">CSS Template</a> by Rambling Soul<br />
Images from<a href="http://sxc.hu"> sxc.hu</a>
<!--/Credits -->
</div>
</div>
</div>
</body>
</html>
Related examples in the same category