stacko
<!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>Stacko - 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 Arial;
color: #333333;
background: url(stacko-images/background.gif) repeat 0 0;
}
a {
text-decoration: none;
color: #953E16;
}
a:hover {
text-decoration: underline;
}
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;
}
.noimage img {
display: none;
}
/** BEGIN wrapper **/
.wrap {
width: 960px;
margin: auto auto;
text-align: left;
}
/** END wrapper **/
/** BEGIN header **/
#header {
background: url(stacko-images/header.gif) repeat-x 0 0;
color: #ffffff;
height: 130px;
}
#header a {
color: #ffffff;
text-decoration: underline;
}
#header ul {
list-style-type: none;
height; 36px;
}
#header ul li {
float: left;
text-transform: uppercase;
font-weight: bold;
font-size: 0.9em;
padding: 11px 12px 0 0;
}
#header ul li a {
text-decoration: none;
color: #DBD7CC;
}
#header ul li a:hover {
}
#header .links {
font-size: 0.9em;
float: right;
color: #DBD7CC;
padding-top: 10px;
height: 26px;
}
#header .links a {
color: #DBD7CC;
text-decoration: none;
margin: 2px;
}
#header .logo {
clear: both;
margin: 0 30px;
height: 92px;
}
#header .logo h1 {
text-transform: uppercase;
font-size: 3em;
float: left;
padding: 25px 20px 0 0;
}
#header .logo h1 a {
text-decoration: none;
}
#header .logo p {
padding-top: 40px;
color: #DBD7CC;
}
#header {
}
/** END header **/
/** BEGIN latest **/
#latest {
color: #ffffff;
padding: 30px 30px;
margin: 0 50px;
border-top: 1px dashed #E2DCD6;
}
#latest .wrap {
width: auto;
}
#latest a {
color: #ffffff;
text-decoration: underline;
}
#latest h2 {
font-size: 1.5em;
margin-bottom: 16px;
padding-top: 5px;
}
#latest h2 a {
text-decoration: none;
}
#latest p {
margin-bottom: 16px;
line-height: 1.6em;
}
#latest .thumb {
float: left;
border: 4px solid #000000;
margin-right: 40px;
height: 220px;
overflow: hidden;
}
#latest .thumb img {
width: 320px;
}
/** END latest **/
/** BEGIN body **/
#body {
background: #ffffff url(stacko-images/body.gif) repeat-x 0 0;
border-bottom: 5px solid #953E16;
padding-top: 30px;
}
#body .wrap {
background: url(stacko-images/vertical.gif) repeat-y 670px 0;
}
/** END body **/
/** BEGIN content **/
#content {
width: 660px;
float: left;
padding-right: 10px;
}
#content p {
line-height: 1.4em;
margin-bottom: 10px;
}
#content ul {
margin: 0 0 10px 16px;
}
#content ol {
margin: 0 0 10px 18px;
padding-left: 10px;
}
#content li {
line-height: 1.4em;
padding: 2px 0;
}
#content blockquote {
padding: 10px;
font-size: 0.9em;
background-color: #EEEEEE;
border: 1px solid #CCCCCC;
margin: 0 15px 10px;
color: #000000;
}
#content .post h2 {
font-size: 1.5em;
margin-bottom: 15px;
}
#content .post h3 {
font-size: 1.2em;
margin-bottom: 10px;
}
#content .post {
clear: both;
background: url(stacko-images/horizontal.gif) repeat-x 0 0;
padding: 20px 10px 15px 0;
}
#content .post .l {
float: left;
width: 200px;
font-size: 0.9em;
}
#content .post .l img {
margin-bottom: 10px;
width: 200px;
}
#content .post .l .comments {
margin-bottom: 2px;
}
#content .post .l p {
line-height: 1.8em;
}
#content .post .l .comments a {
font-weight: bold;
padding-left: 16px;
background: url(stacko-images/comments.gif) no-repeat 0 0;
}
#content .post .r {
float: right;
width: 435px;
}
#content .postnav {
clear: both;
background: url(stacko-images/horizontal.gif) repeat-x 0 0;
padding: 20px 0;
}
/** END content **/
/** BEGIN sidebar **/
#sidebar {
width: 280px;
float: right;
padding-bottom: 20px;
}
#sidebar h2 {
font-size: 0.9em;
text-transform: uppercase;
color: #953E16;
padding: 10px 5px 0;
margin: 10px 0;
background: url(stacko-images/horizontal.gif) repeat-x 0 0;
}
#sidebar a {
color: #000000;
}
#sidebar ul {
list-style-type: none;
padding-bottom: 10px;
}
#sidebar ul li {
font-size: 0.9em;
line-height: 1.4em;
padding: 4px 5px;
border-bottom: 1px dashed #E2DCD6;
}
#sidebar .ads {
background: url(stacko-images/horizontal.gif) repeat-x 0 0;
padding: 10px 0;
text-align: center;
}
#sidebar .ads img {
margin: 4px;
}
#sidebar .subscribe {
background: url(stacko-images/horizontal.gif) repeat-x 0 0;
padding: 10px 0;
}
#sidebar .subscribe form {
background: url(stacko-images/rss.gif) no-repeat 0 0;
width: 252px; height: 74px;
}
#sidebar .subscribe form a {
display: block;
width: 38px; height: 38px;
float: left;
text-indent: -9999px;
outline: none;
margin-right: 5px;
}
#sidebar .subscribe form p {
padding: 5px;
font-size: 0.9em;
}
#sidebar .subscribe form input {
border: 0;
font-size: 1.2em;
font-family: Verdana;
float: left;
width: 180px;
margin: 10px 4px 10px 9px;
}
#sidebar .subscribe form button {
text-indent: -9999px;
border: 0;
width: 58px; height: 28px;
background-color: transparent;
float: left;
margin-top: 6px;
}
#sidebar .tags {
background: url(stacko-images/horizontal.gif) repeat-x 0 bottom;
padding: 10px 0;
}
/** END sidebar **/
/** BEGIN footer **/
#footer {
color: #ffffff;
font-size: 0.9em;
padding: 40px 20px;
}
#footer a {
color: #ffffff;
}
#footer p {
line-height: 1.4em;
padding-bottom: 10px;
}
/** END footer **/
/** BEGIN miscellaneous **/
.postnav {
clear: both;
padding: 20px 25px 0;
font-size: 0.9em;
}
.postnav a {
border: 1px solid #cccccc;
padding: 3px 8px;
color: #999999;
}
.postnav a:hover {
border: 1px solid #000000;
color: #000000;
text-decoration: none;
}
#comments {
background: url(stacko-images/horizontal.gif) repeat-x 0 0;
padding: 10px 0 20px;
}
#comments h2 {
margin: 20px 0 5px;
font-size: 1.5em;
font-weight: normal;
}
#comments p {
margin-bottom: 10px;
line-height: 1.5em;
}
#comments form {
padding-top: 20px;
}
#comments form p {
margin-bottom: 5px;
}
#comments form input, textarea {
border: 1px solid #cccccc;
font-size: 0.9em;
font-family: Verdana;
padding: 4px 4px 4px 20px;
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 {
border: 1px solid #909090;
background-color: #cccccc;
font-size: 0.9em;
font-family: Verdana;
width: 120px; height: 23px;
}
.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;
text-transform: uppercase;
padding-bottom: 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 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;
}
/** END wordpress 2.7 comments **/
</style>
<!--[if lte IE 6]><link rel="stylesheet" type="text/css" href="ie.css" /><![endif]-->
</head>
<body>
<!-- BEGIN header -->
<div id="header">
<div class="wrap">
<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>
<p class="links">Subscribe: <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>
<div class="logo">
<h1><a href="http://www.free-css.com/">Stacko</a></h1>
<p>Free CSS Template</p>
</div>
</div>
</div>
<!-- END header -->
<!-- BEGIN body -->
<div id="body">
<div class="wrap">
<!-- 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 sidebar -->
<div id="sidebar">
<!-- begin advertisement -->
<div class="ads"> <a href="http://www.free-css.com/"><img src="stacko-images/ad125x125.jpg" alt="" /></a> <a href="http://www.free-css.com/"><img src="stacko-images/ad125x125.jpg" alt="" /></a> <a href="http://www.free-css.com/"><img src="stacko-images/ad125x125.jpg" alt="" /></a> <a href="http://www.free-css.com/"><img src="stacko-images/ad125x125.jpg" alt="" /></a> </div>
<!-- end advertisement -->
<!-- begin subscribe -->
<div class="subscribe">
<form action="http://www.free-css.com/">
<a class="rss" href="http://www.free-css.com/">RSS</a>
<p>Subscribe in a reader Or, Subscribe via email: Enter your email address: </p>
<div class="break"></div>
<input type="text" name="email" value="" />
<button type="submit">Subscribe</button>
</form>
</div>
<!-- end subscribe -->
<!-- begin popular articles -->
<h2>Popular Articles</h2>
<ul>
<li><a href="http://www.free-css.com/">A Cras Tincidunt Tellus Viverra Donec</a></li>
<li><a href="http://www.free-css.com/">Ipsum Sed Aaculis Nunc Non Nam</a></li>
<li><a href="http://www.free-css.com/">Etiam Posuere Netus Libero Condimentum</a></li>
<li><a href="http://www.free-css.com/">Sed odio Lectus Senectus</a></li>
<li><a href="http://www.free-css.com/">Lorem Sed Imperdiet Lectus Enim</a></li>
</ul>
<!-- end popular articles -->
<!-- begin popular articles -->
<h2>Recent Entries</h2>
<ul>
<li><a href="http://www.free-css.com/">Sed odio Lectus Senectus</a></li>
<li><a href="http://www.free-css.com/">A Cras Tincidunt Tellus Viverra Donec</a></li>
<li><a href="http://www.free-css.com/">Ipsum Sed Aaculis Nunc Non Nam</a></li>
<li><a href="http://www.free-css.com/">Etiam Posuere Netus Libero Condimentum</a></li>
<li><a href="http://www.free-css.com/">Lorem Sed Imperdiet Lectus Enim</a></li>
</ul>
<!-- end popular articles -->
<!-- begin recent comments -->
<h2>Recent Comments</h2>
<ul>
<li><a href="http://www.free-css.com/">Hi! I would like to know your contact information regarding..</a></li>
<li><a href="http://www.free-css.com/">I have downloaded the file, thank you for providing..</a></li>
<li><a href="http://www.free-css.com/">This is a very informative article.</a></li>
<li><a href="http://www.free-css.com/">How are you? I would like to invite you..</a></li>
<li><a href="http://www.free-css.com/">Hello! How are you?</a></li>
</ul>
<!-- end recent comments -->
<!-- begin tags -->
<h2>Tags</h2>
<div class="tags"><a href="http://www.free-css.com/">Tags go here</a></div>
<!-- end tags -->
</div>
<!-- END sidebar -->
<div class="break"></div>
</div>
</div>
<!-- END body -->
<!-- BEGIN footer -->
<div id="footer">
<div class="wrap">
<p>Copyright © 2009 - <a href="http://www.free-css.com/">Website Name</a> · All Rights Reserved</p>
<p>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