nixed
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type='text/css'>
/* CSS Document */
* {
margin: 0px;
padding: 0px;
}
body {
background-color: #fff;
color: #9f9f9f;
font-size: 100%;
font-family: "arial", helvetica, sans-serif;
}
a {
text-decoration: none;
color: #9bb2be;
font-size: 79%;
}
a:hover {
text-decoration: none;
color: #fff;
background: #c60000;
}
#wrap {
width: 800px;
margin: 0 auto;
}
/* Header */
#header {
padding: 5px;
}
#logo {
}
.nav {
float: right;
margin-top: -30px;
}
#tnav li {
display: inline;
list-style-type: none;
padding-right: 20px;
}
.important {
float: left;
width: 400px;
padding: 10px;
padding-left: 50px;
background: url(nixed-images/check.png) no-repeat left;
color: #000;
}
.important h3 {
pading-bottom: 3px;
color: rgb(179,60,47);
}
.update {
width: 300px;
float: right;
padding: 5px;
}
.update p {
font-size: 75%;
}
.more {
text-align: right;
}
.switcher {
clear: both;
float: right;
}
#switch ul {
margin-left: -2;
padding-left: 0;
white-space: nowrap;
}
#switch li {
display: inline;
list-style-type: none;
}
#switch li a {
padding: 1px 3px;
}
#switch li a:link {
color: #171717;
background-color: #eee;
text-decoration: none;
}
#switch li a:visited {
color: #fff;
background-color: #eee;
text-decoration: none;
}
#switch li a:hover, a:visited#current {
color: #fff;
background-color: #333;
text-decoration: none;
}
#active a:link, #active a:visited, #active a:hover {
color: #fff;
background-color: #333;
text-decoration: no
}
/* Content */
#content {
border-top: 3px solid #000;
clear: both;
text-align: middle;
font-family: "arial", sans-serrif;
font-size: 120%;
color: #fff;
}
.num1 {
padding-top: 15px;
width: 30px;
float: left;
border-right: 2px solid #eee;
height: 73px;
text-align: center;
background: #ee1284;
}
.con1 {
padding-top: 15px;
padding-left: 5px;
width: 512px;
float: left;
border-right: 1px solid #eee;
height: 73px;
background: #ee1284;
}
.pic1 {
padding-top: 15px;
width: 240px;
float: right;
height: 73px;
background: #ee1284;
background: #ee1284 url(nixed-images/pic1.png) no-repeat bottom;
}
.num2 {
padding-top: 15px;
width: 30px;
float: left;
border-right: 2px solid #eee;
height: 73px;
text-align: center;
background: #FFA31C;
}
.con2 {
padding-top: 15px;
padding-left: 5px;
width: 512px;
float: left;
border-right: 1px solid #eee;
height: 73px;
background: #FFA31C;
}
.pic2 {
padding-top: 15px;
width: 240px;
float: right;
height: 73px;
background: #FFA31C;
background: #FFA31C url(nixed-images/pic2.png) no-repeat bottom;
}
.num3 {
padding-top: 15px;
width: 30px;
float: left;
border-right: 2px solid #eee;
height: 73px;
text-align: center;
background: #B4B4E0;
}
.con3 {
padding-top: 15px;
padding-left: 5px;
width: 512px;
float: left;
border-right: 1px solid #eee;
height: 73px;
background: #B4B4E0;
}
.pic3 {
padding-top: 15px;
width: 240px;
float: right;
height: 73px;
background: #B4B4E0;
background: #B4B4E0 url(nixed-images/pic3.png) no-repeat bottom;
}
.tab1 {
color: #fff;
}
.conend {
border-top: 3px solid #000;
}
/* Bottom Content */
#conbot {
border-top: 3px solid #000;
clear: both;
}
#conbot h1 {
padding: 5px;
}
.botcon {
float: left;
width: 450px;
padding: 10px;
}
.botrnav {
width: 250;
float: right;
padding: 10px;
margin-top: 28px;
}
.search {
clear: both;
float: right;
height: 20px;
padding-bottom: 20px;
}
/* Bottom Navigation and Links */
#bnav {
width: 300px;
}
#bnav li {
list-style-type: none;
}
#bnav ul {
margin-left: 0;
padding-left: 0;
}
#bnav a {
display: block;
padding: 3px;
width: 300px;
background-color: #eee;
border-bottom: 1px solid #000;
}
#bnav a:link, #navlist a:visited {
color: #171717;
text-decoration: none;
}
#bnav a:hover {
background-color: #171717;
color: #fff;
}
/* Bottom Special */
#special {
clear: both;
}
#special h3 {
text-align: center;
margin-top: 20px;
color: #fff;
}
.spec1 {
width: 263px;
float: left;
background: url(nixed-images/temp.png) no-repeat top;
height: 50px;
}
.spec2 {
width: 263px;
float: left;
background: url(nixed-images/temp.png) no-repeat bottom;
height: 50px;
}
.spec3 {
width: 263px;
float: right;
background: url(nixed-images/temp.png) no-repeat bottom;
height: 50px;
}
/* footer */
#footer {
clear: both;
border-top: 3px solid #000;
background: #eee;
padding: 5px;
}
/* Definition List */
dt {
padding-left: 20px;
margin: 5px;
font-weight: bold;
height: 20px;
white-space: nowrap;
color: #697B84;
background: url(nixed-images/one.png) no-repeat left;
font-family: "Arial", helvetica, sans-serif;
}
dd {
color: #666;
font-family: "Arial", helvetica, sans-serif;
}
</style>
<title>Nixed</title>
</head>
<body>
<div id="wrap">
<div id="header">
<div id="logo">
<h1> Nixed BY <span>DENiAL</span> </h1>
</div>
<div class="nav">
<ul id="tnav">
<li><a href="http://www.free-css.com/">Home</a></li>
<li><a href="http://www.free-css.com/">Link 2</a></li>
<li><a href="http://www.free-css.com/">Link 3</a></li>
<li><a href="http://www.free-css.com/">Link 4</a></li>
<li><a href="http://www.free-css.com/">Link 5</a></li>
</ul>
</div>
<div class="important">
<h3> Support Open Design! </h3>
<p> This is an exclusive release for <a href="http://www.free-css.com/">Open Designs</a> I will release it everywhere else in febuary of 2007. Please support open designs, and enjoy using this design as much as I enjoyed making it. As always this is released under GPL, all I ask in return is some sort of link to me, like in the footer. If you have any questions, or would like to let me know what you used this or any of my designs for please contact me through my site.</p>
</div>
<div class="update">
<h4> <a href="http://www.free-css.com/">Update Title</a> </h4>
<p> Lorem ipsum dolor sit amet consectetuer dui cursus neque amet Aenean. Ligula velit
Nulla lacinia a metus ut ipsum convallis elit wisi. Sem tempor nunc et ante et Sed
vitae laoreet scelerisque id. Nulla In nunc urna felis Nullam consectetuer ut iaculis
molestie quis. Montes at in id tempus vitae. </p>
<p class="more"> <a href="http://www.free-css.com/">Read More</a> </p>
<h4> <a href="http://www.free-css.com/">Update Title</a> </h4>
<p> Lorem ipsum dolor sit amet consectetuer dui cursus neque amet Aenean. Ligula velit
Nulla lacinia a metus ut ipsum convallis elit wisi. Sem tempor nunc et ante et Sed
vitae laoreet scelerisque id. Nulla In nunc urna felis Nullam consectetuer ut iaculis
molestie quis. Montes at in id tempus vitae. </p>
<p class="more"> <a href="http://www.free-css.com/">Read More</a> </p>
</div>
<div class="switcher">
<ul id="switch">
<li id="active"> <a href="http://www.free-css.com/" id="current" name="current">Style 1</a></li>
<li><a href="http://www.free-css.com/">Style 2</a></li>
<li><a href="http://www.free-css.com/">Style 3</a></li>
<li><a href="http://www.free-css.com/">Style 4</a></li>
</ul>
</div>
<div id="content">
<div class="num1">
<h1> 1 </h1>
</div>
<div class="con1">
<p> Lorem ipsum dolor sit amet consectetuer dui cursus neque amet Aenean. Ligula velit
Nulla lacinia a metus ut ipsum convallis elit wisi. </p>
</div>
<div class="pic1"></div>
<div class="num2">
<h1> 2 </h1>
</div>
<div class="con2">
<p> Lorem ipsum dolor sit amet consectetuer dui cursus neque amet Aenean. Ligula velit
Nulla lacinia a metus ut ipsum convallis elit wisi. </p>
</div>
<div class="pic2"></div>
<div class="num3">
<h1> 3 </h1>
</div>
<div class="con3">
<p> Lorem ipsum dolor sit amet consectetuer dui cursus neque amet Aenean. Ligula velit
Nulla lacinia a metus ut ipsum convallis elit wisi. </p>
</div>
<div class="pic3"></div>
</div>
<div id="conbot">
<div class="botcon">
<h3> SOMETHING AWESOME! </h3>
<p> Lorem ipsum dolor sit amet consectetuer elit nunc pellentesque ipsum id. Et leo
platea et iaculis lobortis sapien Curabitur elit ipsum sagittis. Velit Curabitur urna
eu quis vitae malesuada et Sed morbi sollicitudin. Vel lacus id Sed elit cursus Nam
Vestibulum dui ante risus. Magna quis justo ut Pellentesque id tortor lorem eget
penatibus Vestibulum. Egestas Suspendisse pretium massa lorem platea In dolor Aenean
justo Curabitur. Dui at egestas. </p>
</div>
<div class="botrnav">
<ul id="bnav">
<li><a href="http://www.free-css.com/">Home</a></li>
<li><a href="http://www.free-css.com/">Link 2</a></li>
<li><a href="http://www.free-css.com/">Link 3</a></li>
<li><a href="http://www.free-css.com/">Link 4</a></li>
<li><a href="http://www.free-css.com/">Link 5</a></li>
</ul>
</div>
<div class="search">
<form action="#" method="get">
<input type="text" name="q" value="Search for something" />
</form>
</div>
</div>
<div id="special">
<div class="spec1">
<h3> Special 1 </h3>
</div>
<div class="spec2">
<h3> Special 2 </h3>
</div>
<div class="spec3">
<h3> Special 3 </h3>
</div>
</div>
<div id="footer"> © 2006 <a href="http://www.free-css.com/">Your<span>.site</span></a> DESiGN By:<a href="http://www.free-css.com/"><span>DENiAL.</span>DESiGN</a> </div>
</div>
</div>
</body>
</html>
Related examples in the same category