hyper
<!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">
<head>
<title>Hyper</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
/*
Author: Donny Burnside
Website: http://www.ginger-ninja.net/
*/
/* Misc. */
* {
margin:0;
padding:0;
}
body {
font-family:Trebuchet MS, Arial, Helvetica, sans-serif;
font-size:12px;
background-color:#111111;
color:#f1f1f1;
}
a {
color:#f1f1f1;
text-decoration:none;
font-weight:bold;
}
a:hover {
color:#D8E673;
}
img {
border:0;
}
p {
margin-bottom:20px;
line-height:20px;
}
/* Structure */
#wrapper {
width:780px;
margin:0 auto;
background-color:#222222;
}
#header {
height:80px;
background-image:url(hyper-images/bg-header.gif);
background-repeat:repeat-x;
background-color:#D0E254;
border-bottom:2px solid #D5E461;
}
#sidebar {
float:right;
width:160px;
padding:10px;
}
#body {
padding:10px;
margin-right:180px;
min-height:400px;
}
#footer {
padding:10px;
text-align:center;
}
/* Menu */
#menu {
float:right;
}
#menu ul {
list-style-type:none;
padding-right:10px;
}
#menu li {
float:left;
text-align:center;
margin-left:3px;
}
#menu li a {
height:26px;
line-height:26px;
width:80px;
display:block;
background-image:url(hyper-images/menu.gif);
background-repeat:no-repeat;
color:#ffffff;
font-size:11px;
margin-top:54px;
}
#menu li a:hover {
height:30px;
line-height:30px;
margin-top:50px;
background-image:url(hyper-images/menu-hover.gif);
background-repeat:no-repeat;
color:#ffffff;
}
#menu li .active {
height:30px;
line-height:30px;
margin-top:50px;
background-image:url(hyper-images/menu-hover.gif);
background-repeat:no-repeat;
color:#ffffff;
}
/* Headings */
h1 a {
color:#C2D926;
}
h2 {
font-size:14px;
color:#f1f1f1;
font-weight:bold;
letter-spacing:-1px;
}
/* Sidebar */
#sidebar ul {
list-style-type:none;
}
#sidebar li {
padding-left:10px;
}
#sidebar li a {
font-weight:normal;
}
/* Title */
#title {
line-height:80px;
padding-left:10px;
}
#subtitle {
padding-left:30px;
margin-top:-26px;
color:#fdfdfd;
cursor:default;
}
.title1 {
font-size:30px;
color:#ffffff;
}
.title2 {
font-size:30px;
color:#000000;
font-style:italic;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="menu">
<ul>
<li><a href="http://www.free-css.com/" class="active">Home</a></li>
<li><a href="http://www.free-css.com/">Templates</a></li>
<li><a href="http://www.free-css.com/">Tutorials</a></li>
<li><a href="http://www.free-css.com/">About</a></li>
<li><a href="http://www.free-css.com/">Contact</a></li>
</ul>
</div>
<div id="title"><a href="http://www.free-css.com/"><span class="title1">CSS</span><span class="title2">Template!</span></a></div>
<div id="subtitle">Website design & development</div>
</div>
<div id="sidebar">
<h2>Recent news</h2>
<ul>
<li><a href="http://www.free-css.com/">New design - Hyper</a>
<li><a href="http://www.free-css.com/">Lorem Ipsum</a>
<li><a href="http://www.free-css.com/">New host</a>
<li><a href="http://www.free-css.com/">Here we go</a>
</ul>
</div>
<div id="body">
<h1><a href="http://www.free-css.com/">Hyper</a></h1>
<div class="meta">By Admin on 1st October 2006</div>
<p>HYPER was designed by Donny Burnside of Ginger-Ninja.net and is released under the <a href="http://creativecommons.org/licenses/by-nc/2.5/">Creative Commons 2.5 license</a>. If you use the design all I ask is that you keep the credit link in the footer. Also, it would be nice if you email me at inbox[at]ginger-ninja.net to let me know how you're using the design. Editable Fireworks .PNG files are included for every image. Enjoy.</p>
<h1><a href="http://www.free-css.com/">Lorem Ipsum</a></h1>
<div class="meta">By Admin on 1st September 2006</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="footer"> © 2006 Your-Website.com | <a href="http://www.free-css.com/">XHTML</a> | Design by <a href="http://www.ginger-ninja.net/">Ginger Ninja!</a> </div>
</div>
</body>
</html>
Related examples in the same category