red-accent
<!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>Red Accent - About Us</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type='text/css'>
* {
margin: 0; padding: 0;
}
body {
text-align: center;
font: 12px Verdana;
color: #565656;
background: #FFFFFF url(red-accent-images/background.gif) repeat-x 0 0;
}
a {
color: #98320c;
}
img {
border: 0;
}
.break {
font-size: 0;
width: 0; height: 0;
clear: both;
}
.alignleft {
float: left;
margin: 4px 10px 5px 0;
}
.alignright {
float: right;
margin: 4px 0 5px 10px;
}
.aligncenter {
text-align: center;
}
.hidden {
display: none;
}
/** BEGIN wrapper **/
#wrapper {
width: 980px;
margin: auto auto;
text-align: left;
}
/** END wrapper **/
/** BEGIN header **/
#header {
height: 165px;
font-size: 0.9em;
color: #ffffff;
}
#header .subscribe {
float: right;
padding: 2px 20px 2px 0;
background: url(red-accent-images/rss.gif) no-repeat right 0;
margin-top: 6px;
}
#header .subscribe a {
color: #ffffff;
margin: 0 8px;
text-decoration: none;
}
#header .subscribe a:hover {
text-decoration: underline;
}
#header ul {
list-style-type: none;
padding-top: 2px;
}
#header ul li {
float: left;
padding-left: 1px;
background: url(red-accent-images/divider.gif) no-repeat 0 7px;
}
#header ul li.f {
background: none;
}
#header ul li a {
color: #ffffff;
text-decoration: none;
display: block;
padding: 6px 18px;
text-transform: uppercase;
font-weight: bold;
}
#header ul li.f a {
padding-left: 0;
}
#header ul li a:hover {
text-decoration: underline;
}
#header h1 {
float: left;
font-size: 0;
text-indent: -9999px;
padding-left: 30px;
}
#header h1 a {
display: block;
width: 306px; height: 35px;
background: url(red-accent-images/logo.gif) no-repeat 0 0;
}
#header form {
float: right;
width: 275px; height: 26px;
background: url(red-accent-images/search.gif) no-repeat 0 0;
margin: 4px 5px 0 0;
}
#header form input {
float: left;
border: 0;
font-size: 1em;
font-family: Arial;
margin: 6px 0 0 8px;
width: 230px;
background-color: transparent;
color: #ffffff;
}
#header form button {
float: right;
border: 0;
text-indent: -9999px;
width: 30px; height: 26px;
background-color: transparent;
}
#header .break {
height: 53px;
}
/** END header **/
/** BEGIN left sidebar **/
#lsidebar {
width: 160px;
float: left;
font-size: 0.9em;
padding: 20px 0 15px;
}
#lsidebar h2 {
text-transform: uppercase;
color: #31322D;
font-size: 1em;
padding-bottom: 10px;
}
#lsidebar ul {
list-style-type: none;
padding-bottom: 25px;
}
#lsidebar ul li {
padding: 5px 0;
}
#lsidebar ul li a {
color: #565656;
text-decoration: none;
line-height: 1.4em;
}
#lsidebar ul li a:hover {
color: #98320C;
text-decoration: underline;
}
/** END left sidebar **/
/** BEGIN content **/
#content {
width: 500px;
float: left;
padding: 15px 0;
}
#content .post {
clear: both;
padding-bottom: 30px;
}
#content .post h2 {
font-size: 1.7em;
margin-bottom: 5px;
}
#content .post h2 a {
text-decoration: none;
}
#content .post h2 a:hover {
text-decoration: underline;
}
#content .post .details1 {
font-size: 0.9em;
margin-bottom: 25px;
padding: 0 5px;
color: #9A9898;
}
#content .post .details1 a {
text-decoration: none;
color: #565656;
}
#content .post .details1 a:hover {
text-decoration: underline;
color: #98320c;
}
#content .post .details2 {
font-size: 0.9em;
clear: both;
color: #9A9898;
height: 20px;
padding-top: 25px;
}
#content .post .details2 a {
text-decoration: none;
color: #565656;
}
#content .post .details2 a:hover {
text-decoration: underline;
color: #98320c;
}
#content .post .details2 .l {
float: left;
width: 45%;
}
#content .post .details2 .r {
float: right;
width: 45%;
}
#content .postnav {
text-transform: uppercase;
font-weight: bold;
font-size: 0.9em;
padding-top: 30px;
}
#content .postnav .l {
float: left;
}
#content .postnav .r {
float: right;
}
#content .postnav a {
text-decoration: none;
}
#content p {
line-height: 1.4em;
margin-bottom: 10px;
}
#content h3, h4, h5, h6 {
font-size: 1.4em;
margin-bottom: 5px;
}
#content ul, #content ol {
list-style-position: inside;
margin-bottom: 10px;
}
#content li {
line-height: 1.4em;
padding: 2px 0;
}
#content blockquote {
padding: 5px;
background-color: #eeeeee;
border-width: 1px 0;
border-style: solid;
border-color: #e0e0e0;
}
/** END content **/
/** BEGIN right sidebar **/
#rsidebar {
width: 280px;
float: right;
padding: 15px 0;
}
#rsidebar h2 {
font-size: 0.9em;
text-transform: uppercase;
color: #302B1C;
border-top: 5px solid #302B1C;
border-bottom: 1px solid #302B1C;
padding: 5px 0;
margin-bottom: 10px;
}
#rsidebar .ads {
padding: 0 10px 20px;
text-align: center;
}
#rsidebar .ads img {
margin: 1px;
}
#rsidebar ul {
padding: 0 10px 20px;
list-style-type: none;
}
#rsidebar ul li {
line-height: 1.4em;
padding: 4px 0;
}
#rsidebar ul li a {
color: #53534C;
text-decoration: none;
}
#rsidebar ul li a:hover {
color: #98320C;
text-decoration: underline;
}
#rsidebar .flickr {
padding: 0 10px 20px;
text-decoration: center;
}
#rsidebar .flickr img {
margin: 1px;
}
#rsidebar .video {
padding: 0 10px 20px;
}
#rsidebar .tags {
padding: 0 4px 20px;
}
#rsidebar .tags a {
color: #565656;
text-decoration: none;
}
#rsidebar .tags a:hover {
color: #98320C;
text-decoration: underline;
}
/** END right sidebar **/
/** BEGIN footer **/
#footer {
clear: both;
background: #D9D9D6 url(red-accent-images/footer.gif) repeat-x 0 0;
height: 82px;
font-size: 0.9em;
color: #9A9898;
}
#footer .wrapper {
margin: auto auto;
width: 940px;
padding: 35px 0;
}
#footer .l {
float: left;
}
#footer .r {
float: right;
}
#footer a {
color: #565656;
text-decoration: none;
}
#footer a:hover {
text-decoration: underline;
}
/** END footer **/
/** BEGIN miscellaneous **/
#comments {
clear: both;
}
#comments h2 {
margin: 20px 0 5px;
font-size: 1.3em;
}
#comments p {
margin-bottom: 10px;
line-height: 1.6em;
}
#comments form {
padding-top: 20px;
}
#comments form p {
margin-bottom: 5px;
}
#comments form input {
margin-right: 5px;
}
#comments form input, textarea {
border: 1px solid #cccccc;
font-size: 0.9em;
font-family: Verdana;
padding: 4px;
background-position: 4px 4px;
background-repeat: no-repeat;
}
#comments form input {
width: 260px;
border: 1px solid #cccccc;
}
#comments form textarea {
width: 350px;
padding: 4px 4px !important;
border: 1px solid #cccccc;
}
#comments form button {
text-indent: -9999px;
border: 0;
background: url(red-accent-images/submit2.gif) no-repeat 0 0;
width: 150px; height: 34px;
}
.commentdetails {
margin-top: 25px;
}
.commentauthor {
margin-bottom: 5px !important;
font-weight: bold;
}
.commentdate {
font-size: 0.8em;
margin-bottom: 5px;
color: #909090;
}
.required {
color: #ff0000;
}
h2.title {
font-size: 0.9em !important;
text-transform: uppercase;
padding: 5px 0 25px;
color: #302B1C;
}
.notfound {
padding: 40px;
}
.notfound h2 {
font-size: 18px;
font-weight: normal;
margin-bottom: 10px;
}
/** END miscellaneous **/
/** BEGIN wordpress 2.7 comments **/
#comments ol {
list-style-type: none;
clear: both;
padding: 0;
margin: 0;
}
#comments ol li {
padding: 10px;
border: 1px solid #e0e0e0;
margin-bottom: 10px;
}
#comments ol li .avatar {
float: right;
}
#comments ol li .comment-author {
}
#comments ol li .comment-author .fn {
font-weight: bold;
font-size: 1.2em;
}
#comments ol li .comment-meta {
font-size: 0.9em;
color: #999999;
margin: 5px 0 10px;
}
#comments ol li .reply {
font-size: 0.9em;
font-weight: bold;
padding-bottom: 10px;
}
#comments .children {
list-style-type: none;
}
#comments .navigation {
padding: 10px 0 20px;
font-size: 0.9em;
}
#comments .navigation a {
color: #999999;
padding: 3px 8px;
border: 1px solid #cccccc;
}
#comments .navigation a:hover {
color: #000000;
border-color: #000000;
text-decoration: none;
}
#comments .says {
display: none;
}
/** END wordpress 2.7 comments **/
</style>
<!--[if lte IE 6]><link rel="stylesheet" type="text/css" href="ie.css" /><![endif]-->
</head>
<body>
<!-- BEGIN wrapper -->
<div id="wrapper">
<!-- BEGIN header -->
<div id="header">
<p class="subscribe"><strong>Subscribe</strong>: <a href="http://www.free-css.com/">Posts</a> | <a href="http://www.free-css.com/">Comments</a> | <a href="http://www.free-css.com/">Email</a></p>
<ul>
<li class="f"><a href="http://www.free-css.com/">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="page.html">Demo Page</a></li>
<li><a href="contact.html">Contact Page</a></li>
</ul>
<div class="break"></div>
<h1><a href="http://www.free-css.com/">Red Accent</a></h1>
<form action="http://www.free-css.com/">
<input type="text" name="s" id="s" value="" />
<button type="submit">Search</button>
</form>
</div>
<!-- END header -->
<!-- BEGIN left sidebar -->
<div id="lsidebar">
<!-- begin categories -->
<h2>Categories</h2>
<ul>
<li><a href="http://www.free-css.com/">Advertising</a></li>
<li><a href="http://www.free-css.com/">Entertainment</a></li>
<li><a href="http://www.free-css.com/">Fashion</a></li>
<li><a href="http://www.free-css.com/">Google </a></li>
<li><a href="http://www.free-css.com/">Lifestyle</a></li>
<li><a href="http://www.free-css.com/">Photos</a></li>
<li><a href="http://www.free-css.com/">Wordpress Themes</a></li>
</ul>
<!-- end categories -->
<!-- begin archives -->
<h2>Archives</h2>
<ul>
<li><a href="http://www.free-css.com/">December 2008</a></li>
<li><a href="http://www.free-css.com/">November 2008</a></li>
<li><a href="http://www.free-css.com/">October 2008</a></li>
<li><a href="http://www.free-css.com/">September 2008</a></li>
<li><a href="http://www.free-css.com/">August 2008</a></li>
</ul>
<!-- end archives -->
<!-- begin blogroll -->
<h2>Blogroll</h2>
<ul>
<li><a href="http://www.free-css.com/">Erick's Blog</a></li>
<li><a href="http://www.free-css.com/">Ferns Videos</a></li>
<li><a href="http://www.free-css.com/">Google Guide</a></li>
<li><a href="http://www.free-css.com/">Ebook</a></li>
<li><a href="http://www.free-css.com/">YouTube</a></li>
</ul>
<!-- end blogroll -->
<!-- begin pages -->
<h2>Pages</h2>
<ul>
<li><a href="http://www.free-css.com/">About</a></li>
<li><a href="http://www.free-css.com/">Links</a></li>
<li><a href="http://www.free-css.com/">Archives</a></li>
<li><a href="http://www.free-css.com/">Gallery</a></li>
<li><a href="http://www.free-css.com/">Contact</a></li>
</ul>
<!-- end pages -->
<!-- begin meta -->
<h2>Meta</h2>
<ul>
<li><a href="http://www.free-css.com/">Login</a></li>
</ul>
<!-- end meta -->
</div>
<!-- END left sidebar -->
<!-- BEGIN content -->
<div id="content">
<!-- begin post -->
<div class="post">
<h2>About Us</h2>
<p>This is an example of a WordPress page, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many pages like this one or sub-pages as you like and manage all of your content inside of WordPress.</p>
</div>
<!-- end post -->
</div>
<!-- END content -->
<!-- BEGIN right sidebar -->
<div id="rsidebar">
<!-- begin sponsors -->
<h2>Sponsors</h2>
<p class="ads"> <a href="http://www.free-css.com/"><img src="red-accent-images/ad125x125.jpg" alt="" /></a> <a href="http://www.free-css.com/"><img src="red-accent-images/ad125x125.jpg" alt="" /></a> <a href="http://www.free-css.com/"><img src="red-accent-images/ad125x125.jpg" alt="" /></a> <a href="http://www.free-css.com/"><img src="red-accent-images/ad125x125.jpg" alt="" /></a> </p>
<!-- end sponsors -->
<!-- begin popular posts -->
<h2>Popular Posts</h2>
<ul>
<li><a href="http://www.free-css.com/">Lorem Ipsum Dolor Sit Amet</a></li>
<li><a href="http://www.free-css.com/">Quisque Egestas Posuere Tellus</a></li>
<li><a href="http://www.free-css.com/">Nullam Volutpat Suscipit Dolor</a></li>
<li><a href="http://www.free-css.com/">Cras Sollicitudin, Sapien Porta Auctor</a></li>
<li><a href="http://www.free-css.com/">Nullam Ultrices Dolor Quis Lectus</a></li>
</ul>
<!-- end popular posts -->
<!-- begin flickr photos -->
<h2>Flickr Photos</h2>
<p class="flickr"> <a href="http://www.free-css.com/"><img src="red-accent-images/_thumb3.jpg" alt="" /></a> <a href="http://www.free-css.com/"><img src="red-accent-images/_thumb4.jpg" alt="" /></a> <a href="http://www.free-css.com/"><img src="red-accent-images/_thumb5.jpg" alt="" /></a> <a href="http://www.free-css.com/"><img src="red-accent-images/_thumb6.jpg" alt="" /></a> <a href="http://www.free-css.com/"><img src="red-accent-images/_thumb7.jpg" alt="" /></a> <a href="http://www.free-css.com/"><img src="red-accent-images/_thumb8.jpg" alt="" /></a> </p>
<!-- end flickr photos -->
<!-- begin featured video -->
<h2>Featured Video</h2>
<div class="video"> <img src="red-accent-images/_video.jpg" alt="" /> </div>
<!-- end featured video -->
<!-- begin tags -->
<h2>Tags</h2>
<div class="tags"> <a href="http://www.free-css.com/">Link</a> </div>
<!-- end tags -->
</div>
<!-- END right sidebar -->
</div>
<!-- END wrapper -->
<!-- BEGIN footer -->
<div id="footer">
<div class="wrapper">
<p class="l">Copyright © 2009 - <a href="http://www.free-css.com/">Website Name</a> · All Rights Reserved</p>
<p class="r">Template by: <a href="http://www.wpthemedesigner.com/">WordPress Designer</a> | Get More <a href="http://www.free-css.com/">Free CSS Templates</a></p>
</div>
</div>
<!-- END footer -->
</body>
</html>
Related examples in the same category