blue-wood
<!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>Blue Wood</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:12px;
line-height:1.3;
font-family:Arial, Helvetica, Sans-Serif;
color:#e0e0e0;
background:#11151b url(images/body.jpg) center 606px repeat;
}
a {
color:#009dff;
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 {
border-bottom:0 !important;
border-right:0 !important;
margin-right:0 !important;
margin-bottom:0 !important;
}
.button-live {
width:95px;
height:24px;
font-size:0;
line-height:0;
text-indent:-4000px;
float:left;
background:url(images/visitlive.png);
}
#wrapper {
background:url(images/wrapper-top.jpg) center top repeat-x;
}
.wrapper-bg {
background:url(images/wrapper-bg.jpg) center top no-repeat;
}
#shell {
width:960px;
margin:0 auto;
padding:0 10px 30px 10px;
}
#header {
padding:12px 10px 10px 10px;
height:100%;
}
#logo {
font-family:Georgia, "Times New Roman", Sans-Serif;
font-style:italic;
font-weight:normal;
}
#logo {
font-size:40px;
line-height:44px;
float:left;
display:inline;
}
#logo a {
color:#fff;
text-shadow:#000 -1px 2px;
text-decoration:none;
}
#navigation {
float:right;
display:inline;
padding:18px 7px 0 0;
}
#navigation ul {
list-style:none;
}
#navigation ul li {
float:left;
padding-left:47px;
height:16px;
line-height:16px;
}
#navigation ul li a {
color:#b1b4bb;
font-size:14px;
font-weight:bold;
text-decoration:none;
}
#navigation ul li a.active, #navigation ul li a:hover {
color:#00d2ff;
}
#slider {
background:#181818 url(images/slider.png) 0 0 no-repeat;
width:934px;
position:relative;
margin:0 -1px 10px;
height:433px;
overflow:hidden;
position:relative;
padding:0 14px;
}
#slider .jcarousel-clip {
width:934px;
height:433px;
overflow:hidden;
position:relative;
}
#slider ul {
list-style:none;
height:433px;
position:relative;
}
#slider ul li {
float:left;
width:894px;
height:312px;
padding:45px 13px 46px 27px;
}
#slider .image {
float:left;
width:527px;
position:relative;
z-index:9;
}
#slider .data {
float:right;
width:310px;
padding:0 39px 0 0;
}
h2 {
font-size:24px;
line-height:26px;
padding-bottom:10px;
color:#fff;
}
#slider .data p {
line-height:15px;
padding-bottom:14px;
}
.jcarousel-prev, .jcarousel-next {
height:132px;
position:absolute;
top:136px;
z-index:10;
cursor:pointer;
}
.jcarousel-prev {
background:url(images/slider-arrow-prev.png);
width:54px;
left:11px;
}
.jcarousel-next {
background:url(images/slider-arrow-next.png);
width:56px;
right:11px;
}
#intro {
background:#212121;
margin-bottom:10px;
padding:9px 9px 7px 9px;
height:100%;
overflow:hidden;
}
#intro .avatar {
float:left;
width:77px;
border:2px solid #101419;
}
#intro .avatar img {
border:1px solid #4b4b4b;
}
#intro .cnt {
float:right;
width:856px;
padding:3px 0 0 0;
}
h4 {
font-size:14px;
color:#00d2ff;
line-height:16px;
padding-bottom:3px;
}
#intro .cnt p {
color:#afafaf;
line-height:15px;
width:832px;
letter-spacing:0.3px;
}
#main {
background:#181818;
margin-bottom:10px;
padding:10px 9px;
height:100%;
}
.box {
float:left;
background:url(images/content-bg.gif) left top repeat-y;
}
.box .box-top {
background:url(images/content-top.gif) left top no-repeat;
}
.box .box-bottom {
background:url(images/content-bottom.gif) left bottom no-repeat;
padding:21px 22px 20px 22px;
height:100%;
overflow:hidden;
}
#content {
width:578px;
}
#sidebar {
width:356px;
float:right;
}
#sidebar {
background-image:url(images/sidebar-bg.gif);
}
#sidebar .box-top {
background-image:url(images/sidebar-top.gif);
}
#sidebar .box-bottom {
background-image:url(images/sidebar-bottom.gif);
padding:15px;
}
.blog-posts ul {
list-style:none;
}
.blog-posts ul li {
padding-bottom:11px;
background:url(images/blogroll-border.gif) center bottom no-repeat;
margin-bottom:10px;
}
.blog-posts ul li.last {
background:none;
}
.blog-posts ul li p {
line-height:15px;
}
h3 {
font-size:16px;
color:#fff;
line-height:18px;
padding:6px 0 8px 57px;
height:35px;
background:url(images/bubble.png) left top no-repeat;
}
h5 {
font-size:13px;
line-height:15px;
color:#009dff;
padding-bottom:4px;
}
h5 a {
color:#009dff;
text-decoration:none;
}
h5 a:hover {
text-decoration:underline;
}
.site-link {
width:254px;
float:left;
margin-right:20px;
position:relative;
}
.site-link img {
border:5px solid #000;
border-right-size:4px;
border-left-size:4px;
}
.site-link .bubble {
display:block;
position:absolute;
top:106px;
left:0;
height:43px;
}
.site-link .bubble {
background:url(images/site-link-bubble.png);
font-size:12px;
font-weight:normal;
color:#fff;
padding:12px 4px 0 9px;
line-height:14px;
width:233px;
margin-left:5px;
}
.site-link .bubble strong {
display:block;
font-size:14px;
font-weight:bold;
}
.site-link .button-live {
margin-top:11px;
}
#footer {
color:#4a4a4a;
background:#212121;
padding:14px 20px;
}
#footer p {
margin:0;
padding:0;
line-height:normal;
white-space:nowrap;
color:#4a4a4a;
}
#footer a {
color:#4a4a4a;
padding:inherit;
text-decoration:none;
}
#footer a:hover {
text-decoration:none;
}
#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.jcarousel.js"></script>
<script type="text/javascript" src="js/jquery-func.js"></script>
<!--[if IE 6]><link rel="stylesheet" href="blue-wood-css/ie6.css" type="text/css" media="all" /><![endif]-->
</head>
<body>
<!-- START PAGE SOURCE -->
<div id="wrapper">
<div class="wrapper-bg">
<div id="shell">
<div id="header">
<h1 id="logo"><a href="#">Blue Wood</a></h1>
<div id="navigation">
<ul>
<li><a href="#" class="active">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">PORTFOLIO</a></li>
<li><a href="#">BLOG</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
<div class="cl"> </div>
</div>
<div id="slider">
<ul>
<li>
<div class="image"> <img src="blue-wood-css/images/slide-1.jpg" alt="" /> </div>
<div class="data">
<h2>Donec vehicula felis</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque blandit sagittis augue, vitae laoreet quam luctus eget. Fusce odio felis, eleifend quis volutpat nec, hendrerit eget odio.</p>
<p>Donec vehicula felis at metus aliquet pharetra. Mauris vulputate interdum bibendum. Proin condimentum venenatis congue. Phasellus orci lacus, ultrices fringilla ornare et, blandit sit amet purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<a href="#" class="button-live">VISIT LIVE</a> </div>
</li>
<li>
<div class="image"> <img src="blue-wood-css/images/slide-1.jpg" alt="" /> </div>
<div class="data">
<h2>Donec vehicula felis</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque blandit sagittis augue, vitae laoreet quam luctus eget. Fusce odio felis, eleifend quis volutpat nec, hendrerit eget odio.</p>
<p>Donec vehicula felis at metus aliquet pharetra. Mauris vulputate interdum bibendum. Proin condimentum venenatis congue. Phasellus orci lacus, ultrices fringilla ornare et, blandit sit amet purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<a href="#" class="button-live">VISIT LIVE</a> </div>
</li>
<li>
<div class="image"> <img src="blue-wood-css/images/slide-1.jpg" alt="" /> </div>
<div class="data">
<h2>Donec vehicula felis</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque blandit sagittis augue, vitae laoreet quam luctus eget. Fusce odio felis, eleifend quis volutpat nec, hendrerit eget odio.</p>
<p>Donec vehicula felis at metus aliquet pharetra. Mauris vulputate interdum bibendum. Proin condimentum venenatis congue. Phasellus orci lacus, ultrices fringilla ornare et, blandit sit amet purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<a href="#" class="button-live">VISIT LIVE</a> </div>
</li>
</ul>
</div>
<div id="intro">
<div class="avatar"> <img src="blue-wood-css/images/avatar.jpg" alt="" /> </div>
<div class="cnt">
<h4>Hello World!</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
</div>
<div class="cl"> </div>
</div>
<div id="main">
<div id="content" class="box">
<div class="box-top">
<div class="box-bottom">
<div class="site-link"> <img src="blue-wood-css/images/page-1.jpg" alt="" />
<div class="bubble"> <strong>Pellentesque habitant</strong> Pellentesque habitant morbi tristique senectus </div>
<div class="cl"> </div>
<a href="#" class="button-live">VISIT LIVE</a> </div>
<div class="site-link last"> <img src="blue-wood-css/images/page-2.jpg" alt="" />
<div class="bubble"> <strong>Donec vehicula felis</strong> Pellentesque habitant morbi tristique senectus </div>
<a href="#" class="button-live">VISIT LIVE</a>
<div class="cl"> </div>
</div>
<div class="cl"> </div>
</div>
</div>
</div>
<div id="sidebar" class="box">
<div class="box-top">
<div class="box-bottom">
<h3 class="blogroll">BLOGROLL</h3>
<div class="blog-posts">
<ul>
<li>
<h5><a href="#">Donec vehicula felis</a></h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque blandit sagittis augue, vitae laoreet quam luctus eget. </p>
</li>
<li class="last">
<h5><a href="#">Lorem dolor consectetyr</a></h5>
<p>Donec vehicula felis at metus aliquet pharetra. Mauris vulputate interdum bibendum. Proin condimentum venenatis congue.</p>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="cl"> </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>
</div>
</div>
<!-- END PAGE SOURCE -->
</body>
</html>
Related examples in the same category