imprimis : Design 9 « Templates « HTML / CSS

HTML / CSS » Templates » Design 9 
imprimis
    

<!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

Title      : Imprimis
Version    : 1.0
Released   : 20090510
Description: A two-column fixed-width template suitable for small websites.

-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Imprimis 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
*/

{
  margin: 0;
  padding: 0;
}

body {
  background: #D4C792 url(imprimis-images/img01.gif);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  color: #333333;
}

h1, h2, h3 {
  color: #AA2808;
}

h1 {
}

h2 {
}

h3 {
}

p, blockquote, ul, ol {
  margin-bottom: 20px;
  line-height: 1.6em;
}

{
}

blockquote {
}

ul {
}

ol {
}

{
  text-decoration: underline;
  color: #323B51;
}

a:hover {
  text-decoration: none;
  color: #FF0000;
}

/* Wrapper */

#wrapper {
}

/* Header */

#header {
  width: 710px;
  height: 96px;
  margin: auto;
  background: url(imprimis-images/img05.gifno-repeat left bottom;
}

/* Logo */

#logo {
  float: left;
  padding: 20px 0 0 15px;
}

#logo h1 {
  margin: 0;
  padding: 0;
  font: normal 36px "Trebuchet MS", Arial, Helvetica, sans-serif;
}

#logo h2 {
  margin: -5px 0 0 0;
  padding: 0;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 10px;
  font-weight: bold;
  color: #D4C792;
}

#logo a {
  text-decoration: none;
  color: #FFFFFF;
}

/* Menu */

#menu {
  float: right;
  width: 420px;
  height: 70px;
  padding-right: 5px;
  background: url(imprimis-images/img03.gifno-repeat left top;
}

#menu ul {
  margin: 0;
  padding: 37px 0 0 0;
  list-style: none;
  line-height: normal;
  margin-left: 30px;
}

#menu li {
  display: inline;
  text-align: center;
}

#menu a {
  display: block;
  float: left;
  height: 20px;
  padding: 10px 20px 0 20px;
  text-align: center;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: bold;
  color: #FFFFFF;
}

#menu a:hover, #menu .active a {
  color: #AA2808;
}

/* Page */

#page {
  width: 710px;
  margin: auto;
  background: #D4C792 url(imprimis-images/img04.gifrepeat-y;
}

/* Content */

#content {
  float: left;
  width: 388px;
  padding: 30px 0 0 35px;
}

#content h1, #content h2, #content h3 {
  margin-bottom: 20px;
}

#content h1 {
  font-size: 136%;
}

#content h2 {
  font-size: 107%;
}

#content h3 {
  font: 92%;
}

#content ul, #content ol {
  list-style-position: inside;
}

#content .boxed {
  float: left;
  width: 46%;
  padding-right: 2%;
}

#content .boxed h2 {
  padding: 5px 0;
  background: url(imprimis-images/img5.jpgrepeat-x left bottom;
}

/* Welcome */

#welcome {
}

/* Sample1 */

#sample {
}

/* Sample2 */

#sample2 {
}

/* Sidebar */

#sidebar {
  float: right;
  width: 208px;
  padding: 0 35px 0 0;
}

#sidebar ul {
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: normal;
}

#sidebar li {
  margin-bottom: 1px;
  padding: 20px 0;
}

#sidebar li ul {
}

#sidebar li li {
  margin: 0;
  padding: 7px 20px;
  border: none;
}

#sidebar h2 {
  padding: 5px 20px;
  background: url(imprimis-images/img6.jpg);
  border-bottom: 1px dotted #FFFFFF;
  font-size: 100%;
  color: #D4C792;
}

#sidebar h3 {
  font-size: 77%;
  color: #D4C792;
}

#sidebar p {
  margin: 0;
  line-height: normal;
  color: #D4C792;
}

#sidebar a {
  border: none;
  text-decoration: none;
  color: #FFFFFF;
}

#sidebar a:hover {
  text-decoration: underline;
}

/* Submenu */

#submenu {
}

/* News */

#news {
}

#news a {
  font-size: 85%;
}

/* Footer */

#footer {
  width: 710px;
  height: 50px;
  margin: auto;
  padding: 40px 0 0 0;
  background: url(imprimis-images/img06.gifno-repeat;
  color: #FFFFFF;
}

