linear
<!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" xml:lang="en-US" lang="en-US" dir="ltr">
<head profile="http://gmpg.org/xfn/11">
<title>Linear - 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: #252725;
background-color: #F2F2F2;
}
a {
color: #006699;
}
a:hover {
text-decoration: none;
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: 800px;
margin: auto auto;
text-align: left;
padding-bottom: 20px;
}
/** END wrapper **/
/** BEGIN header **/
#header {
height: 180px;
padding: 0 30px;
}
#header ul {
list-style-type: none;
}
#header ul li {
float: left;
padding: 0 20px 15px 0;
}
#header ul li a {
display: block;
padding: 25px 10px 30px;
color: #4A4C49;
font-size: 0.9em;
font-weight: bold;
text-transform: uppercase;
text-decoration: none;
}
#header ul li a:hover {
background-color: #006699;
color: #ffffff;
}
#header .logo {
clear: both;
float: left;
}
#header .logo h1 {
font-size: 2.4em;
text-transform: uppercase;
}
#header .logo h1 a {
text-decoration: none;
color: #006699;
}
#header .logo p {
font-weight: bold;
font-size: 0.9em;
text-transform: uppercase;
color: #4A4C49;
}
#header .twitter {
float: right;
width: 305px; height: 48px;
padding: 12px 12px 12px 45px;
background: url(linear-images/twitter.gif) no-repeat 0 0;
color: #006699;
font-size: 0.9em;
line-height: 1.6em;
}
/** END header **/
/** BEGIN featured **/
#featured {
padding: 20px 10px;
border-top: 1px solid #969793;
}
#featured h2 {
font-size: 0.9em;
text-transform: uppercase;
margin-bottom: 20px;
color: #4A4C49;
}
#featured .thumb {
border: 1px solid #DDDDDD;
margin-bottom: 10px;
clear: both;
width: 310px;
float: left;
margin-right: 20px;
}
#featured .thumb a {
background-color: #ffffff;
border: 5px solid #FFFFFF;
width: 300px; height: 175px;
overflow: hidden;
display: block;
}
#featured .thumb img {
width: 300px;
}
#featured h3 {
font-size: 1.5em;
margin-bottom: 20px;
}
#featured h3 a {
text-decoration: none;
}
#featured p {
line-height: 1.6em;
}
#featured .readmore a {
font-size: 0.8em;
color: #1B2E56;
}
#featured .wrapper div {
clear: both;
height: 190px;
}
/** END featured **/
/** BEGIN content **/
#content {
width: 450px;
float: left;
padding-bottom: 20px;
border-top: 1px solid #969793;
}
#content .post {
padding: 20px 5px;
}
#content .post h2 {
margin-bottom: 10px;
font-size: 1.5em;
}
#content .post h2 a {
color: #252725;
text-decoration: none;
}
#content .post h2 a:hover {
color: #006699;
}
#content .post .details {
}
#content .post .details a {
display: block;
float: left;
background-color: #006699;
color: #ffffff;
text-decoration: none;
padding: 5px;
font-size: 0.9em;
margin: 0 10px 15px 0;
}
#content .post .thumb {
border: 1px solid #DDDDDD;
margin-bottom: 10px;
clear: both;
width: 410px;
}
#content .post .thumb a {
background-color: #ffffff;
border: 5px solid #FFFFFF;
width: 400px; height: 200px;
overflow: hidden;
display: block;
}
#content .post .thumb img {
width: 400px;
}
#content .post p {
line-height: 1.6em;
margin-bottom: 10px;
}
#content .post .tags {
border-top: 1px dotted #C9CBCC;
margin-bottom: 0;
padding-top: 5px;
}
#content .post .tags a {
color: #252725;
text-decoration: none;
}
#content .post .tags a:hover {
color: #006699;
}
#content .postnav a {
text-decoration: none;
}
#content h2.title {
font-size: 0.9em;
text-transform: uppercase;
margin: 20px 0;
}
/** END content **/
/** BEGIN sidebar **/
#sidebar {
width: 300px;
float: right;
}
#sidebar .box {
padding: 20px 0;
border-top: 1px solid #B6B8B2;
}
#sidebar .box h2 {
font-size: 0.9em;
margin-bottom: 15px;
text-transform: uppercase;
}
#sidebar .ads {
text-align: center;
}
#sidebar .ads img {
margin: 10px;
}
#sidebar .box form {
padding: 0 14px;
}
#sidebar .box form input {
width: 249px; height: 17px;
border: 0;
padding: 10px;
background: url(linear-images/search.gif) no-repeat 0 0;
font-size: 0.9em;
}
#sidebar .box form button {
display: none;
}
#sidebar .box ul {
list-style-type: none;
}
#sidebar .box ul li {
line-height: 1.6em;
padding: 5px;
}
#sidebar .box ul li a {
font-weight: bold;
}
#sidebar .flickr {
text-align: center
}
#sidebar .flickr img {
margin: 5px;
}
#sidebar .video {
padding: 4px;
}
#sidebar .tags {
padding: 5px;
}
#sidebar .tags a {
color: #252725;
text-decoration: none;
}
#sidebar .tags a:hover {
color: #006699;
}
#sidebar .l, #sidebar .r {
width: 150px;
border-top: 1px solid #B6B8B2;
}
#sidebar .l {
float: left;
}
#sidebar .r {
float: right;
}
#sidebar .l .box, #sidebar .r .box {
border-top: 0;
padding: 20px 5px;
}
#sidebar .l ul, #sidebar .r ul {
}
#sidebar .l ul li, #sidebar .r ul li {
padding: 4px 10px;
font-size: 0.9em;
}
#sidebar .l ul li a, #sidebar .r ul li a {
color: #252725;
text-decoration: none;
}
#sidebar .l ul li a:hover, #sidebar .r ul li a:hover {
color: #006699;
}
#sidebar .l, #sidebar .r {
}
/** END sidebar **/
/** BEGIN footer **/
#footer {
clear: both;
background-color: #006699;
color: #ffffff;
font-weight: bold;
font-size: 0.9em;
padding: 10px 20px;
}
#footer a {
color: #ffffff;
}
/** END footer **/
/** BEGIN miscellaneous **/
#content .single {
}
#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;
}
#comments {
padding: 2px;
}
#comments a {
text-decoration: none;
}
#comments h2 {
font-size: 1.6em;
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 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 0 40px;
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]-->
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div id="wrapper">
<!-- BEGIN header -->
<div id="header">
<!-- begin pages -->
<ul>
<li><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>
<!-- end pages -->
<!-- begin logo -->
<div class="logo">
<h1><a href="http://www.free-css.com/">Linear</a></h1>
<p>Free CSS Template</p>
</div>
<!-- end logo -->
<!-- begin twitter -->
<div class="twitter"> This is a box for twitter updates perfect for personal blogs who wants to keep their visitors updated. </div>
<!-- end twitter -->
</div>
<!-- END header -->
<div class="break"></div>
<!-- BEGIN content -->
<div id="content">
<!-- begin post -->
<div class="post single">
<h2>About</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 sidebar -->
<div id="sidebar">
<!-- begin advertisment/search -->
<div class="box">
<h2>Advertisement</h2>
<p class="ads"> <a href="http://www.free-css.com/"><img src="linear-images/ad125x125.gif" alt="" /></a> <a href="http://www.free-css.com/"><img src="linear-images/ad125x125.gif" alt="" /></a> <a href="http://www.free-css.com/"><img src="linear-images/ad125x125.gif" alt="" /></a> <a href="http://www.free-css.com/"><img src="linear-images/ad125x125.gif" alt="" /></a> </p>
<form action="http://www.free-css.com/">
<input type="text" name="s" id="s" value="Enter keywords here." />
<button type="submit">Search</button>
</form>
</div>
<!-- end advertisement/search -->
<!-- begin popular articles -->
<div class="box">
<h2>Popular Articles</h2>
<ul>
<li> <a href="http://www.free-css.com/">Top 10 Ways to Make Money Online</a>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse interdum..</p>
</li>
<li> <a href="http://www.free-css.com/">The Basics of Photography and Choosing the Right Subject</a>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse interdum..</p>
</li>
<li> <a href="http://www.free-css.com/">How to Create Wordpress Themes from Scratch and Selling Them Online</a>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse interdum..</p>
</li>
</ul>
</div>
<!-- end popular articles -->
<!-- begin featured images -->
<div class="box">
<h2>Featured Images</h2>
<p class="flickr"> <a href="http://www.free-css.com/"><img src="linear-images/_flickr.gif" alt="" /></a> <a href="http://www.free-css.com/"><img src="linear-images/_flickr.gif" alt="" /></a> <a href="http://www.free-css.com/"><img src="linear-images/_flickr.gif" alt="" /></a> <a href="http://www.free-css.com/"><img src="linear-images/_flickr.gif" alt="" /></a> <a href="http://www.free-css.com/"><img src="linear-images/_flickr.gif" alt="" /></a> <a href="http://www.free-css.com/"><img src="linear-images/_flickr.gif" alt="" /></a> </p>
</div>
<!-- end featured images -->
<!-- begin featured video -->
<div class="box">
<h2>Featured Video</h2>
<div class="video"> <img src="linear-images/_video.jpg" alt="" /> </div>
</div>
<!-- end featured video -->
<!-- begin tag cloud -->
<div class="box">
<h2>Tag Cloud</h2>
<p class="tags"> <a href="http://www.free-css.com/">Link</a> </p>
</div>
<!-- end tag cloud -->
<!-- BEGIN left -->
<div class="l">
<!-- begin pages -->
<div class="box">
<h2>Pages</h2>
<ul>
<li><a href="http://www.free-css.com/">About</a></li>
<li><a href="http://www.free-css.com/">Portfolio</a></li>
<li><a href="http://www.free-css.com/">Gallery </a></li>
<li><a href="http://www.free-css.com/">Sitemap</a></li>
<li><a href="http://www.free-css.com/">Contact</a></li>
</ul>
</div>
<!-- end pages -->
<!-- begin categories -->
<div class="box">
<h2>Categories</h2>
<ul>
<li><a href="http://www.free-css.com/">Advertising</a></li>
<li><a href="http://www.free-css.com/">Blogging</a></li>
<li><a href="http://www.free-css.com/">Internet Marketing</a></li>
</ul>
</div>
<!-- end categories -->
<!-- begin meta -->
<div class="box">
<h2>Meta</h2>
<ul>
<li><a href="http://www.free-css.com/">Log in</a></li>
<li><a href="http://www.free-css.com/">Valid XHTML</a></li>
<li><a href="http://www.free-css.com/">XFN</a></li>
<li><a href="http://www.free-css.com/">Wordpress</a></li>
</ul>
</div>
<!-- end meta -->
</div>
<!-- END left -->
<!-- BEGIN right -->
<div class="r">
<!-- begin archives -->
<div class="box">
<h2>Archives</h2>
<ul>
<li><a href="http://www.free-css.com/">September 2009</a></li>
<li><a href="http://www.free-css.com/">August 2009</a></li>
<li><a href="http://www.free-css.com/">July 2009</a></li>
<li><a href="http://www.free-css.com/">June 2009</a></li>
<li><a href="http://www.free-css.com/">May 2009</a></li>
</ul>
</div>
<!-- end archives -->
<!-- begin blogroll -->
<div class="box">
<h2>Blogroll</h2>
<ul>
<li><a href="http://www.free-css.com/">Development Blog</a></li>
<li><a href="http://www.free-css.com/">Documentation</a></li>
<li><a href="http://www.free-css.com/">Plugins</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>
<li><a href="http://www.free-css.com/">Themes</a></li>
<li><a href="http://www.free-css.com/">WordPress Planet</a></li>
</ul>
</div>
<!-- end blogroll -->
</div>
<!-- END right -->
</div>
<!-- END sidebar -->
<!-- BEGIN footer -->
<div id="footer">Copyright © 2009 - <a href="http://www.free-css.com/">Website Name</a> · All Rights Reserved<br />
Template by: <a href="http://www.wpthemedesigner.com/">WordPress Designer</a> | Get More <a href="http://www.free-css.com/">Free CSS Templates</a></div>
<!-- END footer -->
</div>
<!-- END wrapper -->
</body>
</html>
Related examples in the same category