portfolio-extended
<!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>Portfolio Extended - 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: #68645a;
background: url(portfolio-extended-images/background.gif) repeat-x 0 0;
}
a {
text-decoration: none;
color: #990000;
}
a:hover {
text-decoration: underline;
color: #ff0000;
}
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: 970px;
margin: auto auto;
text-align: left;
}
/** END wrapper **/
/** BEGIN header **/
#header {
height: 95px;
}
#header h1 {
float: left;
font-size: 0;
padding: 18px 10px 27px;
}
#header h1 a {
display: block;
text-indent: -9999px;
outline: none;
width: 275px; height: 18px;
background: url(portfolio-extended-images/logo.gif) no-repeat 0 0;
}
#header form {
float: right;
width: 244px; height: 23px;
background: url(portfolio-extended-images/search.gif) no-repeat 0 0;
margin: 20px 0;
padding-right: 40px;
}
#header form input {
border: 0;
width: 180px;
float: left;
background-color: transparent;
margin: 3px 5px;
}
#header form button {
float: right;
border: 0;
width: 51px; height: 23px;
text-indent: -9999px;
background-color: transparent;
}
#header ul {
clear: both;
list-style-type: none;
padding-top: 8px;
}
#header ul li {
float: left;
text-transform: uppercase;
font-weight: bold;
padding-left: 1px;
background: url(portfolio-extended-images/divider.gif) no-repeat 0 0;
}
#header ul li.f {
padding-left: 0;
background: none;
}
#header ul li a {
text-decoration: none;
display: block;
padding: 0 10px;
}
/** END header **/
/** BEGIN body **/
#body {
background: url(portfolio-extended-images/wrapper.gif) repeat-y 510px 0;
}
#body h2 {
color: #990000;
font-size: 0.9em;
text-transform: uppercase;
margin-bottom: 10px;
}
/** END body **/
/** BEGIN content **/
#content {
width: 500px;
float: left;
padding: 10px 18px 10px 0;
}
#content .featured {
margin-bottom: 20px;
}
#content .featured .thumb {
width: 500px; height: 350px;
position: relative;
overflow: hidden;
}
#content .featured .thumb img {
width: 500px;
}
#content .featured .thumb .text {
position: absolute;
bottom: 0; left: 0;
padding: 10px;
background: url(portfolio-extended-images/shade.png) repeat 0 0;
color: #ffffff;
width: 480px;
}
#content .featured .thumb .text a {
color: #ffffff;
}
#content .featured .thumb .text h3 {
font-size: 1.6em;
font-weight: normal;
margin-bottom: 5px;
}
#content .featured .thumb .text p {
line-height: 1.4em;
}
#content .post {
clear: both;
border-top: 1px dotted #DDDDDD;
padding: 10px 0;
}
#content .f {
border-top: 0;
}
#content .post img {
float: left;
margin: 0 10px 10px 0;
padding: 5px;
border: 1px solid #CCCCCC;
width: 100px;
}
#content .post h3 {
font-size: 1.2em;
margin-bottom: 6px;
}
#content .post .details {
font-size: 0.9em;
margin-bottom: 6px;
color: #CCCCCC;
}
#content .post .details a {
color: #68645A;
}
#content .post .details a:hover {
color: #ff0000;
text-decoration: none;
}
#content .post p {
line-height: 1.4em;
}
#content .single {
padding: 10px;
}
#content .single h2 {
margin-bottom: 10px;
font-size: 1.4em;
text-transform: none;
}
#content .single p {
line-height: 1.5em;
margin-bottom: 10px;
}
#content .single ul, #content .single ol {
list-style-position: inside;
margin-bottom: 10px;
}
#content .single li {
line-height: 1.5em;
padding: 2px 0;
}
#content .single blockquote {
padding: 10px 10px 5px;
margin-bottom: 10px;
background-color: #eeeeee;
border-width: 1px 0;
border-style: solid;
border-color: #e0e0e0;
}
#content .single h3, #content .single h4, #content .single h5, #content .single h6 {
font-size: 1.2em;
margin-bottom: 5px;
}
#postnav {
padding: 10px;
font-weight: bold;
}
#myGallery {
width: 500px !important;
height: 350px !important;
}
/** END content **/
/** BEGIN left sidebar **/
#lsidebar {
width: 140px;
float: left;
padding: 10px 0;
}
#lsidebar ul {
list-style-type: none;
padding-bottom: 20px;
}
#lsidebar ul li {
line-height: 1.6em;
padding: 2px 0;
}
#lsidebar ul li a {
color: #68645A;
}
#lsidebar ul li a:hover {
color: #ff0000;
}
/** END left sidebar **/
/** BEGIN right sidebar **/
#rsidebar {
width: 310px;
float: right;
padding: 10px 0;
}
#rsidebar h2 {
border-bottom: 3px solid #CCCCCC;
padding-bottom: 5px;
}
#rsidebar div, #rsidebar ul {
margin-bottom: 25px;
}
#rsidebar ul {
list-style-type: none;
}
#rsidebar ul li {
line-height: 1.6em;
padding: 2px 5px;
border-bottom: 1px dotted #DDDDDD;
}
#rsidebar ul li a {
color: #68645A;
}
#rsidebar ul li a:hover {
color: #ff0000;
}
#rsidebar .sponsors {
text-align: center;
padding-bottom: 10px;
}
#rsidebar .sponsors img {
margin: 5px;
}
#rsidebar .twitter {
padding: 0 20px 0 53px;
background: url(portfolio-extended-images/twitter.gif) no-repeat 10px 0;
line-height: 1.4em;
}
#rsidebar .video {
padding: 0 10px;
}
#rsidebar .flickr {
text-align: center;
padding-bottom: 10px;
}
#rsidebar .flickr img {
margin: 5px 8px;
}
/** END right sidebar **/
/** BEGIN footer **/
#footer {
color: #ffffff;
background-color: #993523;
padding: 10px 0;
}
#footer p {
width: 965px;
margin: auto auto;
text-align: left;
}
#footer a {
text-decoration: underline;
color: #ffffff;
}
/** END footer **/
/** BEGIN miscellaneous **/
#comments {
padding: 10px;
}
#comments a {
text-decoration: none;
}
#comments h2 {
font-size: 1.4em;
margin: 10px 0;
}
#comments p {
margin-bottom: 10px;
line-height: 1.6em;
}
#comments form {
}
#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: 240px;
border: 1px solid #cccccc;
}
#comments form textarea {
width: 350px;
padding: 4px 4px !important;
border: 1px solid #cccccc;
}
#comments form button {
border: 1px solid #a0a0a0;
font-size: 1em;
font-family: Verdana;
padding: 2px 6px;
}
.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: 1em !important;
text-transform: uppercase;
padding: 10px;
color: #565656;
}
.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 .buffer {
padding: 10px;
}
#comments h2 {
font-size: 0.9em;
}
#comments ol li {
margin-bottom: 10px;
}
#comments ol li ul li {
border: 1px solid #e0e0e0;
padding: 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: 0 10px 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" />
<script type="text/javascript" src="unitpngfix.js"></script>
<![endif]-->
</head>
<body>
<!-- BEGIN wrapper -->
<div id="wrapper">
<!-- BEGIN header -->
<div id="header">
<h1><a href="http://www.free-css.com/">Portfolio Extended</a></h1>
<form action="http://www.free-css.com/">
<input type="text" name="s" id="s" value="" />
<button type="submit">Search</button>
</form>
<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>
<!-- END header -->
<!-- BEGIN body -->
<div id="body">
<!-- BEGIN content -->
<div id="content" class="single">
<!-- begin post -->
<div class="single">
<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 left sidebar -->
<div id="lsidebar">
<!-- 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/">Resources</a></li>
<li><a href="http://www.free-css.com/">Contact</a></li>
<li><a href="http://www.free-css.com/">Sitemap</a></li>
</ul>
<!-- end pages -->
<!-- begin categories -->
<h2>Categories</h2>
<ul>
<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/">Food</a></li>
<li><a href="http://www.free-css.com/">Marketing</a></li>
<li><a href="http://www.free-css.com/">Lifestyle</a></li>
<li><a href="http://www.free-css.com/">Pictures</a></li>
<li><a href="http://www.free-css.com/">Videos</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/">Septemher 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/">Documentation</a></li>
<li><a href="http://www.free-css.com/">Suggest Ideas</a></li>
<li><a href="http://www.free-css.com/">Support Forum</a></li>
</ul>
<!-- end blogroll -->
<!-- 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 right sidebar -->
<div id="rsidebar">
<!-- begin site sponsors -->
<h2>Site Sponsors</h2>
<div class="sponsors"> <a href="http://www.free-css.com/"><img src="portfolio-extended-images/ad125x125.jpg" alt="" /></a> <a href="http://www.free-css.com/"><img src="portfolio-extended-images/ad125x125.jpg" alt="" /></a> <a href="http://www.free-css.com/"><img src="portfolio-extended-images/ad125x125.jpg" alt="" /></a> <a href="http://www.free-css.com/"><img src="portfolio-extended-images/ad125x125.jpg" alt="" /></a> </div>
<!-- end site sponsors -->
<!-- begin twitter updates -->
<h2>Twitter Updates</h2>
<div class="twitter"> Cleaning my garage at this hour.. can't sleep. </div>
<!-- end twitter updates -->
<!-- begin popular articles -->
<h2>Popular Articles</h2>
<ul>
<li><a href="http://www.free-css.com/">VW Scirocco EVO R by Caractere</a></li>
<li><a href="http://www.free-css.com/">Nitrous Oxide Tuning - NOS</a></li>
<li><a href="http://www.free-css.com/">Premier4509 Bentley Continental GT</a></li>
<li><a href="http://www.free-css.com/">Hennessey announces plans to modify the</a></li>
<li><a href="http://www.free-css.com/">VW Scirocco EVO R by Caractere</a></li>
<li><a href="http://www.free-css.com/">Nitrous Oxide Tuning - NOS</a></li>
</ul>
<!-- end popular articles -->
<!-- begin featured video -->
<h2>Featured Video</h2>
<div class="video"> <img src="portfolio-extended-images/_video.jpg" alt="" /> </div>
<!-- end featured video -->
<!-- begin flickr gallery -->
<h2>Flickr Gallery</h2>
<div class="flickr"> <a href="http://www.free-css.com/"><img src="portfolio-extended-images/_flickr1.jpg" alt="" /></a> <a href="http://www.free-css.com/"><img src="portfolio-extended-images/_flickr2.jpg" alt="" /></a> <a href="http://www.free-css.com/"><img src="portfolio-extended-images/_flickr3.jpg" alt="" /></a> <a href="http://www.free-css.com/"><img src="portfolio-extended-images/_flickr4.jpg" alt="" /></a> <a href="http://www.free-css.com/"><img src="portfolio-extended-images/_flickr5.jpg" alt="" /></a> <a href="http://www.free-css.com/"><img src="portfolio-extended-images/_flickr6.jpg" alt="" /></a> </div>
<!-- end flickr gallery -->
</div>
<!-- END right sidebar -->
<div class="break"></div>
</div>
<!-- END body -->
</div>
<!-- END wrapper -->
<!-- BEGIN footer -->
<div id="footer">
<p>Copyright © 2009 - <a href="http://www.free-css.com/">Website Name</a> · All Rights Reserved | 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>
<!-- END footer -->
</body>
</html>
Related examples in the same category