#footer p {
  margin: 0;
  text-align: center;
  font-size: 77%;
}

#footer a {
  text-decoration: underline;
  color: #FFFFFF;
}

#footer a:hover {
  text-decoration: none;
}

</style>


</head>
<body>
<div id="wrapper">
  <div id="header">
    <div id="logo">
      <h1><a href="#">Imprimis</a></h1>
      <h2><a href="http://www.freecsstemplates.org/">By Free CSS Templates</a></h2>
    </div>
    <!-- end div#logo -->
    <div id="menu">
      <ul>
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Products</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
    <!-- end div#menu -->
  </div>
  <!-- end div#header -->
  <div id="page">
    <div id="content">
      <div id="welcome">
        <h1>Welcome to Imprimis!</h1>
        <p><strong>Imprimis!</strong> is a free template from <a href="http://www.freecsstemplates.org/">Free CSS Templates</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 my site in some way. <em>Enjoy :)</em></p>
        <ol>
          <li><a href="#">Integer sit amet pede vel arcu aliquet pretium.</a></li>
          <li><a href="#">Pellentesque quis elit non lectus gravida blandit.</a></li>
          <li><a href="#">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a></li>
          <li><a href="#">Phasellus nec erat sit amet nibh pellentesque congue.</a></li>
          <li><a href="#">Cras vitae metus aliquam risus pellentesque pharetra.</a></li>
          <li><a href="#">Maecenas vitae orci vitae tellus feugiat eleifend.</a></li>
          <li><a href="#">Etiam ac tortor eu metus euismod lobortis.</a></li>
          <li><a href="#">Duis non ante in metus commodo euismod lobortis.</a></li>
        </ol>
      </div>
      <!-- end div#welcome -->
      <div id="sample1" class="boxed">
        <h2>Sample One</h2>
        <ul>
          <li><a href="#">Ut semper vestibulum est</a></li>
          <li><a href="#">Vestibulum luctus venenatis </a></li>
          <li><a href="#">Etiam malesuada enim</a></li>
          <li><a href="#">Aenean elementum facilisis </a></li>
          <li><a href="#">Ut tincidunt elit vitae augue</a></li>
          <li><a href="#">Sed quis odio sagittis leo </a></li>
        </ul>
      </div>
      <!-- end div#sample1 -->
      <div id="sample2" class="boxed">
        <h2>Sample Two</h2>
        <p>Quisque dictum nisl risus, sagittis, rutrum id, and nibh:</p>
        <ul>
          <li><a href="#">Integer rutrum nisl in mi</a></li>
          <li><a href="#">Etiam malesuada enim</a></li>
          <li><a href="#">Aenean elementum facilisis </a></li>
        </ul>
      </div>
      <!-- end div#sample2 -->
    </div>
    <!-- end div#content -->
    <div id="sidebar">
      <ul>
        <li id="submenu">
          <h2>Other Links</h2>
          <ul>
            <li><a href="#">Semper vestibulum</a></li>
            <li><a href="#">Vestibulum luctus</a></li>
            <li><a href="#">Integer rutrum</a></li>
            <li><a href="#">Etiam malesuada</a></li>
            <li><a href="#">Elementum facilisis</a></li>
            <li><a href="#">Ut tincidunt</a></li>
            <li><a href="#">Odio sagittis</a></li>
          </ul>
        </li>
        <!-- end li#submenu -->
        <li id="news">
          <h2>News &amp; Updates</h2>
          <ul>
            <li>
              <h3>10th May</h3>
              <p><a href="#">Pellentesque quis elit non lectus gravida blandit&hellip;</a></p>
            </li>
            <li>
              <h3>23rd April</h3>
              <p><a href="#">Lorem ipsum dolor sit amet, consectetuer adipiscing&hellip;</a></p>
            </li>
            <li>
              <h3>21st April</h3>
              <p><a href="#">Phasellus nec erat sit amet nibh pellentesque congue&hellip;</a></p>
            </li>
            <li>
              <h3>17th April </h3>
              <p><a href="#">Maecenas vitae orci vitae tellus feugiat eleifend&hellip;</a></p>
            </li>
          </ul>
        </li>
        <!-- end li#news -->
      </ul>
    </div>
    <!-- end div#sidebar -->
    <div style="clear: both; height: 1px"></div>
  </div>
  <!-- end div#page -->
  <div id="footer">
    <p id="legal">Copyright &copy; 2007 Imprimis. All Rights Reserved. Designed by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>.</p>
    <p id="links"><a href="#">Privacy Policy</a> | <a href="#">Terms of Use</a></p>
  </div>
  <!-- end div#footer -->
