junkbox : Design 9 « Templates « HTML / CSS






junkbox

    

<!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>
<title>JUNKBOX</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type='text/css'>
* {
  margin:0;
  padding:0;
  outline:0;
}
html, body {
  height:100%;
}
body {
  font-size:13px;
  line-height:19px;
  font-family:Georgia, Helvetica, Sans-Serif;
  color:#494949;
  background:#edf1e3;
}
a {
  color:#0252aa;
  text-decoration:none;
  cursor:pointer;
}
a:hover {
  text-decoration:underline;
}
a img {
  border:0;
}
input, textarea, select {
  font-size:12px;
  font-family:Georgia, Helvetica, Sans-Serif;
  color:#b2b2b2;
}
textarea {
  overflow:auto;
}
h2, h3 {
  font-family:"Trebuchet MS", Verdana, Serif;
  font-weight:normal;
  font-size:22px;
  line-height:24px;
}
h2 {
  color:#232323;
  padding-bottom:3px;
}
h3 {
  padding-bottom:4px;
  color:#ff9900;
}
.cl {
  display:block;
  height:0;
  font-size:0;
  line-height:0;
  text-indent:-4000px;
  clear:both;
}
.notext {
  font-size:0;
  line-height:0;
  text-indent:-4000px;
}
.left, .alignleft {
  float:left;
  display:inline;
}
.right, .alignright {
  float:right;
  display:inline;
}
#shell, #footer {
  width:930px;
  margin:0 auto;
  padding:0 15px;
  background:#fff;
  border:11px solid #e4e8db;
  border-top:0;
  border-bottom:0;
}
#shell {
  min-height:100%;
  height:auto !important;
  height:100%;
  margin:0 auto -37px;
}
.last {
  margin-right:0 !important;
}
#header {
  padding-bottom:14px;
}
.rss {
  position:absolute;
  top:10px;
  right:10px;
  font-size:0;
  line-height:0;
  text-indent:-4000px;
  background:url(images/rss.gif);
  width:20px;
  height:21px;
}
#navigation {
  background:#333333;
  margin-bottom:15px;
  padding:6px 6px 1px 7px;
  position:relative;
  width:917px;
  z-index:20;
}
#navigation ul {
  float:left;
  display:inline;
  list-style:none;
  font-weight:bold;
}
#navigation ul li {
  float:left;
  display:inline;
  padding:0 24px 6px 0;
}
#navigation ul li a {
  float:left;
  display:inline;
  line-height:27px;
  text-decoration:none;
  color:#cccc99;
  padding:0 5px;
  font-size:15px;
}
#navigation ul li a:hover, #navigation ul li a.active {
  background:#dee6d8;
  color:#333;
}
#navigation ul li.with-dd {
  position:relative;
}
#navigation ul li.with-dd a {
  background:url(images/navigation-arrow-normal.gif) right center no-repeat;
  padding-right:13px;
}
#navigation ul li.with-dd a:hover, #navigation ul li.with-dd a.active {
  background:#dee6d8 url(images/navigation-arrow-active.gif) right center no-repeat;
}
#navigation ul li.with-dd div {
  position:absolute;
  top:33px;
  left:0;
  background:#333333;
  z-index:20;
  width:150px;
  display:none;
}
#navigation ul li.with-dd div ul {
  padding-top:1px;
  font-weight:normal;
}
#navigation ul li.with-dd div li {
  float:none;
  display:block;
  height:100%;
  padding:0;
  list-style-position:outside;
}
#navigation ul li.with-dd div li a {
  height:100%;
  display:block;
  float:none;
  background:transparent !important;
  padding:0 5px !important;
  width:140px;
}
#navigation ul li.with-dd div li a:hover {
  background:#dee6d8 !important;
}
#logo {
  float:left;
  font-size:0;
  line-height:0;
}
#logo a {
  float:left;
  width:231px;
  height:92px;
  background:url(images/logo.gif);
  text-indent:-4000px;
}
#search {
  float:right;
  padding-top:32px;
}
#search a {
  float:left;
  color:#ff9933;
  text-decoration:underline;
  padding-right:7px;
  border-right:1px solid #e6e6e6;
  line-height:13px;
  margin:6px 11px 0 0;
}
#search a:hover {
  text-decoration:none;
}
#search .field {
  float:left;
  background:#f8faf2;
  border:1px solid #e4e8db;
  margin-right:2px;
  padding:4px 7px 5px 7px;
  width:226px;
}
#search .submit {
  float:left;
  width:55px;
  height:26px;
  background:url(images/search-submit.gif);
  border:0;
  cursor:pointer;
  font-size:0;
  line-height:0;
  text-indent:-4000px;
}
#slider {
  position:relative;
  width:930px;
  height:425px;
  overflow:hidden;
  z-index:10;
}
.jcarousel-clip, .slider-holder {
  width:930px;
  position:relative;
  overflow:hidden;
}
#slider ul {
  list-style:none;
  position:relative;
}
#slider ul li {
  float:left;
  width:930px;
}
#slider .image {
  float:left;
  height:425px;
}
#slider .data {
  width:284px;
  height:429px;
  float:right;
  background:#232323;
  color:#fff;
  padding:16px 0 0 8px;
}
#slider .data p {
  padding:0 26px 19px 2px;
}
#slider .read-more {
  color:#ff9933;
  height:32px;
  line-height:32px;
  float:right;
  display:inline;
  background:#000;
  padding:0 23px;
  text-decoration:underline;
}
#slider .read-more:hover {
  text-decoration:none;
}
.slider-navigation {
  width:260px;
  height:51px;
  line-height:51px;
  position:absolute;
  right:0;
  bottom:1px;
  padding:0 16px;
  background:#000;
}
.slider-navigation a {
  color:#88995e;
  text-decoration:underline;
}
.slider-navigation a:hover {
  text-decoration:none;
}
.slider-navigation .previous {
  float:left;
}
.slider-navigation .next {
  float:right;
}
#main {
  padding:24px 0 90px 0;
}
.box {
  float:left;
  width:296px;
  margin:0 21px 35px 0;
}
#content {
  width:611px;
}
#content p {
  padding-bottom:19px;
}
#content p.last {
  padding-bottom:0;
}
#main .box-image {
  float:left;
  padding:1px;
  border:2px solid #e4e8db;
  display:inline;
  margin-right:11px;
  height:88px;
  overflow:hidden;
  margin-top:4px;
}
#main .read-more {
  background:url(images/main-read-more.gif) left center no-repeat;
  padding-left:10px;
  color:#697a5c;
  font-size:12px;
  text-decoration:underline;
  margin-top:7px;
  float:left;
}
#main .read-more:hover {
  text-decoration:none;
}
.footer-push {
  height:37px;
}
#footer {
  font-size:11px;
  text-transform:uppercase;
}
.footerlink {
  color:#747373;
  padding:12px 8px 0 0;
  line-height:25px;
  background:url(images/footer-border.gif) top repeat-x;
}
#footer, #footer a {
  color:#747373;
  text-decoration:none;
}
#footer p {
  margin:0;
  padding:0;
  line-height:normal;
  white-space:nowrap;
}
#footer .lf {
  float:left;
}
#footer .rf {
  float:right;
}


