genghiskahn
<!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" xml:lang="en">
<head>
<title>SimplyAwesome</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type='text/css'>
body
{
margin: 0;
padding: 0;
color: #ffffff;
line-height: 1.6em;
background-color: #000033;
font: normal 13px "Trebuchet MS", "Lucida Grande", Verdana, Georgia, Sans-Serif;
}
/* Links */
a:link { text-decoration: none; color: #335577; font-weight: bold; padding: 0 5px; }
a:visited { text-decoration: none; color: #557799; font-weight: bold; padding: 0 5px; }
a:hover, a:active { color: #990000; background-color: #eae5cf; }
/* HTML Elements */
h1, h2, h3, h4, h5, h6
{
font-weight: normal;
margin: 0;
padding: 10px 0;
color: #990000;
}
h1 { font-size: 28px; }
h2 { font-size: 24px; }
h3 { font-size: 20px; }
h4 { font-size: 18px; }
h5 { font-size: 16px; font-weight: bold; }
h6 { font-size: 14px; text-transform: uppercase; }
ul { list-style-type: square; }
dl { margin: 0 20px; border-left: 5px solid #485ba8; }
dt, dd { margin: 0; padding: 0 10px; }
dt { padding-top: 5px; }
dd { padding-top: 10px; padding-bottom: 10px; }
dt.alt, dd.alt { background-color: #eeeeee; }
blockquote
{
background-color: #eeeeee;
border-left: 5px solid #485ba8;
padding: 10px;
margin: 5px 20px;
}
code { color: #996633; font-family: Consolas, Verdana, "Courier New", Sans-Serif; font-size: 12px; }
acronym { border-bottom: 1px dotted #000000; }
/* Structure */
#container { background-color: #f9f9f9; color: #000000; float: left; width: 100%; }
#header { background-color: #000033; color: #f9f9f9; }
#navigation { float: left; width: 100%; }
#wrapper { width: 80%; margin: 0 auto; }
#content-wrapper { float: left; width: 60%; }
#content { float: left; padding: 20px; }
#sidebar-wrapper { float: left; width: 40%; }
#sidebar { float: left; padding: 20px; }
#footer
{
text-align: center;
clear: both;
font-size: 11px;
color: #999999;
padding: 10px 0;
background-color: #000033;
}
/* Header */
#header h1, #header h2 { padding-left: 10px; margin: 0; }
#header h1 { padding-bottom: 0; padding-top: 20px; }
#header h2 { padding-bottom: 20px; color: #999999; font-size: 16px; }
#header h1 a:link, #header h1 a:visited { color: #b7bfbf; padding: 0; }
#header h1 a:hover, #header h1 a:active { background-color: transparent; color: #ffce40; }
/* Navigation */
#navigation ul
{
margin: 0;
padding: 0;
list-style-type: none;
float: left;
width: 100%;
background-color: #eff5e8;
}
#navigation li { float: left; margin: 0; padding: 0; }
#navigation li a
{
float: left;
display: block;
padding: 5px 10px;
}
#navigation li a:hover,
#navigation li a:active
{
background-color: #000033;
color: #ffffff;
}
body#bhome li#home a,
body#babout li#about a,
body#bcontact li#contact a,
body#bblog li#blog a,
body#bnews li#news a
{
background-color: #8c9fec;
color: #000033;
}
/* Content */
#content a:link{ border-bottom: 1px dotted #335577; }
#content a:visited { border-bottom: 1px dotted #557799; }
#content a:hover, #content-wrapper a:active { border-bottom-color: #990000; }
#content dt
{
font-size: 24px;
}
#content dt a:link, #content dt a:visited { border-bottom-width: 0; padding: 0; }
#content dt a:hover, #content dt a:active { background-color: transparent; }
/* Footer */
#footer a:link, #footer a:visited { padding: 0; }
#footer a:hover, #footer a:active { background-color: transparent; color: #cfcfcf; }
</style>
<!--[if lt ie 7]>
<link rel="stylesheet" type="text/css" media="screen,projection" href="ie-win.css" />
<![endif]-->
</head>
<body id="bhome">
<div id="container">
<div id="header">
<h1><a href="http://www.free-css.com/">SimplyAwesome</a></h1>
<h2>brain.save(universe.fetch(everything_interesting));</h2>
</div>
<div id="navigation">
<ul>
<li id="home"><a href="http://www.free-css.com/">Home</a></li>
<li id="about"><a href="http://www.free-css.com/">About Us</a></li>
<li id="contact"><a href="http://www.free-css.com/">Contact Us</a></li>
<li id="blog"><a href="http://www.free-css.com/">Our Blog</a></li>
<li id="news"><a href="http://www.free-css.com/">News</a></li>
</ul>
</div>
<div id="wrapper">
<div id="content-wrapper">
<div id="content">
<h1>This is a Big Heading (As If You Couldn't Tell)</h1>
<p> Feel free to use this template for personal or commercial use. Make any modifications you want.
Just refrain from selling it to other people. You don't need to attribute the design to me, but
a name and a <a href="http://www.free-css.com/">link</a> is appreciated.
This page validates as Xhtml 1.0 Strict and Css 2.0 Strict. Acronym example: the <acronym title="National Security Agency">NSA</acronym> deals with <code>lots of code</code>. </p>
<h2>This is a Slightly Smaller Heading</h2>
<blockquote>
<p> This is a blockquote. I might need to write a couple more lines for it to show up properly,
which is why I'm rambling on. I guess I could have used the Lorem Ipsum generator, but it's
not very interesting to read, is it? I think this should be enough for you to get the idea. </p>
</blockquote>
<h4>A Definition List</h4>
<dl>
<dt> <a href="http://www.free-css.com/">Why is the square root of 2 irrational?</a> </dt>
<dd> [...] The Greeks discovered that the diagonal of a square whose sides are 1 unit long has a diagonal
whose length cannot be rational. By the Pythagorean Theorem, the length of the diagonal equals the
square root of 2. So the square root of 2 is irrational! </dd>
<dt class="alt"> <a href="http://www.free-css.com/">Genghis Kahn </a> </dt>
<dd class="alt"> An ugly-looking guy (we can be fairly confident that he is indeed ugly, because any artist who rendered
his portrait differently would have been presumably summarily executed). But if you insist on reading a
more boring biography of him, go ahead and click the link. </dd>
</dl>
</div>
</div>
<div id="sidebar-wrapper">
<div id="sidebar">
<div class="searchBox">
<form action="#" method="post" id="searchForm">
<p>
<input type="text" size="20" id="keywords" />
<input type="submit" id="search" value="Search" />
</p>
</form>
</div>
<h2>Here's the Heading Again</h2>
<ul>
<li>This</li>
<li>is</li>
<li>an unordered</li>
<li>list.</li>
</ul>
<h2>And Yet Another Heading</h2>
<ol>
<li>Whereas</li>
<li>this</li>
<li>is</li>
<li>an ordered</li>
<li>list.</li>
</ol>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</div>
</div>
</div>
<div id="footer">
<p> Copyright © 1162 – 1227 Genghis Kahn and company. All rights reserved |
Destroying countries at people's expense since 1206 | Recently finished conquering <a href="http://validator.w3.org/check/referer">Xhtml</a> and <a href="http://jigsaw.w3.org/css-validator/check/referer?warning=no&profile=css2">Css</a> </p>
</div>
</div>
</body>
</html>
Related examples in the same category