plurkified
<!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>Plurkified - 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: 11px Arial;
color: #333333;
background: url(plurkified-images/background.gif) repeat-x 0 0;
}
a {
text-decoration: none;
color: #E2560B;
}
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;
}
/** BEGIN wrapper **/
.wrapper {
width: 1005px;
margin: auto auto;
text-align: left;
}
/** END wrapper **/
/** BEGIN header **/
#header {
height: 142px;
}
#header ul {
list-style-type: none;
height: 35px;
padding: 5px 0 0 35px;
}
#header ul li {
float: left;
text-transform: uppercase;
font-weight: bold;
font-size: 1.1em;
}
#header ul li a {
color: #ffffff;
display: block;
padding: 10px 12px;
}
#header ul li a:hover {
background-color: #F9CBB3;
color: #CF682F;
text-decoration: none;
}
#header h1 {
font-size: 3.3em;
text-transform: uppercase;
padding: 28px 0 0 42px;
}
#header h1 a {
color: #CF682F;
}
/** END header **/
/** BEGIN content **/
#content {
width: 525px;
float: left;
padding-bottom: 20px;
}
#content .post {
padding: 20px 10px 20px 20px;
}
#content h2 {
font-size: 2.2em;
border-bottom: 1px dotted #BCBCBC;
padding-bottom: 2px;
margin-bottom: 5px;
}
#content h2 a {
color: #A23D00;
}
#content .details {
padding-bottom: 20px;
color: #666666;
}
#content .details .author a {
color: #666666;
padding: 2px 0 2px 18px;
background: url(plurkified-images/author.gif) no-repeat 0 0;
}
#content .details .date {
padding: 2px 0 2px 18px;
background: url(plurkified-images/date.gif) no-repeat 0 0;
color: #666666;
}
#content .details .l {
float: left;
margin-bottom: 0;
}
#content .details .r {
float: right;
margin-bottom: 0;
}
#content .details .r a {
padding-left: 17px;
background: url(plurkified-images/comments.gif) no-repeat 0 2px;
}
#content .tags {
padding: 5px 10px;
border-width: 1px 0;
border-style: dotted;
border-color: #BCBCBC;
margin-top: 10px;
}
#content p {
line-height: 1.4em;
margin-bottom: 10px;
}
#content h3 {
font-size: 1.5em;
margin-bottom: 10px;
}
#content ul {
margin: 0 0 10px 16px;
}
#content ol {
margin: 0 0 10px 18px;
}
#content li {
line-height: 1.4em;
padding: 2px 0;
}
#content blockquote {
padding: 10px 20px;
color: #808080;
line-height: 1.4em;
}
#comments {
padding: 10px;
}
#comments h2 {
font-size: 1.3em;
padding-bottom: 10px;
}
#comments .gravatar {
padding: 3px;
border: 1px solid #CCCCCC;
float: left;
margin: 0 10px 10px 0;
}
#comments .comment1 {
padding: 10px 10px 0;
border-bottom: 1px dotted #BCBCBC;
}
#comments .author {
float: left;
}
#comments .author strong {
font-size: 1.3em;
}
#comments .author a {
color: #A23D00;
}
#comments .date {
float: right;
}
#comments .details2 {
height: 30px;
color: #666666;
}
/** END content **/
/** BEGIN sidebar **/
.sidebar {
width: 228px;
float: left;
padding: 20px 0 20px 10px;
}
.sidebar h2 {
color: #A23D00;
font-size: 1.3em;
margin-bottom: 5px;
}
.sidebar .about {
padding-bottom: 10px;
color: #666666;
line-height: 1.5em;
}
.sidebar .about img {
padding: 4px;
border: 1px solid #CCCCCC;
float: left;
margin: 0 10px 4px 0;
}
.sidebar ul {
list-style-type: none;
padding: 5px 0 15px;
}
.sidebar ul li {
line-height: 1.4em;
padding: 4px 0 4px 20px;
background: url(plurkified-images/categories.gif) no-repeat 0 5px;
border-bottom: 1px dotted #BCBCBC;
}
.sidebar ul.archives li { background-image: url(plurkified-images/archives.gif); }
.sidebar ul.blogroll li { background-image: url(plurkified-images/blogroll.gif); }
.sidebar ul.meta li { background-image: url(plurkified-images/meta.gif); }
.sidebar ul li a {
color: #666666;
}
.sidebar ul li a:hover {
}
.sidebar .search {
width: 206px; height: 26px;
background: url(plurkified-images/search.gif) no-repeat 0 0;
padding: 0 !important;
margin: 5px 0 20px;
}
.sidebar .search button {
border: 0;
width: 26px; height: 26px;
text-indent: -9999px;
background-color: transparent;
float: left;
}
.sidebar .search input {
float: left;
border: 0;
width: 172px;
margin: 5px 4px;
font-size: 1.1em;
font-style: Verdana;
}
.sidebar .box {
padding: 5px 0 15px;
}
.sidebar .flckr {
}
.sidebar .flckr img {
margin: 0 10px 10px 0;
width: 75px; height: 75px;
}
.sidebar .tags {
}
.sidebar .tags a {
color: #666666;
}
.sidebar .tags a:hover {
color: #E2560B;
text-decoration: none;
}
.sidebar .ad {
}
/** END sidebar **/
/** BEGIN footer **/
#footer {
clear: both;
background: #CAE7FD url(plurkified-images/footer.gif) repeat-x 0 bottom;
border-top: 1px solid #9EC0DA;
padding-top: 20px;
}
#footer .wrapper2 {
margin-left: -10px;
}
#footer .box {
width: 280px;
float: left;
padding: 0 0 20px 45px;
}
#footer .bottom {
clear: both;
height: 41px;
color: #ffffff;
width: 1005px;
margin: auto auto;
text-align: left;
}
#footer .bottom a {
color: #ffffff;
}
#footer .bottom p {
padding: 15px 15px 0;
}
#footer .bottom .l {
float: left;
}
#footer .bottom .r {
float: right;
}
#footer .box h2 {
color: #A23D00;
font-size: 1.4em;
border-bottom: 1px dashed #9EC0DA;
padding-bottom: 5px;
margin-bottom: 10px;
}
#footer .box ul {
list-style-type: none;
}
#footer .box ul li {
line-height: 1.4em;
padding: 3px 0 3px 20px;
background: url(plurkified-images/bullet.gif) no-repeat 0 3px;
}
#footer .box ul li a {
color: #333333;
}
/** END footer **/
/** BEGIN miscellaneous **/
#postnav {
padding: 10px 20px 0;
}
/** END miscellaneous **/
/** BEGIN miscellaneous **/
.postnav {
clear: both;
padding: 20px 20px 0;
}
.postnav a {
border: 1px solid #cccccc;
padding: 3px 8px;
color: #999999;
}
.postnav a:hover {
border: 1px solid #000000;
color: #000000;
text-decoration: none;
}
#comments {
padding: 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: 15px 10px 0;
}
#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 !important;
text-transform: uppercase;
padding: 25px 25px 0;
color: #565656;
border: 0 !important;
}
.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 wrapper -->
<div class="wrapper">
<!-- BEGIN header -->
<div id="header">
<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>
<h1><a href="http://www.free-css.com/">Plurkified</a></h1>
</div>
<!-- END header -->
<!-- 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 left sidebar -->
<div class="sidebar">
<!-- begin about -->
<h2>About Me</h2>
<div class="about box"> <img src="plurkified-images/_gravatar.jpg" alt="" />
<p>Hello! I am ChiQ Montes. A Wordpress Theme Designer and Online Entrepreneur.</p>
<div class="break"></div>
<p>I blog about Internet Marketing, Blogging, and Business in General. Lorem ipsum dolor sit amet. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum. <a href="http://www.free-css.com/">Read more</a>..</p>
</div>
<!-- end about -->
<!-- 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/">Business</a></li>
<li><a href="http://www.free-css.com/">Entertainment</a></li>
<li><a href="http://www.free-css.com/">Google Adsense</a></li>
<li><a href="http://www.free-css.com/">Search Engine Optimization</a></li>
<li><a href="http://www.free-css.com/">Videos</a></li>
</ul>
<!-- end categories -->
<!-- begin archives -->
<h2>Archives</h2>
<ul class="archives">
<li><a href="http://www.free-css.com/">September 2008</a></li>
<li><a href="http://www.free-css.com/">August 2008</a></li>
<li><a href="http://www.free-css.com/">July 2008</a></li>
<li><a href="http://www.free-css.com/">June 2008</a></li>
</ul>
<!-- end archives -->
<!-- begin blogroll -->
<h2>Blogroll</h2>
<ul class="blogroll">
<li><a href="http://www.free-css.com/">Archie's Photoblog</a></li>
<li><a href="http://www.free-css.com/">Basket Suitcase</a></li>
<li><a href="http://www.free-css.com/">Carlo Make Money Online</a></li>
<li><a href="http://www.free-css.com/">Youtube Videos</a></li>
</ul>
<!-- end blogroll -->
<!-- begin meta -->
<h2>Meta</h2>
<ul class="meta">
<li><a href="http://www.free-css.com/">Login</a></li>
<li><a href="http://www.free-css.com/">Valid CSS</a></li>
<li><a href="http://www.free-css.com/">Valid XHTML</a></li>
</ul>
<!-- end meta-->
</div>
<!-- END left sidebar -->
<!-- BEGIN right sidebar -->
<div class="sidebar">
<!-- begin search -->
<h2>Search</h2>
<form class="search box" action="http://www.free-css.com/">
<button type="submit">Search</button>
<input type="text" name="s" id="s" value="" />
</form>
<!-- end search -->
<!-- begin flckr -->
<h2>Flckr Photos</h2>
<div class="flckr box"> <a href="http://www.free-css.com/"><img src="plurkified-images/_thumb2.jpg" alt="" /></a> <a href="http://www.free-css.com/"><img src="plurkified-images/_thumb3.jpg" alt="" /></a> <a href="http://www.free-css.com/"><img src="plurkified-images/_thumb4.jpg" alt="" /></a> <a href="http://www.free-css.com/"><img src="plurkified-images/_thumb5.jpg" alt="" /></a> <a href="http://www.free-css.com/"><img src="plurkified-images/_thumb6.jpg" alt="" /></a> <a href="http://www.free-css.com/"><img src="plurkified-images/_thumb7.jpg" alt="" /></a> </div>
<!-- end flckr -->
<!-- begin tags -->
<h2>Tags</h2>
<div class="tags box"><a href="http://www.free-css.com/">Tags Go Here</a></div>
<!-- end tags -->
<!-- begin advertisement -->
<h2>Advertisement</h2>
<div class="ad box"><a href="http://www.free-css.com/">Ads Go Here</a></div>
<!-- end advertisement -->
</div>
<!-- END right sidebar -->
</div>
<!-- END wrapper -->
<!-- BEGIN footer -->
<div id="footer">
<div class="wrapper">
<div class="wrapper2">
<!-- begin popular articles -->
<div class="box">
<h2>Popular Articles</h2>
<ul>
<li><a href="http://www.free-css.com/">Blogging Tips for Beginners and Experts</a></li>
<li><a href="http://www.free-css.com/">Top 100 Wordpress Themes you can use for your blog</a></li>
<li><a href="http://www.free-css.com/">Top 100 Download Firefox Plugins</a></li>
<li><a href="http://www.free-css.com/">The Best Wallpaper Collection Series</a></li>
<li><a href="http://www.free-css.com/">How to Make Money Oline</a></li>
<li><a href="http://www.free-css.com/">Life a Successful Live Inspired by the</a></li>
<li><a href="http://www.free-css.com/">Top 10 Motivations Quotes</a></li>
<li><a href="http://www.free-css.com/">How to Live the Life of your Dreams</a></li>
</ul>
</div>
<!-- end popular articles -->
<!-- begin recent comments -->
<div class="box">
<h2>Recent Comments</h2>
<ul>
<li><a href="http://www.free-css.com/">Hi! I really like the posts you have publishing here!</a></li>
<li><a href="http://www.free-css.com/">I would like to know the ways I could contact you because I never got a reply, I must've gotten it wrong</a></li>
<li><a href="http://www.free-css.com/">Hello! Nice blog you have!</a></li>
<li><a href="http://www.free-css.com/">I really admire your opinions on this matter.. thanks!</a></li>
<li><a href="http://www.free-css.com/">I was wondering if I could republish your post in my blog? I will make sure to credit and link you for it</a></li>
<li><a href="http://www.free-css.com/">Hi There! How's life?</a></li>
<li><a href="http://www.free-css.com/">Can you send me a copy of that ebook?</a></li>
</ul>
</div>
<!-- end recent comments -->
<!-- begin latest entries -->
<div class="box">
<h2>Latest Entries</h2>
<ul>
<li><a href="http://www.free-css.com/">How to Make Money Online</a></li>
<li><a href="http://www.free-css.com/">Top 100 Wordpress Themes you can use for your blog</a></li>
<li><a href="http://www.free-css.com/">Top 100 Download Firefox Plugins</a></li>
<li><a href="http://www.free-css.com/">Business Card Designs</a></li>
<li><a href="http://www.free-css.com/">Use Stumble Upon to gain Traffic</a></li>
<li><a href="http://www.free-css.com/">Life a Successful Live Inspired by the</a></li>
<li><a href="http://www.free-css.com/">Top 10 Motivations Quotes</a></li>
<li><a href="http://www.free-css.com/">Motivate Yourself Everyday</a></li>
</ul>
</div>
<!-- end latest entries -->
</div>
<!-- begin bottom -->
<div class="bottom">
<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>
<!-- end bottom -->
</div>
</div>
<!-- END footer -->
</body>
</html>
Related examples in the same category