premiumtemplateshop
<!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>PremiumTemplateShop</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: PremiumTemplateShop
Coded By: Design Coder - http://www.design-coder.com/
Design By: http://designm.ag/tutorials/template-shop-layout-psd/
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:#424141;}
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 #9C2F23;}
.col1, .col1 a{color:#DFD8D8; background-color:#5F120A;}
.col2{color:#DFD8D8; background:url("premiumtemplateshop-images/intro_bg.png") top left repeat-x transparent;}
.col3{color:#DFD8D8; background-color:#5F120A; border-top:1px solid #9C2F23; border-bottom:1px solid #7C7B7B;}
.col4{color:#DFD8D8; background-color:#545454;}
.col4 a{color:#230A0B; background-color:#545454;}
.col5{border-top:1px solid #7C7B7B;}
.col5, .col5 a{color:#DFD8D8; background-color:#424141;}
/* ----------------------------------------------Generalise-------------------------------------*/
#header, #intro, #shout, #container, #copyright{position:relative; margin:0 auto; display:block; width:960px;}
/* ----------------------------------------------Header-------------------------------------*/
#header{padding:20px 0;}
#header h1{margin:0; padding:0; font-size:30px; line-height:normal;}
#header ul{margin:7px 0 0 0; padding:0; list-style:none;}
#header li{display:inline; margin-left:20px;}
#header li.first{margin-left:0;}
/* ----------------------------------------------Intro-------------------------------------*/
#intro{}
#intro #homepage{display:block; width:960px; height:350px; padding:50px 0 0 0; overflow:hidden; background:url("premiumtemplateshop-images/homepage_bg.jpg") top left no-repeat;}
#intro #homepage .fl_left{display:block; width:325px; margin:0; padding:25px 0 0 0; text-align:center;}
#intro #homepage .fl_left p{margin:0 0 75px 0; padding:0; font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; font-size:18px;}
#intro #homepage .fl_left ul{display:block; margin:0; padding:0; list-style:none;}
#intro #homepage .fl_left li{display:inline-block; width:292px; height:52px; margin:0 0 30px 0; padding:10px 0 0 0; background:url("premiumtemplateshop-images/button_bg.gif") top left no-repeat; font-weight:bold;}
#intro #homepage .fl_left li a{font-size:18px; color:#230A0B; background-color:transparent;}
#intro #homepage .fl_left li.last{margin-bottom:0;}
#intro #homepage .fl_right{display:block; width:580px; height:350px;}
/* ----------------------------------------------Shout-------------------------------------*/
#shout{padding:20px 0; font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; font-size:18px; text-align:center;}
#shout strong, #shout a{color:#E57B70; background-color:#5F120A;}
/* ----------------------------------------------Content-------------------------------------*/
#container{padding:40px 0; line-height:1.4em;}
#container h1, #container h2, #container h3, #container h4, #container h5, #container h6{margin:0 0 15px 0; color:#5F120A; background-color:#545454;}
#container .content{display:block; float:left; width:600px;}
#container .column{display:block; float:right; width:300px;}
/* ----------------------------------------------Featured Blocks-------------------------------------*/
#container .content .featured{display:block; width:100%; margin:0; padding:0;}
#container .content .featured ul{margin:0; padding:0; list-style:none; clear:both;}
#container .content .featured li{display:block; float:left; width:280px; margin:0 40px 35px 0; padding:0;}
#container .content .featured li.even{margin-right:0;}
#container .content .featured li img{float:left; margin:0 10px 0 0; padding:0;}
#container .content .featured li div{padding:4px 0 0 0;}
/* ----------------------------------------------Copyright-------------------------------------*/
#copyright{padding:15px 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/ChunkFive_400.font.js" type="text/javascript"></script>
<script type="text/javascript">Cufon.replace('.chunkfive');</script>
</head>
<body>
<!-- START PAGE SOURCE -->
<div class="wrapper col1">
<div id="header" class="clear">
<div class="fl_left">
<h1 class="chunkfive"><a href="#">PremiumTemplateShop</a></h1>
</div>
<div class="fl_right">
<ul>
<li class="first active"><a href="#">Home</a></li>
<li><a href="#">Templates</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Members</a></li>
<li><a href="#">Support</a></li>
<li class="last"><a href="#">Contact</a></li>
</ul>
</div>
</div>
</div>
<div class="wrapper col2">
<div id="intro">
<!-- ## Homepage Specific ## -->
<div id="homepage" class="clear">
<div class="fl_left">
<p>High-quality templates for affordable prices. Give your business the professional image that gets attention.</p>
<ul>
<li><a href="#">Shop Indvidual Templates</a><br />
Starting at Just $25</li>
<li class="last"><a href="#">Join the Club!</a><br />
Get Access to All Templates for $49</li>
</ul>
</div>
<div class="fl_right"><img src="premiumtemplateshop-images/placeholders/580x350.jpg" alt="" /></div>
</div>
<!-- / ### -->
</div>
</div>
<div class="wrapper col3">
<div id="shout"><strong>Limited Time Special:</strong> Buy any template and get a second template of your choice for free! <a href="#">See the details</a>.</div>
</div>
<div class="wrapper col4">
<div id="container" class="clear">
<div class="content">
<h2>Buy Any of Our Templates and Benefit from These Features</h2>
<div class="featured clear">
<ul>
<li class="odd"><img src="premiumtemplateshop-images/placeholders/check.gif" alt="" />
<div><a href="#"><strong>Semantic markup</strong></a> including valid HTML and CSS code.</div>
</li>
<li class="even clear"><img src="premiumtemplateshop-images/placeholders/tablet.gif" alt="" />
<div><a href="#"><strong>Professionally designed</strong></a> to give your business the look it deserves.</div>
</li>
<li class="odd"><img src="premiumtemplateshop-images/placeholders/monitor.gif" alt="" />
<div><a href="#"><strong>Cross browser compatibility</strong></a> to give users a consistent experience.</div>
</li>
<li class="even clear"><img src="premiumtemplateshop-images/placeholders/support.gif" alt="" />
<div><a href="#"><strong>Support forums</strong></a> where you can get answers to your questions.</div>
</li>
<li class="odd"><img src="premiumtemplateshop-images/placeholders/mail.gif" alt="" />
<div><a href="#"><strong>Contact forms</strong></a> that allow your visitors to get in touch with you.</div>
</li>
<li class="even clear"><img src="premiumtemplateshop-images/placeholders/clock.gif" alt="" />
<div><a href="#"><strong>Future updates</strong></a> on any template purchase you make.</div>
</li>
<li class="odd"><img src="premiumtemplateshop-images/placeholders/folder.gif" alt="" />
<div><a href="#"><strong>Well-organised code</strong></a> and file structure for easy customisation.</div>
</li>
<li class="even clear"><img src="premiumtemplateshop-images/placeholders/palette.gif" alt="" />
<div><a href="#"><strong>Multiple colour schemes</strong></a> alllow you to choose the look you want.</div>
</li>
</ul>
</div>
</div>
<div class="column">
<h2>About PremiumTemplateShop</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam congue neque eget velit rhoncus a ornare nisi hendrerit. Mauris eget justo vel dui commodo dapibus. Maecenas a nibh urna. Aliquam aliquet tempus nisl et vestibulum.</p>
<p>Cras aliquet lacus id arcu interdum blandit. Etiam eleifend, massa congue lacinia pellentesque, erat nulla semper metus, id vulputate sapien ligula sed sem. Phasellus rhoncus, est non faucibus rutrum, eros purus porttitor metus, in interdum dui urna eu odio. Donec eu massa pretium lectus sollicitudin consequat. Donec eu massa pretium lectus sollicitudin.</p>
</div>
</div>
</div>
<div class="wrapper col5">
<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