featherlight
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Featherlight</title>
<style type='text/css'>
/* Page Layout */
body { background:#efefef; padding:0px; margin:0px; font-family: Verdana, Arial, Helvetica, ans-serif; font-size: 11px;}
#wrap {width:750px; margin: 15px auto 5px auto; background:#FFFFFF; padding:5px;}
#header {height:75px; background:#F3F4E8;}
#content {padding:5px 0 5px 5px; color:#666666}
#sidebar {width:250px; background:#F9F9F2; float:right; padding:5px;}
#pagecontent {width:470px; padding:3px; float:left;}
.clear {clear:both; height:1px; font-size:1px; margin:0; padding:0; display: block;}
.clear2 {clear:left; height:1px; font-size:1px; margin:0; padding:0; display:block;}
#footer {height:40px; padding:5px; background:#F5F0E7; color:#666666;}
#credit { font-size:10px; color:#cccccc; width:750px; margin:0 auto 25px auto;}
/*Header Style*/
#header h1 {display:block; margin:0; padding: 10px 0px 0px 15px; font-weight:normal; font-size:22px; color:#999933; background-color: #F9F9F2; font-family: Georgia, "Times New Roman", Times, serif; text-transform: uppercase;}
#wrap #header .logo {display: block; float: left; width: 10px; height: 10px; margin-right: 5px; font-size: 1px; border: 7px solid #999933; background-color: #FFFFFF;}
#description {display:block; font-size:10px; color:#999933; margin:0; padding:0 0 0 48px;}
/*Content Style*/
#content #pagecontent p {line-height:18px; margin:0 0 10px 0; text-align:justify;}
#pagecontent h1, h2, h3, h4, h5 {font:Verdana, Arial, Helvetica, sans-serif; margin:0}
h1{font-weight:normal; font-size:22px; color:#808040;}
h2 {font-size:16px; color:#B9C074;}
h3 {font-size:14px; color:#99BADB;}
h4 {font-size:12px; color:#A8A8A8;}
.seo{ display:block; background:#F4F8ED; font-size:10px; font-weight:normal; color:#666666; display:block; margin:0 0 15px 0; padding:2px;}
a {color:#CEA682;}
a:visited, active {color:#CEA682;}
a:hover{color:#999999; text-decoration:none;}
blockquote {margin:0; display:block; border-left: solid 5px #ECF2DB; padding:10px; background:#FBFBF4;}
blockquote cite {color:#000000}
blockquote p{line-height:normal; margin:5px;}
.hide {display:none;}
code { display:block; width:95%; padding:10px; background:#EBEBEB; border-top:solid #cccccc 1px; border-bottom:solid #cccccc 1px; font:"Courier New", Courier, monospace; font-size:12px;}
.box { display:block; float:left; line-height:1px; font-size:1px; widows:5px; height:5px; border:solid 3px #F0F3E4; width: 5px; padding: 3px; margin: 5px 3px 3px 3px;}
.highlight {background:#ffffcc; color:#000000;}
#pagecontent .postinfo {display:block; margin:5px 0 0 10px; padding:3px; background:#efefef;}
/*unordered list*/
#pagecontent ul {margin:0px; padding:10px; list-style:none;}
#pagecontent ul li {display:block; background:#FBFCF5; border-bottom: dashed 1px #DEE4C2; border-top: dashed 1px #FAFBF4; padding:3px;}
#pagecontent ul li:hover {background:#E7EDDC;}
/*ordered list*/
#pagecontent ol {margin:10px; padding:10px; list-style:decimal;}
#page content ol li {display:block; padding:3px; border-bottom:dashed 1px #DEE4C2;}
/*sidebar Menu*/
#sidebar .sidemenu {margin:0; padding:0; list-style:none;}
#sidebar .sidemenu li {display:block; height:25px;border-bottom:solid 1px #EDEEDB; border-top:solid 2px #FFFFFF}
#sidebar .sidemenu a {display:block; background:#FBFCF5; height:20px; padding:5px 10px 0 10px; color:#999933; text-decoration:none;}
#sidebar .sidemenu a:visited,active {display:block; background:#FBFCF5; height:20px; padding:5px 10px 0 10px; color:#999933; text-decoration:none;}
#sidebar .sidemenu a:hover {background:#FFFFFF; color:#333333}
#sidebar h2 {display:block; background:#EAEBD3; color:#808040; font:Arial, Helvetica, sans-serif; font-size:14px; font-weight:normal; padding:3px; text-transform:uppercase;}
#sidebar .sidemenu .active a {background:#FFFFFF; color:#333333}
#sidebar .sidemenu .active a:visited,active {background:#FFFFFF; color:#333333}
/*Sidebar Posts*/
#sidebar .posts {margin:0; padding:0; list-style:none;}
#sidebar .posts li {padding:3px; background:#FBFCF5; border-bottom:solid; border-bottom-width:1px; border-bottom-color:#D9DBB5;}
#sidebar h4 {font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#CEA682}
/*Forms*/
form {margin:0; padding:0;}
.textfield {display: block; float:left; width:190px; background-color: #F3F4E8; margin:3px; border: 1px solid #D6D9AE;}
label { display: block; float: left; text-align:right; font-weight:bold; width: 150px; margin:3px; padding: 5px;}
.button {display: block; float:left; padding:0px; background-color:#E3E6C8; margin:3px; border: 2px solid #efefef; color:#999933;}
.textfield:hover {background:#FBFCF8;}
.textfield:focus {background:#ffffff;}
/*tables*/
table {width:100%; margin:10px 0 10px 0; border:solid 1px #BDDB99;}
th {background:#DFEDCD; padding:3px; color:#999933; font-weight:bold; text-align:center; border-bottom:1px solid #BDDB99;}
td {border-bottom:1px solid #DFEDCD ; padding:3px; border-right:1px solid #DFEDCD;}
/*Tag Cloud*/
#cloud { font-family:Arial, Helvetica, sans-serif; margin:0; padding:5px;}
#cloud li{display:inline; margin:0 5px 0 5px;}
.cloud1 {font-size:10px;}
.cloud2 {font-size:12px;}
.cloud3 {font-size:13px;}
.cloud4 {font-size:14px;}
.cloud5 {font-size:15px;}
.cloud6 {font-size:16px;}
.cloud7 {font-size:17px;}
.cloud8 {font-size:18px;}
#cloud a:visited,active {text-decoration:none; color:#cccccc}
#cloud a:hover { color:#000000}
.cloud1 a {text-decoration:none; color:#dddddd;}
.cloud2 a {text-decoration:none; color:#cccccc;}
.cloud3 a {text-decoration:none; color:#333333;}
.cloud4 a {text-decoration:none; color:#91B748;}
.cloud5 a {text-decoration:none; color:#668F4E;}
.cloud6 a {text-decoration:none; color:#0099CC;}
.cloud7 a {text-decoration:none; color:#999933;}
.cloud8 a {text-decoration:none; color:#CC6633;}
/*images*/
#pagecontent img {border: solid 1px #CCCCCC; padding:3px; margin:5px;}
#pagecontent .leftalign{float:left;}
#pagecontent .rightalign{float:right;}
</style>
<link href="print.css" rel="stylesheet" type="text/css" media="print" />
</head>
<body>
<div id="wrap">
<div id="header">
<h1><span class="logo"> </span>Rambling Soul</h1>
<span id="description">Simple image-less template</span>
</div>
<div id="content">
<div id="pagecontent">
<h1><span class="box"></span>Contact Form<span class="seo">Example of a Contact Form</span></h1>
<form action="#">
<div class="contactform">
<label for="Name">Name:</label>
<input class="textfield" name="Name" type="text" />
<div class="clear2"></div>
<label for="Email">Email:</label><input class="textfield" name="Email" type="text" />
<div class="clear2"></div>
<label for="Age">Age:</label>
<input class="textfield" name="Age" type="text" />
<div class="clear2"></div>
<label for="Expertise">Area of Expertise:</label>
<input class="textfield" name="Expertise" type="text" />
<div class="clear2"></div>
<label for="Comments">Comments/Questions:</label>
<textarea class="textfield" name="Comments" cols="30" rows="8"></textarea>
<div class="clear2"></div>
<label for="Submit"><span class="hide">Submit</span></label>
<input name="Submit" type="button" class="button" value="Submit" />
<div class="clear2"></div>
</div>
</form></div>
<div id="sidebar">
<h2>Menu</h2>
<ul class="sidemenu">
<li><a href="index.html">Welcome Page </a></li>
<li><a href="tables.html">Example of Tables</a></li>
<li class="active"><a href="forms.html">Example of Contact Form</a></li>
<li><a href="goodies.html">Free Goodies</a></li>
<li><a href="notes.html">Some Notes</a></li>
</ul>
<h2>Tag Cloud</h2>
<ul id="cloud">
<li class="cloud1"><a href="#">Lorem</a></li>
<li class="cloud3"><a href="#">Ipsum</a></li>
<li class="cloud2"><a href="#">dolor</a></li>
<li class="cloud8"><a href="#">liquam neque</a></li>
<li class="cloud7"><a href="#">feugiat sed</a></li>
<li class="cloud3"><a href="#">rutrum nec</a></li>
<li class="cloud5"> <a href="#">pharetra</a> </li>
<li class="cloud6"><a href="#">vitae</a></li>
</ul>
<h2>Latest Posts</h2>
<ul class="posts">
<li>
<h4><a href="#">Post Heading</a></h4>
Vestibulum feugiat laoreet magna. Vivamus semper, ipsum sit amet bibendum lobortis, erat leo elementum est, vel ullamcorper tortor augue a tortor.</li>
<li><h4><a href="#">Second Post</a></h4>
Vestibulum feugiat laoreet magna. Vivamus semper, ipsum sit amet bibendum lobortis, erat leo elementum est, vel ullamcorper tortor augue a tortor.
</li>
</ul>
</div>
<p class="clear"> </p>
</div>
<div id="footer">
Copyright © YourSiteName.com <br />
<a href="#">Your</a> | <a href="#">Links</a> | <a href="#">Here</a></div>
</div>
<div id="credit">
<a href="http://ramblingsoul.com">CSS Template</a> by Rambling Soul</div>
</body>
</html>
Related examples in the same category