happyblog
<!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" xml:lang="en" lang="en">
<head>
<title>Happy Blog</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type='text/css'>
body {
background: #eee url(pozadina.gif) repeat-y;
color:#666666;
font-family: Arial, Sans-Serif;
font-size: 70%;
padding: 0;
margin: 0 0 0 10px;
}
a {
color: #1480CD;
text-decoration: underline;
}
a:hover {
color: #808080;
background: #FEF7CD;
}
p {
margin: 0 0 5px 0;
padding: 0 0 0 2px;
color:#666666;
}
.picture {
margin-top: 20px;
height: 90px;
}
h3 {
font-size: 150%;
font-family: Sans-Serif, Arial;
letter-spacing: -1px;
margin: 0;
padding: 0;
color: #1480CD;
}
.read_more {
margin-top: 10px;
padding-top: 4px;
text-align: right;
padding-right: 9px;
font-size: 90%;
}
.read_more p {
color: #D85C1A;
}
#lijeva_kolona {
float: left;
width: 130px;
margin: 0 0 0 0;
padding: 15px 0;
background: url(lijevo.gif) no-repeat top left;
text-align: right;
}
#lijeva_kolona p {
color: #FBDBCA;
padding-right: 10px;
margin: 0 0 15px 0;
}
#lijeva_kolona a, #lijeva_kolona a:visited {
font-family: Tahoma, Sans-Serif;
font-size: 90%;
text-transform: uppercase;
font-weight:bold;
text-decoration: none;
color:#C0901F;
padding-right: 10px;
color: #AFD6F5;
display: block;
text-align: right;
height: 17px;
}
#lijeva_kolona a:hover {
color: #FFF;
background: url(link.gif) no-repeat center right;
}
#title p {
padding: 0 10px 3px 0;
margin: 0;
text-align: right;
font-size: 150%;
font-family: Sans-Serif;
letter-spacing: -1px;
font-weight: bold;
color: #FFF;
}
#sadrzaj {
width: 745px;
color: #333;
line-height: 130%;
padding: 0;
}
#sadrzaj h3 {
margin: 10px 0 5px 0;
}
#desna_kolona {
float: right;
margin: 3px 0 0 0px;
width: 180px;
padding: 0 8px 8px 12px;
height: auto;
background: url(clanak.gif) no-repeat top left;
}
#desna_kolona h3 {
margin: 2px 0 5px 0;
}
#desna_kolona p {
color: #D55917;
}
.desni_clanak {
padding: 10px;
background: #FEF7CD url(scrap.gif) repeat-x bottom left;
height: auto;
}
.informacije {
padding: 5px 10px 5px 10px;
margin: 5px 0 0 0;
background: #fff url(fade.gif) repeat-x bottom left;
height: auto;
}
#srednja_kolona {
width: 392px;
margin-left: 145px;
padding: 0;
padding-top: 1px;
text-align:justify;
}
.srednji_clanak {
margin: 3px 0 0 3px;
padding: 0px 10px 10px 12px;
background: url(clanak.gif) no-repeat;
}
.clanak {
padding: 1px 12px 10px 10px;
background: #FFF url(fade.gif) repeat-x bottom left;
height: auto;
}
</style>
</head>
<body>
<div id="sadrzaj">
<div id="lijeva_kolona">
<div id="title">
<p>Happy Blog</p>
</div>
<p>One big happy family</p>
<a href="http://www.free-css.com/">Home</a> <a href="http://www.free-css.com/">Blog archives</a> <a href="http://www.free-css.com/">Gallery</a> <a href="http://www.free-css.com/">About me</a> <a href="http://www.free-css.com/">Links</a>
<div class="picture"> <a href="http://www.free-css.com/"><img src="happyblog-images/pic.gif" alt="pic" /></a> </div>
<div class="picture"> <a href="http://www.free-css.com/"><img src="happyblog-images/pic.gif" alt="pic" /></a> </div>
</div>
<div id="desna_kolona">
<div class="desni_clanak">
<h3>Lorem Ipsum</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </p>
</div>
<div class="informacije">
<p>Important links:</p>
<p> <a href="http://www.free-css.com/">My OSWD showcase</a><br />
<a href="http://validator.w3.org/check?uri=referer">Valid XHTML 1.0 Strict!</a><br />
<a href="http://jigsaw.w3.org/css-validator/check/referer">Valid CSS</a><br />
</p>
<p>Design: Luka Cvrk, <a href="http://www.solucija.com">Solucija.com</a> </p>
</div>
</div>
<div id="srednja_kolona">
<div class="srednji_clanak">
<div class="clanak">
<h3>One happy blog!</h3>
<p>This is a happy and stylish blog template. If you like this template, you are free to do anything you want with it, use it on a commercial site if you want. I apologize for the non-english variables I used, but they are all easy to rename. This template can be used with sNews, a template independent completly free news publishing script that now supports user comments, search engine and other great features.</p>
<div class="read_more">
<p><a href="http://www.free-css.com/">Read more</a>> Posted on: August 24th, 2005</p>
</div>
</div>
</div>
<div class="srednji_clanak">
<div class="clanak">
<h3>Lorem ipsum</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </p>
<div class="read_more">
<p><a href="http://www.free-css.com/">Read more</a>> Posted on: August 24th, 2005</p>
</div>
</div>
</div>
<div class="srednji_clanak">
<div class="clanak">
<h3>Lorem ipsum</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </p>
<div class="read_more">
<p><a href="http://www.free-css.com/">Read more</a>> Posted on: December 22nd, 2004</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Related examples in the same category