buzz : Design 3 « Templates « HTML / CSS

buzz
     

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Buzz</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:12px;
  line-height:18px;
  font-family:Arial, Helvetica, Sans-Serif;
  color:#fff;
  background:url(buzz-images/bg.gif) repeat 0 0;
}
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:Arial, Helvetica, sans-serif;
}
textarea {
  overflow:auto;
}
.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;
}
.last {
  background:none !important;
  margin-right:0 !important;
}
#wrapper {
  background:url(buzz-images/bg2.gif) no-repeat center 0;
  min-height:100%;
  height:auto !important;
  height:100%;
  margin:0 auto -242px;
}
.shell {
  width:960px;
  margin:0 auto;
}
#header {
  background:url(buzz-images/header-bg.gif) repeat-x 0 0;
}
#header .header-bg {
  background:url(buzz-images/header-bg2.gif) no-repeat center 0;
}
#navigation {
  float:left;
  display:inline;
  padding-top:27px;
  width:280px;
}
#navigation ul {
  list-style:none outside none;
}
#navigation ul li {
  float:left;
  display:inline;
  background:url(buzz-images/nav-divider.gif) no-repeat right 8px;
  padding-right:10px;
  margin-right:10px;
}
#navigation ul li a {
  float:left;
  display:inline;
  color:#313131;
  font-family:"Times New Roman", Arial, sans-serif;
  text-transform:uppercase;
}
#navigation ul li a:hover, #navigation ul li a.active {
  text-decoration:none;
  font-weight:bold;
}
a.subscribe {
  float:left;
  display:inline;
  width:65px;
  background:url(buzz-images/ico-subscribe.gif) no-repeat right 3px;
  color:#939393;
  font-family:"Times New Roman", Arial, sans-serif;
  margin:27px 0 0 403px;
  padding-right:14px;
  text-transform:uppercase;
}
.search {
  float:left;
  display:inline;
  padding:26px 0 0 25px;
}
.search .field {
  float:left;
  display:inline;
  border:1px solid #dfdfd3;
  color:#bfbfae;
  font-family:"Times New Roman", Arial, sans-serif;
  text-transform:uppercase;
  width:130px;
  height:15px;
  padding:2px 4px 3px;
  background:#fff;
}
.search .search-btn {
  float:left;
  display:inline;
  background:none;
  border:0;
  cursor:pointer;
  text-decoration:underline;
  text-transform:uppercase;
  color:#939393;
  font-family:"Times New Roman", Arial, sans-serif;
}
h1#logo {
  float:left;
  display:inline;
  width:225px;
  height:55px;
  padding:28px 0 0 12px;
}
h1#logo a {
  display:block;
  height:55px;
  background:url(buzz-images/logo.gif) no-repeat 0 0;
}
#sub-nav {
  height:30px;
  background:#000;
  margin-top:15px;
}
#sub-nav ul {
  list-style:none outside none;
  padding-left:9px;
}
#sub-nav ul li {
  float:left;
  display:inline;
  background:url(buzz-images/sub-nav-divider.gif) no-repeat right 15px;
  padding-right:10px;
  margin-right:10px;
}
#sub-nav ul li a {
  float:left;
  display:inline;
  font-size:13px;
  font-family:"Times New Roman", Arial, sans-serif;
  text-transform:uppercase;
  color:#fff;
  line-height:30px;
}
#sub-nav ul li a:hover, #sub-nav ul li a.active {
  text-decoration:none;
  color:#d7cc96;
}
#main {
  margin-top:11px;
}
#content {
  width:660px;
}
.box {
  width:627px;
  float:left;
  display:inline;
  background:#000;
  padding:11px;
  margin:0 10px 11px 0;
  position:relative;
}
.box .box-image {
  float:left;
  display:inline;
  width:119px;
  height:85px;
  margin-right:11px;
  position:relative;
}
.box .box-body .posted {
  font-size:10px;
  color:#7f7f7f;
  text-transform:uppercase;
}
.box h2 {
  font-size:21px;
  line-height:24px;
  font-weight:normal;
  font-family:"Times New Roman", Arial, sans-serif;
}
.box h2.title {
  margin-bottom:5px;
}
.box .box-body .text {
  font-size:13px;
  line-height:17px;
  color:#c6be95;
}
.box .box-body a {
  text-decoration:underline;
  text-transform:uppercase;
}
.box .box-body a:hover {
  text-decoration:none;
}
.box .box-body .continue {
  font-size:9px;
  color:#ffa200;
}
.box .box-body .comments {
  font-size:9px;
  color:#fff;
  background:url(buzz-images/ico-comments.gif) no-repeat right 2px;
  padding-right:12px;
  margin-right:5px;
}
.box .overlay {
  position:absolute;
  top:0;
  left:0;
  width:119px;
  height:85px;
  background:url(buzz-images/overlay.png) no-repeat 0 0;
  display:none;
  z-index:10;
  cursor:pointer;
}
.box .close {
  position:absolute;
  top:4px;
  right:4px;
  width:7px;
  height:7px;
  background:url(buzz-images/close-btn.gif) no-repeat 0 0;
  display:block;
  z-index:10;
}
.box-featured .box-image {
  width:426px;
  height:264px;
}
.box-featured .box-body {
  float:left;
  display:inline;
  width:180px;
}
.box-featured .box-body .text {
  padding-bottom:5px;
  line-height:19px;
}
.box-featured .mark-featured {
  position:absolute;
  top:0;
  right:0;
  width:137px;
  height:138px;
  background:url(buzz-images/mark-featured.png) no-repeat 0 0;
  display:block;
  z-index:10;
}
.box-small {
  width:298px;
}
.box-small .box-body h2 {
  padding-bottom:10px;
}
#sidebar {
  width:300px;
}
#sidebar .box {
  float:none;
  display:block;
  margin-right:0;
  width:278px;
}
.box-tabs {
  min-height:264px;
}
.tabs {
  height:100%;
  overflow:hidden;
}
.tabs ul {
  list-style:none outside none;
}
.tabs ul li {
  float:left;
  display:inline;
  background:url(buzz-images/sub-nav-divider.gif) no-repeat right 8px;
  padding-right:10px;
  margin-right:10px;
}
.tabs ul li a {
  float:left;
  display:inline;
  font-size:11px;
  font-family:"Times New Roman", Arial, sans-serif;
  text-transform:uppercase;
  color:#fff;
}
.tabs ul li a:hover, .tabs ul li a.active {
  text-decoration:none;
  color:#d7cc96;
}
.box .tabs-content ul {
  list-style:none outside none;
  padding-top:5px;
}
.box .tabs-content ul li {
  display:block;
  border-bottom:1px dashed #4d4d4d;
  height:100%;
}
.box .tabs-content ul li, .box .tabs-content ul li a {
  color:#cacaca;
  font-size:13px;
  line-height:17px;
}
.box .tabs-content ul li {
  padding:3px 0 5px;
}
.ads {
  margin-bottom:11px;
}
.ads a {
  float:left;
  display:inline;
  width:135px;
  height:135px;
  border:3px solid #d5d5bc;
  margin-right:18px;
}
.follow-item {
  font-style:italic;
  font-family:"Times New Roman", Arial, sans-serif;
  font-size:14px;
  line-height:19px;
  margin-bottom:10px;
}
.follow-item .author {
  color:#ffa200;
  font-style:normal;
}
.follow-item a {
  color:#339de7;
  text-decoration:underline;
}
.follow-item a:hover {
  text-decoration:none;
}
.follow-item .time {
  font-size:12px;
  color:#c6be95;
  font-style:normal;
}
.widget-item {
  color:#c6be95;
  font-size:13px;
  line-height:20px;
  margin-bottom:20px;
}
#footer, #footer-push {
  height:242px;
}
#footer {
  background:#000;
  border-top:1px solid #ae7644;
  padding-top:15px;
  font-size:11px;
  color:#4a4a4a;
}
#footer a {
  color:#4a4a4a;
  text-decoration:none;
}
#footer .copyright {
  width:960px;
  height:242px;
  margin:0 auto;
  background:url(buzz-images/footer-bg.gif) no-repeat center 0;
}


