darkshine
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Dark Shine</title>
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />
<style type='text/css'>
/* __________________________________________________________________
| |
| Template Info: |
| |
| This template is released into the public domain. Attribution |
| to me is appreciated, but not required. You are free to |
| modify and redistribute this page as you see fit. This notice |
| does not need to be retained if it is used or redistributed. |
| |
| Jack Qiao |
| www.pureweb.ca |
| |
|_________________________________________________________________|
*/
/*
note: my css selectors are generally location based. For example,
the top navigation selector is placed at the top of the css file,
and the footer is placed at the very end. Have fun tinkering!
*/
body {
background: #90140C url(darkshine-images/stripes.gif) repeat-x;
background-position: 50% 40px;
margin: 0;
padding: 0;
}
a {
color: #600000;
font-weight: bold;
text-decoration: none;
}
a:visited {
color: #000;
}
a:hover {
color: #90140C;
}
img {
border: 0;
}
ul {
list-style: none;
}
h1 {
font: normal 1.2em arial, verdana, helvetica, sans-serif;
margin: 23px 18px;
text-align: left;
}
h2 {
color: #333;
font: bold 12px arial, verdana, helvetica, sans-serif;
}
#nav {
text-align: center;
width: 100%;
background: #000 url(darkshine-images/nav.gif) repeat-x;
margin: 0;
padding: 0;
height: 40px;
overflow: hidden;
cursor: default;
}
#nav li, #nav a {
display: inline;
color: #fff;
text-decoration: none;
font: bold 11px verdana, arial, helvetica, sans-serif;
height: 40px;
line-height: 40px;
padding: 13px 15px;
margin: 0;
}
#nav li a {
background: transparent url(darkshine-images/nav.gif) repeat-x;
}
#nav li a:hover, #nav li#current a {
background: transparent url(darkshine-images/nav.gif) repeat-x;
background-position: 0 -40px;
}
#nav li {
padding: 14px 0;
}
#title {
width: 410px;
height: 101px;
background: transparent url(darkshine-images/title_background.jpg) no-repeat;
line-height: 75px;
display: block;
margin: 0 auto;
margin-top: 66px;
text-align: center;
font: normal 2.5em/1.8em 'trebuchet ms', georgia, 'lucidia grande';
color: #FE9B27;
letter-spacing: 8px;
cursor: default;
}
#wrapper {
width: 732px;
margin: 0 auto;
border: solid 15px #600000;
border-bottom: none;
background-color: #F3F3F3;
height: auto;
}
#top {
height: 28px;
overflow: hidden;
width: 100%;
background: #000 url(darkshine-images/stripes_small.gif) repeat-x;
color: #fff;
cursor: default;
text-align: left;
font: normal 10px/32px arial, verdana, helvetica, sans-serif;
}
#top strong {
font: bold 11px arial;
margin-left: 2px;
margin-right: 6px;
}
#top span {
display: inline;
margin-left: 10px;
float: left;
clear: none;
margin-top: -28px;
}
#top ul {
margin: 0;
padding: 0;
float: right;
clear: none;
display: inline;
}
#top ul li a, #top ul li {
display: block;
float: right;
width: 78px;
height: 28px;
text-align: center;
text-decoration: none;
color: #fff;
font: bold 12px/32px arial, verdana, helvetica, sans-serif;
overflow: hidden;
}
#top ul li a:hover {
color: #000;
}
#chat a {
background: #0086EE url(darkshine-images/blue.jpg) no-repeat;
}
#join a {
background: #F41100 url(darkshine-images/red.jpg) no-repeat;
}
#login a {
background: #ED700D url(darkshine-images/orange.jpg) no-repeat;
}
#search a {
background: #199B2C url(darkshine-images/green.jpg) no-repeat;
}
#adspace {
height: 67px;
background: #86221B url(darkshine-images/ad.gif) repeat-x;
border-top: 1px solid #CA807C;
border-left: 1px solid #A5514B;
border-right: 1px solid #5B1D1B;
border-bottom: 1px solid #3E1B19;
font: normal 10px/100px verdana, arial, sans-serif;
text-align: center;
color: #fff;
cursor: default;
overflow: hidden;
}
#main {
height: 246px;
background: #FE8624 url(darkshine-images/main.gif) repeat-x;
border-top: 1px solid #FEC782;
border-left: 1px solid #FEB154;
border-right: 1px solid #D76C22;
border-bottom: 1px solid #783C1C;
overflow: hidden;
}
#main ul {
width: 710px;
overflow: hidden;
margin: 0;
padding: 0;
margin-left: 15px;
}
#main ul li {
float: left;
text-align: center;
margin-left: 25px;
display: inline;
}
#main ul li a img {
border: 3px solid #fff;
}
#main ul li a img:hover {
border: 3px solid #FEE5C6;
}
#main ul li h2 {
font: bold 11px arial, verdana, helvetica;
margin-top: 10px;
color: #000;
}
.content {
float: left;
width: 330px;
margin: 20px 10px 0 20px;
font: normal 11px/18px arial, verdana, helvetica, sans-serif;
text-align: justify;
display: inline;
}
.content h1, .content ul {
margin: 0;
padding: 0;
}
.content h1 {
color: #8A0700;
font: normal 2em arial, verdana, helvetica, sans-serif;
margin-bottom: 20px;
}
.content h2 {
margin: 20px 0 4px 0;
}
.content ul.hover_list li {
border: 1px solid #783C1C;
border-width: 0 0 1px 0;
color: #600000;
}
.content ul.hover_list li a {
height: 40px;
color: #600000;
display: block;
line-height: 40px;
padding-left: 15px;
}
.content ul.hover_list li a:hover, .content ul.hover_list li a:focus {
background: #FD9339 url(darkshine-images/hover_list.jpg) repeat-x;
color: #fff;
}
#footer {
height: 25px;
background-color: #000;
color: #fff;
font: normal 10px/25px arial, verdana, helvetica, sans-serif;
color: #999;
text-align: center;
border-top: 50px solid #F3F3F3;
clear: both;
}
#footer a {
color: #ccc;
}
</style>
</head>
<body>
<!-- navigation -->
<ul id="nav">
<li id="current"><a href="http://www.free-css.com/">Home</a></li>
<li><a href="http://www.free-css.com/">Forums</a></li>
<li><a href="http://www.free-css.com/">Chat</a></li>
<li><a href="http://www.free-css.com/">Sign Up</a></li>
<li><a href="http://www.free-css.com/">Contest</a></li>
<li><a href="http://www.free-css.com/">FAQ</a></li>
</ul>
<!-- main title -->
<h1 id="title">DARK SHINE</h1>
<!-- beginning of actual page -->
<div id="wrapper">
<!-- this is the small black bar -->
<div id="top">
<ul>
<li id="search"><a href="http://www.free-css.com/">search</a></li>
<li id="login"><a href="http://www.free-css.com/">login</a></li>
<li id="join"><a href="http://www.free-css.com/">Join!</a></li>
<li id="chat"><a href="http://www.free-css.com/">Chat!</a></li>
</ul>
<span>total users: <strong>1,000,000</strong> currently online: <strong>100</strong> using IM: <strong>50</strong> new photos: <strong>99</strong></span> </div>
<!-- space for ads -->
<div id="adspace"> ad space </div>
<!-- image links -->
<div id="main">
<h1>New Members</h1>
<ul>
<li> <a href="http://www.free-css.com/"><img src="darkshine-images/box.jpg" width="105px" height="105px" alt="" /></a>
<h2>profile name</h2>
</li>
<li> <a href="http://www.free-css.com/"><img src="darkshine-images/box.jpg" width="105px" height="105px" alt="" /></a>
<h2>profile name</h2>
</li>
<li> <a href="http://www.free-css.com/"><img src="darkshine-images/box.jpg" width="105px" height="105px" alt="" /></a>
<h2>profile name</h2>
</li>
<li> <a href="http://www.free-css.com/"><img src="darkshine-images/box.jpg" width="105px" height="105px" alt="" /></a>
<h2>profile name</h2>
</li>
<li> <a href="http://www.free-css.com/"><img src="darkshine-images/box.jpg" width="105px" height="105px" alt="" /></a>
<h2>profile name</h2>
</li>
</ul>
</div>
<!-- rest of content -->
<div class="content">
<h1>Latest News</h1>
<h2>Hello Again</h2>
This is Jack. I haven't been around for a while and I thought I'd contribute another template. I've been busy with school and work, but summer is almost here and it looks like I'll be back on the horse with some new designs. This one was originally a concept I developed for a client of mine. They liked it a lot, but it wasn't quite what they were looking for. I didn't want to waste the design, so I coded it up for openwebdesign. I've tested the layout in Firefox and IE, and I suspect it's fine for most other browsers. If you catch a glitch, give me a shout and I'll see what I can do. </div>
<div class="content">
<h1>Latest Posts</h1>
<!-- this is a list of links -->
<ul class="hover_list">
<li><a href="http://www.free-css.com/">Hey guys what's up?</a></li>
<li><a href="http://www.free-css.com/">New template uploaded!</a></li>
<li><a href="http://www.free-css.com/">Math sucks, lets all ban math</a></li>
<li><a href="http://www.free-css.com/">Students' strike against raising tuition!</a></li>
<li><a href="http://www.free-css.com/">Diagonal stripes are so cheesy</a></li>
</ul>
</div>
<div class="content">
<h1>Second Header</h1>
<h2>Welcome</h2>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
Ipsum has been the industry's standard dummy text ever since the 1500s, <a
href="http://www.free-css.com/">when an unknown printer took a galley</a> of type and scrambled it to
make a type specimen book. It has survived not only five centuries, but also the
leap into electronic typesetting, remaining essentially unchanged. It was
popularised in the 1960s with the release of Letraset sheets containing Lorem
Ipsum passages, and more recently with desktop publishing software like Aldus
PageMaker including versions of Lorem Ipsum. </div>
<div class="content">
<h1>More stolen content from lipsum.org</h1>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like). </div>
<!-- footer -->
<div id="footer">Copyleft 2006. Feel free to do with as you wish | <a href="http://www.free-css.com/">My Portfolio</a> | <a href="http://www.free-css.com/">My Blog</a> | <a href="http://www.free-css.com/">My Artwork</a></div>
</div>
</body>
</html>
Related examples in the same category