simpleelegance03
<!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" lang="en" xml:lang="en">
<head>
<title>Simple Elegance 03</title>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<style type='text/css'>
body {margin:0;padding:0;line-height: 1.5em;background: #fff;font: 76%/160% verdana, arial, helvetica, sans-serif;color: #000;letter-spacing: 1px;}
#header {background-color: #f5f5dc;padding-top: 20px;font-size: 2.4em;font-weight: normal;letter-spacing: 20px;height: 40px;text-align: center;border-bottom: 1px solid #000;}
ul#navtop {background-color: #f5f5dc;margin: 0; padding: 10px 0 10px 30px;white-space: nowrap;border-bottom: 1px solid #000;}
/*Navigation Styles*/
#navtop li {display: inline;list-style-type: none;}
#navtop a {padding: 3px 10px;}
#navtop a:link, #navtop a:visited {color: #000;text-decoration: none;border: 1px solid #f5f5dc;outline:none;}
#navtop a:hover{color: #000;background-color: #f9f9ea;text-decoration: none;border: 1px solid #000;}
.navbottom {margin-left: 0;padding-left: 0;}
#maincontainer {width: 600px;margin: 50px auto;}
#contentwrapper {float: left;width: 100%;}
/*Content Styles*/
#contentcolumn {font-size: 1em;}
a,a:active,a:visited {outline:none;color: #626258;text-decoration: underline;}
a:hover {color: #939384;text-decoration: none;}
h1,h2,h3 {font-size: 1.3em;margin: 0;color: #626258;}
h4,h5,h6 {font-size: 1.1em;margin: 0;color: #626258}
#list {margin-left: 20px;padding-left: 0;list-style: none;}
#list li {padding-left: 10px;background: url(simpleelegance03-images/list.gif) no-repeat 0 7px;}
div.hr {margin: 20px 0 20px 0;height: 10px;background: #fff url(simpleelegance03-images/hr.gif);}
div.hr hr {display: none;}
#columns {margin: 0;}
#columns li {list-style-type: none;}
#leftcolumn {float: left;width: 48%;font-size: 1em;}
#leftcolumn li {padding-left: 15px;background: url(simpleelegance03-images/link.gif) no-repeat 0 5px;}
#rightcolumn {float: right;width: 48%;font-size: 1em;}
#rightcolumn li {padding-left: 15px;background: url(simpleelegance03-images/link.gif) no-repeat 0 5px;}
#footer {clear: left;width: 100%;border-top: 40px solid #fff;border-bottom: 20px solid #fff;font-size: 0.9em;}
/*Image and Gallery Styles*/
.imgleft {float: left;margin: 6px 10px 0 0;}
.imgright {float: right;margin: 6px 0 0 10px;}
.gallery {margin-right: 5px;border: none;}
.gallery_right_img {margin-right: 0;border: none;}
/*Form Styles*/
.form {margin: 20px 0px 20px 0px;}
.form p {width: 300px;clear: left;margin: 0;padding: 5px 0 8px 0;padding-left: 155px;height: 1%;}
.form label{font-weight: bold;float:left;margin-left: -155px;width: 150px;}
.form .input {width: 275px;background-color: #f5f5dc;border: 1px solid #f5f5dc;letter-spacing: 1px;padding: 4px;}
.form textarea {width: 275px;height: 150px;background-color: #f5f5dc;border: 1px solid #f5f5dc;font: 1em/160% verdana, arial, helvetica, sans-serif;letter-spacing: 1px;padding: 4px;}
#submit {margin-left: 155px;}
* html #submit {margin-left: 158px;}
.submitbutton {border: 1px solid #939384;background: #f5f5dc url(simpleelegance03-images/button.gif);letter-spacing: 1px;width: 140px;}
</style>
</head>
<body>
<a name="top"></a>
<div id="header">Simple Elegance 03</div>
<ul id="navtop">
<li><a href="http://www.free-css.com/">Home</a></li>
<li><a href="http://www.free-css.com/">Hyperlink</a></li>
<li><a href="http://www.free-css.com/">Hyperlink</a></li>
<li><a href="http://www.free-css.com/">Hyperlink</a></li>
<li><a href="http://www.free-css.com/">Hyperlink</a></li>
</ul>
<div id="maincontainer">
<div id="contentwrapper">
<div id="contentcolumn">
<h1>Headline (h1, h2, h3)</h1>
<img class="imgleft" src="simpleelegance03-images/image.gif" width="112" height="112" alt="" /> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur massa. Nullam enim arcu, adipiscing id, porta eget, consequat ut, lacus. Aliquam nibh. Etiam tortor ligula, facilisis sed, mattis sit amet, faucibus ut, turpis. In risus ipsum, pharetra eu, placerat id, mollis quis, justo. Mauris sollicitudin tincidunt justo. Sed suscipit tristique nulla. Suspendisse sit amet massa.
<p> <img src="simpleelegance03-images/more.gif" width="9" height="9" alt="Read more!" /> <a href="http://www.free-css.com/">Read more...</a> </p>
<p> <img class="imgright" src="simpleelegance03-images/image.gif" width="112" height="112" alt="" /> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur massa. Nullam enim arcu, adipiscing id, porta eget, consequat ut, lacus. Aliquam nibh. Etiam tortor ligula, facilisis sed, mattis sit amet, faucibus ut, turpis. In risus ipsum, pharetra eu, placerat id, mollis quis, justo. Mauris sollicitudin tincidunt justo. Sed suscipit tristique nulla. Suspendisse sit amet massa. </p>
<div class="hr">
<hr />
</div>
<h4>Gallery (h4, h5, h6)</h4>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur massa. Nullam enim arcu, adipiscing id, porta eget, consequat ut, lacus. Aliquam nibh. Etiam tortor ligula, facilisis sed, mattis sit amet, faucibus ut, turpis. In risus ipsum, pharetra eu, placerat id, mollis quis, justo. Mauris sollicitudin tincidunt justo. Sed suscipit tristique nulla. Suspendisse sit amet massa.
<p> <a href="http://www.free-css.com/"><img class="gallery" src="simpleelegance03-images/image.gif" width="112" height="112" alt="" /></a> <a href="http://www.free-css.com/"><img class="gallery" src="simpleelegance03-images/image.gif" width="112" height="112" alt="" /></a> <a href="http://www.free-css.com/"><img class="gallery" src="simpleelegance03-images/image.gif" width="112" height="112" alt="" /></a> <a href="http://www.free-css.com/"><img class="gallery" src="simpleelegance03-images/image.gif" width="112" height="112" alt="" /></a> <a href="http://www.free-css.com/"><img class="gallery_right_img" src="simpleelegance03-images/image.gif" width="112" height="112" alt="" /></a> </p>
<div class="hr">
<hr />
</div>
<h4>List</h4>
<ul id="list">
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
<li>Item four</li>
<li>Item five</li>
</ul>
<h4>Color Scheme</h4>
<p> <img src="simpleelegance03-images/colors.gif" width="300" height="100" alt="Colors" /> </p>
<div class="hr">
<hr />
</div>
<h4>Form</h4>
<form id="myform" class="form" action="#">
<p>
<label for="user">Name</label>
<input class="input" type="text" id="user" value="" />
</p>
<p>
<label for="email">E-mail:</label>
<input class="input" type="text" id="email" value="" />
</p>
<p>
<label for="message">Message:</label>
<textarea id="message" rows="5" cols="25"></textarea>
</p>
<div id="submit">
<input class="submitbutton" type="submit" value="Submit Message" />
<input class="submitbutton" type="reset" value="Clear Form" />
</div>
</form>
</div>
<div class="hr">
<hr />
</div>
<h4>Weblinks</h4>
<div id="columns">
<div id="leftcolumn">
<ul class="navbottom">
<li><a href="http://www.free-css.com/">Open Designs</a></li>
<li><a href="http://www.free-css.com/">CSS Library</a></li>
<li><a href="http://www.free-css.com/">CSSplay</a></li>
<li><a href="http://www.free-css.com/">Listamatic</a></li>
<li><a href="http://www.free-css.com/">stock.xchng</a></li>
</ul>
</div>
<div id="rightcolumn">
<ul class="navbottom">
<li><a href="http://www.free-css.com/">netrenderer</a></li>
<li><a href="http://www.free-css.com/">BrowsrCamp</a></li>
<li><a href="http://www.free-css.com/">Web Developer's Handbook</a></li>
<li><a href="http://www.free-css.com/">500+ Colours</a></li>
<li><a href="http://www.free-css.com/">Wikipedia</a></li>
</ul>
</div>
</div>
</div>
<div id="footer"> All contents © Copyright 2007 <a href="http://www.free-css.com/">Your Sitename</a><br />
Sponsored by <a href="http://opendesigns.org/">Open Designs</a><br />
Design by wfiedler<br />
<a href="http://validator.w3.org/check?uri=referer">Valid XHTML 1.0 Transitional</a>
<p align="right"><a href="#top">top |`</a></p>
</div>
</div>
</body>
</html>
Related examples in the same category