stickynotes : Design 8 « Templates « HTML / CSS






stickynotes

   

<!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
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Sticky Notes by Free Css Templates</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type='text/css'>

/*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
*/

body {
  margin: 20px;
  padding: 0;
  background: #D4D4D4 url(stickynotes-images/img1.gif);
  font-family: "Comic Sans MS", Arial, Helvetica, sans-serif;
  color: #704B3A;
}

h1, h2, h3, h4, h5, h6, form {
  margin: 0;
  padding: 0;
}

a {
  background: url(stickynotes-images/img10.gif) repeat-x left bottom;
  text-decoration: none;
  color: #6157E4;
}

a:hover {
  background-image: none;
}

.content ul {
  margin-top: 0;
}

/* Teal Notes */

.tealnotes {
}

/* Yellow Notes */

.yellownotes {
  margin-bottom: 20px;
  background: #FFF846 url(stickynotes-images/img2.gif) no-repeat left bottom;
}

.yellownotes .heading {
  height: 50px;
  padding: 10px;
  background: url(stickynotes-images/img3.gif) repeat-x left center;
}

.yellownotes .content {
  padding: 0 20px 60px 20px;
}

/* Orange Notes */

.orangenotes {
  margin-bottom: 20px;
  background: #FF8C46 url(stickynotes-images/img6.gif) no-repeat left bottom;
}

.orangenotes .heading {
  height: 50px;
  padding: 10px;
  background: url(stickynotes-images/img7.gif) repeat-x left center;
}

.orangenotes .content {
  padding: 0 20px 60px 20px;
}

/* Green Notes */

.greennotes {
  margin-bottom: 20px;
  background: #AEE63F url(stickynotes-images/img4.gif) no-repeat left bottom;
}

.greennotes .heading {
  height: 50px;
  padding: 10px;
  background: url(stickynotes-images/img5.gif) repeat-x left center;
}

.greennotes .content {
  padding: 0 20px 60px 20px;
}

/* Header */

#header {
  width: 720px;
  height: 100px;
  margin: 0 auto;
  padding: 20px;
  background: #5BCE9E url(stickynotes-images/img8.gif) no-repeat left bottom;
}

#header h1, #header h2 {
  float: left;
  margin: 0;
  padding: 0;
}

#header a {
  background: none;
}

/* Pages */

#pages {
  width: 560px;
  margin: -50px auto 50px auto;
  padding-left: 200px;
}

#pages h2 {
  float: left;
  margin: 0;
  padding: 0;
  font-size: 1em;
}

#pages ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

#pages li {
  display: inline;
  padding-left: 1em;
}

#pages a {
}

/* Content */

#content {
  width: 760px;
  margin: 0 auto;
}

/* Posts */

#posts {
  float: left;
  width: 490px;
}

.post {
  margin-bottom: 20px;
  background: #5BCE9E url(stickynotes-images/img9.gif) repeat-x left top;
}

.title {
  padding: 5px 20px;
}

.posted {
  padding: 0 0 0 20px;
  font-size: small;
}

.story {
  padding: 20px;
}

.meta {
  height: 60px;
  padding: 40px 0 0 0;
  background: url(stickynotes-images/img8.gif) no-repeat left bottom;
}

.meta p {
  margin: 0;
  padding: 0 20px 0 0;
  text-align: right;
}

/* Search */

#search {
  float: right;
  width: 250px;
}

#search .content {
  padding-bottom: 100px;
}

/* Archives */

#archives {
  clear: right;
  float: right;
  width: 250px;
}

/* Categories */

#categories {
  clear: right;
  float: right;
  width: 250px;
}

/* Blogroll */

#blogroll {
  clear: right;
  float: right;
  width: 250px;
}

/* Footer */

#footer {
  clear: both;
  text-align: center;
}

</style>


</head>
<body>
<div id="header">
  <h1><a href="#">Sticky Notes</a></h1>
  <h2><a href="http://www.freecsstemplates.org/">by Free Css Templates</a></h2>
