MonsterBlue
<!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" xml:lang="en" >
<head>
<title>Monster Blue</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type='text/css'>
body {
font-family: "Times New Roman", Times, serif;
font-size: 16px;
color: #FFFFFF;
background: #000000;
}
.content, .top, .bottom {
background: #000000;
position: absolute;
margin-left: 50%;
left: -400px;
width: 700px;
}
.content {
background: url("MonsterBlue-images/background.png");
text-align: left;
margin-top: 341px;
height: 270px;
width: 700px;
}
.image {
background: url("MonsterBlue-images/head.gif");
height: 301px;
width: 323px;
position: absolute;
top: 19px;
margin-left: 50%;
left: 30px;
}
.top {
background: url("MonsterBlue-images/top.gif");
background-repeat:no-repeat;
background-position:bottom left;
margin-top: 99px;
height: 330px;
font-size:46px;
line-height: 80px;
font-family:Georgia, "Times New Roman", Times, serif;
color: #00486C;
padding-left: 120px;
font-weight:bolder;
}
.bottom {
background: url("MonsterBlue-images/bottom.png");
margin-top: 532px;
height: 142px;
padding-left: 107px;
line-height: 75px;
font-weight: bold;
font-size:13px;
color: #126336;
}
.contentb {
width: 490px;
height: 300px;
margin-left: 140px;
margin-top: -70px;
}
#navigation {
color: #126336;
font-weight:bold;
position:absolute;
margin-left: 50%;
left:280px;
top:330px;
width:100px;
text-align:left;
line-height:14px;
}
b {color:#126336}
a,a b,a:link,a:visited {
color:#00486C;
text-decoration:none;
}
a b:hover,a:hover {
color:#00A2B4
}
</style>
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon" />
</head>
<body>
<!-- http://www.sxc.hu/photo/439069 -->
<div class="image"> </div>
<div class="top"><br /> Website name </div>
<div class="bottom"><br />© Your Name, 2006 | design by <a href="http://www.berrie.co.nr">Berrie Leigh</a></div>
<div class="content"><div class="contentb">
<h2>Heading</h2>
<p>Lorem ipsum dolor sit amet, <i>consectetuer</i> <b>adipiscing</b> elit. Proin <a href="#">consectetuer</a>, sem ac lobortis ornare, purus leo accumsan eros, vestibulum tempor justo metus vel lectus. Duis at velit. Quisque arcu purus, lacinia vitae, accumsan non, venenatis eget, tortor. Quisque blandit porta metus. Nulla cursus, pede non bibendum blandit, quam diam fringilla nisi, ut vulputate tortor lorem sed felis. In nunc. Proin ut enim. Curabitur eu mi in dui aliquam vulputate. Sed sapien mi, fermentum et, mattis vel, bibendum id, ligula. Nullam tincidunt dictum erat.</p>
<ul>
<li>Written in XHTML 1.0 Strict</li>
<li>CSS based</li>
</ul>
<p>Pellentesque non magna. Nulla accumsan odio id sapien. In arcu massa, vulputate in, semper at, scelerisque sit amet, nisl. Etiam diam sapien, porttitor id, gravida eu, molestie sit amet, lorem. </p>
</div></div>
<div id="navigation">
« <a href="#">home</a><br />
« <a href="#">link</a><br />
« <a href="#">gallery</a><br />
« <a href="#">about</a><br />
« <a href="#">contact</a><br />
« <a href="#">link</a><br />
« <a href="#">forum</a><br />
« <a href="#">news</a><br />
« <a href="#">stuff</a><br />
« <a href="#">help</a> <br /></div>
</body>
</html>
Related examples in the same category