wiremesh
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
Title : WireMesh
Version : 1.0
Released : 20070407
Description: A two-column fixed-width template featuring dark background with neon headers. Suitable for blogs and small business websites.
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>WireMesh by Free Css Templates</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type='text/css'>
/*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
*/
* {
margin: 0;
padding: 0;
}
body {
background: #000000 url(wiremesh-images/img01.gif) repeat-x;
font: normal small Verdana, Arial, Helvetica, sans-serif;
color: #999999;
}
h1, h2, h3 {
margin-bottom: 20px;
text-transform: uppercase;
color: #FFFFFF;
}
h1 { font-size: 3em; }
h2 { font-size: 2em; }
h3 { font-size: 1.4em; }
p, blockquote, ul, ol {
margin-bottom: 1.5em;
line-height: 1.8em;
}
blockquote, ul, ol {
margin-left: 3em;
}
blockquote {
margin-right: 3em;
}
a {
color: #23B9FF;
}
a:hover {
text-decoration: none;
color: #CC0000;
}
img { border: none; }
img.left {
float: left;
margin: 0 15px 15px 0;
}
img.right {
float: right;
margin: 0 15px 0 15px;
}
hr { display: none; }
.hr {
height: 36px;
margin-bottom: 15px;
background: url(wiremesh-images/img06.gif) repeat-x left center;
}
/* Header */
#header {
width: 760px;
height: 200px;
margin: 0 auto;
}
/* Logo */
#logo {
float: left;
}
#logo h1 {
margin: 0;
padding-top: 80px;
font-size: 2.6em;
font-variant: small-caps;
}
#logo h2 {
padding-left: 6px;
font-size: 1em;
}
#logo a {
text-decoration: none;
color: #FFFFFF;
}
/* Menu */
#menu {
float: right;
}
#menu ul {
margin: 0;
padding-top: 118px;
text-align: center;
list-style: none;
}
#menu li {
display: inline;
}
#menu a {
padding: 0 20px;
border-left: 1px solid #FFFFFF;
text-decoration: none;
font-weight: bold;
color: #FFFFFF;
}
#menu a:hover {
color: #23B9FF;
}
#menu .first a {
border: none;
}
/* Page */
#page {
width: 760px;
margin: 0 auto;
}
/* Content */
#content {
float: right;
width: 500px;
}
#content h2 {
height: 20px;
margin: 0;
padding: 20px 0 0 20px;
background: url(wiremesh-images/img04.gif) repeat-x;
font-size: 12px;
color: #000000;
}
#content h3 {
text-transform: none;
font-size: 1em;
}
#content .content {
padding: 20px;
}
/* Sidebar */
#sidebar {
float: left;
width: 240px;
}
#sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}
#sidebar li {
padding: 0 20px 20px 20px;
background: url(wiremesh-images/img06.gif) repeat-x;
}
#sidebar li ul {
list-style: disc inside;
}
#sidebar li li {
padding: 0;
background: none;
}
#sidebar dl {
}
#sidebar dt {
font-size: x-small;
font-weight: bold;
}
#sidebar dd {
margin-bottom: 15px;
line-height: normal;
font-size: x-small;
}
#sidebar ol {
margin: 0;
list-style-position: inside;
}
#sidebar h2 {
height: 25px;
padding: 15px 0 0 0;
font-size: 12px;
color: #000000;
}
#sidebar blockquote {
margin: 0;
}
#sidebar a {
}
/* Footer */
#footer {
width: 720px;
margin: 0 auto;
padding: 10px 20px;
border-top: 1px solid #666666;
font-size: x-small;
}
#footer p {
margin: 0;
line-height: normal;
color: #999999;
}
#footer a {
color: #999999;
}
</style>
</head>
<body>
<div id="header">
<div id="logo">
<h1><a href="#">WireMesh</a></h1>
<h2><a href="http://www.freecsstemplates.org/">By Free CSS Templates</a></h2>
</div>
<div id="menu">
<ul>
<li class="first"><a href="#" title="">Home</a></li>
<li><a href="#" title="">About</a></li>
<li><a href="#" title="">Products</a></li>
<li><a href="#" title="">Services</a></li>
<li><a href="#" title="">Contact</a></li>
</ul>
</div>
</div>
<!-- end #header -->
<div id="page">
<div id="content">
<div class="boxed">
<h2>Welcome to WireMesh!</h2>
<div class="content">
<p><strong>WireMesh</strong> is a free template from <a href="http://www.freecsstemplates.org/">Free CSS Templates</a> released under a <a href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attribution 2.5 License</a>. The photos are from <a href="http://www.pdphoto.org/">PDPhoto.org</a>. You're free to use it for both commercial or personal use. I only ask that you link back to my site in some way. <em>Enjoy :)</em></p>
</div>
</div>
<div class="boxed">
<h2>Examples of Common Tags</h2>
<div class="content">
<p>This is an example of a paragraph followed by a blockquote:</p>
<blockquote>
<p>“Pellentesque tristique ante ut risus. Quisque dictum. Integer nisl risus, sagittis convallis, rutrum id, elementum congue, nibh. Suspendisse dictum porta lectus. Donec placerat odio.”</p>
</blockquote>
<h3>Heading Level Three</h3>
<p>In posuere eleifend odio. Quisque semper augue mattis wisi. Maecenas ligula. Pellentesque viverra vulputate enim. Aliquam erat volutpat. Pellentesque tristique ante ut risus. Quisque dictum. Integer nisl risus, sagittis convallis, rutrum id, elementum congue, nibh.</p>
<p>This is another example of a paragraph followed by an ordered list:</p>
<p>An ordered list example:</p>
<ol>
<li><a href="#">Ut semper vestibulum est</a></li>
<li><a href="#">Vestibulum luctus enatis</a></li>
<li><a href="#">Integer rutrum nisl in mi</a></li>
<li><a href="#">Etiam malesuada rutrum</a></li>
<li><a href="#">Aenean elementum facilisis</a></li>
<li><a href="#">Ut tincidunt elit vitae</a></li>
<li><a href="#">Sed quis odio sagittis leo</a></li>
</ol>
</div>
</div>
</div>
<!-- end #content -->
<div id="sidebar">
<ul>
<li>
<h2>News & Events</h2>
<dl>
<dt><strong>April 5, 2007</strong></dt>
<dd>In posuere eleifend odio quisque semper augue mattis wisi maecenas ligula. <a href="#">More…</a></dd>
<dt><strong>April 2, 2007</strong></dt>
<dd>Donec leo, vivamus fermentum nibh in augue praesent a lacus at urna congue rutrum. <a href="#">More…</a></dd>
<dt><strong>March 30, 2007</strong></dt>
<dd>Quisque dictum integer nisl risus, sagittis convallis, rutrum id, congue, and nibh. <a href="#">More…</a></dd>
</dl>
</li>
<li>
<h2>Numbered List</h2>
<ol>
<li><a href="#">Ut semper vestibulum est</a></li>
<li><a href="#">Vestibulum luctus enatis</a></li>
<li><a href="#">Integer rutrum nisl in mi</a></li>
<li><a href="#">Etiam malesuada rutrum</a></li>
<li><a href="#">Aenean elementum facilisis</a></li>
<li><a href="#">Ut tincidunt elit vitae</a></li>
<li><a href="#">Sed quis odio sagittis leo</a></li>
</ol>
</li>
<li>
<h2>A Sidebar's Blockquote</h2>
<blockquote>
<p>“Quisque dictum integer nisl risus, sagittis convallis, rutrum id, congue, and nibh. Donec leo, vivamus fermentum nibh in augue praesent a lacus at urna congue rutrum.”</p>
</blockquote>
<ul>
<li><a href="#">Ut semper vestibulum est</a></li>
<li><a href="#">Vestibulum luctus ipsum</a></li>
<li><a href="#">Integer rutrum nisl nul</a></li>
</ul>
</li>
</ul>
</div>
<!-- end #sidebar -->
<div style="clear: both;"> </div>
</div>
<!-- end #page -->
<div id="footer">
<p id="legal">Copyright © 2007 WireMesh. All Rights Reserved. Designed by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>.</p>
<p id="links"><a href="#">Privacy Policy</a> | <a href="#">Terms of Use</a></p>
</div>
</body>
</html>
Related examples in the same category