</style>


<link rel="stylesheet" href="junkbox-css/style.css" type="text/css" media="all" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.jcarousel.js"></script>
<script type="text/javascript" src="js/jquery-func.js"></script>
<!--[if IE 6]><link rel="stylesheet" href="junkbox-css/ie6.css" type="text/css" media="all" /><![endif]-->
</head>
<body>
<!-- START PAGE SOURCE -->
<div id="shell">
  <div id="header">
    <div id="navigation">
      <ul>
        <li><a href="#" class="active">HOME</a></li>
        <li><a href="#">NEWS</a></li>
        <li><a href="#">INTERVIEWS</a></li>
        <li><a href="#">FEATURES</a></li>
        <li><a href="#">OPINIONS</a></li>
        <li class="with-dd"> <a href="#">EVENTS</a>
          <div>
            <ul>
              <li><a href="#">Category One</a></li>
              <li><a href="#">Category Two</a></li>
              <li><a href="#">Another Category</a></li>
              <li><a href="#">The Last One</a></li>
            </ul>
          </div>
        </li>
      </ul>
      <a href="#" class="rss">RSS</a>
      <div class="cl">&nbsp;</div>
    </div>
    <h1 id="logo"><a href="#">JUNKBOX</a></h1>
    <div id="search"> <a href="#">Advanced Search</a>
      <input type="text" name="string" value="I am looking for..." class="field" />
      <input type="submit" name="submit" value="Search" class="submit" />
    </div>
    <div class="cl">&nbsp;</div>
  </div>
  <div id="slider">
    <div class="slider-holder">
      <ul>
        <li>
          <div class="image"> <img src="junkbox-css/images/slide-1.jpg" alt="" /> </div>
          <div class="data">
            <h3>Owl Yeah!</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dictum, neque ut imperdiet pellentesque, nulla tellus tempus magna, sed consectetur orci metus a justo.</p>
            <p>Integer dictum, neque ut imperdiet pellentesque, nulla tellus tempus magna, sed consectetur orci metus a justo. Aliquam ac congue nunc. Mauris a tortor ut massa egestas tempus.</p>
            <a href="#" class="read-more">Read More</a> </div>
          <div class="cl">&nbsp;</div>
        </li>
        <li>
          <div class="image"> <img src="junkbox-css/images/slide-1.jpg" alt="" /> </div>
          <div class="data">
            <h3>Owl Yeah!</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dictum, neque ut imperdiet pellentesque, nulla tellus tempus magna, sed consectetur orci metus a justo.</p>
            <p>Integer dictum, neque ut imperdiet pellentesque, nulla tellus tempus magna, sed consectetur orci metus a justo. Aliquam ac congue nunc. Mauris a tortor ut massa egestas tempus.</p>
            <a href="#" class="read-more">Read More</a> </div>
          <div class="cl">&nbsp;</div>
        </li>
        <li>
          <div class="image"> <img src="junkbox-css/images/slide-1.jpg" alt="" /> </div>
          <div class="data">
            <h3>Owl Yeah!</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dictum, neque ut imperdiet pellentesque, nulla tellus tempus magna, sed consectetur orci metus a justo.</p>
            <p>Integer dictum, neque ut imperdiet pellentesque, nulla tellus tempus magna, sed consectetur orci metus a justo. Aliquam ac congue nunc. Mauris a tortor ut massa egestas tempus.</p>
            <a href="#" class="read-more">Read More</a> </div>
          <div class="cl">&nbsp;</div>
        </li>
      </ul>
      <div class="cl">&nbsp;</div>
    </div>
    <div class="slider-navigation"> <a href="#" class="previous">Previous</a> <a href="#" class="next">Next</a> </div>
  </div>
  <div id="main">
    <div id="content" class="box">
      <h2>Mauris a tortor ut nassa</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dictum, neque ut imperdiet pellentesque, nulla tellus tempus magna, sed consectetur orci metus a justo.</p>
      <p class="last">Integer dictum, neque ut imperdiet pellentesque, nulla tellus tempus magna, sed consectetur orci metus a justo. Aliquam ac congue nunc. Mauris a tortor ut massa egestas tempus.</p>
      <a href="#" class="read-more">Read More</a> </div>
    <div class="box last">
      <h2>Integer dictum</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dictum, neque ut imperdiet pellentesque, nulla tellus tempus magna, sed consectetur orci metus a justo.etur orci metus a justo. Aliquam ac congue nunc.</p>
      <a href="#" class="read-more">Read More</a> </div>
    <div class="cl">&nbsp;</div>
    <div class="box">
      <h2>Aliquam ac integar</h2>
      <div class="box-image"> <img src="junkbox-css/images/box-image-1.jpg" alt="" /> </div>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dictum, neque ut imperdiet pellentesque, nulla tellus tempus magna, </p>
      <div class="cl">&nbsp;</div>
      <a href="#" class="read-more">Read More</a> </div>
    <div class="box">
      <h2>Consectetur neque</h2>
      <div class="box-image"> <img src="junkbox-css/images/box-image-2.jpg" alt="" /> </div>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dictum, neque ut imperdiet pellentesque, nulla tellus tempus.</p>
      <div class="cl">&nbsp;</div>
      <a href="#" class="read-more">Read More</a> </div>
    <div class="box last">
      <h2>Metus a justo</h2>
      <div class="box-image"> <img src="junkbox-css/images/box-image-3.jpg" alt="" /> </div>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dictum, neque ut imperdiet pellentesque, nulla tellus tempus </p>
      <div class="cl">&nbsp;</div>
      <a href="#" class="read-more">Read More</a> </div>
    <div class="cl">&nbsp;</div>
    <div class="box">
      <h2>Adipiscing neque ut</h2>
      <div class="box-image"> <img src="junkbox-css/images/box-image-4.jpg" alt="" /> </div>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dictum, neque ut imperdiet pellentesque, nulla tellus tempus magna, </p>
      <div class="cl">&nbsp;</div>
      <a href="#" class="read-more">Read More</a> </div>
    <div class="box">
      <h2>Nulla tellus tempus</h2>
      <div class="box-image"> <img src="junkbox-css/images/box-image-5.jpg" alt="" /> </div>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dictum, neque ut imperdiet pellentesque, nulla tellus tempus</p>
      <div class="cl">&nbsp;</div>
      <a href="#" class="read-more">Read More</a> </div>
    <div class="box last">
      <h2>Dictum Integer</h2>
      <div class="box-image"> <img src="junkbox-css/images/box-image-6.jpg" alt="" /> </div>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dictum, neque ut imperdiet pellentesque, nulla tellus tempus</p>
      <div class="cl">&nbsp;</div>
      <a href="#" class="read-more">Read More</a> </div>
    <div class="cl">&nbsp;</div>
  </div>
  <div class="footer-push">&nbsp;</div>
