theme-marketplace
<!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" lang="EN" dir="ltr">
<head profile="http://gmpg.org/xfn/11">
<title>Theme Marketplace</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="imagetoolbar" content="no" />
<style type='text/css'>
/*
Template Name: Theme Marketplace
Coded By: Design Coder - http://www.design-coder.com/
Design By: http://designm.ag/tutorials/theme-marketplace-layout/
Licence: <a href="http://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution-Share Alike 3.0 Unported License</a>
*/
body{margin:0; padding:0; font-size:14px; font-family:Arial, Helvetica, sans-serif; color:#DFD8D8; background-color:#3F6935;}
img{margin:0; padding:0; border:none;}
.justify{text-align:justify;}
.bold{font-weight:bold;}
.center{text-align:center;}
.right{text-align:right;}
.clear:after{content:"."; display:block; height:0; clear:both; visibility:hidden; line-height:0;}
.clear{display:inline-block;}
html[xmlns] .clear{display:block;}
* html .clear{height:1%;}
a{outline:none; text-decoration:none;}
.fl_left{float:left;}
.fl_right{float:right;}
.imgl, .imgr{border:1px solid #272727; padding:5px;}
.imgl{float:left; margin:0 10px 10px 0; clear:left;}
.imgr{float:right; margin:0 0 10px 10px; clear:right;}
/* ----------------------------------------------Wrapper-------------------------------------*/
div.wrapper{display:block; width:100%; margin:0; text-align:left;}
div.wrapper h1, div.wrapper h2, div.wrapper h3, div.wrapper h4, div.wrapper h5, div.wrapper h6{margin:0; padding:0; font-size:18px; font-weight:normal; line-height:normal;}
.col1{border-bottom:1px solid #77993E;}
.col1, .col1 a{color:#FFFFFF; background-color:#5D8B39;}
.col2{color:#FFFFFF; background:url("theme-marketplace-images/intro_bg.png") transparent; border-top:2px solid #303030; border-bottom:5px solid #3F6935;}
.col3{color:#FFFFFF; background-color:#5D8B39; border-bottom:1px solid #77993E;}
.col3 a{color:#081306; background-color:#5D8B39;}
.col4, .col4 a{color:#FFFFFF; background-color:#3F6935;}
/* ----------------------------------------------Generalise-------------------------------------*/
#header, #intro, #container, #copyright{position:relative; margin:0 auto; display:block; width:960px;}
/* ----------------------------------------------Header-------------------------------------*/
#header{height:60px;}
#header h1{margin:15px 0 0 0; padding:0; font-size:30px; line-height:normal;}
#header ul{display:block; height:60px; margin:0; padding:0; list-style:none;}
#header li{float:right;}
#header li.last{border-left:1px solid #77993E;}
#header li a{display:inline-block; height:40px; margin-left:20px; padding:20px 20px 0 0; border-right:1px solid #77993E;}
/* ----------------------------------------------Intro-------------------------------------*/
#intro{}
#intro #crumb{display:block; width:100%; padding:30px 0; text-align:right;}
#intro #crumb h2{font-size:30px;}
#intro #homepage{display:block; width:100%; padding:30px 0 0 0; overflow:hidden; background:url("theme-marketplace-images/homepage_bg.png") top left no-repeat;}
#intro #homepage h2, #intro #homepage p{display:block; margin:0; padding:0; text-align:center; font-style:italic;}
#intro #homepage h2{font-size:24px; margin-bottom:30px;}
#intro #homepage p{position:absolute; top:85px; right:100px; width:350px; z-index:1;}
#intro #homepage p strong{color:#091306; background-color:transparent; font-style:normal;}
#intro #homepage ul{margin:0; padding:0; list-style:none;}
#intro #homepage li{float:left; margin:0 0 -3px 0; padding:0;}
#intro #homepage li.second{padding-top:80px;}
#intro #homepage li.third{padding-top:160px;}
/* ----------------------------------------------Content-------------------------------------*/
#container{padding:20px 0; line-height:1.4em;}
#container h1, #container h2, #container h3, #container h4, #container h5, #container h6{margin:0 0 15px 0; color:#081306; background-color:#5D8B39;}
#container #content{display:block; float:left; width:600px;}
#container #column{display:block; float:right; width:300px;}
/* ----------------------------------------------Featured Blocks-------------------------------------*/
#container .featured{display:block; width:100%; margin:0; padding:0;}
#container .featured .box{display:block; float:left; width:280px; margin:0 60px 0 0; padding:0;}
#container .featured .last{margin:0;}
#container .featured h2{font-weight:bold;}
#container .featured ul{margin:0; padding:0; list-style:none;}
#container .featured li{margin:0 0 20px; padding:0;}
#container .featured li a.readmore{font-style:italic;}
#container .featured li div.imgholder{display:block; float:left; margin:0 10px 0 0; border:5px solid #77993E;}
/* ----------------------------------------------Copyright-------------------------------------*/
#copyright{padding:20px 0; font-size:12px;}
#copyright p{margin:0; padding:0;}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="scripts/cufon-yui.js" type="text/javascript"></script>
<script src="scripts/Delicious_700-Delicious_italic_500.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('.Delicious_700', { fontFamily: 'Delicious', fontWeight: '700' });
Cufon.replace('.Delicious_500', { fontFamily: 'Delicious', fontWeight: '500', fontStyle: 'italic' });
</script>
</head>
<body>
<!-- START PAGE SOURCE -->
<div class="wrapper col1">
<div id="header" class="clear">
<div class="fl_left">
<h1 class="Delicious_700"><a href="#">Theme Marketplace</a></h1>
</div>
<div class="fl_right clear">
<ul>
<li class="first"><a href="#">Contact</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Themes</a></li>
<li><a href="styling.html">Styling</a></li>
<li class="last active"><a href="index.html">Home</a></li>
</ul>
</div>
</div>
</div>
<div class="wrapper col2">
<div id="intro">
<!-- ## Homepage Specific ## -->
<div id="homepage">
<h2 class="Delicious_500">The leading source for high-quality, affordable, and user-friendly WordPress themes.</h2>
<p><strong>Limited Time Offer:</strong> 25% off any theme purchase.<br />
Use coupon code "DesignMag" at checkout</p>
<ul class="clear">
<li class="first"><a href="#"><img src="theme-marketplace-images/placeholders/420x455.gif" alt="" /></a></li>
<li class="second"><a href="#"><img src="theme-marketplace-images/placeholders/300x375.gif" alt="" /></a></li>
<li class="third"><a href="#"><img src="theme-marketplace-images/placeholders/240x295.gif" alt="" /></a></li>
</ul>
</div>
<!-- / ### -->
</div>
</div>
<div class="wrapper col3">
<div id="container">
<div class="featured clear">
<!-- Box 1 -->
<div class="box">
<h2>OUR AVAILABLE THEMES</h2>
<ul>
<li class="clear">
<div class="imgholder"><img src="theme-marketplace-images/placeholders/100x100.gif" alt="" /></div>
<a href="#"><strong>Clean Blog Theme</strong></a><br />
A simple, elegant theme that is well-suited for personal blogging.<br />
<a href="#" class="readmore">More info</a></li>
<li class="clear">
<div class="imgholder"><img src="theme-marketplace-images/placeholders/100x100.gif" alt="" /></div>
<a href="#"><strong>Gallery Theme</strong></a><br />
Use WordPress to power a gallery site or your online portfolio.<br />
<a href="#" class="readmore">More info</a></li>
<li class="clear last">
<div class="imgholder"><img src="theme-marketplace-images/placeholders/100x100.gif" alt="" /></div>
<a href="#"><strong>Non-Profit Theme</strong></a><br />
An attractive theme created with non-profit organisations in mind.<br />
<a href="#" class="readmore">More info</a></li>
</ul>
</div>
<!-- Box 2 -->
<div class="box">
<h2>FROM THE BLOG</h2>
<ul>
<li><a href="#"><strong>Themes Now Ready for WP 2.8.1</strong></a><br />
Updates have been made to all themes to fix any bugs involved with upgrading to the latest version of WP. To get the new…<br />
<a href="#" class="readmore">Read more</a></li>
<li><a href="#"><strong>New Color Schemes Coming Soon!</strong></a><br />
We have been working to add new features to the existing themes, including more colour schemes. The new colour schemes…<br />
<a href="#" class="readmore">Read more</a></li>
<li class="last"><a href="#"><strong>New Theme in Development</strong></a><br />
There is a new theme in development that we are very excited about. We're nearing completion and a sneak peak should…<br />
<a href="#" class="readmore">Read more</a></li>
</ul>
</div>
<!-- Box 3 -->
<div class="box last">
<h2>WHAT OUR CLIENTS SAY</h2>
<ul>
<li><cite>"Theme Marketplace provides an excellent level of quality in the design of their themes and very reasonable prices."</cite><br />
<a href="#" class="readmore">John Doe - www.example.com</a></li>
<li><cite>"I've bought other premium themes before, but Theme Marketplace support far surpasses the level of support offered by the competition. I recommend their themes to anyone."</cite><br />
<a href="#" class="readmore">Bob Smith - www.example.com</a></li>
<li class="last"><cite>"The extra options in the WordPress dashboard make Theme Marketplace very user-friendly. I'm happy that I made the right decision when purchasing my theme."</cite><br />
<a href="#" class="readmore">Jane Doe - www.example.com</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="wrapper col4">
<div id="copyright" class="clear">
<p class="fl_left">Copyright © 2010 - <a href="#">SiteName</a>, All Rights Reserved</p>
<p class="fl_right">Coded by: <a href="http://www.design-coder.com/" target="_blank">PSD to HTML</a></p>
</div>
</div>
<script type="text/javascript">Cufon.now();</script>
<!-- END PAGE SOURCE -->
</body>
</html>
Related examples in the same category