blueblogtemplate
<!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" lang="en" xml:lang="en">
<head>
<title>Blue blog</title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<style type='text/css'>
/*
Blue blog template
----------------------
You are free to use
this template in any
way you desire, no
author information or
link back are required.
*/
* {
margin: 0;
padding: 0;
}
body {
background: #337FC6 url("bg.gif") top center repeat-y;
font: normal 8pt/13pt verdana, arial,sans-serif;
color: #808080;
}
a, a:visited {
text-decoration: underline;
color: #000;
}
a:hover {
color: #808080;
}
#header {
width: 562px;
height: 60px;
background: #000 url("header.gif") no-repeat;
padding-top: 30px;
padding-left: 18px;
font-size: 14pt;
color: #FFF;
}
#header h2{
padding-top: 5px;
font-size: 9pt;
color: #C2D9EF;
}
#container {
width: 580px;
background: #fff url("sidebar.gif") repeat-y right;
border: solid 10px #fff;
margin: 0 auto;
text-align: left;
}
#horizontal {
width: 560px;
height: 30px;
background: url(horizontal.gif);
font-weight: bold;
font-size: 8pt;
padding-top: 6px;
padding-left: 20px;
}
#horizontal a, #horizontal a:visited {
color: #C2D9EF;
text-decoration: none;
margin-right: 15px;
}
#horizontal a:hover {
color: #FFF;
text-decoration: none;
}
#right-column {
color: #808080;
width: 134px;
background: url(menutop.gif) no-repeat top left;
float: right;
padding: 10px;
border-right: 4px solid #FFF;
}
#content {
float: left;
width: 410px;
margin: 10px 0 0 4px;
}
#content h2{
font-size: 12pt;
font-weight: bold;
color: #76A7DC;
margin-bottom: 5px;
padding-left: 14px;
background: url(h2bg.gif) top left repeat-y;
}
.black {
color: #000;
}
p {
margin-bottom: 20px;
padding-left: 14px;
background: url(articlebg.gif) top left repeat-y;
}
input.text {
width: 70px;
border: 1px solid #ccc;
}
input.button {
color: #808080;
padding-left: 0px;
font-size: 8pt;
border: none;
background: none;
}
#searchbox {
background: url(searchbox.gif) no-repeat;
padding: 5px;
height: 30px;
}
#footer {
color: #ccc;
background: #F9F9F9;
clear: both;
width: 405px;
margin-left: 4px;
height: 20px;
padding: 4px;
border: 1px solid #E4E4E4;
}
#footer a, #footer a:visited{
color: #ccc;
}
#footer a:hover {
color: #808080;
}
</style>
</head>
<body>
<div id="container">
<div id="header"> Blue blog <b>template</b>
<h2>Soft color blog template...</h2>
</div>
<div id="horizontal"> <a href="http://www.free-css.com/">Home</a> <a href="http://www.free-css.com/">Articles</a> <a href="http://www.free-css.com/">Forum</a> <a href="http://www.free-css.com/">Gallery</a> <a href="http://www.free-css.com/">Our Affiliates</a> <a href="http://www.free-css.com/">Support</a> <a href="http://www.free-css.com/">Contact</a> </div>
<div id="right-column">
<div id="searchbox">
<form action="search" />
<input name="searchQuery" class="text" type="text" />
<input type="submit" value="Search" name="B1" class="button" />
</div>
This is the right column that can be used for <b>links</b>, short <b>news</b> or <b>pool</b>. On the top of it, there a small and simple <b>search form</b>. <br />
<br />
Important links: <br />
<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 />
<br/>
</div>
<div id="content">
<h2>Soft and easy <span class="black">colors!</span></h2>
<p> This design is supposed to be a Blog template, but can be used for another purpose, such as a small personal or business website. If you need a PHP and MySQL script to display news on your site, visit Solucija, and download your free copy of s}news, it's easy to integrate into this design, or can be a simple content management system on it's own. Offcourse, you are free to use this template in any way you want, no link back or copyright notice is required. </p>
<p><a href="http://www.free-css.com/">Read more</a> > Posted on: August 7th, 2005</p>
<h2>Nice <span class="black">blog</span> template!</h2>
<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 a...</p>
<p><a href="http://www.free-css.com/">Read more</a> > Posted on: June 2nd, 2005</p>
<h2>Lorem ipsum <span class="black">text</span></h2>
<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 a...</p>
<p><a href="http://www.free-css.com/">Read more</a> > Posted on: April 24th, 2005</p>
</div>
<div id="footer"> © 2005. <a href="http://www.free-css.com/">YourCompany.com</a> > Designed by <a href="http://www.solucija.com">Solucija.com</a> </div>
</div>
</body>
</html>
Related examples in the same category