solemnity
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Solemnity</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type='text/css'>
body {
font: 62.5%/1.6em "Lucida Grande", "Lucida Sans Unicode", verdana, geneva, sans-serif;
color:#888;
margin:0;
background:url(solemnity-images/body.jpg) top repeat-x #121212;
background-attachment:fixed;
}
* {
margin:0;
padding:0;
}
#wrapper1 {
background:#1e1e1e;
padding:0 10px 10px 10px;
width:760px;
margin:0 auto;
}
#wrapper2 {
width:740px;
background:url(solemnity-images/wrapper2.jpg) bottom repeat-x #fff;
border-left:1px solid #000;
border-right:1px solid #000;
border-bottom:1px solid #000;
padding:0 10px 10px 10px;
}
#nav {
float:right;
border:none;
padding:0;
margin:0;
}
#nav li {
float:left;
list-style:none;
margin:0 4px 0 0;
padding:0;
}
#nav li a {
display:block;
padding:40px 10px 21px 10px;
background:#fff;
color:#444;
text-decoration:none;
text-transform:uppercase;
margin:0 1px 0 0;
}
#nav li a:hover {
background:url(solemnity-images/nav_a_hover.jpg) top center no-repeat #fff;
color:#000;
}
#header h1 {
font:2.7em Arial;
letter-spacing:-1px;
color:#222;
float:left;
padding:30px 20px 14px 45px;
background:url(solemnity-images/h1.gif) left bottom no-repeat;
}
#header h1 a {
color:#222;
text-decoration:none;
border:none;
}
#header h1 a:hover {
color:#000;
}
#header h1 span {
font-size:.8em;
color:#ccc;
text-transform:uppercase;
}
#container {
clear:both;
padding:20px 0 0 0;
}
p.description {
background:url(solemnity-images/description.jpg) right bottom no-repeat #005A97;
padding:10px 10px 40px 10px;
color:#fff;
font-size:1.5em;
line-height:25px;
border-top:4px solid #003C64;
}
p.description a {
color:#fff;
text-decoration:none;
font-weight:bold;
border-bottom:1px dotted #8CD1FF;
}
p.description a:hover {
border-bottom:1px solid #8CD1FF;
}
#sidebar {
width:230px;
float:right;
background:url(solemnity-images/sidebar.jpg) top right no-repeat #fff;
padding:10px 20px 10px 10px;
margin:-30px 0 0 0;
}
#content {
margin:0 260px 0 5px;
padding:10px 20px 0 0;
background:url(solemnity-images/content.jpg) top right no-repeat;
}
#content h2 {
font:2.2em Arial;
color:#121212;
letter-spacing:-1px;
margin:10px 0;
border-bottom:2px solid #eee;
background:url(solemnity-images/h2.jpg) bottom left no-repeat;
clear:left;
}
#content h2 a {
color:#121212;
text-decoration:none;
}
#content p {
margin:15px 0;
font-size:110%;
line-height:21px;
}
ol.subnav {
margin:-10px 0 0 -5px;
padding:0;
}
ol.subnav li {
float:left;
list-style:none;
margin:0;
padding:0;
}
ol.subnav a {
font-weight:bold;
color:#555;
border-top:2px solid #fff;
display:block;
padding:5px;
text-decoration:none;
margin:0 5px 0 0;
border-bottom:none;
}
ol.subnav a:hover {
border-top:2px solid #005A97;
color:#121212;
border-bottom:none;
}
#sidebar h2 {
color:#333;
margin:10px 0;
font-size:1.3em;
}
p.news {
background:#f4f4f4;
padding:10px;
margin:0 0 10px 0;
border-left:5px solid #f0f0f0;
}
p.news a.more {
display:block;
color:#333;
text-decoration:none;
text-align:right;
border:none;
}
#sidebar ul {
list-style:none;
border-top:1px solid #eee;
border:none;
padding:0;
margin:0;
}
#sidebar ul li {
border-bottom:1px solid #eee;
padding:5px;
margin:0;
}
#sidebar ul li a {
color:#0066dd;
text-decoration:none;
}
#sidebar ul li a:hover {
color:#0033aa;
}
input {
padding:5px;
border:1px solid #eee;
color:#555;
width:220px;
}
#content h3 {
font:1.8em Trebuchet MS;
color:#555;
margin:10px 0;
}
blockquote {
padding:0 0 0 10px;
border-left:5px solid #eee;
}
ul {
margin:10px 10px 10px 0;
padding:0 0 0 15px;
border:1px solid #eee;
}
li {
margin:0 0 0 10px;
padding:5px;
}
#content img {
padding:5px;
border:1px solid #eee;
}
a {
color:#222;
border-bottom:1px dotted #ccc;
text-decoration:none;
}
a:hover {
border-bottom:1px solid #ccc;
}
#footer {
text-align:center;
border-top:2px solid #000;
padding:10px;
margin:30px 0 0 0;
color:#ccc;
width:760px;
margin:0 auto;
}
#footer a {
color:#eee;
}
</style>
</head>
<body>
<div id="wrapper1">
<div id="wrapper2">
<div id="header">
<h1><a href="http://www.free-css.com/">Solemnity</a> </h1>
<ul id="nav">
<li><a href="http://www.free-css.com/">Home</a></li>
<li><a href="http://www.free-css.com/">About</a></li>
<li><a href="http://www.free-css.com/">Examples</a></li>
<li><a href="http://www.free-css.com/">Contact</a></li>
</ul>
</div>
<div id="container">
<p class="description"> Here is a short description of your web site, or in this case, this template. Solemnity is a clean, calm template that makes uses of muted colours to exhude an air of professionalism. The template was conceived and created by Six Shooter Media in June, 2006. You can, of course take this template and change it as you see fit design-wise. It's up to you! But please leave a credit in the footer! </p>
<div id="sidebar">
<h2>Latest News or Comments</h2>
<p class="news"> An example of a "latest news" type text area. Here would be the excerpt of the article. You can of course put anything you like here. <a href="http://www.free-css.com/" class="more">Read More </a> </p>
<p class="news"> An example of a "latest news" type text area. Here would be the excerpt of the article. You can of course put anything you like here. <a href="http://www.free-css.com/" class="more">Read More </a> </p>
<p class="news"> An example of a "latest news" type text area. Here would be the excerpt of the article. You can of course put anything you like here. <a href="http://www.free-css.com/" class="more">Read More </a> </p>
<h2>Sub Navigation</h2>
<ul>
<li><a href="http://www.free-css.com/">Home</a></li>
<li><a href="http://www.free-css.com/">About</a></li>
<li><a href="http://www.free-css.com/">Examples</a></li>
<li><a href="http://www.free-css.com/">Contact</a></li>
</ul>
<h2>Search</h2>
<input name="" type="text" />
</div>
<div id="content">
<ol class="subnav">
<li><a href="http://www.free-css.com/">Home</a></li>
<li><a href="http://www.free-css.com/">About</a></li>
<li><a href="http://www.free-css.com/">Examples</a></li>
<li><a href="http://www.free-css.com/">Contact</a></li>
</ol>
<h2 style="padding:20px 0 0 0;"><a href="http://www.free-css.com/" id="intro">Introduction</a></h2>
<p> Hello and welcome to Solemnity, a clean, corporate template created by Six Shooter Media. A fairly standard template which, as with all of my templates, should be usable with whatever your site subject might be. </p>
<h2><a href="http://www.free-css.com/" id="about">About the Author</a></h2>
<p> Hi! My names Jay and I'm a 20 year old web designer from England. My main projects are conducted through my website Six Shooter Media, but I (obviously) also enjoy creating Open Source web templates for general use! You can keep a check on my free templates here which is probably a link worth bookmarking as my templates appear there a couple of weeks before OWD/OSWD due to the design queues. </p>
<p> Another site of mine that you might find interesting if you're setting up a site with a free template like Buy a Button.net. There, for a great price you can purchase a link to your site in the form of a button. This link will obviously provide you site with some additional traffic which is always nice! </p>
<h2><a href="http://www.free-css.com/" id="examples">Some Examples</a></h2>
<p> OK, here I'll just put some example html elements that you will most probably be using in your blog. </p>
<h3>Blockquote Example</h3>
<blockquote>
<p> Here's your blockquote text jfds jkndskf ndsknf sldnfjk sdnf jdsbf hdsbf jbsdjfk bdskj bdsjfb dsk bds bfsdj bfsjk bfsjdbf sbjd fjsbdk fsdbf sdb fksbd sb </p>
</blockquote>
<h3>List Example</h3>
<ul>
<li>Here</li>
<li>Is our friend</li>
<li>The list!</li>
</ul>
<h2><a href="http://www.free-css.com/" id="contact">Contact</a></h2>
<p> If you decide to use this template please drop me a line to let me know! Don't hesitiate to get in touch if your interested in a custom template or just in any of my services in general. I look forward to hearing from you! </p>
</div>
</div>
</div>
</div>
<div id="footer">
<p>Template design by <a href="http://www.sixshootermedia.com">Six Shooter Media</a>.<br />
All your copyright information here.</p>
</div>
</body>
</html>
Related examples in the same category