blended
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-nz">
<head>
<title>Blended Purple 1024px</title>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
<style type='text/css'>
/*********************************************************************
AUTHOR: Luke Symes (luke.wpDesign.org)
PURPOSE: Applies a page shadow & rounded corners to "blended".
*********************************************************************/
/*ROUNDED CORNERS & SHADOWS*/
#wrap1 {
background:#fff url(blended-img/shadow/shadow-left.png) left repeat-y;
position:relative;
}
#wrap2 {
background:url(blended-img/shadow/shadow-right.png) right repeat-y;
}
/* Place these on top of the page shadow */
#header, #content, #footer {
position:relative;
z-index:5;
}
.cnr, .shdw, .ShdwHoriz {
position:absolute;
}
.cnr {
background-image:url(blended-img/rounded/rounded-corners.png);
height:10px;
width:10px;
}
.shdw {
background-image:url(blended-img/shadow/shdw-corners.png);
height:52px;
width:52px;
z-index:3;
}
.ShdwHoriz {
background:url(blended-img/shadow/horizontal-shadow.png) repeat-x;
height:11px;
width:100%;
z-index:2;
}
.TL, .TR {top:0;}
.BL, .BR {bottom:0;}
.TL, .BL {left:0;}
.TR, .BR {right:0;}
.TL {background-position:top left;}
.TR {background-position:top right;}
.BL {background-position:bottom left;}
.BR {background-position:bottom right;}
</style>
<link rel="stylesheet" type="text/css" href="css/layout.css" media="screen, tv, projection" />
<link rel="stylesheet" type="text/css" href="css/purple.css" media="screen, tv, projection" />
<link rel="stylesheet" type="text/css" href="css/rounded-corners-shadows.css" media="screen, tv, projection" />
<link rel="stylesheet" type="text/css" href="css/print.css" media="print" />
<!--[if IE]><link rel="stylesheet" type="text/css" href="css/ie.css" media="screen, tv, projection" /><![endif]-->
</head>
<body>
<div id="wrap1" class="width1024">
<div id="wrap2">
<div id="header">
<h1>blended</h1>
<h2>simple & splendid</h2>
<b class="cnr TL"></b> <b class="cnr TR"></b> </div>
<div id="navbar">
<ul class="floatLeft">
<li><a href="http://www.free-css.com/">Home</a></li>
<li><a href="800px.html">800px, 2 col</a></li>
<li class="current"><a href="1024px.html">1024px, 3 col</a></li>
<li><a href="fluid.html">Fluid, 3 col</a></li>
<li><a href="image-less.html">No Images</a></li>
</ul>
<div class="clear"></div>
</div>
<div id="contentWrap">
<div class="sideContent floatLeft">
<h3>More Colours</h3>
<ul>
<li><a href="orange-colour-scheme/">orange</a></li>
<li><a href="green-colour-scheme/">green</a></li>
</ul>
<h3>Categories</h3>
<ul>
<li><a href="http://www.free-css.com/">Internet</a></li>
<li><a href="http://www.free-css.com/">Design</a>
<ul>
<li><a href="http://www.free-css.com/">Web pages</a></li>
<li><a href="http://www.free-css.com/">Imagery</a></li>
</ul>
</li>
<li><a href="http://www.free-css.com/">Ubuntu Linux</a></li>
</ul>
</div>
<div class="sideContent floatRight">
<h3>More Colours</h3>
<ul>
<li><a href="orange-colour-scheme/">orange</a></li>
<li><a href="green-colour-scheme/">green</a></li>
</ul>
<h3>Categories</h3>
<ul>
<li><a href="http://www.free-css.com/">Internet</a></li>
<li><a href="http://www.free-css.com/">Design</a>
<ul>
<li><a href="http://www.free-css.com/">Web pages</a></li>
<li><a href="http://www.free-css.com/">Imagery</a></li>
</ul>
</li>
<li><a href="http://www.free-css.com/">Ubuntu Linux</a></li>
</ul>
</div>
<div id="mainContent" class="gotOneLeft gotOneRight">
<h3>Introduction</h3>
<p><a href="http://www.free-css.com/" class="thumbnail floatRight"><img src="blended-img/example.jpg" alt="" /></a> This fun web template was created with easy customisation in mind, using valid <abbr title="eXtensible HyperText Markup Language">XHTML</abbr> and <abbr title="Cascading Style Sheets">CSS</abbr>.,
fixed width (<a href="800px.html">800px</a>, or <a href="1024px.html">1024px</a>) and <a href="fluid.html">fluid width</a>.</p>
<h4>Layouts</h4>
<p>You are currently looking at the 1024px fixed width layout, with two sidebars.</p>
<h4>Colours</h4>
<p>You are currently looking at the <a href="http://www.free-css.com/">purple color scheme</a>.
Two more colour schemes are also included: <a href="orange-colour-scheme/">orange</a>, & <a href="green-colour-scheme/">green</a>.</p>
<h3>License</h3>
<p>This template is licensed under the <a href="http://creativecommons.org/licenses/by/2.5/">CC Attribution 2.5 license</a>, so please
keep the footer link to my site.</p>
</div>
</div>
<div id="footer">
<p class="floatLeft">© 2007 YourName </p>
<p class="floatRight smallText"><a href="http://luke.wpDesign.org">Design by Luke Symes</a></p>
<div class="clear"></div>
<b class="cnr BL"></b> <b class="cnr BR"></b> </div>
</div>
<b class="shdw TL"></b><b class="shdw TR"></b> <b class="shdw BL"></b><b class="shdw BR"></b> <b class="ShdwHoriz TL"></b><b class="ShdwHoriz BL"></b> </div>
</body>
</html>
Related examples in the same category