bittersweet : Design 4 « Templates « HTML / CSS

bittersweet

     

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>Bitter Sweet</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
<style type='text/css'>
/*#############################################################
Name: Bitter Sweet
Date: 2006-10-02
Description: Lime flavoured template with two columns.
Author: Viktor Persson
URL: http://templates.arcsin.se

Feel free to use and modify but please provide credits.
#############################################################*/

/* standard elements */
* {
  margin: 0;
  padding: 0;
}
a {color: #682;}
a:hover {color: #9A6;}
body {
  background: #5F8000 url(bittersweet-img/bg.gif) repeat-y center top;
  color: #333;
  font: normal 62.5% "Lucida Sans Unicode",sans-serif;
}
input {
  color: #555;
  font: normal 1.1em "Lucida Sans Unicode",sans-serif;
}
p,cite,code,ul {
  font-size: 1.2em;
  padding-bottom: 1.2em;
}
ul {margin-left: 1.2em;}
li {list-style-image: url(bittersweet-img/li.gif);}
h1 {font-size: 1.4em;}
blockquote {
  background: #FFF;
  border-bottom: 1px solid #EEE;
  border-top: 1px solid #EEE;
  color: #333;
  display: block;
  font-size: 0.9em;
  margin-bottom: 1.2em;
  padding: 6px 12px;
}
blockquote p {padding: 3px 0;}
h1,h2,h3 {color: #654;}

/* misc */
.clearer {clear: both;}

/* structure */
.container {
  background: url(bittersweet-img/bgcontainer.gif) repeat-y;
  margin: 0 auto;
  width: 702px;
}

/* top */
.top {
  background: #567300;
  font: normal 2.4em Verdana,sans-serif;
  height: 60px;
  margin: 0 auto;
  width: 630px;
}
.top a {
  color: #FFF;
  display: block;
  line-height: 60px;
  text-decoration: none;
  width: 100%;
}
.top span {padding-left: 24px;}
.top a:hover {
  background: #688B00;
  color: #FFF;
}

/* header */
.header {
  background: url(bittersweet-img/header.jpg) no-repeat;
  height: 180px;
  margin: 0 auto;
  width: 630px;
}

/* item */
.item {clear: both;}
.item .date {
  background: url(bittersweet-img/bgdate.gif) no-repeat;
  color: #FDD;
  float: left;
  height: 40px;
  text-align: center;
  width: 36px;
}
.item .date div {padding-top: 4px;}
.item .date span {font: normal 1.6em serif;}
.item .content {
  float: left;
  width: 420px;
}
.item h1 {
  background: #567300;
  color: #FFF;
  line-height: 40px;
  padding-left: 16px;
}
.item .body {padding: 12px 18px;}

/* main */
.main {float: left;}

/* navigation */
.navigation {
  float: left;
  margin-left: 1px;
  width: 208px;
}
.navigation h1 {
  background: #81AC00;
  color: #FFF;
  font-size: 1.3em;
  line-height: 40px;
  padding-left: 12px;
}
.navigation ul {margin: 0; padding: 0;}
.navigation li {
  border-bottom: 1px solid #D5E8AD;
  list-style: none;
}
.navigation li a {
  background: #E8F6BF url(bittersweet-img/bgnavigation.gif) repeat-x;  
  color: #553;
  display: block;
  padding: 8px 4px 8px 12px;
  text-decoration: none;
}
.navigation li a:hover {
  background: #F0FFC6;
  color: #553;
}

/* footer */
.footer {
  background: url(bittersweet-img/bgfooter.gif) repeat-x;
  color: #FFF;
  font-size: 1.1em;
  line-height: 40px;
  margin: 0 auto;
  text-align: center;
  width: 626px;
}
.footer a {color: #FFF;}
.footer a:hover {color: #FAFCB0;}

</style>


</head>
<body>
<div class="container">
  <div class="top"> <a href="http://www.free-css.com/"><span>Bitter Sweet</span></a> </div>
  <div class="header"></div>
  <div class="main">
    <div class="item">
      <div class="date">
        <div>OCT</div>
        <span>01</span> </div>
      <div class="content">
        <h1>Porttitor posuere</h1>
        <div class="body">
          <p>In hac habitasse platea dictumst. Duis porttitor. Sed vulputate elementum nisl. Vivamus et mi at arcu mattis iaculis. Nullam posuere tristique tortor. In bibendum. Aenean ornare, <a href="http://www.free-css.com/">nunc eget pretium</a> porttitor, sem est pretium leo, non euismod nulla dui non diam. Pellentesque dictum faucibus leo. Vestibulum ac ante. Sed in est.</p>
          <blockquote>
            <p>Sed sodales nisl sit amet augue. Donec ultrices, augue ullamcorper posuere laoreet, turpis massa tristique justo, sed egestas metus magna sed purus.</p>
          </blockquote>
          <p>Aliquam risus justo, mollis in, laoreet a, consectetuer nec, risus. Nunc blandit sodales lacus. Nam luctus semper mi. In eu diam.</p>
          <p>Fusce porta pede nec eros. Maecenas ipsum sem, interdum non, aliquam vitae, interdum nec, metus. Maecenas ornare lobortis risus. Etiam placerat varius mauris. Maecenas viverra. Sed feugiat. Donec mattis <a href="http://www.free-css.com/">quam aliquam</a> risus. Nulla non felis sollicitudin urna blandit egestas. Integer et libero varius pede tristique ultricies. Cras nisl. Proin quis massa semper felis euismod ultricies. </p>
        </div>
      </div>
    </div>
    <div class="item">
      <div class="date">
        <div>SEP</div>
        <span>30</span> </div>
      <div class="content">
        <h1>Adipiscing</h1>
        <div class="body">
          <p>Aliquam risus justo, mollis in, laoreet a, consectetuer nec, risus. Nunc blandit sodales lacus. Nam luctus semper mi. In eu diam. Phasellus rutrum elit vel nisi. Cras mauris nulla, egestas quis, cursus at, venenatis ac, ante. Fusce accumsan enim et arcu. Duis sagittis libero at lacus. Suspendisse lacinia nulla eget urna.</p>
          <ul>
            <li>Tristique</li>
            <li>Aenean</li>
            <li>Pretium</li>
          </ul>
          <p>In hac habitasse platea dictumst. Duis porttitor. Sed vulputate elementum nisl. Vivamus et mi at arcu mattis iaculis. Nullam posuere tristique tortor. In bibendum. Aenean ornare, nunc eget pretium porttitor, sem est pretium leo, non euismod nulla dui non diam. Pellentesque dictum faucibus leo. Vestibulum ac ante. Sed in est. Sed sodales nisl sit amet augue. Donec ultrices, augue ullamcorper posuere laoreet, turpis massa tristique justo, sed egestas metus magna sed purus. Fusce eleifend, dui ut posuere auctor, justo elit posuere sapien, at blandit enim quam fringilla mi.</p>
        </div>
      </div>
    </div>
  </div>
  <div class="navigation">
    <h1>Something</h1>
    <ul>
      <li><a href="http://www.free-css.com/">home</a></li>
      <li><a href="http://www.free-css.com/">sociis natoque</a></li>
      <li><a href="http://www.free-css.com/">semper</a></li>
      <li><a href="http://www.free-css.com/">convallis</a></li>
    </ul>
    <h1>Another thing</h1>
    <ul>
      <li><a href="http://www.free-css.com/">consequat molestie</a></li>
      <li><a href="http://www.free-css.com/">sem justo</a></li>
      <li><a href="http://www.free-css.com/">semper</a></li>
      <li><a href="http://www.free-css.com/">sociis natoque</a></li>
    </ul>
    <h1>Third and last</h1>
    <ul>
      <li><a href="http://www.free-css.com/">sociis natoque</a></li>
      <li><a href="http://www.free-css.com/">magna sed purus</a></li>
      <li><a href="http://www.free-css.com/">tincidunt</a></li>
      <li><a href="http://www.free-css.com/">consequat molestie</a></li>
    </ul>
  </div>
  <div class="clearer"><span></span></div>
  <div class="footer">&copy; 2006 <a href="http://www.free-css.com/">Website.com</a>. Valid <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> &amp; <a href="http://validator.w3.org/check?uri=referer">XHTML</a>. Template design by <a href="http://templates.arcsin.se">Arcsin</a> </div>
</div>
</body>
</html>

Related examples in the same category

1.	arrangement
2.	arthemia
3.	artica
4.	aspherical
5.	assiduous
6.	asterisk
7.	astounded
8.	astroturfd
9.	atomohost
10.	atrandafir582
11.	AttainDigital
12.	audi-template
13.	aurelius
14.	authenticity
15.	autoportal
16.	axian
17.	azulmedia2-1
18.	azure
19.	bagatelle
20.	balanced
21.	bananaleaf
22.	barricade
23.	begrimed
24.	belowthehorizon
25.	bennevis
26.	bermuda01
27.	besmart
28.	bestwebdesign
29.	beta
30.	beyond
31.	bigdeal
32.	BigSpaceLove
33.	bioessence
34.	Biru_Manteb
35.	Black
36.	chamberlandsrestaurant
37.	chara
38.	characterized
39.	charcoal
40.	charitable-organization
41.	chary
42.	chasmogamous
43.	chesspiece
44.	chic
45.	chicanery
46.	chromz
47.	churchsitev.2
48.	citrus-island1-1
49.	clementine
50.	clicker
51.	modernclassic
52.	modernmagic
53.	modernworld
54.	A_Simple_Theme
55.	minimalistica
56.	miniseries
57.	mint-idea
58.	minty
59.	mirax
60.	miscellaneous
61.	mistybud
62.	mlpdesign02
63.	mlpdesign03
64.	mlpdesign04
65.	mlpdesign08
66.	model-4-me
67.	model-portfolio
68.	modelagency
69.	modelportfolio
70.	model_2
71.	moderna
72.	Modified
73.	modulation
74.	module-mag
75.	mokofactory
76.	monster
77.	mork-horisont
78.	mountainbreeze
79.	mouse
80.	mrtechie
81.	multiflex2
82.	multiple
83.	multiplex
84.	music
85.	muzzle
86.	MyCode
87.	mydiary
88.	myfamily
89.	myhedspacefree08
90.	mykindathing
91.	myportfolio
92.	mystic-garden
93.	Mythology
94.	myvalentine
95.	naeve
96.	natheless
97.	nationalpark
98.	neapolitan
99.	neatness
100.	nebuladog
101.	nedweb
102.	NelVoize
103.	neoneon
104.	neonix
105.	neoplanet-01
106.	neotech
107.	netindustries
108.	neuphoric
109.	neutral
110.	neutraldesk
111.	neutralgreen
112.	new kitchen design
113.	new-fast-host
114.	new-home
115.	new-rise
116.	new-year