genericblue
?<!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">
<head>
<title>GenericBlue</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type='text/css'>
/*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
*/
/* Basic */
*
{
margin: 0em;
padding: 0em;
}
h1,h2
{
}
body
{
font-family: Arial, sans-serif;
font-size: 10pt;
color: #666;
background-color: #fff;
}
a
{
color: #0077dd;
text-decoration: underline;
}
a:hover
{
text-decoration: none;
}
/* Outer */
#outer
{
padding: 0em;
margin: 0em;
width: 100%;
}
/* Header */
#header
{
position: relative;
background: #004778 url('genericblue-images/a5.gif') bottom left repeat-x;
height: 10em;
padding-left: 2em;
}
#header h1
{
position: absolute;
top: 1.8em;
font-size: 2.2em;
letter-spacing: -0.05em;
}
#header h1 a
{
color: #fff;
text-decoration: none;
}
#header h2
{
position: absolute;
font-size: 0.8em;
top: 8em;
color: #E0E8EF;
}
/* Menu */
#menu
{
position: absolute;
top: 5em;
right: 3em;
}
#menu ul
{
list-style: none;
}
#menu li
{
display: inline;
padding-left: 1.1em;
margin-left: 1em;
border-left: dotted 1px #E0E8EF;
}
#menu li.first
{
border: 0em;
margin-left: 0em;
padding-left: 0em;
}
#menu li a
{
color: #fff;
padding: 0.1em;
text-decoration: none;
}
#menu li a:hover
{
text-decoration: underline;
}
/* Content */
#content
{
line-height: 1.5em;
}
#content p
{
margin-bottom: 1.5em;
}
#content h2,h3,h4,h5,h6
{
color: #545454;
margin-bottom: 1em;
border-bottom: dashed 1px #dfdfdf;
padding-bottom: 0.3em;
}
#content h2
{
font-size: 1.5em;
}
#content h3
{
font-size: 1.1em;
}
#content ul
{
margin-bottom: 1.5em;
padding-left: 1em;
list-style: square;
}
#content blockquote
{
margin-bottom: 1.5em;
padding: 0.75em 0.75em 0.75em 1.5em;
border-left: solid 0.75em #005082;
background: #FDFDFD url('genericblue-images/a7.gif') top left repeat-x;
}
#content blockquote p
{
margin-bottom: 0em;
}
#content table
{
margin-bottom: 1.5em;
border-collapse: collapse;
text-align: left;
}
#content table th
{
font-weight: bold;
padding: 0.5em;
}
#content table td
{
padding: 0.5em;
border-right: solid 1px #fff;
}
#content table tr.rowH
{
color: #fff;
background: #006192 url('genericblue-images/a8.gif') top left repeat-x;
border-right: solid 1px #fff;
}
#content table tr.rowA
{
background: #F8F8F8 url('genericblue-images/a6.gif') top left repeat-x;
border-top: solid 1px #fff;
color: inherit;
}
#content table tr.rowB
{
background: #FDFDFD url('genericblue-images/a7.gif') top left repeat-x;
border-top: solid 1px #fff;
color: inherit;
}
/* Primary Content */
#primaryContentContainer
{
background-color: #fff;
float: right;
margin: 0em -19em 0em -19em;
width: 100%;
}
#primaryContent
{
margin: 1.5em 19em 0em 17.25em;
padding: 1.5em 3em 1.5em 3em;
}
/* Secondary Content */
#secondaryContent
{
position: relative;
float: left;
width: 14em;
padding: 3em 2em 1.5em 2em;
background: #fff url('genericblue-images/a1.gif') top right repeat-y;
}
#secondaryContent .xbg
{
position: absolute;
right: 0em;
bottom: -64px;
background: #fff url('genericblue-images/a3.gif') top right no-repeat;
height: 64px;
width: 128px;
}
/* Tertiary Content */
#tertiaryContent
{
position: relative;
float: right;
width: 15em;
padding: 3em 2em 1.5em 2em;
background: #fff url('genericblue-images/a2.gif') top left repeat-y;
}
#tertiaryContent .xbg
{
position: absolute;
left: 0em;
bottom: -64px;
background: #fff url('genericblue-images/a4.gif') top left no-repeat;
height: 64px;
width: 128px;
}
/* Footer */
#footer
{
position: relative;
z-index: 1;
border-top: dashed 1px #dfdfdf;
padding: 1em 0em 2em 0em;
margin: 1em 2em 0em 2em;
text-align: center;
}
.clear
{
clear: both;
}
</style>
</head>
<body>
<div id="outer">
<div id="header">
<h1><a href="http://www.free-css.com/">GenericBlue</a></h1>
<h2>Free CSS Template</h2>
</div>
<div id="menu">
<ul>
<li class="first"><a href="http://www.free-css.com/" accesskey="1">Home</a></li>
<li><a href="http://www.free-css.com/" accesskey="2">About Us</a></li>
<li><a href="http://www.free-css.com/" accesskey="3">Products</a></li>
<li><a href="http://www.free-css.com/" accesskey="4">Services</a></li>
<li><a href="http://www.free-css.com/" accesskey="5">Contact Us</a></li>
</ul>
</div>
<div id="content">
<div id="tertiaryContent">
<h3>Lorem ipsum dolor</h3>
<p>Vivamus sagittis bibendum erat. Curabitur lorem ipsum dolore malesuada. <a href="http://www.free-css.com/">More…</a></p>
<h3>Nunc pellentesque</h3>
<ul>
<li><a href="http://www.free-css.com/">Vivamus id arcu</a></li>
<li><a href="http://www.free-css.com/">Duis congue ultricies</a></li>
<li><a href="http://www.free-css.com/">Purus in mollis purus</a></li>
<li><a href="http://www.free-css.com/">Orci nonummy fringilla</a></li>
<li><a href="http://www.free-css.com/">Pellentesque at lorem</a></li>
<li><a href="http://www.free-css.com/">Enim vivamus convallis</a></li>
<li><a href="http://www.free-css.com/">Ipsum vitae felis</a></li>
<li><a href="http://www.free-css.com/">Integer facilisis</a></li>
<li><a href="http://www.free-css.com/">Sagittis Bibendum Erat</a></li>
<li><a href="http://www.free-css.com/">Malesuada Turpis</a></li>
<li><a href="http://www.free-css.com/">Quis Gravida Massa</a></li>
<li><a href="http://www.free-css.com/">Inerat Viverra Ornare</a></li>
</ul>
<h3>Malesuada vivamus</h3>
<ul>
<li><a href="http://www.free-css.com/">Orci nonummy fringilla</a></li>
<li><a href="http://www.free-css.com/">Enim vivamus convallis</a></li>
<li><a href="http://www.free-css.com/">Duis congue ultricies</a></li>
<li><a href="http://www.free-css.com/">Purus in mollis purus</a></li>
<li><a href="http://www.free-css.com/">Malesuada Turpis</a></li>
<li><a href="http://www.free-css.com/">Integer facilisis</a></li>
<li><a href="http://www.free-css.com/">Quis Gravida Massa</a></li>
<li><a href="http://www.free-css.com/">Pellentesque at lorem</a></li>
<li><a href="http://www.free-css.com/">Ipsum vitae felis</a></li>
<li><a href="http://www.free-css.com/">Sagittis Bibendum Erat</a></li>
</ul>
<div class="xbg"></div>
</div>
<div id="primaryContentContainer">
<div id="primaryContent">
<h2>Welcome to Sitename.com!</h2>
<p><strong>GenericBlue</strong> is a free template from Free CSS Templates released under a <a href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attribution 2.5 License</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. Enjoy :)</p>
<p>Suspendisse potenti. Donec nulla est, laoreet quis, pellentesque in, congue in, dui. Nunc rhoncus placerat augue. Donec justo odio, eleifend varius, volutpat venenatis, sagittis ut, orci. Donec nulla est, laoreet quis, pellentesque in, congue in, dui. Nunc rhoncus placerat augue. Donec justo odio, eleifend varius, volutpat venenatis, sagittis ut, orci. Nullam et orci in erat viverra ornare. Nunc pellentesque.</p>
<p>Sed vestibulum blandit nisl. Quisque elementum convallis purus. Quisque pellentesque semper massa:</p>
<h3>Example Unordered List</h3>
<ul>
<li><a href="http://www.free-css.com/">Suspendisse quis gravida massa felis.</a></li>
<li><a href="http://www.free-css.com/">Vivamus sagittis bibendum erat.</a></li>
<li><a href="http://www.free-css.com/">Nullam et orci in erat viverra ornare.</a></li>
<li><a href="http://www.free-css.com/">Suspendisse quis gravida massa felis.</a></li>
<li><a href="http://www.free-css.com/">Curabitur malesuada turpis nec ante.</a></li>
</ul>
<h3>Example Blockquote</h3>
<blockquote>
<p>Aliquam gravida massa eu arcu. Fusce mollis tristique sem. Sed eu eros imperdiet eros interdum blandit. Vivamus sagittis bibendum erat. Curabitur malesuada turpis nec ante. Suspendisse quis felis. Suspendisse potenti. Nullam et orci in erat viverra ornare. Nunc pellentesque. Sed vestibulum blandit nisl. Quisque elementum convallis purus.</p>
</blockquote>
<h3>Example Table</h3>
<table>
<tr class="rowH">
<th>Date</th>
<th>Title</th>
<th>Description</th>
</tr>
<tr class="rowA">
<td>December 1, 2006</td>
<td>Sed vestibulum blandit</td>
<td>Vivamus sollicitudin dolor sit amet eros. Vivamus ligula. Sed pretium turpis eu ipsum. Sed rutrum sapien id arcu.</td>
</tr>
<tr class="rowB">
<td>November 28, 2006</td>
<td>Augue non nibh</td>
<td>Nam adipiscing urna ac consequat dignissim massa est sodales sem.</td>
</tr>
<tr class="rowA">
<td>November 23, 2006</td>
<td>Fusce ut diam bibendum</td>
<td>Vestibulum quis urn nulla facilis nam malesuada cursus turpis.</td>
</tr>
<tr class="rowB">
<td>November 21, 2006</td>
<td>Maecenas et ipsum</td>
<td>Vivamus mi lectus gravida scelerisque, ultrices vitae cursus in neque.</td>
</tr>
</table>
</div>
</div>
<div id="secondaryContent">
<h3>Etiam suscipit et</h3>
<p>Rhoncus ac, lacinia, nisl. Aliquam gravida massa eu arcu. <a href="http://www.free-css.com/">More…</a></p>
<h3>Fusce dolor tristique</h3>
<p>Sed eu eros imperdiet eros interdum blandit. Vivamus sagittis bibendum erat. Curabitur malesuada. <a href="http://www.free-css.com/">More…</a></p>
<h3>Nunc pellentesque</h3>
<ul>
<li><a href="http://www.free-css.com/">Orci nonummy fringilla</a></li>
<li><a href="http://www.free-css.com/">Enim vivamus convallis</a></li>
<li><a href="http://www.free-css.com/">Duis congue ultricies</a></li>
<li><a href="http://www.free-css.com/">Purus in mollis purus</a></li>
</ul>
<p>Sed vestibulum blandit nisl. Quisque elementum convallis purus. Suspendisse potenti. Donec nulla est, laoreet quis, pellentesque in. <a href="http://www.free-css.com/">More…</a></p>
<h3>Ipsum Dolorem</h3>
<ul>
<li><a href="http://www.free-css.com/">Sagittis Bibendum Erat</a></li>
<li><a href="http://www.free-css.com/">Malesuada Turpis</a></li>
<li><a href="http://www.free-css.com/">Quis Gravida Massa</a></li>
<li><a href="http://www.free-css.com/">Homepage</a></li>
</ul>
<div class="xbg"></div>
</div>
<div class="clear"></div>
</div>
<div id="footer">
<p>Copyright © 2006 Sitename.com. Designed by <a href="http://www.freecsstemplates.org">Free CSS Templates</a></p>
</div>
</div>
</body>
</html>
Related examples in the same category