outtabox : Design 6 « Templates « HTML / CSS






outtabox

   

<!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      : Outtabox
Version    : 1.0
Released   : 20070521
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>Outtabox 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 {
  margin: 20px 0;
  background: #859C0E;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  font-size: 13px;
  color: #554D49;
}

h1, h2, h3 {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-weight: normal;
  color: #000000;
}

h1 {
  margin-bottom: .75em;
  font-size: 182%;
}

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

p {
}

blockquote {
}

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

ul {
}

ol {
}

a {
  color: #859C0E;
}

a:hover {
  text-decoration: none;
}

/* Header */

#header {
  width: 680px;
  margin: 0 auto;
  padding: 0 0 0 0;
  background: url(outtabox-images/img01.gif) no-repeat 74px 18px;
}

#header h1 {
  margin: 0;
  padding: 0 196px 0 0;
  text-transform: uppercase;
  text-align: right;
  letter-spacing: 5px;
  font: normal 36px Georgia, "Times New Roman", Times, serif;
  color: #000000;
}

#header h1 a {
  color: #000000;
}

#header h2 {
  margin: -5px 0 0 0;
  padding: 0 210px 0 0;
  text-transform: lowercase;
  text-align: right;
  font: normal 30px Garamond, "Times New Roman", Times, serif;
  font-style: italic;
}

#header a {
  text-decoration: none;
}

/* Page */

#page {
  width: 580px;
  margin: 0 auto;
  padding: 0 0 0 100px;
  background: url(outtabox-images/img02.gif) repeat-y 100px 0px;
}

/* Content */

#content {
  float: left;
  width: 329px;
  padding: 40px 30px 0 25px;
}

#content .image {
  position: relative;
  margin: 3px 20px 0 -100px;
  float: left;
  border: 5px solid #000000;
}

#content .image img {
  border: 5px solid #FFFFFF;
}

/* Sidebar */

#sidebar {
  float: right;
  width: 180px;
  padding: 50px 0 0 0;
}

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

#sidebar li {
  margin-bottom: 15px;
}

#sidebar li ul {
}

#sidebar li li {
  margin: 0;
  padding: 5px 0;
  background: url(outtabox-images/img06.gif) repeat-x left bottom;
}

#sidebar h2 {
  margin-bottom: 10px;
  padding-left: 15px;
  text-transform: uppercase;
  background: url(outtabox-images/img05.gif) no-repeat left center;
  border-bottom: 1px solid #000000;
  font-size: 100%;
  font-weight: bold;
}

#sidebar h3 {
  margin: 0;
  padding-left: 15px;
  font-size: 85%;
}

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

#sidebar a {
  padding-left: 15px;
  background: url(outtabox-images/img07.gif) no-repeat 5px 50%;
  text-decoration: none;
  color: #FFFFFF;
}

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

/* Footer */

#footer {
  width: 470px;
  height: 60px;
  margin: 0 auto;
  padding: 15px 210px 0 0;
  background: url(outtabox-images/img04.gif) no-repeat 100px 0px;
}

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

#footer a {
  color: #FFFFFF;
}

</style>


</head>
<body>
<div id="header">
  <h1><a href="#">Outtabox</a></h1>
  <h2><a href="http://www.freecsstemplates.org/">By Free CSS Templates</a></h2>
