simple-elegance
<!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>
<title>Simple Elegance</title>
<style type='text/css'>
/* Page Formatting */
* {
margin:0;
padding:0;
}
body {
background-color:#ffffff;
font:12px "Trebuchet MS", Arial, Verdana;
color:#555555;
text-align:left;
}
a {
color:#8bbc70;
text-decoration:none;
}
a:hover {
color:#555555;
text-decoration:none;
}
img, img a {
border:0;
}
p {
line-height:1.7em;
margin-bottom:20px;
}
h1 {
font-size:24px;
}
h2 {
font-size:18px;
}
h3 {
font-size:14px;
}
/* Header Area */
#topLine {
height:50px;
border-bottom:15px solid #DEEAFA;
}
#header{
width:693px;
margin:10px auto 0px auto;
padding:10px;
}
#header h1{
width:220px;
margin:25px 0 0 0;
background:#ffffff;
padding:5px 0px 5px 20px;
}
#header h1 span{
color:#8bbc70;
font-size:110%;
}
#header ul.nav {
margin:10px 0 0 0;
padding:15px 0 0 0;
float:right;
}
#header ul.nav li {
display:inline;
padding:5px 10px 5px 5px;
}
#header ul.nav li a{
padding:5px 10px 5px 5px;
}
#header ul.nav li.active {
margin:0;
padding: 5px 5px 0px 5px;
background:url(simple-elegance-images/nav_corn_l.gif) no-repeat top left;
}
#header ul.nav li.active a{
padding:5px 10px 0px 5px;
display:inline;
background:url(simple-elegance-images/nav_corn_r.gif) no-repeat top right;
color:#555555;
}
/* Page Wrappers */
#outerwarrper {
width:693px;
margin:30px auto 0 auto;
padding:10px;
background:#fff url(simple-elegance-images/top_curve.gif) repeat-y 10px 0px;
clear:both;
}
#wrapper {
margin-top:1px;
float:left;
width:693px;
background:#fff url(simple-elegance-images/content_bg.gif) repeat-y top left;
}
/* Content Area */
#content {
width:450px;
margin:10px 0 0 0px;
float:left;
}
#content h2 {
margin: 0 20px 0 20px;
padding: 20px 5px 0 5px;
border-bottom: 5px solid #8bbc70;
}
#content p {
margin: 0 20px 0 20px;
padding: 10px 5px 0 5px;
}
#content p img {
float:left;
padding-right:15px
}
#content table {
width:400px;
margin: 0 20px 0 20px;
padding: 10px 5px 0 5px;
}
#content table td.row_headers {
background:#DEEAFA;
text-align:center;
}
#content table td {
padding: 1px 5px 1px 10px;
background:#E5EFE0;
}
#content form {
width:450px;
padding:10px;
}
#content form label {
display:block;
float:left;
width:100px;
text-align:right;
padding-right:10px;
margin-left:-15px;
margin-bottom:0.5em;
}
#content form input {
border:1px solid #fff;
background:#FFFFA0;
padding-left:0.5em;
margin-bottom:0.6em;
}
#content form #send, form #button2 {
background:#FFFFA0;
padding-right:0.5em;
cursor:pointer;
width:200px;
margin-left:125px;
font-weight:bold;
color:#555555;
}
#content form #send:hover, form #button2:hover {
background-position:center left;
color:#8BBC70;
font-weight:bold;
}
/* Sidebar Area */
#sidebar {
width:203px;
margin:50px 30px 0 0px;
background: url(simple-elegance-images/bg-sidebar.gif) repeat top right;
border:1px solid #dfdfdf;
float:right;
}
#sidebar h3 {
padding:10px 10px 0px 10px;
text-align:center;
border-bottom:2px solid #dfdfdf;
}
#sidebar p {
margin:0 20px 0 0px;
padding:5px 10px 10px 10px;
}
#sidebar img {
width:90px;
margin:0px 0px 5px 5px;
float:left;
border:2px solid #dfdfdf;
}
#sidebar ul.side {
padding:5px 10px 10px 30px;
}
#sidebar ul.side li {
padding: 1px 0 1px 0;
}
#sidebar ul.side li a {
text-decoration:underline;
color:#555555;
}
#sidebar ul.side li a:hover {
color:#8bbc70;
}
#sidebar form .user_box {
margin:0px 10px 10px 10px;
width:100px;
}
#sidebar form .button {
margin:0px 0px 10px 0px;
background:url(simple-elegance-images/top_group_bg.gif) repeat top left;
}
#sidebar_two {
width:203px;
margin:40px 30px 0 0px;
background:#ffffff;
float:right;
}
#sidebar_two h3 {
padding:0px 10px 0px 10px;
text-align:center;
border-bottom:2px solid #dfdfdf;
}
#sidebar_two img {
width:90px;
margin:5px 0px 5px 5px;
float:left;
border:2px solid #dfdfdf;
}
/* Footer Area */
#footer {
clear:both;
width: 693px;
margin:0 auto 0 auto;
padding:55px 0 0 0;
background:url(simple-elegance-images/bottom_curve.gif) no-repeat top left;
}
#footer p {
text-align:center;
margin:0;
padding:0px;
line-height:1.3em;
}
</style>
<!--[if IE]>
<style type="text/css" media="screen">
@import "ie.css";
</style>
<![endif]-->
</head>
<body>
<div id="topLine">
<div id="header">
<ul class="nav">
<li><a href="http://www.free-css.com/">Home</a></li>
<li class="active"><a href="http://www.free-css.com/">About</a></li>
<li><a href="http://www.free-css.com/">Contact</a></li>
<li><a href="http://www.free-css.com/">FAQ</a></li>
</ul>
<h1><span>||</span>Simple<span>Elegance</span></h1>
</div>
</div>
<div id="outerwarrper">
<div id="wrapper">
<div id="content">
<h2> A Simple Site</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin id tellus. Nam accumsan tincidunt quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sed est ut felis scelerisque semper. Phasellus pretium hendrerit risus. Morbi malesuada. Duis porttitor tincidunt neque. Phasellus eget velit a mi aliquam molestie. Vestibulum lacinia viverra nisl. Praesent rutrum varius justo. Mauris feugiat.</p>
<h2> Image In Text</h2>
<p><img src="simple-elegance-images/apple.gif" alt="" /> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin id tellus. Nam accumsan tincidunt quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sed est ut felis scelerisque semper.</p>
<h2> Table Example</h2>
<table>
<tr>
<td class="row_headers">Name</td>
<td class="row_headers">E-Mail</td>
<td class="row_headers">Age</td>
<td class="row_headers">Job</td>
</tr>
<tr>
<td>Chris</td>
<td>Crhis@hotmail.com</td>
<td>23</td>
<td>Student</td>
</tr>
<tr>
<td>Jake</td>
<td>Jake@hotmail.com</td>
<td>31</td>
<td>Web Designer</td>
</tr>
<tr>
<td>Randy</td>
<td>Randy@hotmail.com</td>
<td>21</td>
<td>Programmer</td>
</tr>
</table>
<h2> Form Example</h2>
<form method="post" action="http://www.free-css.com/">
<label for="name">Your Name: </label>
<input name="name" id="name" type="text" tabindex="2"/>
<br/>
<label for="email">Your e-mail: </label>
<input name="email" id="email" type="text" tabindex="3"/>
<br/>
<label for="comments" class="comments"> Comments: </label>
<textarea name="comments" id="comments" tabindex="40" cols="35" rows="10"></textarea>
<p>
<input name="send" id="send" type="submit" value="Send message"/>
<input name="button2" id="button2" type="reset" value="Reset" />
</p>
</form>
</div>
<div id="sidebar">
<h3> Main Sidebar</h3>
<p>This is an example of a paragraph in the sidebar followed by an example of sidebar links. </p>
<ul class="side">
<li><a href="http://www.free-css.com/"> More free Templates </a></li>
<li><a href="http://www.free-css.com/"> Freelance Web Designer </a></li>
<li><a href="http://www.free-css.com/">Some Example Links</a></li>
<li><a href="http://www.free-css.com/">Donec sed est ut felis</a></li>
</ul>
<p>This is a form in the sidebar.</p>
<form action="http://www.free-css.com/" method="get">
<input class="user_box" type="text" name="user"/>
<input class="button" type="submit" value="Search"/>
</form>
<p>Images that would be good for advertsment or a sample gallery: </p>
<img class="side_gallery" src="simple-elegance-images/sample_adv.gif" alt="" /> <img class="side_gallery" src="simple-elegance-images/sample_adv.gif" alt="" /> </div>
</div>
</div>
<div id="footer">
<p>Design By:<a href="http://www.templatesforfree.net"> TemplatesForFree.net </a></p>
</div>
</body>
</html>
Related examples in the same category