orange-blog
<!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>Orange Blog</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<style type='text/css'>
/* CSS Document orange*/
body {
background: url('orange-blog-images/textur.png') rgb(54,54,54);
text-align: center;
font-family: Tahoma, "Lucida Grande CE", lucida, sans-serif;
font-size: 14px;
color: rgb(66,66,66);
position: relative;
margin: 40px 0 100px 0;
padding: 0;
}
a {
color: rgb(218,112,42);
text-decoration: underline;
}
a:hover {
text-decoration: none;
}
.text a:hover {
text-decoration: none;
background: rgb(244,208,102);
color: rgb(0,0,0);
}
div#page {
width: 800px;
margin: 0 auto;
background: rgb(255,255,255);
text-align: left;
}
#header {
width: 800px;
height: 201px;
background: url('orange-blog-images/header.png') no-repeat rgb(240,127,32);
margin: 0;
}
#header a {
color: rgb(255,255,255);
text-decoration: none;
font-size: 50px;
font-weight: normal;
width: 620px;
height: 131px;
display: block;
padding: 70px 90px 0 90px;
}
#header a:hover{
text-decoration: underline;
}
#left {
width: 540px;
float: left;
padding: 30px 25px;
}
#right {
width: 200px;
float: right;
padding: 30px 10px 20px 0;
}
.cleaner {
width: 1px;
height: 1px;
font-size: 1px;
line-height: 1px;
clear: both;
}
.article {
margin: 0 0 50px 0;
}
.article .text p {
margin: 15px 0;
line-height: 160%;
font-size: 13px;
color: rgb(66,66,66)
}
.article .top .calendar{
width: 42px;
height: 47px;
float: left;
background: url('orange-blog-images/calendar.png') rgb(150,150,150);
text-align: center;
font-size: 9px;
padding: 2px 2px 0 0;
margin: 5px 8px 5px 0;
color: rgb(255,255,255);
}
.article .top .calendar span {
display: block;
text-align: center;
font-size: 18px;
color: rgb(66,66,66);
padding-top: 5px;
}
.article h2 {
margin: 0;
padding: 0;
font-weight: normal;
font-size: 23px;
background: url('orange-blog-images/border-headline.png') no-repeat bottom right;
}
.article h2 a{
color: rgb(66,66,66);
text-decoration: none;
}
.article h2 a:hover {
color: rgb(255,102,0);
}
.info {
margin: 2px 0 40px 0;
padding: 0;
}
.info .category {
float: left;
padding-left: 25px;
margin-left: 5px;
background: url('orange-blog-images/category.png') no-repeat left;
}
.info .comments {
float: right;
padding-left: 25px;
background: url('orange-blog-images/comment.png') no-repeat left;
}
.info .category a, .info .comments a {
color: rgb(218,112,42);
text-decoration: none;
}
.info .category a:hover, .info .comments a:hover {
text-decoration: underline;
}
ul#rss {
margin: 0;
padding: 10px 0 50px 100px;
background: url('orange-blog-images/rss.png') no-repeat left;
}
#rss li{
list-style: none;
color: rgb(218,112,42);
margin: 3px 0;
}
form#search {
margin: 10px 0;
padding: 0;
position: relative;
}
#search .input {
width: 110px;
padding: 4px;
background: rgb(249,249,249);
border: 1px dashed rgb(144,144,144);
color: rgb(150,150,150);
}
#search .submit {
width: 36px;
height: 28px;
border: 0;
background: url('orange-blog-images/search.png') no-repeat;
cursor: hand;
cursor: pointer;
margin: 0;
padding: 0;
position: absolute;
top: -2px;
left: 128px;
}
ul.categories {
margin: 0;
padding: 0;
}
.categories li {
border-bottom: 1px dashed rgb(177,177,177);
background: url('orange-blog-images/square.png') no-repeat left;
padding: 5px 0 2px 20px;
list-style: none;
}
.categories li a{
text-decoration: none;
color: rgb(0,0,0);
}
.categories li a:hover {
color: rgb(218,112,42);
}
#right h4 {
margin: 30px 0 0 0;
padding: 0 0 2px 0;
font-size: 15px;
font-weight: bold;
color: rgb(220,121,53);
border-bottom: 1px solid rgb(247,211,186);
}
ul.archive {
margin: 3px;
padding: 5px 0;
background: url('orange-blog-images/archive.png') repeat-y rgb(237,152,95);
}
.archive li {
list-style: none;
margin: 20px 5px 10px 20px;
padding: 0 0 0 30px;
background: url('orange-blog-images/li-calendar.png') no-repeat left;
}
.archive li a {
color: rgb(255,255,255);
}
.archive li a:hover {
color: rgb(61,61,61);
text-decoration: underline;
}
ul.links {
margin: 0;
padding: 0;
}
.links li {
list-style: none;
padding: 3px 5px 3px 10px;
border-bottom: 1px solid rgb(247,211,186);
}
.links li a {
background: url('orange-blog-images/square.png') no-repeat left;
padding-left: 20px;
text-decoration: none;
color: rgb(39,39,39)
}
.links li a:hover {
color: rgb(218,112,42);
}
#best {
width: 90%;
margin: 15px auto;
margin-bottom: 0;
padding: 10px 30px;
background: url('orange-blog-images/best-back.png') rgb(104,104,104);
clear: both;
}
#best div.col {
float: left;
width: 30%;
}
#best ul {
width: 180px;
margin: 0;
padding: 0;
}
#best ul li {
margin: 10px 0;
padding: 0;
padding-left: 30px;
list-style: none;
font-size: 11px;
background: url('orange-blog-images/best-li.png') no-repeat 0 6px;
}
* html #best ul li { /*IE6 only*/
margin: 0;
}
#best ul li a {
color: rgb(255,255,255);
font-weight: bold;
text-decoration: none;
}
#best ul li a:hover {
color: rgb(52,52,52);
}
#best ul li span {
display: block;
color: rgb(242,161,106);
margin-top: 3px;
}
#best h3 {
color: rgb(255,255,255);
margin: 0;
padding: 0;
font-size: 17px;
font-weight: normal;
}
* html #best h3 { /*IE6 only*/
margin-bottom: 10px;
}
#best p {
color: rgb(254,254,254);
font-size: 11px;
margin: 10px 0;
padding: 0;
}
.footer {
clear: both;
margin: 0;
padding: 15px;
color: rgb(5,5,5);
font-size: 12px;
line-height: 160%;
}
.footer a{
color: rgb(5,5,5);
text-decoration: underline;
}
.footer a:hover {
text-decoration: none;
}
</style>
</head>
<body>
<div id="page">
<h1 id="header"><a href="http://www.free-css.com/">Orange Blog</a> </h1>
<div id="left">
<div class="article">
<div class="top">
<p class="calendar">NOV <span>14</span></p>
<h2><a href="http://www.free-css.com/">Etiam nulla lacus</a></h2>
<p class="info"> <span class="category"><a href="http://www.free-css.com/">Category</a></span> <span class="comments"><a href="http://www.free-css.com/">15 comments</a></span> </p>
</div>
<div class="text">
<p> Orange Blog is released under a <a target="_blank" href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Atrribution License</a></p>
<p> Suspendisse potenti. Ut aliquet, ligula a ultrices pellentesque, tellus augue convallis est, quis viverra sapien metus non sapien. Fusce sed orci. Vestibulum tellus nisl, venenatis commodo, molestie ut, tempor sollicitudin, ligula. Curabitur euismod lacinia lorem. Nulla gravida tincidunt mi. Nunc porta ipsum quis nulla. Aliquam erat volutpat. </p>
<p> <a href="http://www.free-css.com/">Read more...</a> </p>
</div>
</div>
<div class="article">
<div class="top">
<p class="calendar">NOV <span>10</span></p>
<h2><a href="http://www.free-css.com/">Curabitur lacinia pellentesque</a></h2>
<p class="info"> <span class="category"><a href="http://www.free-css.com/">Category</a></span> <span class="comments"><a href="http://www.free-css.com/">53 comments</a></span> </p>
</div>
<div class="text">
<p> Sed sit amet pede in justo ultrices elementum. Nulla laoreet rhoncus neque. Ut nec sapien. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
<p> Suspendisse potenti. Ut aliquet, ligula a ultrices pellentesque, tellus augue convallis est, quis viverra sapien metus non sapien. Fusce sed orci. Vestibulum tellus nisl, venenatis commodo, molestie ut, tempor sollicitudin, ligula. Curabitur euismod lacinia lorem. Nulla gravida tincidunt mi. Nunc porta ipsum quis nulla. Aliquam erat volutpat. </p>
<p> Ut eros risus, sodales eget, fermentum vitae, euismod eu, lacus. Ut congue metus nec quam. Nunc ligula tellus, feugiat ac, lobortis id, semper ac, nisl. In ac pede. Proin in felis eget sem volutpat commodo. Phasellus ac est vel sem accumsan bibendum. Mauris pretium. Cras nec tellus. Vestibulum at eros non erat adipiscing malesuada. Proin elementum est quis risus. </p>
<p> <a href="http://www.free-css.com/">Read more...</a> </p>
</div>
</div>
</div>
<div id="right">
<ul id="rss">
<li>RSS:</li>
<li><a href="http://www.free-css.com/">Articles</a></li>
<li><a href="http://www.free-css.com/">Comments</a></li>
</ul>
<form id="search" action="http://www.free-css.com/">
<p>
<input type="text" value="Search..." name="string" class="input" />
<input type="submit" value="" class="submit" />
</p>
</form>
<h4>Categories</h4>
<ul class="categories">
<li><a href="http://www.free-css.com/">Ligula a ultrices</a></li>
<li><a href="http://www.free-css.com/">Fusce sed</a></li>
<li><a href="http://www.free-css.com/">Nulla laoreet</a></li>
<li><a href="http://www.free-css.com/">Vetellus molestie</a></li>
<li><a href="http://www.free-css.com/">Nunc porta ipsum</a></li>
</ul>
<h4>Archive</h4>
<ul class="archive">
<li><a href="http://www.free-css.com/">January 2008</a></li>
<li><a href="http://www.free-css.com/">February 2008</a></li>
<li><a href="http://www.free-css.com/">March 2008</a></li>
<li><a href="http://www.free-css.com/">April 2008</a></li>
<li><a href="http://www.free-css.com/">May 2008</a></li>
</ul>
<h4>Links</h4>
<ul class="links">
<li><a href="http://www.free-css.com/">flavicius.php5.cz</a></li>
<li><a href="http://www.free-css.com/">venenatis.com</a></li>
<li><a href="http://www.free-css.com/">fucsesed.com</a></li>
<li><a href="http://www.free-css.com/">sedopellente.org</a></li>
</ul>
</div>
<div id="best">
<div class="col">
<h3>Last articles</h3>
<ul>
<li> <a href="http://www.free-css.com/">Curabitur lacinia peletesque</a> <span>11-14-2008</span> </li>
<li> <a href="http://www.free-css.com/">Curabitur lacinia peletesque</a> <span>11-14-2008</span> </li>
<li> <a href="http://www.free-css.com/">Curabitur lacinia peletesque</a> <span>11-14-2008</span> </li>
</ul>
</div>
<div class="col">
<h3>Recent comments</h3>
<ul class="recent-comments">
<li> <a href="http://www.free-css.com/">Curabitur:</a> <span>Lorem ipsum dolor sit amet, consectetur...</span> </li>
<li> <a href="http://www.free-css.com/">Peletesque:</a> <span>Quisque vulputate, orci et congue cursus, est nisl...</span> </li>
<li> <a href="http://www.free-css.com/">Lacinia</a> <span> Sed sed elit semper libero congue cursus...</span> </li>
</ul>
</div>
<div class="col">
<h3>About this site</h3>
<p> Quisque vulputate, orci et congue cursus, est nisl condimentum ante, ut rutrum libero tellus id mauris. Nunc ultricies mollis ligula. </p>
<p> Suspendisse eu nunc. Duis pulvinar lacinia sapien. Fusce varius felis at enim. </p>
<p> Nunc ultricies mollis ligula. </p>
</div>
<div class="cleaner"></div>
</div>
<p class="footer"> Design by <a href="http://www.seokings.cz/internetovy-marketing">seokings.cz</a>, sponsored link: <a href="http://online-airline-tickets.co.uk">Airline Tickets</a> <br />
In faucibus elementum augue. Nam dapibus, nisi a vehicula </p>
</div>
</body>
</html>
Related examples in the same category