rust
<!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" xml:lang="English" lang="English">
<head>
<title>rusty_blue template</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Keywords" content="Felicia Mehl" />
<style type='text/css'>
body{
top:0;
left:0;
margin:0;
padding:0;
background-color:#800000;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#400000;
}
#contentbox{
background-color:#fff;
width:80%;
margin:auto;
border:0.1em solid #000;
height:1%;
}
#top{
background-color:#ffcc66;
font-size:xx-large;
font-style:italic;
font-weight:bold;
padding:0.7em;
color:#ffcc66;
border-bottom:0.05em solid #000;
font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
background-image:url(rust-images/lines.jpg);
background-repeat:repeat-x;
}
#menu{
background-color:#3a5b62;
text-align:center;
border-bottom:0.1em solid #000;
}
#submenu {
background-color:#ffcc66;
border-bottom:0.1em solid #3a5b62;
}
#content{
background-color:#ffffff;
margin:2%;
font-size:small;
}
#leftcol{
width:60%;
float:left;
}
#rightcol{
width:30%;
float:right;
}
#bottom{
clear:both;
background-color:#3a5b62;
color:#ffcc66;
text-align:right;
padding:10px;
font-size:small;
height:1%;
}
a{
color:#3a5b62;
}
a:active, a:hover {
color:#ffcc66;
}
#minitabs {
margin:0;
padding:0;
}
#minitabs li{
display:inline;
list-style-type:none;
}
#minitabs a{
line-height:2.2em;
font-weight:bold;
padding:0.6em 0.4em;
text-decoration:none;
color:#ffcc66;
background:#152822;
}
#minitabs a:active, #minitabs a:hover{
color:#fff;
}
#submenu_minitabs {
margin:0;
font-size:small;
text-align:center;
padding:0.3em;
}
#submenu_minitabs li{
list-style-type:none;
display:inline;
padding:0.2em;
}
#submenu_minitabs a{
text-decoration:none;
font-weight:bold;
color:#3a5b62;
padding:0.4em;
}
#submenu_minitabs a:active, #submenu_minitabs a:hover{
color:#aa1111;
}
h2.title{
color:#800000;
font-size:1.4em;
padding:0;
font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
}
h2.sidebar {
background-color:#3a5b62;
font-size:1.4em;
padding:0.3em;
color:#ffcc66;
border:0.05em solid #000;
font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
}
p.quote{
font-style:italic;
margin-left:4%;
margin-right:4%;
}
#bottom a {
color:#F9F3BB;
}
img {
border:0.1em solid #ccc;
margin:0.3em;
}
img.left{
float:left;
}
img.right{
float:right;
}
</style>
</head>
<body>
<div id="contentbox">
<div id="top">design template</div>
<div id="menu">
<ul id="minitabs">
<li><a href="index.html">link text</a></li>
<li><a href="index.html">link text</a></li>
<li><a href="index.html">link text</a></li>
<li><a href="index.html">link text</a></li>
<li><a href="index.html">link text</a></li>
</ul>
</div>
<div id="submenu">
<ul id="submenu_minitabs">
<li><a href="index.html">link text</a></li>
<li><a href="index.html">link text</a></li>
<li><a href="index.html">link text</a></li>
<li><a href="index.html">link text</a></li>
<li><a href="index.html">link text</a></li>
</ul>
</div>
<div id="content">
<div id="leftcol">
<h2 class="title">Header</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam auctor semper libero. Vestibulum at erat eget arcu sagittis adipiscing. Vestibulum odio nisi, scelerisque et, tempus et, adipiscing vitae, augue. Fusce consectetuer, <a href="index.html">elit sit amet viverra ornare</a>, odio eros luctus nisl, vel tempus felis quam et arcu. Proin id elit. Fusce rutrum mauris sit amet nibh viverra porttitor. Phasellus eu lorem vitae augue aliquet aliquam. Integer vestibulum viverra tellus. Aliquam est arcu, ullamcorper nec, molestie vitae, rutrum vitae, ligula. Vivamus vitae augue at dui consequat tempor.</p>
<p class="quote">Ut porttitor aliquam ligula. Quisque ultrices. Proin massa lectus, molestie sed, porta consequat, ornare ac, leo. Etiam pellentesque, nibh at interdum interdum, mauris nisl aliquet lorem, at sodales elit dolor id velit. Phasellus iaculis velit viverra magna. Nullam tincidunt molestie erat. Pellentesque justo. Ut elementum auctor dolor. Nam sagittis tempor purus. Morbi a sem non mi tempus feugiat. Integer tempor dolor non tortor. Ut ullamcorper sapien ut quam. Fusce posuere porttitor felis. Cras volutpat dignissim massa.</p>
<p>Aliquam sit amet augue in dui porttitor consectetuer. Nulla facilisi. Nunc suscipit, diam et dignissim consequat, sapien ante sodales orci, <a href="index.html">et lobortis tellus tortor</a> imperdiet dui. Donec volutpat nonummy dui. In hac habitasse platea dictumst. Suspendisse potenti. Vestibulum ultrices pharetra ligula. Nulla facilisi. In accumsan congue turpis. Integer lorem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas dui. Etiam sit amet dolor vitae nunc fermentum blandit. Donec tincidunt. Suspendisse odio diam, sagittis vitae, consectetuer vel, cursus sed, enim. Phasellus ac lacus. Ut luctus, sapien ut sagittis cursus, tellus justo aliquam purus, vel consequat massa ligula sit amet magna.</p>
</div>
<div id="rightcol">
<h2 class="sidebar">Sidebar</h2>
<p><img src="rust-images/trees.jpg" class="left" alt="sample picture" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam auctor semper libero. Vestibulum at erat eget arcu sagittis adipiscing. Vestibulum odio nisi, scelerisque et, tempus et, adipiscing vitae, augue. Fusce consectetuer, elit sit amet viverra ornare, odio eros luctus nisl, vel tempus felis quam et arcu. Proin id elit. Fusce rutrum mauris sit amet nibh viverra porttitor. Phasellus eu lorem vitae augue aliquet aliquam. Integer vestibulum viverra tellus. Aliquam est arcu, ullamcorper nec, molestie vitae, rutrum vitae, ligula. Vivamus vitae augue at dui consequat tempor.</p>
</div>
</div>
<div id="bottom"> © 2007 your name here<br/>
design by Felicia Mehl</div>
</div>
</body>
</html>
Related examples in the same category