</div>
<div id="pages">
  <h2>Pages</h2>
  <ul>
    <li class="active"><a id="page1" href="#">My Blog</a></li>
    <li><a id="page2" href="#">My Photos</a></li>
    <li><a id="page3" href="#">My Favorites</a></li>
    <li><a id="page4" href="#">About Me</a></li>
    <li><a id="page5" href="#">Contact Me</a></li>
  </ul>
</div>
<div id="content">
  <div id="posts">
    <div class="post">
      <h2 class="title">Welcome to Sticky Notes!</h2>
      <h3 class="posted">Posted on January 1th, 2007 by Author</h3>
      <div class="story">
        <p><em><strong>Sticky Notes</strong></em> is a free template from <a href="http://www.freecsstemplates.org/"><strong>Free CSS Templates</strong></a> released under a <a href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attribution 2.5 License</a>. You're free to use it for both commercial or personal use. I only ask that you link back to <a href="http://www.freecsstemplates.org/">my site</a> in some way. Enjoy :)</p>
      </div>
      <div class="meta">
        <p>Filed under <a href="#" class="category">Uncategorized</a> | <a href="#" class="comment">1 Comment &raquo;</a></p>
      </div>
    </div>
    <div class="post">
      <h2 class="title">Sample Tags</h2>
      <h3 class="posted">Posted on January 1st, 2007 by Author</h3>
      <div class="story">
        <p>An ordered list:</p>
        <ol>
          <li><a href="#">Nullam et orci in erat viverra ornare.</a></li>
          <li><a href="#">Suspendisse quis gravida massa felis.</a></li>
          <li><a href="#">Curabitur malesuada turpis nec ante.</a></li>
        </ol>
        <p>A blockquote: </p>
        <blockquote>
          <p>&#8220;Et pulvinar pede ligula a  sapien. Donec fermentum condimentum nisi. Proin iaculis mauris id lorem  viverra molestie. Duis vel orci. Nam consequat. Morbi nec lacus.&#8221;</p>
        </blockquote>
      </div>
      <div class="meta">
        <p>Filed under <a href="#" class="category">Uncategorized</a> | <a href="#" class="comment">1 Comment &raquo;</a></p>
      </div>
    </div>
  </div>
  <div id="search" class="yellownotes">
    <h2 class="heading">Search</h2>
    <div class="content">
      <form method="get" action="#">
        <div>
          <input type="text" id="textfield1" name="textfield1" value="" size="18" />
          <input type="submit" id="submit1" name="submit1" value="Go" />
        </div>
      </form>
    </div>
  </div>
  <div id="archives" class="greennotes">
    <h2 class="heading">Archives</h2>
    <div class="content">
      <ul>
        <li class="first"><a href="#">February</a> (7) </li>
        <li><a href="#">January 2007</a> (31)</li>
        <li><a href="#">December 2006</a> (31)</li>
        <li><a href="#">November 2006</a> (30)</li>
      </ul>
    </div>
  </div>
  <div id="categories" class="orangenotes">
    <h2 class="heading">Categories</h2>
    <div class="content">
      <ul>
        <li class="first"><a href="#">Quisque vestibulum</a></li>
        <li><a href="#">Sed a nisl a lacus</a></li>
        <li><a href="#">Quisque sagittis</a></li>
        <li><a href="#">Etiam volutpat</a></li>
        <li class="first"><a href="#">Quisque vestibulum</a></li>
        <li><a href="#">Quisque sagittis</a></li>
        <li><a href="#">Etiam volutpat</a></li>
        <li><a href="#">Sed a nisl a lacus</a></li>
        <li><a href="#">Quisque sagittis</a></li>
        <li><a href="#">Etiam volutpat</a></li>
        </ul>
    </div>
  </div>
  </div>
<div id="footer">
  <p>Copyright &copy; 2006 Sticky Notes. Designed by <a href="http://www.freecsstemplates.org/"><strong>Free CSS Templates</strong></a></p>
</div>
</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.stichy
15.stickybud
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