spacetravelisboring
<!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>Space Travel Is Boring</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
/* ------------------Designed by collin grasley - 2006
submitted to the public domain - - no link back required, but if ya do use it let me know!
collingrasley@gmail.com ---------------------------*/
/*
------------------------------------------------------
template number 02
------------------------------------------------------
*/
/* the style council */
body {
margin: 0 auto;
color: #4D4D4D;
font-family: Tahoma, Geneva, Arial, Helvetica, sans-serif;
font-size: 0.8em;
line-height: 1.8em;
text-align: left;
background: url(spacetravelisboring-imgs/bg.gif) repeat;
}
a {
color: #1c6ea8;
}
a:hover {
color: #2699eb;
}
h1{
font:30px Trebuchet MS;
color: #1c6ea8;
margin: 15px 0 15px 0;
padding-left: 15px;
}
h2 {
font:22px Trebuchet MS;
color: #1c6ea8;
margin: 15px;
}
h3 {
font:20px Trebuchet MS;
color: #1c6ea8;
margin: 15px;
}
p {
margin: 5px 15px 5px 15px;
}
blockquote p {
font:160% Georgia;
color:#aaa;
padding:5px;
line-height:25px;
}
.highlight {
color: #99cc00;
font-weight:bold;
}
/* content stuff */
#container {
width: 765px;
text-align: left;
margin: 0px auto 0 auto;
background: #282828;
padding: 0 !important;
line-height: 1.8em;
border-left: 10px solid #000;
border-right: 10px solid #000;
}
#header-{
height: 200px;
background: url(spacetravelisboring-imgs/banner.jpg) no-repeat;
border-top: 2px solid #000;
border-bottom: 2px solid #000;
}
#header-h1 {
float: left;
color: #000;
font:45px Trebuchet MS;
margin: 40px 0 0 15px;
background: none;
font-weight:bold;
}
#content {
float: left;
width: 470px;
margin: 10px 10px 10px 10px;
background:#282828;
color:#787878;
padding: 0;
font-family: Tahoma, Geneva, Arial, Helvetica, sans-serif;
border:1px dotted #888;
}
#sidebar {
float: right;
width: 254px;
margin: 10px 10px 0 0;
padding: 0;
background:#282828;
color: #787878;
border:1px dotted #888;
}
/* Side bar thumbs */
.thumbs img{
position:relative;
padding:1px;
margin:2px 3px 3px 2px;
border:2px solid #aaa;
background-color:inherit;
}
.thumbs img:hover{
border:2px solid #2699eb;
}
/* navigation!!!!!! */
#nav-top {
float: right;
margin: 5px 15px 0 0;
background:inherit;
}
#nav-top ul {
margin: 0;
padding: 2px;
background:inherit;
}
#nav-top li {
display: inline;
padding: 4px;
}
#nav-top a, #nav-top a:visited {
color: #000;
font-weight:bold;
text-decoration: none;
margin: 4px;
}
#nav-top a:hover, #nav-top a:visited:hover {
color: #aaa;
}
/* main navigation */
#mainnav {
margin: 2px 16px 2px 11px;
min-height: 30px;
background:inherit;
}
#mainnav ul {
height: 100%;
margin: 0;
padding: 0 0 0 10px;
}
#mainnav li {
list-style-type: none;
float: right;
width: auto;
margin: 7px 5px 0 5px;
}
#mainnav a:link, #mainnav a:visited {
display: block;
color: #aaa;
text-transform:uppercase;
font-weight: bold;
text-decoration: none;
padding: 1px 10px 2px 12px;
background:inherit;
border-bottom: 2px solid #1c6ea8;
}
#mainnav a:hover, #mainnav a:visited:hover {
color: #FFFFFF;
text-decoration: none;
padding: 1px 10px 2px 12px;
border-bottom: 2px solid #2699eb;
background:#212121;
}
/*sub main navigation */
#mainnavsub {
clear: both;
}
#mainnavsub ul {
margin: 0;
padding: 0 10px 0 10px;
}
#mainnavsub li {
list-style-type: none;
float: right;
margin: 4px 16px 0 2px;
padding-left: 8px;
}
#mainnavsub li a {
font-size:10px;
font-weight:bold;
text-transform:uppercase;
text-decoration: none;
color:#aaa;
}
#mainnavsub li a:hover {
text-decoration: none;
color:#fff;
}
/*right nav */
#nav-right ul {
list-style: none;
margin: 0;
padding: 0;
}
#nav-right {
margin: 10px;
}
#nav-right li {
display:block;
padding:0;
margin: 2px 0 2px 0px;
border-bottom: 1px dotted #888;
}
#nav-right li a {
display:block;
padding: 1px 1px 1px 6px;
text-decoration: none;
background:inherit;
color: #aaa;
}
#nav-right li a:hover{
background:#212121;
color: #fff;
}
/* footer */
#footer-contents {
clear: both;
text-align: right;
background:inherit;
margin: 0;
padding: 2px 0 2px 0;
border-top:1px dotted #aaa;
}
#footer-copy {
padding: 5px;
background:inherit;
margin: 4px 16px 4px 10px!important;
color: #FFFFFF;
}
#footer-copy a,#footer-copy a:visited {
color: #1c6ea8;
}
#footer-copy a:hover,#footer-copy a:visited:hover {
color: #aaa;
}
#footer-links{
font-size: 10px;
padding: 0;
margin: 10px 16px !important;
}
</head>
<body>
<div id="container">
<div id="header">
<h1>space travel is boring</h1>
<div id="nav-top">
<ul>
<li><a href="http://www.free-css.com/">lorem</a></li>
<li><a href="http://www.free-css.com/">lorem</a></li>
<li><a href="http://www.free-css.com/">lorem</a></li>
<li><a href="http://www.free-css.com/">lorem</a></li>
</ul>
</div>
<!--
End of top links
-->
</div>
<!--
Main Navigation
-->
<div id="mainnav">
<ul>
<li><a href="http://www.free-css.com/">contact us</a></li>
<li><a href="http://www.free-css.com/">clients</a></li>
<li><a href="http://www.free-css.com/">services</a></li>
<li><a href="http://www.free-css.com/">portfolio</a></li>
<li><a href="http://www.free-css.com/">about us</a></li>
<li><a href="http://www.free-css.com/">Home</a></li>
</ul>
</div>
<div id="mainnavsub">
<ul>
<li><a href="http://www.free-css.com/">Link Six</a></li>
<li><a href="http://www.free-css.com/">Link Five</a></li>
<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/">Link Two</a></li>
<li><a href="http://www.free-css.com/">Home</a></li>
</ul>
</div>
<div id="content">
<h1>space travel is boring</h1>
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
<h2>Lorem ipsum dolor sit amet.</h2>
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
<blockquote>
<p> "Lorem ipsum dolor sit amet. Lorem ipsum dolor sit <span class="highlight">amet, consetetur sadipscing elitr,</span> sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. " </p>
</blockquote>
<p>Lorem ipsum dolor , consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo sit amet duo <a href="http://www.free-css.com/">dolores et ea rebum.</a> Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<ul>
<li><a href="http://www.free-css.com/">At vero eos et accusam et justo duo dolores et ea rebum</a></li>
<li><a href="http://www.free-css.com/">consetetur sadipscing elitr</a></li>
<li><a href="http://www.free-css.com/">At vero eos et accusam et justo duo</a></li>
<li><a href="http://www.free-css.com/">consetetur sadipscing elitr</a></li>
</ul>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<h3>MORE LOREM IPSUM</h3>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.</p>
</div>
<div id="sidebar">
<h3>Css Stuff</h3>
<div id="nav-right">
<ul>
<li><a href="http://www.free-css.com/">Css Drive</a></li>
<li><a href="http://www.free-css.com/">Dynamic Drive</a></li>
<li><a href="http://www.free-css.com/">Style The Web</a></li>
<li><a href="http://www.free-css.com/">Css Import</a></li>
<li><a href="http://www.free-css.com/">Think Vitamin</a></li>
</ul>
</div>
<h3>Gallery Quick Links</h3>
<p class="thumbs"> <a href="http://www.free-css.com/"><img src="spacetravelisboring-imgs/thumb.jpg" width="40" height="40" alt="" /></a> <a href="http://www.free-css.com/"><img src="spacetravelisboring-imgs/thumb.jpg" width="40" height="40" alt="" /></a> <a href="http://www.free-css.com/"><img src="spacetravelisboring-imgs/thumb.jpg" width="40" height="40" alt="" /></a> <a href="http://www.free-css.com/"><img src="spacetravelisboring-imgs/thumb.jpg" width="40" height="40" alt="" /></a></p>
<p class="thumbs"> <a href="http://www.free-css.com/"><img src="spacetravelisboring-imgs/thumb.jpg" width="40" height="40" alt="" /></a> <a href="http://www.free-css.com/"><img src="spacetravelisboring-imgs/thumb.jpg" width="40" height="40" alt="" /></a> <a href="http://www.free-css.com/"><img src="spacetravelisboring-imgs/thumb.jpg" width="40" height="40" alt="" /></a> <a href="http://www.free-css.com/"><img src="spacetravelisboring-imgs/thumb.jpg" width="40" height="40" alt="" /></a></p>
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, . Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>
<h3>Recent Updates</h3>
<p class="thumbs"> <a href="http://www.free-css.com/"><img src="spacetravelisboring-imgs/thumb.jpg" width="40" height="40" alt="" /></a> <a href="http://www.free-css.com/"><img src="spacetravelisboring-imgs/thumb.jpg" width="40" height="40" alt="" /></a> <a href="http://www.free-css.com/"><img src="spacetravelisboring-imgs/thumb.jpg" width="40" height="40" alt="" /></a> <a href="http://www.free-css.com/"><img src="spacetravelisboring-imgs/thumb.jpg" width="40" height="40" alt="" /></a></p>
<p class="thumbs"> <a href="http://www.free-css.com/"><img src="spacetravelisboring-imgs/thumb.jpg" width="40" height="40" alt="" /></a> <a href="http://www.free-css.com/"><img src="spacetravelisboring-imgs/thumb.jpg" width="40" height="40" alt="" /></a> <a href="http://www.free-css.com/"><img src="spacetravelisboring-imgs/thumb.jpg" width="40" height="40" alt="" /></a> <a href="http://www.free-css.com/"><img src="spacetravelisboring-imgs/thumb.jpg" width="40" height="40" alt="" /></a></p>
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
</div>
<!--
End Side bar and thumbs
-->
<!--
Start of footer data
-->
<div id="footer-contents">
<p id="footer-copy"><a href="mailto:collingrasley@gmail.com">Coll23</a> <a href="http://www.free-css.com/">Lorem Ipsum</a> <a href="http://www.free-css.com/">Lorem Ipsum</a></p>
<p id="footer-links"><a href="http://validator.w3.org/check/referer">[XHTML 1.0]</a> <a href="http://jigsaw.w3.org/css-validator/">[CSS]</a></p>
</div>
<!--
End of footer data
-->
</div>
</body>
</html>
Related examples in the same category