stichy
<!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" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="robots" content="index, follow" />
<style type='text/css'>
* { padding: 0; margin: 0; }
body {
/* font-family: Arial, Helvetica, sans-serif;
font-size: 0.8125em; /* 16x0.8125=13px */ */
line-height: 1.1875em;/* 16x1.2=19px */
font: 75%/1.6em Verdana, Tahoma, Arial, Geneva, sans-serif;
margin:0; /* 18x1=18px */
background:#E4DD97;
}
h1 {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 1.375em; /* 16x1.375=22px */
line-height: 1.636em;/* 16x1.636=36px */
background: #607A00;
color: #FFF;
padding: 5px 0 5px 10px;
margin: 0;
}
h1 a, h1 a:hover, h1 a:visited, h1 a:active {
color: #FFF;
text-decoration:none;
}
h2,h3 {
font-size: 1.3em;
margin:0;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #607A00;
}
a, ul a, a:active, a:visited {
color: #607A00;
text-decoration:none;
}
a:hover {
color: #607A00;
text-decoration:underline;
}
#wrapper {
margin: 15px auto;
padding:10px;
width: 950px;
background: #FFF;
}
#header {
color: #333;
width: 930px;
padding: 10px;
height: 150px;
margin: 0px;
background: #31444F url(Stichy-img/header.jpg);
border-top:2px solid #E4DD97;
border-bottom:2px solid #E4DD97;
}
#navigation {
float: left;
width: 950px;
color: #333;
padding: 5px 0 5px 0;
margin: 0;
background: #607A00;
}
#navigation li {
display:inline;
border:0px solid #FFF;
color:#FFF;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 1.2em; /* 16x0.8125=13px */
line-height: 1.5em;/* 16x1.2=19px */
font-weight:bold;
}
#navigation a {
margin:0;
color:#FFF;
text-decoration:none;
padding: 4px 15px 4px 15px;
}
#navigation a:hover {
margin:0;
background: #738F11;
padding: 4px 15px 4px
/* text-decoration:underline; */
}
#one {
color: #333;
padding: 10px 0 0 0;
width: 606px;
float: left;
background: #FFF;
}
#one .item {
padding: 10px;
margin: 0 0 10px 0;
background: #FFF;
border:1px solid #E4DD97;
}
#two {
color: #31444F;
padding: 10px 0 0 10px;
width: 334px;
float: left;
}
#two .item, #two_one .item, #two_two .item {
padding: 10px;
background: #FFFCDF;
border:1px solid #E4DD97;
margin: 0 0 10px 0;
}
#two_one {
color: #333;
background: #FFF;
margin: 0px 0 0px 0px;
padding: 0px 0 10px 0;
width: 162px;
float: left;
}
#two_two {
color: #333;
background: #FFF;
margin: 0px 0px 0px 0px;
padding: 0px 0 10px 10px;
width: 162px;
float: left;
}
h2, h3 {
display:block;
margin: 0 0 15px 0;
padding:0;
}
p {
margin:0;
padding: 0 0 10px 0;
color: #31444F;
}
.item ul {
margin:0;
padding: 0 0 0 0;
color: #31444F;
display:block;
}
.item li {
margin:0 0 0 20px;
padding:0;
color: #31444F;
}
.item ol {
margin: 0 0 10px 5px;
color: #31444F;
}
.item img {
float:left;
margin: 3px 10px 10px 0;
padding:3px;
background:#FFF;
border:1px solid #E4DD97;
display:block;
}
#footer {
clear: both;
background: #607A00;
width: 950px;
color: #333;
padding: 5px 0 5px 0;
margin: 0;
}
#footer a {
margin:0;
color:#FFF;
text-decoration:none;
padding: 5px 15px 5px 15px;
}
#footer li {
display:inline;
border:0px solid #FFF;
color:#FFF;
}
.itemfooter {
padding:0;
margin:0 0 0 0;
font-size:0.75em;
clear: both;
}
#one .item p a , p a, .item .itemfooter a {
text-decoration:underline;
}
/* form */
label {
display:block;
font-weight:bold;
margin: 5px 0 0 5px;
}
input {
margin: 0 0 0 5px;
padding:3px;
width:165px;
border: 1px solid #9AC31F;
font: normal 0.8em Arial, sans-serif;
color:#333;
background: #FFFEEF url(Stichy-img/form_bg.jpg);
}
textarea {
margin: 5px 0 0 5px;
padding:3px;
border: 1px solid #9AC31F;
font: normal 0.8em Arial, sans-serif;
color:#333;
width:320px;
height:100px;
display:block;
overflow:auto;
background: #FFFEEF url(Stichy-img/form_bg.jpg);
}
input.button {
margin: 0 0 0 5px;
height: 22px;
width:120px;
background: #607A00;
border: 1px solid #9AC31F;
font: normal 0.8em Arial, sans-serif;
color:#fff;
}
input.search {
margin: 6px 6px 0 5px;
height: 22px;
width:75px;
background: #E4DD97;
border: 1px solid #9AC31F;
font: normal 0.8em Arial, sans-serif;
}
.searchform {
float:right;
}
.searchform p {
margin:0; padding:0;
}
</style>
<title>Stichy</title>
</head>
<body>
<!-- Begin Wrapper -->
<div id="wrapper">
<!-- Begin Search -->
<form action="#" class="searchform">
<p>
<input name="query" value="Search" type="text" />
<input name="search" class="search" value="Search" type="submit" />
</p>
</form>
<!-- End Search -->
<h1><a href="#" title="">Stichy</a></h1>
<div id="header">
</div>
<!-- Begin Navigation -->
<div id="navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<!-- End Navigation -->
<!-- Begin Column One-->
<div id="one">
<div class="item">
<h2>Sample Post</h2>
<p><img src="img/image.jpg" alt="your picture" /> Pax necne per, ymo invetero voluptas, qui dux somniculosus lascivio vel res compendiose Oriens propitius, alo ita pax galactinus emo. </p>
<p><a href="#" title="">this is a <b>bold</b> and <i>italic</i> link example</a></p>
<p>Rterritus. Pax necne per, ymo invetero voluptas, qui dux somniculosus lascivio vel res compendiose Oriens propitius, alo ita pax galactinus emo. </p>
<div class="itemfooter">
<a href="#" title="">Read more</a> |
<a href="#" title="">Comments (23)</a> |
posted by: <a href="#" title="">author</a> | Dez 29, 2007
</div>
</div>
<div class="item formbg">
<h2>Example Form</h2>
<form method="get" action="#">
<p>
<label>Name</label>
<input name="name" value="Your Name" type="text" />
<label>E-Mail</label>
<input name="email" value="Your Email" type="text" />
<label>Your Comment</label>
<textarea rows="" cols=""></textarea>
<br />
<input class="button" type="submit" />
</p>
</form>
</div>
</div>
<!-- End Column One-->
<!-- Begin Column Two -->
<div id="two">
<div class="item">
<h3>Template Info</h3>
<p>Stichy is a free, fully standards-compliant CSS template designed by <a href="http://www.kosikowski.de">supa</a>. This free template is released under a Creative Commons Attributions 2.5 license, so you're pretty much free to do whatever you want with it (even use it commercially) provided you keep the links in the footer intact.</p>
</div>
<div id="two_one">
<div class="item">
<h3>Categories</h3>
<ul>
<li><a href="#" title="">Home</a></li>
<li><a href="#" title="">Category 1</a></li>
<li><a href="#" title="">Category 2</a></li>
<li><a href="#" title="">Category 3</a></li>
</ul>
</div>
<div class="item">
<h3>Articles</h3>
<ul>
<li><a href="#" title="">Article 1</a></li>
<li><a href="#" title="">Article 2</a></li>
<li><a href="#" title="">Article 3</a></li>
</ul>
</div>
</div>
<div id="two_two">
<div class="item">
<h3>Comments</h3>
<ul>
<li><a href="#" title="">comment 1</a></li>
<li><a href="#" title="">comment 2</a></li>
<li><a href="#" title="">comment 3</a></li>
</ul>
</div>
<div class="item">
<h3>What you need</h3>
<p>Rterritus. Pax necne per, ymo invetero voluptas.</p>
<ul>
<li><a href="#">list point</a></li>
<li><a href="#">list point</a></li>
<li><a href="#">list point</a></li>
</ul>
</div>
</div>
</div>
<!-- End Column Two -->
<!-- Begin Footer -->
<div id="footer">
<ul>
<li><a href="">© 2007 your copyright note</a></li>
<li><a href="http://validator.w3.org/check?uri=referer">XHTML 1.0</a></li>
<li><a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a></li>
<li><a href="http://www.kosikowski.de">design by supa</a></li>
</ul>
</div>
<!-- End Footer -->
</div>
<!-- End Wrapper -->
</body>
</html>
Related examples in the same category