vintage-style
<!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 profile="http://gmpg.org/xfn/11">
<title>Vintage Style</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type='text/css'>
body { background: #480701; }
a { color: #7f180e; }
#wrapper { background: #77140b url(vintage-style-images/bg-wrapper.gif) no-repeat; }
#narrowcolumn-wrapper { background: url(vintage-style-images/narrowcolumn-bottom.jpg) no-repeat left bottom; }
#menu ul li { background: url(vintage-style-images/tab-right.gif) no-repeat right top; }
#menu ul li a { background: url(vintage-style-images/tab-left.gif) no-repeat; }
#menu ul li:hover { background: url(vintage-style-images/tab-right-hover.gif) no-repeat right top; }
#menu ul li a:hover { background: url(vintage-style-images/tab-left-hover.gif) no-repeat; }
#menu ul li.current_page_item { background: url(vintage-style-images/tab-right-hover.gif) no-repeat right top; }
#menu ul li.current_page_item a { background: url(vintage-style-images/tab-left-hover.gif) no-repeat; }
#header { background: url(vintage-style-images/header.jpg) no-repeat; }
#sidebar { background: #77140b; }
.Search input.keyword { background: url(vintage-style-images/search.gif) no-repeat; }
#footer { background: #77140b url(vintage-style-images/footer.gif) no-repeat left bottom; }
</style>
<link rel="stylesheet" type="text/css" href="stylewp-red.css" title="red"/>
<link rel="alternate stylesheet" type="text/css" href="stylewp-green.css" title="green" />
<script type="text/javascript" src="javascript/styleswitcher.js"> </script>
</head>
<body>
<div id="container">
<div class="stylewp"> Options:
<ul>
<li><a href="#" onclick="setActiveStyleSheet('red'); return false;">Red</a></li>
<li><a href="#" onclick="setActiveStyleSheet('green'); return false;">Green</a></li>
</ul>
</div>
<div id="menu">
<ul>
<li class="current_page_item"><a href="http://www.free-css.com/">Home</a></li>
<li class="page_item page-item-2"><a href="http://www.free-css.com/" title="About">About</a></li>
</ul>
</div>
<div id="wrapper">
<div id="page-wrapper">
<div id="page">
<div id="header">
<h1><a href="http://www.free-css.com/">Vintage Style</a></h1>
<div id="description">Free CSS Blog Template</div>
</div>
<div class="narrowcolumn">
<div class="posts-wrapper">
<div class="posts">
<h2><a href="http://www.free-css.com/">Lorem Ipsum Dolor Sit Amet</a></h2>
<div class="postinfo">
<ul>
<li class="author">by admin</li>
<li class="date">on 05.17.08</li>
<li class="category-info"><a href="http://www.free-css.com/">Articles</a></li>
<li class="comment-number"><a href="http://www.free-css.com/">No Comments</a></li>
<li class="digg"><a href="http://www.free-css.com/">Digg</a></li>
<li class="delicious"><a href="http://www.free-css.com/">Del.icio.us</a></li>
<li class="edit-info"></li>
</ul>
</div>
<div class="clear"></div>
<div class="entry">
<p>Phasellus feugiat accumsan eros. Quisque sit amet enim quis risus facilisis viverra. Integer interdum ultrices nibh. Donec elit tortor, fermentum et, tincidunt non, scelerisque commodo, nibh. <img src="vintage-style-images/harimakenji.jpg" alt="" width="203" height="152" align="left" />Quisque imperdiet leo id justo. Nulla vel metus adipiscing dui euismod egestas. In eros velit, cursus feugiat, placerat vel, tristique venenatis, augue. Nulla mi. Curabitur luctus risus sit amet orci. Nunc venenatis urna in sem. Donec posuere malesuada orci. Etiam euismod. Ut leo orci, dignissim molestie, laoreet non, ullamcorper quis, nibh. Sed aliquet arcu id massa. Nullam euismod massa non velit. Sed ac ligula. Nulla tincidunt tempus arcu.</p>
<p>Pellentesque varius, est sed porta euismod, tortor nisi ornare massa, at commodo neque sem at diam. Pellentesque leo. Aliquam erat volutpat. Vestibulum est justo, ultricies sit amet, consectetuer vitae, vulputate a, erat. Fusce mauris urna, scelerisque quis, venenatis a, fermentum at, sem. Suspendisse lobortis metus volutpat nisl. Etiam tincidunt commodo odio. Mauris posuere bibendum augue. Quisque sagittis vulputate mi. Fusce ut sem. In hac habitasse platea dictumst.</p>
<p>Aliquam eget ligula. Ut dictum mi eget nulla. Proin dapibus, mi in commodo consequat, massa felis eleifend mauris, quis dapibus neque justo in leo. Pellentesque imperdiet turpis sed mauris. Etiam consequat massa eget libero. Vivamus massa justo, porttitor et, tincidunt ac, commodo nec, dui. Nullam sed ipsum ac odio lobortis fringilla. Maecenas cursus neque at velit. Sed purus nulla, condimentum ac, gravida eget, congue porta, lorem. Aenean mi. Vivamus vestibulum, metus quis egestas cursus, ligula nisl pellentesque lacus, vel gravida velit magna ut diam. Vestibulum eget neque. Nam nec dolor. <a href="http://www.free-css.com/" class="more-link">Read more…</a></p>
</div>
<h2><a href="http://www.free-css.com/">The List</a></h2>
<div class="postinfo">
<ul>
<li class="author">by admin</li>
<li class="date">on 07.11.07</li>
<li class="category-info"><a href="http://www.free-css.com/">Articles</a>, <a href="http://www.free-css.com/">Lists</a></li>
<li class="comment-number"><a href="http://www.free-css.com/">No Comments</a></li>
<li class="digg"><a href="http://www.free-css.com/">Digg</a></li>
<li class="delicious"><a href="http://www.free-css.com/">Del.icio.us</a></li>
<li class="edit-info"></li>
</ul>
</div>
<div class="clear"></div>
<div class="entry">
<p>My favorite movie:</p>
<ol>
<li>Pride and Prejudice</li>
<li>Die Hard 4</li>
<li>Transformers</li>
<li>The New Guy</li>
</ol>
<p>My favorite drama series:</p>
<ul>
<li>All funny Korean drama comedy</li>
<li>Heroes</li>
<li>Friends</li>
</ul>
</div>
<h2><a href="http://www.free-css.com/">The Code and Blockquote Preview</a></h2>
<div class="postinfo">
<ul>
<li class="author">by admin</li>
<li class="date">on 06.11.07</li>
<li class="category-info"><a href="http://www.free-css.com/">Articles</a>, <a href="http://www.free-css.com/">Preview</a></li>
<li class="comment-number"><a href="http://www.free-css.com/">No Comments</a></li>
<li class="digg"><a href="http://www.free-css.com/">Digg</a></li>
<li class="delicious"><a href="http://www.free-css.com/">Del.icio.us</a></li>
<li class="edit-info"></li>
</ul>
</div>
<div class="clear"></div>
<div class="entry">
<p>Preview of blockquote:</p>
<blockquote>
<p>Morbi velit massa, sagittis congue, consequat id, vulputate vitae, quam. Etiam a nisi. Donec iaculis neque vel tellus. Nunc tempus lobortis justo. Cras cursus urna pulvinar neque. Nulla posuere est non mauris. Donec pharetra, quam et feugiat sagittis, purus lorem porta justo, ut pulvinar est ipsum quis mi.</p>
</blockquote>
<p>Preview of code:</p>
<p><code>Vivamus mattis ultricies pede. Etiam purus est, egestas ac, consequat nec, vulputate sit amet, massa. Etiam felis nunc, suscipit laoreet, molestie sit amet, pellentesque congue, quam. Sed rhoncus. Nam sem turpis, dictum vitae, ullamcorper vitae, tristique ac, neque. Donec varius turpis sed leo. Maecenas arcu. Cras sem magna, egestas a, semper at, bibendum egestas, nulla. Suspendisse turpis quam, eleifend vitae, tincidunt sit amet, rhoncus vel, eros. Curabitur lobortis urna et metus. Curabitur urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</code></p>
</div>
<div class="browse"><a href="http://www.free-css.com/">Next Page »</a></div>
</div>
</div>
</div>
<div id="narrowcolumn-wrapper"> </div>
</div>
</div>
<div id="sidebar">
<ul>
<li class="Search">
<form action="http://www.free-css.com/" method="post">
<input type="text" name="s" class="keyword" style="width: 236px;" />
</form>
</li>
<li>
<h2>Author</h2>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum at arcu. Integer et risus. Morbi id tellus. Integer felis. Mauris malesuada, turpis vitae facilisis euismod, dui arcu adipiscing sem, eu vulputate leo ante in lacus. Sed porta accumsan lectus. Aenean ac sem.</li>
</ul>
</li>
<li>
<h2>Recent Posts</h2>
<ul>
<li><a href="http://www.free-css.com/">The List</a></li>
<li><a href="http://www.free-css.com/">The Code and Blockquote Preview</a></li>
<li><a href="http://www.free-css.com/">Hello world!</a></li>
</ul>
</li>
<li>
<h2>Recent Comments</h2>
<ul>
<li>Mr WordPress: <a href="http://www.free-css.com/">Hi, this is a comment.To</a></li>
</ul>
</li>
<li class="pagenav">
<h2>Pages</h2>
<ul>
<li class="page_item page-item-2"><a href="http://www.free-css.com/">About</a></li>
</ul>
</li>
<li>
<h2>Categories</h2>
<ul>
<li class="cat-item cat-item-4"><a href="http://www.free-css.com/">Articles</a> (3) </li>
<li class="cat-item cat-item-5"><a href="http://www.free-css.com/">Lists</a> (1) </li>
<li class="cat-item cat-item-3"><a href="http://www.free-css.com/">Preview</a> (1) </li>
<li class="cat-item cat-item-1"><a href="http://www.free-css.com/">Uncategorized</a> (1) </li>
</ul>
</li>
<li>
<h2>Archives</h2>
<ul>
<li><a href="http://www.free-css.com/">May 2008</a></li>
<li><a href="http://www.free-css.com/">July 2007</a></li>
<li><a href="http://www.free-css.com/">June 2007</a></li>
<li><a href="http://www.free-css.com/">May 2007</a></li>
</ul>
</li>
<li id="linkcat-2" class="linkcat">
<h2>Blogroll</h2>
<ul>
<li><a href="http://www.free-css.com/">evelopment Blog</a></li>
<li><a href="http://www.free-css.com/">Documentation</a></li>
<li><a href="http://www.free-css.com/">DreamHost Blog</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>
</ul>
</li>
<li>
<h2>Meta</h2>
<ul>
<li><a href="http://www.free-css.com/">Log in</a></li>
<li><a href="http://www.free-css.com/" class="feed">Entries <abbr title="Really Simple Syndication">RSS</abbr></a></li>
<li><a href="http://www.free-css.com/">Comments <abbr title="Really Simple Syndication">RSS</abbr></a></li>
<li><a href="http://validator.w3.org/check/referer">Valid <abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a></li>
</ul>
</li>
</ul>
</div>
</div>
<div id="footer">
<p>Design by : <a href="http://www.searchopedia.org/">Searchopedia</a></p>
</div>
</div>
</body>
</html>
Related examples in the same category