</div>
<!-- end div#wrapper -->
</body>
</html>

   
    
    
    
  
Related examples in the same category
1.grid-system
2.grotesqueart
3.grunge-superstar-website-template
4.guarantee
5.guideline
6.gumamela
7.gunmetal
8.h-free-software
9.h2o-bubbles
10.halcyon
11.hanging
12.hapal
13.happy_template
14.hardwarestore
15.hawaiblomst
16.heatwave
17.HelloLand
18.hexahedron
19.hibiscus
20.hifinews
21.HigherGround11
22.highmountains
23.highway
24.highwaycss
25.hilaryduff
26.HomeOfProjects
27.honeythemes
28.hyper
29.i-feel-lucky
30.ibex
31.html
32.html5-alin1
33.html5-passion
34.hurt-hobain-1.0
35.idyllic
36.ifeellucky
37.ignition
38.ikonik
39.illogix
40.illuminated
41.illusion
42.ilounge
43.imagination
44.impeccable
45.implied
46.improved
47.in-fantasy
48.inapickle
49.inception
50.indication
51.indicator
52.indigo
53.individual
54.inf04-css
55.inf05
56.inf07
57.inf08
58.infinitehorizon
59.inflight
60.informatif
61.innodemag
62.inscriptions
63.inspired by google forum
64.instant
65.integral
66.intelligent-studios
67.intensesimplicity
68.interactive-media
69.interactive-works
70.interchange
71.intercosmic
72.intercraft
73.interior-art
74.interlude
75.intermediate
76.internationalway
77.internet-encyclopedia
78.internet-phenomenon
79.internetbroadcast
80.internetcenter
81.internetmusic
82.internetsharing
83.Internet_Studio
84.invention
85.Inverted_Headline
86.invision
87.ionika
88.iqbiz
89.isometric
90.it-advance
91.it-technologies
92.itdesk
93.ithilien
94.iViolet2b
95.I_Like
96.JA
97.Jan002
98.Jazz Hut Template
99.jdf-boxing
100.jenniferlovehewitt
101.jetbiz
102.jet_30
103.Jewerly-Store
104.joker
105.judgement
106.junkbox
107.just-lucid
108.justgrey
109.Just_Lucid
110.kaleidos
111.kappebeans
112.katz-maus
113.keep_it_simple
114.keero
115.khaki
116.kim-fashion
117.kitchen
118.konnekt-media
119.KrazieKen
120.language-ofa-lover
121.lasvegas
122.lasvegastoo
123.layoftheland
124.lazybreeze
125.leafbiz
126.leafbrush
127.leanmagazine
128.leavesdew
129.leavesv1
130.lemonlimev2
131.leonardo
132.lepidoptera
133.lessantique
134.level2
135.librarypro
136.Light
137.lightspeed
138.limegreen
139.limelight
140.Limey
141.linear
142.lingerie-store
143.link-line
144.liquidity_graph
145.lithium
146.loadfoov2
147.loadhost
148.localize
149.locomotive
150.logistix
151.longbeach
152.loseout
153.lotusflower
154.lucent
155.lunaria-1
156.lusciouscandy
157.luvbold
158.mactall
159.mag
160.magazine
161.majestic
162.majesty
163.makemyday
164.marcelle
165.marked
166.Matrix
167.maxos
168.maxosdarker
169.mcube
170.meadows
171.media
172.Medieval
173.megacorporate
174.meganews
175.megazzine
176.memoranda
177.meretricious
178.Midddot
179.middle-blue
180.midnightrainforest
181.mighty
182.milestone
183.mimbo-magazine
184.minigallery
185.minimal
java2s.com  | Contact Us | Privacy Policy
Copyright 2009 - 12 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.