</style>


<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
<link rel="stylesheet" href="js/fancybox/jquery.fancybox-1.3.1.css" type="text/css" media="all" />
<!--[if IE 6]><script src="js/png-fix.js" type="text/javascript" charset="utf-8"></script><![endif]-->
<script src="js/jquery-1.4.2.js" type="text/javascript" charset="utf-8"></script>
<script src="js/fancybox/jquery.fancybox-1.3.1.js" type="text/javascript" charset="utf-8"></script>
<script src="js/fancybox/jquery.mousewheel-3.0.2.pack.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.easing.1.3.js" type="text/javascript" charset="utf-8"></script>
<script src="js/js-func.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="wrapper">
  <div id="header">
    <div class="header-bg">
      <div class="shell">
        <div id="navigation">
          <ul>
            <li><a href="#" class="active">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Archives</a></li>
            <li class="last"><a href="#">Site map</a></li>
          </ul>
          <div class="cl">&nbsp;</div>
        </div>
        <a href="#" class="subscribe">Subscribe</a>
        <div class="search">
          <form action="#" method="post">
            <input type="text" class="field blink" value="Search" />
            <input type="submit" class="search-btn" value="Go!" />
          </form>
        </div>
        <div class="cl">&nbsp;</div>
        <h1 id="logo" class="notext"><a href="#">Buzz</a></h1>
        <div class="cl">&nbsp;</div>
        <div id="sub-nav">
          <ul>
            <li><a href="#" class="active">Latest news</a></li>
            <li><a href="#">Daily photos</a></li>
            <li><a href="#">Fashion</a></li>
            <li><a href="#">Best Dressed</a></li>
            <li><a href="#">Most Wanted</a></li>
            <li><a href="#">Features</a></li>
            <li><a href="#">Accessories</a></li>
            <li class="last"><a href="#">Style Guides</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <div id="main">
    <div class="shell">
      <div id="content" class="left">
        <div class="box box-featured">
          <div class="box-image"> <a href="#"><img src="css/buzz-images/featured-image.gif" alt="" /></a> <span class="mark-featured notext">&nbsp;</span> </div>
          <div class="box-body">
            <p class="posted">Featured article</p>
            <h2>Tortor magna dolor, aliquam tellus iaculis</h2>
            <p class="text">Libero non, blandit blandit, sed odio lectus. Senectus donec, lacus scelerisque, vestibulum id tristique. Libero non, blandit blandit, sed odio lectus. </p>
            <a href="#" class="continue">Continue reading</a> </div>
          <div class="cl">&nbsp;</div>
        </div>
        <div class="box">
          <div class="box-image"> <a href="#"><img src="css/buzz-images/box-image1.gif" alt="" /></a> <a href="css/buzz-images/box-image1.jpg" class="overlay notext">&nbsp;</a> </div>
          <div class="box-body">
            <p class="posted">Posted on 18 March 2008</p>
            <h2>Tortor magna dolor, aliquam tellus iaculis.</h2>
            <p class="text">Libero non, blandit blandit, sed odio lectus. Senectus donec, lacus scelerisque, vestibulum id tristique. Libero non, blandit blandit, sed odio lectus.</p>
            <a href="#" class="comments">21</a> <a href="#" class="continue">Continue reading</a> </div>
          <div class="cl">&nbsp;</div>
          <a href="#" class="close notext">&nbsp;</a> </div>
        <div class="box">
          <div class="box-image"> <a href="#"><img src="css/buzz-images/box-image2.gif" alt="" /></a> <a href="css/buzz-images/box-image2.jpg" class="overlay notext">&nbsp;</a> </div>
          <div class="box-body">
            <p class="posted">Posted on 18 March 2008</p>
            <h2>Libero non, blandit sed odio lecuts non.</h2>
            <p class="text">Libero non, blandit blandit, sed odio lectus. Senectus donec, lacus scelerisque, vestibulum id tristique. Libero non, blandit blandit, sed odio lectus.</p>
            <a href="#" class="comments">21</a> <a href="#" class="continue">Continue reading</a> </div>
          <div class="cl">&nbsp;</div>
          <a href="#" class="close notext">&nbsp;</a> </div>
        <div class="box box-small">
          <div class="box-image"> <a href="#"><img src="css/buzz-images/box-image3.gif" alt="" /></a> <a href="css/buzz-images/box-image3.jpg" class="overlay notext">&nbsp;</a> </div>
          <div class="box-body">
            <p class="posted">Posted on 18 March 2008</p>
            <h2>Tortor magna dolor, aliquam tellus iaculis.</h2>
            <p class="text">Libero non, blandit blandit, sed odio lectus. Senectus donec, lacus scelerisque, vestibulum id tristique. Libero non, blandit blandit, sed odio lectus.</p>
            <a href="#" class="comments">21</a> <a href="#" class="continue">Continue reading</a> </div>
          <div class="cl">&nbsp;</div>
          <a href="#" class="close notext">&nbsp;</a> </div>
        <div class="box box-small">
          <div class="box-image"> <a href="#"><img src="css/buzz-images/box-image4.gif" alt="" /></a> <a href="css/buzz-images/box-image4.jpg" class="overlay notext">&nbsp;</a> </div>
          <div class="box-body">
            <p class="posted">Posted on 18 March 2008</p>
            <h2>Tortor magna dolor, aliquam tellus iaculis.</h2>
            <p class="text">Libero non, blandit blandit, sed odio lectus. Senectus donec, lacus scelerisque, vestibulum id tristique. Libero non, blandit blandit, sed odio lectus.</p>
            <a href="#" class="comments">21</a> <a href="#" class="continue">Continue reading</a> </div>
          <div class="cl">&nbsp;</div>
          <a href="#" class="close notext">&nbsp;</a> </div>
        <div class="box box-small">
          <div class="box-image"> <a href="#"><img src="css/buzz-images/box-image5.gif" alt="" /></a> <a href="css/buzz-images/box-image5.jpg" class="overlay notext">&nbsp;</a> </div>
          <div class="box-body">
            <p class="posted">Posted on 18 March 2008</p>
            <h2>Tortor magna dolor, aliquam tellus iaculis.</h2>
            <p class="text">Libero non, blandit blandit, sed odio lectus. Senectus donec, lacus scelerisque, vestibulum id tristique. Libero non, blandit blandit, sed odio lectus.</p>
            <a href="#" class="comments">21</a> <a href="#" class="continue">Continue reading</a> </div>
          <div class="cl">&nbsp;</div>
          <a href="#" class="close notext">&nbsp;</a> </div>
        <div class="box box-small">
          <div class="box-image"> <a href="#"><img src="css/buzz-images/box-image6.gif" alt="" /></a> <a href="css/buzz-images/box-image6.jpg" class="overlay notext">&nbsp;</a> </div>
          <div class="box-body">
            <p class="posted">Posted on 18 March 2008</p>
            <h2>Tortor magna dolor, aliquam tellus iaculis.</h2>
            <p class="text">Libero non, blandit blandit, sed odio lectus. Senectus donec, lacus scelerisque, vestibulum id tristique. Libero non, blandit blandit, sed odio lectus.</p>
            <a href="#" class="comments">21</a> <a href="#" class="continue">Continue reading</a> </div>
          <div class="cl">&nbsp;</div>
          <a href="#" class="close notext">&nbsp;</a> </div>
        <div class="cl">&nbsp;</div>
      </div>
      <div id="sidebar" class="right">
        <div class="box box-tabs">
          <div class="tabs">
            <ul>
              <li><a href="#popular" class="active">Popular</a></li>
              <li><a href="#comments">Comments</a></li>
              <li class="last"><a href="#featured">Featured</a></li>
            </ul>
          </div>
          <div class="cl">&nbsp;</div>
          <div class="tabs-content">
            <ul class="tabs-list" id="popular">
              <li><a href="#">Libero non, blandit blandit, sed odio lectus</a></li>
              <li><a href="#">Senectus donec, lacus scelerisque, vestibulum id tristique.</a></li>
              <li><a href="#">Libero non, blandit blandit, sed odio lectus.</a></li>
              <li><a href="#">Libero non, blandit blandit, sed odio lectus.</a></li>
              <li><a href="#">Tortor magna dolor, aliquam tellis iaculis.</a></li>
              <li><a href="#">Libero non, blandit sed odio lectus non.</a></li>
              <li><a href="#">Libero non, blandit blandit, sed odio lectus.</a></li>
              <li><a href="#">Tortor magna dolor, aliquam tellis iaculis.</a></li>
            </ul>
            <ul class="tabs-list" id="comments" style="display: none;">
              <li><a href="#">Senectus donec, lacus scelerisque, vestibulum id tristique.</a></li>
              <li><a href="#">Libero non, blandit blandit, sed odio lectus</a></li>
              <li><a href="#">Libero non, blandit blandit, sed odio lectus.</a></li>
              <li><a href="#">Libero non, blandit blandit, sed odio lectus.</a></li>
              <li><a href="#">Tortor magna dolor, aliquam tellis iaculis.</a></li>
              <li><a href="#">Libero non, blandit sed odio lectus non.</a></li>
              <li><a href="#">Libero non, blandit blandit, sed odio lectus.</a></li>
              <li><a href="#">Tortor magna dolor, aliquam tellis iaculis.</a></li>
            </ul>
            <ul class="tabs-list" id="featured" style="display: none;">
              <li><a href="#">Tortor magna dolor, aliquam tellis iaculis.</a></li>
              <li><a href="#">Libero non, blandit blandit, sed odio lectus</a></li>
              <li><a href="#">Senectus donec, lacus scelerisque, vestibulum id tristique.</a></li>
              <li><a href="#">Libero non, blandit blandit, sed odio lectus.</a></li>
              <li><a href="#">Libero non, blandit blandit, sed odio lectus.</a></li>
              <li><a href="#">Tortor magna dolor, aliquam tellis iaculis.</a></li>
              <li><a href="#">Libero non, blandit sed odio lectus non.</a></li>
              <li><a href="#">Libero non, blandit blandit, sed odio lectus.</a></li>
            </ul>
          </div>
        </div>
        <div class="ads"> <a href="#"><img src="css/buzz-images/htmlmafia.jpg" alt="" /></a> <a href="#" class="last"><img src="css/buzz-images/mailbakery.jpg" alt="" /></a>
          <div class="cl">&nbsp;</div>
        </div>
        <div class="box">
          <h2 class="title">Follow Us!</h2>
          <div class="follow-item">
            <p><span class="author">Tobias Anderson</span>: Lorem ipsum dolor sit amet, consecteturadipiscing elit. <a href="#">Donec et erat</a> massa, vitae varius massa. <span class="time">3 days ago</span></p>
          </div>
        </div>
        <div class="box">
          <h2 class="title">Full width widgetized zone</h2>
          <div class="widget-item">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ipsum mauris, molestie at rutrum a, mollis id justo. Etiam at quam dui, nec sollicitudin nibh. Mauris id sem justo.</p>
          </div>
          <div class="widget-item">
            <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus congue metus sed arcu rhoncus ut malesuada velit dictum. Fusce gravida elementum mauris, in faucibus nibh cursus a.</p>
          </div>
        </div>
      </div>
      <div class="cl">&nbsp;</div>
    </div>
  </div>
  <div id="footer-push" class="notext">&nbsp;</div>
