simplyred
<!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">
<head>
<title>Simply Red</title>
<style type='text/css'>
/*
Author : Christopher Robinson
Email : christopher@edg3.co.uk
Website : http://www.edg3.co.uk/
*/
* {
border:0;
margin:0;
padding:0;
}
/* general */
a {
color:#b3000a;
text-decoration:none;
}
a:hover {
color:#555;
text-decoration:none;
}
/* body */
body {
background:#343434 url('simplyred-image/background_body.jpg') 0 50% repeat-x;
color:#666;
font:0.8em "trebuchet ms", helvetica, sans-serif;
}
/* container */
#container {
background:url('simplyred-image/background_container.jpg') no-repeat;
height:530px;
left:50%;
margin:-265px 0 0 -380px;
position:absolute;
top:50%;
width:760px;
}
/* navigation */
#navigation {
height:88px;
padding:32px;
width:696px;
}
#navigation ul {
list-style:none;
}
#navigation ul li {
float:right;
height:88px;
list-style:none;
width:75px;
}
#navigation ul li a {
color:#fff;
display:block;
height:50px;
line-height:50px;
padding:50px 0 0;
text-align:center;
width:75px;
}
#navigation ul li a:hover {
background:url('simplyred-image/navigation.jpg') repeat-x;
color:#111;
}
#navigation ul li a.active {
background:url('simplyred-image/navigation.jpg') repeat-x;
}
/* content */
#content {
height:320px;
overflow:auto;
padding:0 42px;
width:676px;
}
#content h1 {
color:#333;
font-size:200%;
}
/* footer */
#footer {
color:#fff;
height:20px;
padding:35px;
text-align:right;
width:696px;
}
#footer a {
color:#fff;
}
</style>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="container">
<div id="navigation">
<ul>
<li><a href="http://www.free-css.com/">link four</a></li>
<li><a href="http://www.free-css.com/">link three</a></li>
<li><a href="http://www.free-css.com/" class="active">active link</a></li>
<li><a href="http://www.free-css.com/">link one</a></li>
</ul>
</div>
<div id="content">
<h1>Important</h1>
<p>Licensed under the <a target="_blank" href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attribution 2.5</a>. I have left the actual text design style very basic for you to add your own text / header / quotes / list etc. styles yourself.</p>
<br />
<h1>About</h1>
<p>Designed by Christopher Robinson of EDG3.</p>
<br />
<p>This template would be great as a simple personal site which only needs little content and a few pages, you are free to use this design for whatever purpose you wish as long as you do <strong>NOT</strong> sell it or claim it as your own and you leave the link back to my site at the bottom of your pages.</p>
<br />
<p>This design is heavily image based yet only uses roughly 100kb of images in its construction.</p>
<br />
<p>A logo could be simply inserted into the main image file via editing it in any paint / photoshop program if needed / wanted. Now for some filler text so you can see the scrolling content area.</p>
<br />
<h1>header two</h1>
<p>Volutpat at varius sed sollicitudin et, arcu. Vivamus viverra. Nullam turpis. Vestibulum sed etiam. Lorem ipsum sit amet dolore. Nulla facilisi. Sed tortor. Aenean felis. Quisque eros. Cras lobortis commodo metus. Vestibulum vel purus. In eget odio in sapien adipiscing blandit. Quisque augue tortor, facilisis sit amet, aliquam, suscipit vitae, cursus sed, arcu lorem ipsum dolor sit amet. Fermentum at, varius pretium, elit. Mauris egestas scelerisque nunc. Mauris non ligula quis wisi laoreet malesuada. In commodo. Maecenas lobortis cursus dolor.</p>
<br />
<h1>header three</h1>
<p>Volutpat at varius sed sollicitudin et, arcu. Vivamus viverra. Nullam turpis. Vestibulum sed etiam. Lorem ipsum sit amet dolore. Nulla facilisi. Sed tortor. Aenean felis. Quisque eros. Cras lobortis commodo metus. Vestibulum vel purus. In eget odio in sapien adipiscing blandit. Quisque augue tortor, facilisis sit amet, aliquam, suscipit vitae, cursus sed, arcu lorem ipsum dolor sit amet. Fermentum at, varius pretium, elit. Mauris egestas scelerisque nunc. Mauris non ligula quis wisi laoreet malesuada. In commodo. Maecenas lobortis cursus dolor.</p>
</div>
<div id="footer"> Copyright © <a href="http://www.free-css.com/">Simply Red</a> 2007
|
Designed by <a href="http://www.edg3.co.uk/">edg3.co.uk</a> |
Valid <a target="_blank" href="http://jigsaw.w3.org/css-validator/">CSS</a> & <a target="_blank" href="http://validator.w3.org/">XHTML</a> </div>
</div>
</body>
</html>
Related examples in the same category