</div>
<div id="footer">
  <div class="footerlink">
    <p class="lf">Copyright &copy; 2010 <a href="#">SiteName</a> - All Rights Reserved</p>
    <p class="rf"><a href="http://www.free-css.com/">Free CSS Templates</a> by <a href="http://chocotemplates.com/">ChocoTemplates.com</a></p>
    <div style="clear:both;"></div>
  </div>
</div>
<script type="text/javascript">Cufon.now();</script>
<!-- END PAGE SOURCE -->
</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.imprimis
47.improved
48.in-fantasy
49.inapickle
50.inception
51.indication
52.indicator
53.indigo
54.individual
55.inf04-css
56.inf05
57.inf07
58.inf08
59.infinitehorizon
60.inflight
61.informatif
62.innodemag
63.inscriptions
64.inspired by google forum
65.instant
66.integral
67.intelligent-studios
68.intensesimplicity
69.interactive-media
70.interactive-works
71.interchange
72.intercosmic
73.intercraft
74.interior-art
75.interlude
76.intermediate
77.internationalway
78.internet-encyclopedia
79.internet-phenomenon
80.internetbroadcast
81.internetcenter
82.internetmusic
83.internetsharing
84.Internet_Studio
85.invention
86.Inverted_Headline
87.invision
88.ionika
89.iqbiz
90.isometric
91.it-advance
92.it-technologies
93.itdesk
94.ithilien
95.iViolet2b
96.I_Like
97.JA
98.Jan002
99.Jazz Hut Template
100.jdf-boxing
101.jenniferlovehewitt
102.jetbiz
103.jet_30
104.Jewerly-Store
105.joker
106.judgement
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