</div>
<div id="footer">
  <div class="copyright">
    <p class="left">Copyright &copy; 2010, Your Company Here, All Rights Reserved</p>
    <p class="right"><a href="http://www.free-css.com/">Free CSS Templates</a> by <a href="http://chocotemplates.com">Chocotemplates.com</a></p>
    <div class="cl"></div>
  </div>
</div>
</body>
</html>
Related examples in the same category

1.	blankspace
2.	Blasphemy
3.	blended
4.	blewwave
5.	blootoon
6.	blush
7.	boardroom
8.	BOOM
9.	boorish
10.	boosting
11.	bordered
12.	boswell
13.	bounderies
14.	boxedtype
15.	boxes_template
16.	boxybox
17.	branches
18.	breaking_ontop
19.	brewedcoffee
20.	brightfolio
21.	brightsideoflife1.0
22.	Broadcaster
23.	broadsheet
24.	brycesunrise
25.	bucolic
26.	burgeon
27.	BW
28.	bwdec2007
29.	calliope
30.	callofduty2
31.	candiiclouds
32.	cantya-studio
33.	canuckington-post
34.	canvass
35.	capricious
36.	capsicum
37.	carbonated
38.	carbonizer
39.	carlmelon
40.	caronline
41.	carrera
42.	castellated
43.	catch_info
44.	cattleya
45.	center-stage
46.	COIL
47.	col1
48.	col2
49.	col3
50.	collaboration
51.	collectiveblue
52.	collegemusic
53.	colorus
54.	colosseum
55.	columna
56.	combination
57.	ComingSoon
58.	commission
59.	communication-1.0
60.	communication-co
61.	communication
62.	community-live
63.	compiled
64.	complete-collection
65.	complimentary
66.	component
67.	compressed
68.	compromise
69.	compus
70.	conceptnova
71.	concrete
72.	concurrence
73.	condition
74.	conglomerate
75.	conjunction
76.	connection
77.	connections
78.	consulting-co
79.	contemplate
80.	convergence
81.	cookiefusion
82.	Copy of modify
83.	corporattica
84.	Cosmopolitan
85.	counterstrike
86.	cover
87.	coverage
88.	coxswain
89.	creamburn
90.	crisp2
91.	criterion
92.	crystalblack
93.	css-heaven-1
94.	cssgallery
95.	cssheaven-2
96.	cssmajesty
97.	cubismo
98.	cultivated
99.	cultureshock
100.	cupofcoffee
101.	customary
102.	customize
103.	cyano
104.	cyanspark
105.	cyberarray
106.	daleri-mega
107.	daleri-structure
108.	dalmatians
109.	danmyaz1
110.	dapple
111.	david-kruger
112.	deardiary
113.	decorative
114.	deepimpact
115.	deerpark
116.	dekada
117.	delta
118.	delzep_enterprise
119.	description
120.	deserted
121.	desertsand
122.	design-gallery
123.	design-studio
124.	design10
125.	Design9
126.	designersstudio
127.	designersworld
128.	designgalo
129.	designhq
130.	designstudio
131.	Design_Agency
132.	deskspace
133.	detachable
134.	deviation
135.	devision
136.	dewdrops
137.	dezinstudio
138.	didactic
139.	Did_My_Time
140.	differential
141.	digitalweb
142.	dimension
143.	diminishing
144.	dirtylicious
145.	disambiguation
146.	discovery
147.	distillate
148.	distinctive
149.	diversity
150.	DJ