primitive
<!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
Name : Primitive
Version : 1.0
Released : 20080425
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>TerraFirma by Free CSS Templates</title>
<style type='text/css'>
/*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
Name : Primitive
Version : 1.0
Released : 20080425
*/
*
{
margin: 0px;
}
body
{
font-family: verdana, helvetica, sans-serif;
font-size: 13px;
padding: 0px;
background-color: #ffffff;
color: #222222;
}
a
{
background-color: inherit;
color: #0000EE;
}
a:hover
{
text-decoration: none;
}
p
{
text-align: justify;
margin-bottom: 15px;
line-height: 22px;
}
ul
{
list-style: disc;
padding-left: 15px;
margin-bottom: 15px;
}
h3
{
font-size: 20px;
margin-bottom: 30px;
}
h4
{
font-size: 13px;
margin-bottom: 5px;
}
#header
{
background-color: #0022aa;
color: #fff;
padding: 30px 40px 30px 40px;
}
#header h1
{
font-size: 30px;
}
#header h2
{
font-size: 14px;
}
#menu
{
padding: 5px 30px 0px 30px;
margin-bottom: 30px;
color: #222222;
background-color: #f5f5f5;
border-bottom: solid 1px #DADADA;
}
#menu div
{
clear: both;
}
#menu ul
{
display: block;
position: relative;
top: 1px;
list-style: none;
padding: 0px;
margin-bottom: 0px;
}
#menu ul li
{
position: relative;
float: left;
border: solid 1px #dadada;
border-bottom: 0px;
margin-right: 5px;
}
#menu ul li a
{
display: block;
padding: 5px 10px 8px 10px;
text-decoration: none;
background-color: inherit;
color: #333333;
}
#menu ul li a:hover
{
background-color: #0022AA;
color: #fff;
}
#menu ul li.active, #menu ul li.active a, #menu ul li.active a:hover
{
background-color: #ffffff;
color: #333333;
}
#container
{
margin: 0px 40px 0px 40px;
}
#primarycontainer
{
float: left;
margin-right: -200px;
width: 100%;
}
#primarycontent
{
margin-right: 240px;
}
#primarycontent p
{
margin-bottom: 20px;
}
#secondarycontent
{
float: right;
width: 200px;
}
#footer
{
text-align: center;
margin: 20px 0px 0px 0px;
padding-top: 15px;
border-top: solid 1px #DADADA;
clear: both;
}
.clearit
{
clear: both;
height: 1px;
}
</style>
</head>
<body>
<div id="header">
<h1>Primitive</h1>
<h2>A free design from NodeThirtyThree + Free CSS Templates</h2>
</div>
<div id="menu">
<ul>
<!--
Each list item below represents a tab in the menu. Set the class
of any list item to 'active' to make it, well, active.
-->
<li id="first" class="active"><a href="#">Homepage</a></li>
<li><a href="#">Products and Services</a></li>
<li><a href="#">Awards</a></li>
<li><a href="#">Employment</a></li>
<li><a href="#">Press Releases</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
<div></div>
</div>
<div id="container">
<div id="primarycontainer">
<div id="primarycontent">
<!-- Primary content start -->
<h3>Primitive: A free design from NodeThirtyThree + FCT</h3>
<h4>About this design</h4>
<p>Primitive is a free, fully standards-compliant CSS template designed by <a href="http://www.nodethirtythree.com/">NodeThirtyThree</a> for <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>.</p>
<p>This free template is released under a <a href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attributions 2.5</a> license, so youre pretty much free to do whatever you want with it (even use it commercially) provided you keep the links in the footer intact. Aside from that, have fun with it :)</p>
<p>Be sure to check out some of my commercial work over at <a href="http://www.4templates.com/?aff=n33">4Templates</a>.</p>
<p>Condimentum velit erat</p>
<p>Nibh metus ut libero. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Curabitur nonummy neque sed sem. Aliquam erat volutpat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac. Turpis egestas. Proin vel nisl. Suspendisse pretium magna vitae sem. Morbi lacinia leo. Morbi ac nulla vitae elit pretium mollis. Duis mauris ut neque.</p>
<!-- Primary content end -->
</div>
</div>
<div id="secondarycontent">
<!-- Secondary content start -->
<h4>Vestibulum Veroeros</h4>
<p>In sagittis, metus tempor rhoncus condimentum, velit erat sed ultrices odio, vel consectetuer adipiscing elit. Vestibulum et urna.</p>
<ul>
<li><a href="#">Nibh metus ut libero</a></li>
<li><a href="#">Class aptent taciti sociosqu</a></li>
<li><a href="#">Ad litora torquent per conubia</a></li>
<li><a href="#">Nostra, per inceptos hymenaeos</a></li>
<li><a href="#">Curabitur nonummy neque sed</a></li>
<li><a href="#">Aliquam erat volutpat</a></li>
<li><a href="#">Pellentesque habitant morbi</a></li>
<li><a href="#">Tristique senectus et netus</a></li>
</ul>
<!-- Secondary content end -->
</div>
<div class="clearit"></div>
</div>
<div id="footer">
© 2008 My Website. Design by <a href="http://www.nodethirtythree.com/">NodeThirtyThree</a> + <a href="http://www.freecsstemplates.org">Free CSS Templates</a>.
</div>
</body>
</html>
Related examples in the same category