blueflex
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>blueflex - a free web template</title>
<style type='text/css'>
/* everything */
body {
background-color:#e0e0e0;
font-family:Arial, Helvetica, sans-serif;
font-size:1.0em;
margin:0 auto;
padding:0;
}
* {
margin:0;
padding:0;
}
*:focus {
outline:none; /* removes ugly dotted border */
}
/* default element styles */
ul, ol {
margin:10px 0 10px 30px;
}
p, ul, ol, blockquote {
font-size:0.85em;
line-height:1.9em;
text-align:justify;
margin-bottom:10px;
}
a {
color:#00264D;
text-decoration:none;
border-bottom:1px dotted #00264D;
}
a:hover {
color:#1D4A76;
}
table {
width:100%;
}
table tr th {
background:#00264D url('blueflex-images/nav-bg.png') repeat-x scroll 0 50%;
padding:5px 10px;
color:#ffffff;
font-weight:bold;
letter-spacing:2px;
border:1px solid #00264D;
}
table tr td {
padding:5px 10px;
color:#333333;
letter-spacing:1px;
border-bottom:1px solid #dddddd;
}
table tr.alt td {
background-color:#EFEFEF;
}
blockquote {
font-style:italic;
letter-spacing:1px;
margin:15px 0 15px 30px;
background:#ffffff url('blueflex-images/quote.png') no-repeat scroll top left;
padding:10px 0 10px 55px;
}
code {
font-family:"Courier New", Courier, monospace;
letter-spacing:1px;
margin:15px 0 15px 30px;
display:block;
border:1px solid #dddddd;
padding:15px 10px;
}
/* page wrapper */
div#wrap {
width:90%;
background:#ffffff url('blueflex-images/header-bg.png') no-repeat scroll top left;
margin:0 auto;
padding:0;
}
div#header {
padding:30px 20px;
}
div#header div#header-text {}
div#header div#header-text h1, div#header div#header-text h2 {
padding:0;
margin:0;
}
div#header div#header-text h1, div#header div#header-text h1 a {
color:#00264D;
border-bottom:none;
font-size:1.8em;
letter-spacing:-5px;
line-height:1.0em;
text-transform:lowercase;
}
div#header div#header-text h1 a span {
color:#333333;
}
div#header div#header-text h2 {
color:#cccccc;
letter-spacing:-2px;
margin-top:-5px;
text-transform:lowercase;
}
/* navigation menu */
div#navigation {
height:55px;
background:#00264D url('blueflex-images/nav-bg.png') repeat-x scroll bottom left;
border-top:1px solid #00264D;
}
div#navigation ul {
list-style:none;
margin:0 10px;
padding:0;
position:relative;
top:0;
}
div#navigation ul li {
display:block;
float:left;
}
div#navigation ul li.selected {
background:#ffffff url('blueflex-images/item-right.png') no-repeat scroll bottom right;
position:relative;
top:-1px;
}
div#navigation ul li a {
display:block;
float:left;
color:#ffffff;
border-bottom:none;
height:25px;
font-weight:bold;
font-size:1.05em;
padding:15px 20px 9px;
}
div#navigation ul li.selected a {
background:transparent url('blueflex-images/item-left.png') no-repeat scroll bottom left;
color:#00264D;
padding:16px 20px 9px;
}
/* page content area */
div#content {
background:#ffffff url('blueflex-images/body-bg.png') repeat-x scroll top left;
border-top:1px solid #00264D;
}
/* main content area + page styles */
div#page {
float:left;
padding:10px;
width:66%;
color:#555555;
}
div#page h2 {
color:#444444;
letter-spacing:-2px;
}
div#page h3 {
color:#00264D;
}
div#page h5 {
font-size:0.9em;
font-style:italic;
font-weight:normal;
color:#333333;
}
/* sidebar + sidebar styles */
div#sidebar {
float:right;
width:28%;
padding:10px;
}
div#sidebar h3 {
background:transparent url('blueflex-images/h3-bg.png') no-repeat scroll bottom left;
color:#00264D;
letter-spacing:0;
font-size:1.4em;
margin-bottom:5px;
padding:10px 0;
font-weight:normal;
}
div#sidebar h3 strong {
color:#333333;
}
div#sidebar ul {
list-style:none;
margin-left:0;
}
div#sidebar p.newsitem {
font-size:0.82em;
line-height:1.6em;
margin-bottom:35px;
}
div#sidebar p.newsitem span {
font-size:0.75em;
text-transform:uppercase;
color:#00264D;
font-weight:bold;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
div#sidebar p.newsitem a.read-more-link {
font-family:Tahoma, Arial, sans-serif;
float:right;
color:#999999;
border-bottom:none;
display:block;
letter-spacing:1px;
font-size:0.8em;
padding:0 0 0 17px;
margin:10px 0;
background:#ffffff url('blueflex-images/read-more.png') no-repeat scroll 0 50%;
}
div#sidebar p.newsitem a.read-more-link:hover {
text-decoration:underline;
}
div#sidebar ul {
margin:0 0 0 10px;
}
div#sidebar ul li {
padding:5px 0;
}
div#sidebar ul li a {
border-bottom:none;
text-decoration:underline;
}
div#sidebar ul.blocklist {
margin:0;
}
div#sidebar ul.blocklist li {
padding:0;
}
div#sidebar ul.blocklist li a {
display:block;
border:none;
text-decoration:underline;
color:#00264D;
padding:5px 10px;
}
div#sidebar ul.blocklist li.selected-item a {
background:#00264D url('blueflex-images/nav-bg.png') repeat-x scroll 0 50%;
color:#ffffff;
border:1px solid #00264D;
}
/* footer styles */
div.footer {
clear:both;
padding:15px 5px;
border-top:1px solid #dbdbdb;
width:98%;
margin:0 auto;
}
div.footer p {
margin:0;
color:#999999;
}
div.footer p a {
color:#999999;
border-bottom:none;
text-decoration:underline;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<div id="header-text">
<!-- page header - use <span></span> to colour text black, default color orange -->
<h1><a href="#">blue<span>flex</span></a></h1>
<!-- sub title, text here is transformed to lower case -->
<h2>Welcome To Our Website</h2>
</div>
</div>
<div id="navigation">
<ul>
<!-- top navigation use selected class for selected item -->
<li><a href="index.html">home</a></li>
<li class="selected"><a href="examples.html">examples</a></li>
<li><a href="#">solutions</a></li>
<li><a href="#">our service</a></li>
<li><a href="#">support</a></li>
<li><a href="#">contact</a></li>
</ul>
</div>
<div id="content">
<!-- left hand main content -->
<div id="page">
<h2>Examples</h2>
<p>The page shows a selection of the default styling of page elements.</p>
<h3>Headings</h3>
<h1>Heading H1</h1>
<h2>Heading H2</h2>
<h3>Heading H3</h3>
<h4>Heading H4</h4>
<h5>Heading H5</h5>
<h6>Heading H6</h6>
<br /><br />
<h3>Table</h3>
<table cellpadding="0" cellspacing="2">
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>1</td>
<td>John Smith</td>
<td>28</td>
</tr>
<tr class="alt">
<td>2</td>
<td>Fred James</td>
<td>49</td>
</tr>
<tr>
<td>3</td>
<td>Rachel Johnson</td>
<td>19</td>
</tr>
<tr class="alt">
<td>4</td>
<td>Debbie Cook</td>
<td>33</td>
</tr>
</table>
<br /><br />
<h3>Unordered list</h3>
<ul>
<li>List item #1</li>
<li>List item #2</li>
<li>List item #3</li>
<li>List item #4</li>
</ul>
<h3>Ordered list</h3>
<ol>
<li>List item #1</li>
<li>List item #2</li>
<li>List item #3</li>
<li>List item #4</li>
</ol>
<h3>Blockquote</h3>
<blockquote>
<p>640K ought to be enough for anybody</p>
</blockquote>
<h3>Code</h3>
<code><?php echo('Hello world!'); ?></code>
</div>
<!-- end left hand main content -->
<!-- start sidebar -->
<div id="sidebar">
<!-- sidebar h3: use <strong> for black text -->
<h3>latest <strong>news</strong></h3>
<p class="newsitem">
<span>18 April 2009</span><br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas in massa. Curabitur id nisl. Duis tempus lorem nec justo. In hac habitasse platea dictumst.
<a class="read-more-link" href="#">Read more</a>
</p>
<p class="newsitem">
<span>14 April 2009</span><br />
Duis dolor ante, pharetra vitae, aliquam consectetur, ultricies sed, sem. Maecenas consequat magna ac ligula. Phasellus tincidunt odio non magna. Nullam tincidunt convallis lorem.
<a class="read-more-link" href="#">Read more</a>
</p>
<h3>helpful <strong>links</strong></h3>
<!-- sidebar blocklist: use class selected-item for selected item -->
<ul class="blocklist">
<li><a href="http://www.spyka.net" title="spyka Webmaster resources">spyka webmaster</a></li>
<li class="selected-item"><a href="http://www.justfreetemplates.com" title="free web templates">Free web templates</a></li>
<li><a href="http://www.spyka.net/forums" title="webmaster forums">Webmaster forums</a></li>
<li><a href="http://www.profileartist.net" title="premium templates">Premium templates</a></li>
<li><a href="http://www.awesomestyles.com" title="free phpbb3 themes">phpBB3 styles</a></li>
</ul>
<h3>top <strong>categories</strong></h3>
<ul>
<li><a href="#">Lorem ipsum dolor sit amet.</a></li>
<li><a href="#">Quisque consequat nunc a felis.</a></li>
<li><a href="#">Suspendisse consequat magna at.</a></li>
<li><a href="#">Etiam eget diam id ligula rhoncus.</a></li>
<li><a href="#">Sed in mauris non nibh.</a></li>
</ul>
</div>
<!-- end sidebar -->
<!-- start footer -->
<div class="footer">
<p>© 2009 sitename. Design by <a href="http://www.spyka.net">spyka webmaster</a> | <a href="http://www.justfreetemplates.com">Free Web Templates</a> | <a href="http://validator.w3.org/check/referer" title="valid XHTML">XHTML</a> | <a href="http://jigsaw.w3.org/css-validator/check/referer" title="valid CSS">CSS</a></p>
</div>
<!-- end footer -->
</div>
</div>
</body>
</html>
Related examples in the same category