purple_beauty
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />
<style type='text/css'>
/* Customize your layout here, for support please visit www.webart.no/forum */
* {margin: 0;
padding: 0;}
body {
background-color: #000000;
color: #FFFFFF;
background-image: url(purple_beauty-images/body_bg.jpg);
background-repeat: repeat-y;
background-position: center;
background-attachment: fixed;
}
/* Begin Structure of site '*/
#container {
width: 896px;
padding:3px;
margin: 0px auto;
font-family: Arial, Helvetica, sans-serif;
font-size: .8em;
color: #FFFFFF;
background-color: #000000;
}
#header {margin-top: 1px;
background-image: url(purple_beauty-images/header_low.jpg);
height: 320px;
border: 1px solid #FFFFFF;
}
#wrapper {
margin-top: 7px;
background-image: url(purple_beauty-images/wrapper_bg.gif);
background-repeat: repeat-y;
}
#left {
float: left;
width: 155px;
background-image: url(purple_beauty-images/round_corner.gif);
background-repeat: no-repeat;
color: #FFFFFF;
background-color: #C138C1;
padding: 5px;
}
#right {
background-color: #C138C1;
color: #FFFFFF;
float: right;
width: 155px;
background-image: url(purple_beauty-images/round_corner_r.gif);
background-repeat: no-repeat;
background-position: right top;
padding: 5px;
}
#content {
margin-left: 170px;
margin-right: 170px;
margin-bottom: 5px;
color: #FFFFFF;
background-color: #5A3D59;
padding: 20px;
border: 0px solid #FFFFFF;
}
#footer {
clear: both;
background-color: #000000;
color: #FFFFFF;
padding: 4px;
border: 1px solid #FFFFFF;
background-image: url(purple_beauty-images/bar_bg.gif);
text-align: center;
}
/* Begin text formatting and image floats */
.imageleft{
float: left;
margin-right: 7px;
margin-bottom: 1px;
}
p{
margin-top: 15px;
margin-bottom: 15px;
}
blockquote{
margin-top: 15px;
margin-bottom: 15px;
padding: 30px;
border: 1px dotted #FFFFFF;
background-image: url(purple_beauty-images/blockquote.jpg);
background-repeat: no-repeat;
}
h1{
background-color: #7C597C;
padding: 5px;
font-size: 1.3em;
color: #FFFFFF;
margin-top: 5px;
margin-bottom: 15px;
border-top: 1px solid white;
border-bottom: 1px solid white;
}
h2{
background-color: #7C597C;
padding: 5px;
font-size: 1.3em;
color: #FFFFFF;
margin-top: 15px;
margin-bottom: 15px;
border-top: 1px solid white;
border-bottom: 1px solid white;
}
.list {
margin-left: 25px;
list-style-image: url(purple_beauty-images/list_bullet.png);
margin-top: 30px;
}
a:link {
color: #FFFFFF;
background-color: inherit;
}
a:visited {
color: #FFFFFF;
background-color: inherit;
}
a:hover {
color: #FF00FF;
background-color: inherit;
}
a:active {
color: #FFFFFF;
background-color: inherit;
}
/********** Begin top navigation *************/
#navlist
{
height: 2.6em!important;
height: 2.7em;
margin-top: 7px;
padding: 1.7em 0em .3em .4em;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
border: 1px solid #FFFFFF;
}
#navlist a, #navlist a:link, #navlist a:visited
{
border: 1px solid #CCCCCC;
padding: 1.2em;
padding-left: 0.5em;
padding-right: 0.5em;
color: #FFFFFF;
text-decoration: none;
}
#navlist a:hover, #navlist a:active, #navlist a:focus
{
border: 1px solid #FFFFFF;
padding: 1.1em;
padding-left: 0.5em;
padding-right: 0.5em;
text-decoration: none;
color: #FFFFFF;
}
#navlist li
{
padding-right: 1px;
display: inline;
font-size: 1em;
}
#navlist ul
{
margin: 0px;
padding: 0px;
}
#navlist #active a {
background-color: #000000;
color: #FFFFFF;
font-size: 1em;
font-weight: bold;
}
</style>
<title>Your custom title</title>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="index.html" id="current">Home</a></li>
<li><a href="#"> link one</a></li>
<li><a href="#">link two</a></li>
<li><a href="#">link three</a></li>
<li><a href="#">link four</a></li>
<li><a href="#">link five</a></li>
</ul>
</div>
<div id="wrapper">
<div id="left">
<ul class="list">
<li><a href="#">vertical links</a></li>
<li><a href="#">vertical links</a></li>
<li><a href="#">vertical links</a></li>
<li><a href="#">vertical linksr</a></li>
</ul>
</div>
<div id="right">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam aliquet. Nunc quis tellus. Praesent eros turpis, laoreet nec, iaculis vitae, tincidunt ac, tellus. Nam metus nisl, sollicitudin eget, malesuada at, rutrum at, libero. Cras hendrerit magna non nunc. Cras elit nibh, rutrum elementum, lacinia in, molestie sed, enim. Fusce ut elit. Cras nec arcu at purus commodo feugiat. Maecenas interdum nunc in sapien. Nulla facilisi. Phasellus ut neque. </p>
</div>
<div id="content">
<h1>This is heading 1 and a floated image </h1>
<p><img src="purple_beauty-images/girl.jpg" alt="Girl" width="151" height="99" class="imageleft" />This template is a free version of Purple Beauty created by Dieter Schneider 2006 for <a href="http://www.webart.no">www.webart.no.</a> If you need help to customize this template or have other questions about webdesign visit our support/community at <a href="http://www.webart.no/forum">www.webart.no/forum</a> You have to keep the link to webart.no in your footer, however if you want to remove it and get the PSD file you can buy this template for 5 dollar at <a href="http://www.webart.no/webshop/index.php?main_page=index&cPath=10">www.webart.no/webshop.</a> The image of the girl are from www.sxc.hu. This template is valid xhtml 1.1 and is tested in the latest versions of FF, IE and Opera.</p>
<h2>Heading 2 and a blockquote</h2>
<p>Morbi sem pede, malesuada ac, malesuada eget, imperdiet ac, tortor. Maecenas sed augue ac dui euismod vehicula. Phasellus ligula nisi, volutpat nec, aliquam nec, varius id, quam. Donec sagittis. Nulla a tellus at lacus ultricies interdum. Aenean dignissim ultricies quam. Mauris hendrerit cursus sapien. Sed gravida, mauris a gravida pharetra, augue felis pellentesque nunc, eu iaculis justo lacus et tellus. Maecenas eget justo.</p>
<blockquote><p>This is a blockquote . Phasellus gravida augue vitae magna. Donec vehicula, neque sed malesuada gravida, nunc augue pellentesque libero, nec laoreet purus dui a mi. Sed magna. Ut euismod sem vel nisi. In in quam quis sem suscipit semper. Nam ac felis. Phasellus quis enim. Duis blandit lacus at dolor. Proin tincidunt lacus id ante. Curabitur iaculis. </p></blockquote>
<p>Nullam elementum sem nec urna. Etiam tincidunt elit id tellus. Etiam vehicula dolor non risus. Proin porta. Phasellus eleifend velit sit amet dui. Proin facilisis ipsum in libero aliquam varius. Quisque ut lacus. Morbi lectus. Nam nonummy viverra orci. Duis vulputate, ipsum eget feugiat bibendum, massa justo mollis tellus, in luctus nibh leo posuere mauris. </p>
</div>
</div>
<div id="footer">
<p>Design by Dieter Schneider 2006</p>
<p> Visit <a href="http://www.webart.no/webshop">www.webart.no</a> for more</p>
</div>
</div>
</body>
</html>
Related examples in the same category