blogger
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en-US" xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
<title>Blogger</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: 13px;
line-height: 22px;
font-family: Georgia, Helvetica, Sans-Serif;
color: #5b5b5b;
background: #ece9dd;
}
a {
color: #da0700;
text-decoration: underline;
cursor:pointer;
}
a:hover {
text-decoration: none;
}
a img {
border: 0;
}
input, textarea, select {
font-size: 10px;
font-family: Arial, Helvetica, sans-serif;
}
textarea {
overflow: auto;
}
fieldset {
border:0;
}
h2, h3, h4 {
font-family: Georgia, Serif;
font-weight:normal;
}
h2 {
color:#222325;
font-size:28px;
line-height:33px;
padding-bottom:5px;
}
h3 {
font-size:25px;
color:#222325;
line-height:31px;
padding-bottom:8px;
}
h4 {
font-size:16px;
color:#b10301;
line-height:18px;
}
.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 {
width:964px;
margin:0 auto;
}
.big-box {
background:url(images/big-box-middle.gif) repeat-y;
height:100%;
}
.big-box .bg-top {
background:url(images/big-box-top.gif) top no-repeat;
}
.big-box .bg-bottom {
background:url(images/big-box-bottom.gif) bottom no-repeat;
}
.big-box .bg-bottom {
padding:20px;
}
#header .bg-bottom {
padding:30px 20px 26px 33px;
height:100%;
}
#logo {
float:left;
font-size: 0;
line-height: 0;
padding-top:11px;
}
#logo a {
display:block;
text-indent: -4000px;
width:280px;
height:105px;
background:url(images/logo.gif);
}
#search {
float:right;
padding:50px 11px 0 0;
}
#search fieldset {
float:right;
}
#search .field {
background:#fff;
color:#666;
border:1px solid #ccc;
padding:6px;
width:201px;
float:left;
margin-right:9px;
}
#search .submit {
width:72px;
height:29px;
line-height:29px;
padding-bottom:2px;
text-align:center;
background:url(images/submit.gif);
border:0;
cursor:pointer;
color:#fff;
float:left;
}
#navigation {
padding:5px 0 7px 1px;
position:relative;
z-index:10;
}
#navigation ul {
list-style:none;
}
#navigation ul li {
float:left;
font-size:20px;
line-height:42px;
position:relative;
}
#navigation ul li a, #navigation ul li a span {
float:left;
background-position:left top;
}
#navigation ul li a {
color:#847d62;
text-decoration:none;
padding-left:5px;
}
#navigation ul li a span {
padding:0 16px 0 11px;
background-position:right top;
}
#navigation ul li a.active, #navigation ul li a.active span, #navigation ul li a:hover, #navigation ul li a:hover span {
color:#fff;
background-image:url(images/navigation-active.gif);
}
#navigation ul li.has-dd a span {
padding:0 26px 0 11px;
background:url(images/navigation-dd-arrow.gif) right top no-repeat;
}
#navigation ul li.has-dd a.active span, #navigation ul li.has-dd a:hover span {
background-image:url(images/navigation-active-dropdown.gif);
}
#navigation .dd {
position:absolute;
top:42px;
left:0;
background:#ece9dd;
border:1px solid #847d62;
display:none;
padding:4px;
}
#navigation .dd li {
float:none;
display:block;
font-size:14px;
line-height:16px;
border-bottom:1px solid #847d62;
}
#navigation .dd li a {
float:none;
display:block;
padding:5px 0;
white-space:nowrap;
height:100%;
}
#navigation .dd li a.active, #navigation .dd li a:hover {
background:none;
color:#000;
}
#navigation .dd li.last {
border-bottom:0;
}
.slider {
background:#f4f4f4;
border:1px solid #ece9dd;
margin-bottom:32px;
}
.slider ul {
list-style:none;
}
.slider li {
float:left;
}
.slider .image {
float:left;
padding:1px;
border:1px solid #e3e3e3;
}
.slider .image img {
float:left;
}
.slider .data {
float:right;
width:328px;
padding-right:15px;
}
.slider .data p {
padding-bottom:22px;
}
#big-slider {
position:relative;
height:100%;
}
#big-slider .slider-holder, #big-slider .jcarousel-container {
width:904px;
height:348px;
position:relative;
z-index:2;
}
#big-slider .jcarousel-container {
padding:0 9px;
}
#big-slider .slider-holder ul {
position:relative;
}
#big-slider .slider-holder ul li {
width:904px;
padding:10px 0;
}
#big-slider .jcarousel-clip {
width:904px;
overflow:hidden;
position:relative;
}
#big-slider .jcarousel-next, #big-slider .jcarousel-prev {
width:67px;
height:24px;
position:absolute;
bottom:6px;
cursor:pointer;
z-index:3;
}
#big-slider .jcarousel-next {
right:-4px;
background:url(images/big-slider-next.png);
}
#big-slider .jcarousel-prev {
left:-4px;
background:url(images/big-slider-prev.png);
}
#big-slider .slider-link {
position:absolute;
bottom:7px;
right:68px;
width:25px;
height:23px;
background:url(images/slider-link.png);
font-size: 0;
line-height: 0;
text-indent: -4000px;
z-index:3;
}
#small-slider .slider-head {
border-bottom:1px solid #edeadf;
padding:4px 0 3px 9px;
margin:0 1px 15px;
height:100%;
}
#small-slider .slider-head h4 {
float:left;
padding-top:2px;
}
#small-slider .slider-head .categories {
float:right;
padding-right:10px;
}
#small-slider .slider-head a {
color:#8a8368;
margin-left:17px;
}
#small-slider .slider-head a.active, #small-slider .slider-head a:hover {
color:#d20300;
text-decoration:none;
}
#small-slider .slider-head a.active:hover {
text-decoration:underline;
}
#small-slider .slider-holder {
padding:0 51px;
width:820px;
height:105px;
padding-bottom:16px;
position:relative;
cursor:pointer;
}
#small-slider .jcarousel-clip, #small-slider ul {
width:836px;
height:105px;
overflow:hidden;
position:relative;
}
#small-slider li {
margin-right:16px;
width:101px;
}
#small-slider li a {
background:#fff;
padding:1px;
border:1px solid #dbd5bf;
float:left;
position:relative;
}
#small-slider li img {
float:left;
}
#small-slider li span {
position:absolute;
top:0;
left:0;
width:101px;
height:101px;
font-size: 0;
line-height: 0;
text-indent: -4000px;
}
#small-slider li a:hover {
border:1px solid #d20300;
}
#small-slider li a:hover span {
background:url(images/small-slider-magnifier.png);
}
#small-slider .jcarousel-prev, #small-slider .jcarousel-next {
width:29px;
height:24px;
position:absolute;
top:38px;
}
#small-slider .jcarousel-next {
background:url(images/small-slider-next.gif);
right:-4px;
}
#small-slider .jcarousel-prev {
background:url(images/small-slider-prev.gif);
left:-4px;
}
#main .bg-bottom {
padding-bottom:0;
}
.text-block {
padding-left:12px;
}
.box {
float:left;
width:262px;
margin:0 62px 28px 0;
}
.last {
margin-right:0 !important;
}
#content {
width:613px;
margin-right:35px;
}
#footer {
padding:10px 0;
}
#footer p {
color:#8c8772;
font-size:12px;
text-align:right;
}
#footer a {
color:#8c8772;
text-decoration:none;
}
#footer a:hover {
text-decoration:underline;
}
</style>
<!--[if IE 6]>
<link rel="stylesheet" href="blogger-css/ie6.css" type="text/css" media="all" />
<![endif]-->
<link rel="stylesheet" href="js/fancybox/jquery.fancybox-1.3.1.css" type="text/css" media="screen" />
<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/fancybox/jquery.fancybox-1.3.1.js"></script>
<script type="text/javascript" src="js/jquery-func.js"></script>
</head>
<body>
<!-- START PAGE SOURCE -->
<div id="shell">
<div id="header" class="big-box">
<div class="bg-bottom">
<h1 id="logo"><a href="#">Blogger</a></h1>
<div id="search">
<form action="#" method="post">
<fieldset>
<input type="text" name="string" value="" class="field" />
<input type="submit" value="SEARCH" class="submit" />
</fieldset>
</form>
</div>
<div class="cl"> </div>
</div>
</div>
<div id="navigation">
<ul>
<li><a href="#" class="active"><span>home</span></a></li>
<li><a href="#"><span>about</span></a></li>
<li><a href="#"><span>services</span></a></li>
<li><a href="#"><span>projects</span></a></li>
<li><a href="#"><span>blog</span></a></li>
<li><a href="#"><span>contact</span></a></li>
</ul>
<div class="cl"> </div>
</div>
<div id="main" class="big-box">
<div class="bg-top">
<div class="bg-bottom">
<div id="big-slider" class="slider">
<div class="slider-holder">
<ul>
<li>
<div class="image"> <img src="blogger-css/images/big-slide-1.jpg" alt="" /> </div>
<div class="data">
<h2>Lorem ipsum dolor sit amet, consectetur adipisc- ing elit.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent aliquet lacus at metus accumsan porta. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in ligula ut dui adipiscing commodo.</p>
<p>Cras aliquet tellus sed dolor aliquet condimentum. Quisque in ligula orci … <a href="#">read more</a></p>
</div>
</li>
<li>
<div class="image"> <img src="blogger-css/images/big-slide-1.jpg" alt="" /> </div>
<div class="data">
<h2>Lorem ipsum dolor sit amet, consectetur adipisc- ing elit.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent aliquet lacus at metus accumsan porta. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in ligula ut dui adipiscing commodo.</p>
<p>Cras aliquet tellus sed dolor aliquet condimentum. Quisque in ligula orci … <a href="#">read more</a></p>
</div>
</li>
<li>
<div class="image"> <img src="blogger-css/images/big-slide-1.jpg" alt="" /> </div>
<div class="data">
<h2>Lorem ipsum dolor sit amet, consectetur adipisc- ing elit.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent aliquet lacus at metus accumsan porta. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in ligula ut dui adipiscing commodo.</p>
<p>Cras aliquet tellus sed dolor aliquet condimentum. Quisque in ligula orci … <a href="#">read more</a></p>
</div>
</li>
</ul>
<div class="cl"> </div>
</div>
<a href="#" class="slider-link">View</a> </div>
<div id="top" class="text-block">
<div id="content" class="box">
<h3>Nulla tellus tempus magna. </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dictum, neque ut imperdiet pellen- tesque, nulla tellus tempus magna, sed consectetur orci metus a justo. 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>
<p>Cras aliquet tellus sed dolor aliquet condimentum. Quisque in ligula orci … <a href="#">read more</a></p>
</div>
<div class="box last">
<h3>Consectetur elit</h3>
<p>Aliquam ac congue nunc. Mauris a tortor ut massa egestas tempus. Pellentesque tincidunt fermentum diam sagittis ullamcorper.</p>
<p>Cras aliquet tellus sed dolor aliquet condimentum … <a href="#">read more</a></p>
</div>
<div class="cl"> </div>
</div>
<div id="small-slider" class="slider">
<div class="slider-head">
<h4>Whats HOT this week</h4>
<div class="categories"> <a href="#" class="active">Events</a> <a href="#">News</a> <a href="#">Interviews</a> <a href="#">Opinions</a> </div>
<div class="cl"> </div>
</div>
<div class="slider-holder">
<ul>
<li> <a href="blogger-css/images/big-slide-1.jpg" rel="small-slider"> <span> </span> <img src="blogger-css/images/small-slider-1.jpg" alt="" /> </a> </li>
<li> <a href="blogger-css/images/big-slide-1.jpg" rel="small-slider"> <span> </span> <img src="blogger-css/images/small-slider-2.jpg" alt="" /> </a> </li>
<li> <a href="blogger-css/images/big-slide-1.jpg" rel="small-slider"> <span> </span> <img src="blogger-css/images/small-slider-3.jpg" alt="" /> </a> </li>
<li> <a href="blogger-css/images/big-slide-1.jpg" rel="small-slider"> <span> </span> <img src="blogger-css/images/small-slider-4.jpg" alt="" /> </a> </li>
<li> <a href="blogger-css/images/big-slide-1.jpg" rel="small-slider"> <span> </span> <img src="blogger-css/images/small-slider-5.jpg" alt="" /> </a> </li>
<li> <a href="blogger-css/images/big-slide-1.jpg" rel="small-slider"> <span> </span> <img src="blogger-css/images/small-slider-6.jpg" alt="" /> </a> </li>
<li> <a href="blogger-css/images/big-slide-1.jpg" rel="small-slider"> <span> </span> <img src="blogger-css/images/small-slider-7.jpg" alt="" /> </a> </li>
<li> <a href="blogger-css/images/big-slide-1.jpg" rel="small-slider"> <span> </span> <img src="blogger-css/images/small-slider-1.jpg" alt="" /> </a> </li>
<li> <a href="blogger-css/images/big-slide-1.jpg" rel="small-slider"> <span> </span> <img src="blogger-css/images/small-slider-2.jpg" alt="" /> </a> </li>
<li> <a href="blogger-css/images/big-slide-1.jpg" rel="small-slider"> <span> </span> <img src="blogger-css/images/small-slider-3.jpg" alt="" /> </a> </li>
<li> <a href="blogger-css/images/big-slide-1.jpg" rel="small-slider"> <span> </span> <img src="blogger-css/images/small-slider-4.jpg" alt="" /> </a> </li>
<li> <a href="blogger-css/images/big-slide-1.jpg" rel="small-slider"> <span> </span> <img src="blogger-css/images/small-slider-5.jpg" alt="" /> </a> </li>
<li> <a href="blogger-css/images/big-slide-1.jpg" rel="small-slider"> <span> </span> <img src="blogger-css/images/small-slider-6.jpg" alt="" /> </a> </li>
<li> <a href="blogger-css/images/big-slide-1.jpg" rel="small-slider"> <span> </span> <img src="blogger-css/images/small-slider-7.jpg" alt="" /> </a> </li>
</ul>
<div class="cl"> </div>
</div>
</div>
<div id="bottom" class="text-block">
<div class="box">
<h3>Aliquam ac congue.</h3>
<p>Aliquam ac congue nunc. Mauris a tortor ut massa egestas tempus. Pellentesque tincidunt fermentum diam sagittis ullamcorper.</p>
<p>Cras aliquet tellus sed dolor aliquet condimentum … <a href="#">read more</a></p>
</div>
<div class="box">
<h3>Mauris a tortor ut </h3>
<p>Aliquam ac congue nunc. Mauris a tortor ut massa egestas tempus. Pellentesque tincidunt fermentum diam sagittis ullamcorper.</p>
<p>Cras aliquet tellus sed dolor aliquet condimentum … <a href="#">read more</a></p>
</div>
<div class="box last">
<h3>Integer dictum</h3>
<p>Aliquam ac congue nunc. Mauris a tortor ut massa egestas tempus. Pellentesque tincidunt fermentum diam sagittis ullamcorper.</p>
<p>Cras aliquet tellus sed dolor aliquet condimentum … <a href="#">read more</a></p>
</div>
<div class="cl"> </div>
</div>
</div>
</div>
</div>
<div id="footer">
<p class="left">Copyright © 2010 <a href="#">Domain Name</a> - 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>
<!-- END PAGE SOURCE -->
</body>
</html>
Related examples in the same category