</div>
<!-- end div#header -->
<div id="page">
  <div id="content">
    <h1>Welcome to Outtabox!</h1>
    <p><strong>Outtabox</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>. The photo is from <a href="http://www.pdphoto.org/">PDPhoto.org</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. <em>Enjoy :)</em></p>
    <p class="image" style="height: 130px;"><img src="outtabox-images/img03.jpg" alt="" width="120" height="120" /></p>
    <p>In posuere eleifend odio. Quisque semper augue mattis wisi. Maecenas ligula. Pellentesque viverra vulputate enim. Aliquam erat volutpat. Pellentesque tristique ante ut risus. Quisque dictum. Integer nisl risus, sagittis convallis, rutrum id, elementum congue, nibh dictum porta lectus.</p>
    <p>Suspendisse dictum porta lectus. Donec placerat odio vel elit. Nullam ante orci, pellentesque eget:</p>
    <ol>
      <li><a href="http://www.freecsstemplates.org/">Integer sit amet pede vel arcu aliquet pretium...</a></li>
      <li><a href="http://www.freecsstemplates.org/">Lorem ipsum dolor sit amet, consectetuer...</a></li>
      <li><a href="http://www.freecsstemplates.org/">Phasellus nec erat sit amet nibh pellentesque...</a></li>
    </ol>
  </div>
  <!-- end div#content -->
  <div id="sidebar">
    <ul>
      <li id="menu">
        <h2>Pages</h2>
        <ul>
          <li><a href="#">Homepage</a></li>
          <li><a href="#">Products</a></li>
          <li><a href="#">Services</a></li>
          <li><a href="#">About Us</a></li>
          <li><a href="#">Contact Us</a></li>
        </ul>
      </li>
      <!-- end li#menu -->
      <li id="news">
        <h2>Recent Updates</h2>
        <ul>
          <li>
            <h3>May 21, 2007</h3>
            <p><a href="#">Lorem ipsum dolor&hellip;</a></p>
          </li>
          <li>
            <h3>May 17, 2007</h3>
            <p><a href="#">Integer sit amet&hellip;</a></p>
          </li>
          <li>
            <h3>May 14, 2007</h3>
            <p><a href="#">Phasellus nec erat&hellip;</a></p>
          </li>
        </ul>
      </li>
      <!-- end li#news -->
    </ul>
  </div>
  <!-- end div#sidebar -->
  <div style="clear: both;">&nbsp;</div>
</div>
<!-- end div#page -->
<div id="footer">
  <p id="legal">Copyright &copy; 2007 Outtabox. 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 -->
</body>
</html>

   
    
    
  








Related examples in the same category

1.newave
2.newdarkside
3.newday
4.newera
5.newfangled
6.newgreeny
7.newgreys
8.newhorizon
9.news portal
10.news-print
11.newsbeat
12.newsflash
13.newsportal
14.newsroll
15.newstheme
16.newwave-business-inc
17.new_rise
18.NiceSite
19.nimbuslike
20.nixed
21.noimages
22.noname1
23.nonzero
24.nothingfanzy
25.nourish
26.nowhere
27.NuahSwirl
28.nullbullum
29.numerology
30.o-no-typography
31.obsess
32.obsession
33.obtanium
34.office-plants
35.offlimits
36.offrecord
37.oheon_com_110100021
38.ohgreenworld
39.Okeanos
40.old-wall
41.oldarchitecture
42.Olive
43.one-penny
44.one_two_three
45.online-edu
46.onlinemoviestore
47.oodles
48.openyourwindows
49.opposed
50.optimal-touch
51.orchidaceae
52.ordinaire
53.ormeggiare
54.ornamental
55.ornate
56.OrngBlu
57.oswd_blozilla
58.our-work
59.ourhouse
60.outdoorv1.0
61.outliers
62.outoftheblue
63.oxidation
64.package
65.paddy-harvest
66.pagedrape
67.paivi-k
68.paleforest
69.palmtrees
70.pamphlet
71.pancorbo
72.papira
73.paradigm
74.paradise1983
75.parchmenter
76.particle
77.particles
78.pastel
79.pastelco
80.pastelflowers
81.pastries
82.path-fider
83.patternmaker
84.PattyMcFatPat01
85.PattyMcFatPat03
86.pc
87.Pear Template
88.pear
89.pedestrian
90.penchantforphotos
91.pencilpink
92.people
93.perfectblemish
94.performance
95.perplex
96.personified
97.pillars
98.pills
99.pinnacle
100.Pistachio
101.pixabella
102.pixabella04
103.pixabella06
104.pixelationingreen
105.plaidshirt
106.plainandsimple
107.planning-feed
108.pluralism
109.plurkified
110.pointspace
111.pollinate
112.pollinating
113.pollination