megazzine
<!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>MEGAZZINE</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
* {
margin:0;
padding:0;
outline:0;
}
body {
font-size:11px;
line-height:1.3;
font-family:Arial, Helvetica, Sans-Serif;
color:#737373;
line-height:13px;
background:#000 url(images/body.gif) center top;
}
a {
color:#0252aa;
text-decoration:none;
cursor:pointer;
}
a:hover {
text-decoration:underline;
}
a img {
border:0;
}
h2 {
color:#fff;
font-size:14px;
line-height:16px;
}
h3 {
background:url(images/bottom-border.gif) bottom repeat-x;
color:#fff;
font-size:14px;
line-height:16px;
margin-bottom:8px;
}
h3 span {
display:block;
padding:12px 0 9px 0;
}
h3.star span {
background:url(images/bottom-star.gif) left center no-repeat;
padding-left:25px;
}
h3.bubble span {
background:url(images/bottom-bubble.gif) 4px center no-repeat;
padding-left:32px;
}
h5 {
font-size:13px;
line-height:15px;
padding-bottom:2px;
}
h5 a {
color:#64c5ff;
}
h6 {
font-weight:normal;
font-size:12px;
line-height:14px;
color:#64c5ff;
padding-bottom:2px;
}
h6 a {
font-weight:bold;
color:#64c5ff;
}
input, textarea, select {
font-size:14px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
color:#a5a5a5;
}
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 {
margin-right:0 !important;
margin-bottom:0 !important;
}
#shell {
width:980px;
padding:26px 8px;
margin:0 auto;
}
#header {
width:942px;
height:63px;
position:relative;
padding:32px 27px;
background:url(images/header.gif);
margin:0 -8px;
}
#header .top-bar {
float:right;
}
#logo {
float:left;
width:250px;
}
#logo a {
display:block;
width:250px;
height:63px;
background:url(images/logo.gif);
font-size:0;
line-height:0;
text-indent:-4000px;
}
#header .links {
float:right;
padding:11px 0 8px 0;
}
#header .links a {
float:left;
color:#feffff;
font-size:9px;
margin-left:14px;
}
.rss {
padding-right:12px;
background:url(images/rss.gif) right center no-repeat;
}
#search {
float:right;
}
#search label {
float:left;
font-size:14px;
font-weight:bold;
color:#a5a5a5;
line-height:29px;
padding-right:5px;
}
#search .fields {
float:left;
background:#464646;
border:1px solid #2e2e2e;
padding:0 5px;
}
#search .field {
float:left;
background:#464646;
border:0;
width:200px;
line-height:14px;
padding:7px 11px 4px 0;
}
#search .submit {
float:left;
width:17px;
height:27px;
background:url(images/search-submit.gif);
border:0;
cursor:submit;
}
#navigation {
padding:9px 14px 10px 14px;
}
#navigation ul {
list-style:none;
}
#navigation ul li {
float:left;
padding-right:50px;
height:18px;
line-height:18px;
}
#navigation ul li a {
color:#dbdbdb;
font-size:18px;
}
#navigation ul li a:hover, #navigation ul li a.active {
color:#00ccff;
text-decoration:none;
}
#main {
background:#d7d7d7;
padding:10px 10px 4px 10px;
height:100%;
}
ul {
list-style:none;
}
#main .box {
background:#fff url(images/content-divider.gif) 297px top repeat-y;
margin-bottom:13px;
padding:0 15px 0 12px;
height:100%;
}
#content {
float:left;
width:593px;
}
#content h2 {
background:url(images/content-heading.gif) left top no-repeat;
padding-left:3px;
position:relative;
top:-3px;
left:-11px;
float:left;
}
#content h2 span {
float:left;
background:url(images/content-heading.gif) right top no-repeat;
padding:10px 13px 11px 4px;
}
#content .see-all {
float:right;
font-size:12px;
line-height:14px;
color:#00b1dd;
text-decoration:underline;
padding-top:6px;
}
#content .see-all:hover {
text-decoration:none;
}
#content .post {
float:left;
width:270px;
min-height:76px;
margin-right:26px;
padding:5px 0 10px 0;
}
#content .post .image {
float:left;
border:1px solid #d7d7d7;
width:74px;
}
#content .post .image img {
border:1px solid #fff;
}
#content .post .data {
float:right;
width:186px;
padding-top:1px;
}
h4 {
font-size:13px;
line-height:13px;
padding-bottom:4px;
}
h4 a {
color:#425969;
}
#content .post .data p {
padding-left:2px;
}
#sidebar {
float:left;
width:197px;
padding:0 8px 0 10px;
}
#sidebar .nav-box {
background-color:#fff;
}
#sidebar h2 {
background:url(images/sidebar-heading.gif) top no-repeat;
width:205px;
height:35px;
padding-bottom:4px;
margin:0 -4px;
}
#sidebar h2 span {
display:block;
width:194px;
height:14px;
padding:13px 0 8px 11px;
cursor:pointer;
}
#sidebar h2 span {
background:url(images/sidebar-h2-normal.gif) 185px 18px no-repeat;
}
#sidebar h2.minimized span {
background-image:url(images/sidebar-h2-minimized.gif);
}
#sidebar ul li {
display:block;
}
#sidebar ul li {
border-bottom:1px solid #e5e5e5;
font-size:12px;
line-height:14px;
padding:3px 0 5px;
}
#sidebar ul li a {
display:block;
color:#4f4f4f;
text-decoration:none;
padding-left:16px;
background:url(images/sidebar-bullet.gif) 6px center no-repeat;
}
#sidebar ul li a:hover {
color:#1da9d7;
background-image:url(images/sidebar-bullet-active.gif);
}
#banners {
float:left;
}
.banner {
border:12px solid #fff;
border-top-width:13px;
border-bottom-width:13px;
margin-bottom:10px;
}
#bottom {
background:#3c3c3c url(images/bottom-middle.gif) left top repeat-y;
width:996px;
position:relative;
left:-8px;
}
#bottom .bg-top {
background:url(images/bottom-top.gif) left top no-repeat;
}
#bottom .bg-bottom {
background:url(images/bottom-bottom.gif) left bottom no-repeat;
padding:4px 14px 14px 14px;
}
#bottom .box {
float:left;
margin-right:11px;
width:436px;
}
#bottom .last {
width:517px;
}
#bottom .popular-posts li {
padding:0 0 13px 10px;
background:url(images/bottom-border.gif) bottom repeat-x;
margin-bottom:13px;
}
#bottom .popular-posts .image {
float:left;
border:3px solid #343333;
}
#bottom .popular-posts .data {
float:right;
width:348px;
padding-right:9px;
}
#bottom .popular-posts .data p {
font-size:13px;
line-height:12px;
color:#b7b7b7;
}
#bottom .latest-comments {
padding-top:1px;
}
#bottom .latest-comments li {
background:url(images/bottom-border.gif) bottom repeat-x;
padding-bottom:9px;
margin-bottom:5px;
padding-left:2px;
}
#bottom .latest-comments p {
font-size:12px;
line-height:12px;
color:#b7b7b7;
padding-left:1px;
}
#bottom .see-all {
color:#b7b7b7;
float:right;
text-decoration:none;
border-bottom:1px solid #64c5ff;
}
#bottom .see-all:hover {
border-bottom:0;
margin-bottom:1px;
}
#footer {
padding:12px 18px 9px 27px;
height:100%;
}
#footer, #footer a {
color:#4a4a4a;
background:#d7d7d7;
text-decoration:none;
}
#footer a:hover {
text-decoration:none;
}
#footer p {
margin:0;
padding:0;
line-height:normal;
white-space:nowrap;
color:#4a4a4a;
}
#footer .lf {
float:left;
}
#footer .rf {
float:right;
}
</style>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-func.js"></script>
<!--[if IE 6]><link rel="stylesheet" href="megazzine-css/ie6.css" type="text/css" media="all" /><![endif]-->
</head>
<body>
<!-- START PAGE SOURCE -->
<div id="shell">
<div id="header">
<h1 id="logo"><a href="#">MEGAZZINE</a></h1>
<div class="top-bar">
<div class="links"> <a href="#">SIGN IN</a> <a href="#">SIGN UP</a> <a href="#" class="rss">SUBSCRIBE</a> </div>
<div class="cl"> </div>
<div id="search">
<form action="#" method="post">
<label for="search-string">IM LOOKING FOR</label>
<div class="fields">
<input type="text" value="..." id="search-string" class="field" />
<input type="submit" value="" class="submit" />
</div>
</form>
</div>
</div>
</div>
<div id="navigation">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#" class="active">ARTICLES</a></li>
<li><a href="#">PHOTOS</a></li>
<li><a href="#">COMMUNITY</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
<div class="cl"> </div>
</div>
<div id="main">
<div id="content">
<div class="box">
<h2><span>CATEGORY ONE</span></h2>
<a href="#" class="see-all">See all articles in this category</a>
<div class="cl"> </div>
<div class="posts">
<div class="post">
<div class="image"> <a href="#"><img src="megazzine-css/images/post-1.jpg" alt="" /></a> </div>
<div class="data">
<h4><a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a></h4>
<p>Maecenas sodales auctor urna cursus facilisis. Cras rutrum justo id mi bibendum luctus. </p>
</div>
</div>
<div class="post last">
<div class="image"> <a href="#"><img src="megazzine-css/images/post-2.jpg" alt="" /></a> </div>
<div class="data">
<h4><a href="#">Maecenas scelerisque sapien </a></h4>
<p>Maecenas sodales auctor urna cursus facilisis. Cras rutrum justo id mi bibendum luctus. </p>
</div>
</div>
<div class="cl"> </div>
<div class="post">
<div class="image"> <a href="#"><img src="megazzine-css/images/post-3.jpg" alt="" /></a> </div>
<div class="data">
<h4><a href="#">Cras ac ultrices ipsum. </a></h4>
<p>Vivamus adipiscing dui at turpis imperdiet congue. Fusce posuere augue et odio bibendum non dictum nisi posuere. </p>
</div>
</div>
<div class="post last">
<div class="image"> <a href="#"><img src="megazzine-css/images/post-4.jpg" alt="" /></a> </div>
<div class="data">
<h4><a href="#">Nunc ac lorem id ipsum.</a></h4>
<p>Maecenas sodales auctor urna cursus facilisis. Cras rutrum justo id mi bibendum luctus. </p>
</div>
</div>
<div class="cl"> </div>
</div>
</div>
<div class="box">
<h2><span>CATEGORY TWO</span></h2>
<a href="#" class="see-all">See all articles in this category</a>
<div class="cl"> </div>
<div class="posts">
<div class="post">
<div class="image"> <a href="#"><img src="megazzine-css/images/post-5.jpg" alt="" /></a> </div>
<div class="data">
<h4><a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a></h4>
<p>Maecenas sodales auctor urna cursus facilisis. Cras rutrum justo id mi bibendum luctus. </p>
</div>
</div>
<div class="post last">
<div class="image"> <a href="#"><img src="megazzine-css/images/post-6.jpg" alt="" /></a> </div>
<div class="data">
<h4><a href="#">Maecenas scelerisque sapien </a></h4>
<p>Maecenas sodales auctor urna cursus facilisis. Cras rutrum justo id mi bibendum luctus. </p>
</div>
</div>
<div class="cl"> </div>
<div class="post">
<div class="image"> <a href="#"><img src="megazzine-css/images/post-1.jpg" alt="" /></a> </div>
<div class="data">
<h4><a href="#">Cras ac ultrices ipsum. </a></h4>
<p>Vivamus adipiscing dui at turpis imperdiet congue. Fusce posuere augue et odio bibendum non dictum nisi posuere. </p>
</div>
</div>
<div class="post last">
<div class="image"> <a href="#"><img src="megazzine-css/images/post-1.jpg" alt="" /></a> </div>
<div class="data">
<h4><a href="#">Nunc ac lorem id ipsum.</a></h4>
<p>Maecenas sodales auctor urna cursus facilisis. Cras rutrum justo id mi bibendum luctus. </p>
</div>
</div>
<div class="cl"> </div>
</div>
</div>
<div class="box last">
<h2><span>CATEGORY THREE</span></h2>
<a href="#" class="see-all">See all articles in this category</a>
<div class="cl"> </div>
<div class="posts">
<div class="post">
<div class="image"> <a href="#"><img src="megazzine-css/images/post-7.jpg" alt="" /></a> </div>
<div class="data">
<h4><a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a></h4>
<p>Maecenas sodales auctor urna cursus facilisis. Cras rutrum justo id mi bibendum luctus. </p>
</div>
</div>
<div class="post last">
<div class="image"> <a href="#"><img src="megazzine-css/images/post-8.jpg" alt="" /></a> </div>
<div class="data">
<h4><a href="#">Maecenas scelerisque sapien </a></h4>
<p>Maecenas sodales auctor urna cursus facilisis. Cras rutrum justo id mi bibendum luctus. </p>
</div>
</div>
<div class="cl"> </div>
<div class="post">
<div class="image"> <a href="#"><img src="megazzine-css/images/post-9.jpg" alt="" /></a> </div>
<div class="data">
<h4><a href="#">Cras ac ultrices ipsum. </a></h4>
<p>Vivamus adipiscing dui at turpis imperdiet congue. Fusce posuere augue et odio bibendum non dictum nisi posuere. </p>
</div>
</div>
<div class="post last">
<div class="image"> <a href="#"><img src="megazzine-css/images/post-10.jpg" alt="" /></a> </div>
<div class="data">
<h4><a href="#">Nunc ac lorem id ipsum.</a></h4>
<p>Maecenas sodales auctor urna cursus facilisis. Cras rutrum justo id mi bibendum luctus. </p>
</div>
</div>
<div class="cl"> </div>
</div>
</div>
<div class="cl"> </div>
</div>
<div id="sidebar">
<div class="nav-box">
<h2><span>CATEGORIES</span></h2>
<ul>
<li><a href="#">Cras nec lorem lecturs</a></li>
<li><a href="#">Nunc pell entesq</a></li>
<li><a href="#">Lorem ipsum dolor</a></li>
<li><a href="#">Amet sit laoreet</a></li>
<li><a href="#">Lectus sit amet</a></li>
<li><a href="#">Pellenstesuq nunc lorem</a></li>
</ul>
</div>
<div class="nav-box">
<h2><span>ARCHIVES</span></h2>
<ul>
<li><a href="#">August 2009</a></li>
<li><a href="#">July 2009</a></li>
<li><a href="#">June 2009</a></li>
<li><a href="#">May 2009</a></li>
</ul>
</div>
<div class="nav-box">
<h2><span>TAGS</span></h2>
<ul>
<li><a href="#">Pellenstesque</a></li>
<li><a href="#">Nunc lorem</a></li>
<li><a href="#">Lectus sit</a></li>
<li><a href="#">Sit laoreet</a></li>
<li><a href="#">Sit amet</a></li>
<li><a href="#">Laoreet lectus nunc</a></li>
</ul>
</div>
</div>
<div id="banners">
<div class="banner"> <a href="#"><img src="megazzine-css/images/small-banner.gif" alt="" /></a> </div>
<div class="banner"> <a href="#"><img src="megazzine-css/images/big-banner.gif" alt="" /></a> </div>
</div>
<div class="cl"> </div>
</div>
<div id="bottom">
<div class="bg-top">
<div class="bg-bottom">
<div class="box">
<h3 class="star"><span>POPULAR POSTS</span></h3>
<div class="popular-posts">
<ul>
<li>
<div class="image"><a href="#"><img src="megazzine-css/images/popular-1.jpg" alt="" /></a></div>
<div class="data">
<h5><a href="#">Cras nec lorem lectus</a></h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec lorem lectus, ut lacinia turpis. Nunc pellentesque pellentesque laoreet. Lorem ipsum dolor sit amet, consectetur </p>
</div>
<div class="cl"> </div>
</li>
<li>
<div class="image"><a href="#"><img src="megazzine-css/images/popular-2.jpg" alt="" /></a></div>
<div class="data">
<h5><a href="#">Lorem ipsum dolor sit amet</a></h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec lorem lectus, ut lacinia turpis. Nunc pellentesque pellentesque laoreet. Lorem ipsum dolor sit amet, consectetur </p>
</div>
<div class="cl"> </div>
</li>
<li>
<div class="image"><a href="#"><img src="megazzine-css/images/popular-3.jpg" alt="" /></a></div>
<div class="data">
<h5><a href="#">Nunc pellentesque pellentesque laoreet</a></h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec lorem lectus, ut lacinia turpis. Nunc pellentesque pellentesque laoreet. Lorem ipsum dolor sit amet, consectetur </p>
</div>
<div class="cl"> </div>
</li>
</ul>
</div>
<a href="#" class="see-all">see all popular posts</a>
<div class="cl"> </div>
</div>
<div class="box last">
<h3 class="bubble"><span>LATEST COMMENTS</span></h3>
<div class="latest-comments">
<ul>
<li>
<h6>Jun 24.08.09 by <a href="#">Admin</a> on <a href="#">PostName</a></h6>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec lorem lectus, ut lacinia turpis. Nunc pellentesque pellentesque laoreet. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</li>
<li>
<h6>Jun 24.08.09 by <a href="#">Admin</a> on <a href="#">PostName</a></h6>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec lorem lectus, ut lacinia turpis. Nunc pellentesque pellentesque laoreet. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</li>
<li>
<h6>Jun 24.08.09 by <a href="#">Admin</a> on <a href="#">PostName</a></h6>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec lorem lectus, ut lacinia turpis. Nunc pellentesque pellentesque laoreet. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</li>
<li>
<h6>Jun 24.08.09 by <a href="#">Admin</a> on <a href="#">PostName</a></h6>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec lorem lectus, ut lacinia turpis. Nunc pellentesque pellentesque laoreet. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</li>
</ul>
</div>
</div>
<div class="cl"> </div>
</div>
</div>
</div>
<div id="footer">
<p class="lf">Copyright © 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>
<!-- END PAGE SOURCE -->
</body>
</html>
Related examples in the same category