purpleperfection
<!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>Purple Perfection</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<style type='text/css'>
/* -------- Design -> Andrew Strojny -> http://www.andrewstrojny.com ------------ please do not remove ---------- */
/* -----IE Hack----- */
html {
font-size: 100%;
}
/* -----Body, Container, Header----- */
body {
font-family: helvetica, arial, sans-serif;
min-width: 760px;
text-align: center;
font-size: .8em;
background-color: #3C035A;
color: #333333;
}
#container {
width: 760px;
text-align : left ;
margin-left : auto ;
margin-right : auto ;
background-color:#E4BBFD;
background-image: url(purpleperfection-images/top.gif);
background-repeat: no-repeat;
background-position: top center;
}
#header {
padding: 5em 0 0 0;
text-align: center;
}
/* -----Menu------Courtesy of CSS Play - http://www.cssplay.co.uk/menus/flickerfree_mk2.html------ */
#menu {
position: relative;
width: 600px;
height: 50px;
background: transparent url(purpleperfection-images/menu.gif) 0 0 no-repeat;
overflow: hidden;
margin: 2em auto 1em auto;
z-index: 10;
}
#menu ul {
margin: 0;
padding: 0;
}
#menu li {
list-style-type: none;
display: inline;
width: 100px;
height: 50px;
}
#menu a {
display: block;
width: 100px;
padding-top: 50px;
height: 0;
text-decoration: none;
float: left;
background: transparent url(purpleperfection-images/menuhover.gif) -110px -60px no-repeat;
overflow: hidden;
outline: none;
}
* html #menu a:link, * html #menu a:visited {height:50px; he\ight:0;}
#menu a:hover {
background-position: top right;
z-index: 50;
}
* html #menu a:hover {height:50px; he\ight:0;}
#lbox {
width: 605px;
}
/* ------Main Content Box----- */
#content {
width: 680px;
margin-left : auto;
margin-right : auto;
padding:0 0 2.5em 0;
background-color: #E4BBFD;
}
/* -----Content Header----- */
#content span.content_title {
padding-left: 1em;
font-family: Times, serif;
font-size: 1.6em;
font-style: italic;
margin-left: 1em;
}
/* ------Round Inner Content Box------ Courtesy of http://kalsey.com/2003/07/rounded_corners_in_css/ ------- */
.roundcont {
width: 100%;
background-color: #EFDBFF;
}
.roundcont p {
margin: 1em 2em;
}
.roundtop {
background: url(purpleperfection-images/tr.gif) no-repeat top right;
}
.roundbottom {
background: url(purpleperfection-images/br.gif) no-repeat top right;
}
img.corner {
width: 19px;
height: 19px;
border: none;
display: block !important;
}
/* -----Float Images----- */
.floatright {
margin: 0 2em 0 0;
float: right;
}
.floatleft {
float:left;
}
/* -----List----- */
.list {
margin: 0 0 0 2.5em;
padding: 0 0 0 2.5em;
}
/* -----Links----- */
a {
color: #3C035A;
outline: none;
}
a:hover {
background-color: #3C035A;
color: #EFDBFF;
outline: none;
}
/* -----Footer----- */
#footer {
clear: both;
}
</style>
</head>
<body>
<div id="container">
<div id="header"> <a href="http://www.free-css.com/"><img src="purpleperfection-images/header.gif" border="0" alt=""/></a> </div>
<div id="menu">
<ul>
<li><a href="http://www.free-css.com/" id="Home">Home</a></li>
<li><a href="http://www.free-css.com/" id="Services">Services</a></li>
<li><a href="http://www.free-css.com/" id="Portfolio">Portfolio</a></li>
<li><a href="http://www.free-css.com/" id="AboutUs">About Us</a></li>
<li><a href="http://www.free-css.com/" id="Raves">Raves</a></li>
<li><a href="http://www.free-css.com/" id="Contact">Contact</a></li>
</ul>
</div>
<div id="content">
<div class="roundcont">
<div class="roundtop"> <img src="purpleperfection-images/tl.gif" alt="" width="19" height="19" class="corner" style="display: none"/> </div>
<span class="content_title">Welcome To Purple Perfection</span>
<p><em>Purple Perfection</em> is a unique purple tableless design.</p>
<p>I made this design for a client recently and decided to submit a simplified version for everyone to see and use. It validates <a href="http://validator.w3.org/check?uri=referer">XHTML 1.0 Transitional</a> and <a href="http://jigsaw.w3.org/css-validator/">Validates as CSS</a>. The inner content box is expandable in every direction, so you can set it wider if you like. The picture here of the purple flowers can be found on stock.xchnge and there are no restrictions on its use. The only thing I really ask is if you happen to use this design please keep the "design" graphic at the bottom linked back to me. Enjoy!</p>
<img class="floatright" src="purpleperfection-images/flowers.jpg" border="0" alt=""/>
<p>Some features of this design:</p>
<ul class="list">
<li>No Tables!</li>
<li>Validates HTML 4.01 Transitional</li>
<li>Validates CSS</li>
<li>All rounded corners</li>
<li>Header image uses <em>Ohio Script</em> on the top</li>
<li><em>Monotype Corsiva</em> on the bottom</li>
<li>Accents are <em>Printers Ornaments One</em></li>
<li>Looks good in IE!</li>
</ul>
<div class="roundbottom"> <img src="purpleperfection-images/bl.gif" alt="" width="19" height="19" class="corner" style="display: none"/> </div>
</div>
</div>
<div id="footer"><a href="http://www.andrewstrojny.com"><img src="purpleperfection-images/bottom.gif" border="0" alt=""/></a></div>
</div>
</body>
</html>
Related examples in the same category