stichy : Design 8 « Templates « HTML / CSS






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="">&copy; 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

1.sprayedstrokes
2.Square
3.squarely
4.st-valentines-day
5.stacko
6.stamp
7.standardissue
8.standardized
9.starburst
10.stardust
11.stargazer
12.stark
13.steppingstone
14.stickybud
15.stickynotes
16.Stock
17.streetclock
18.strict
19.strockes
20.students-site
21.stygian
22.stylevantage1-0
23.stylish
24.stylized
25.subdued
26.subordinate
27.substance
28.substantial
29.superior
30.supplementary
31.surpris
32.surreal
33.sweatbee
34.swift
35.switchr
36.sworm
37.Symisun_01
38.symphonic
39.symphonyofhorror
40.synchronize
41.Synergy
42.systematized
43.tabbed
44.tangular
45.tardy
46.tcm
47.tealzine
48.team_three
49.templatika
50.Tenebrific
51.terje1_winter
52.terrafirma
53.terrafirma2
54.The-Carbon
55.the-dark-one
56.the-island
57.the-mmozine
58.the-music-studio
59.the-new-audi
60.the-synopsis
61.the-themepod
62.the-web-news
63.theacmegroup
64.thechosenone
65.thelatest
66.themanor
67.tinytemplate
68.themissing-piece
69.thermal
70.thesite
71.thetechies
72.thewall
73.the_gig
74.thisistext
75.throughout
76.thunder
77.ticktocklight
78.time
79.Timeless Template
80.timeless
81.timemanager
82.toolkit
83.tooplain
84.topbusiness
85.topgadgets
86.topworks
87.tornpaperdocom
88.totaltouch
89.towers
90.traditionalist
91.transient
92.transition
93.transport
94.trialservices
95.trikea-static
96.trinityinstitute
97.tropical-evening
98.tropical
99.truenature
100.turn-out-mag
101.Turnesol
102.turnitup
103.turrion-development
104.tv-archade
105.twirling
106.twisted
107.Typography
108.ultimateweb
109.unbound-1.0
110.uncomplicated
111.undefined
112.Underground
113.undertaking
114.UnderWraps
115.undiscovered
116.unembellished
117.unilluminated
118.uniq
119.unite
120.universal
121.unknown
122.unlink
123.unnamed
124.unqualified
125.urbanartist
126.usabilityreport
127.variety
128.vectorlover1-0
129.vegetable
130.veggie
131.ventix
132.vertical
133.verticals
134.vertigo
135.VeryGreen
136.VIBE
137.vibrant
138.Village
139.vintage-style
140.violetrays
141.visioninc
142.visions
143.vitruvius
144.vivid
145.Viziora
146.voodoo-dolls
147.voodoodollyv2.0
148.voyage
149.WaiveLive
150.walls
151.wanderer
152.warmblue
153.warped
154.watchthis
155.watercolored-portfolio
156.waterfactory
157.waterfall
158.waterfalls
159.WaterPool
160.we think
161.web-application
162.web-design-studio
163.web-design
164.web-hosting
165.web-shop
166.web2
167.webdesign
168.webdesigninfo
169.webmob
170.websitedesignx
171.webvision
172.Web_Application
173.wellness
174.whatsyoursolution
175.wickedred
176.widecommerce
177.widget
178.widgetlike
179.wildgoose
180.wing-the-air
181.winglobal
182.wiremesh
183.world-of-warcraft
184.xenlog
185.xgallery
186.xhtmldesign
187.xhtmldev_rainbow
188.xhtmldev_RealEstate
189.xodafields0.2
190.ynt
191.yosemite
192.your-blazing-app
193.yourhost
194.yourministry
195.zillanine