miniblog
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Mini Blog</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
/* CSS Document */
body {
background-color:#fff;
background-image:url(miniblog-images/backgrounds/body.gif);
background-position:center;
background-repeat:repeat-y;
font-family: "Lucida Grande","Lucida Sans Unicode",geneva,verdana,sans-serif;
font-size:10px;
color:#777;
}
#container {
width:500px;
margin:0 auto;
}
#header {
background-color:#eeeeee;
margin:10px;
padding:30px 10px 30px 10px;
border-top:2px solid #ccc;
}
#header h1 {
text-align:center;
font-family:Trebuchet MS, Geneva, Arial, Helvetica, sans-serif;
font-size:30px;
color:#333;
margin:0;
font-weight:normal;
}
#header h1 strong {
color:#A85BA6;
}
#header h1 a {
color:#333;
text-decoration:none;
}
#header h2 {
font-size:11px;
font-weight:normal;
text-align:center;
color:#999;
}
#header ul {
margin:20px 0 0 0;
padding:0;
}
#header li {
margin:0;
padding:0;
list-style:none;
float:left;
}
#header li a {
display:block;
padding:7px;
color:#999;
text-decoration:none;
border-bottom:5px solid #fff;
margin:0 10px 0 0;
font-size:10px;
}
#header li a:hover {
color:#000;
border-bottom:7px solid #fff;
padding:5px 7px 7px 7px;
}
#header li a em {
font-style:normal;
text-decoration:underline;
}
#sidebar {
float:right;
width:164px !important;
width:154px;
margin:10px 10px 10px 0;
}
#sidebar h1 {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#000;
margin:10px 5px 15px 10px;
}
#sidebar p {
padding:5px;
margin:5px 5px 5px 10px;
line-height:17px;
word-spacing:-1px;
}
ul.submenu {
margin:0;
padding:0;
}
.submenu li {
marign:0;
padding:0;
list-style:none;
}
.submenu a {
display:block;
height:13px;
padding:7px 7px 7px 17px;
margin:1px 0 0 0;
background-color:#fff;
background-image:url(miniblog-images/backgrounds/submenua_normal.jpg);
background-position:left;
background-repeat:repeat-y;
}
.submenu a:hover {
background-image:url(miniblog-images/backgrounds/submenua.jpg);
background-position:bottom;
background-repeat:no-repeat;
background-color:#fff;
padding:7px 7px 7px 15px;
}
.submenu a:focus {
background-image:url(miniblog-images/backgrounds/submenua.jpg);
background-position:bottom;
background-repeat:no-repeat;
background-color:#fff;
padding:7px 7px 7px 15px;
}
.submenu a:active {
background-image:url(miniblog-images/backgrounds/submenua.jpg);
background-position:bottom;
background-repeat:no-repeat;
background-color:#fff;
padding:7px 7px 7px 15px;
}
.note {
padding:10px;
background-color:#eee;
border:1px solid #ccc;
margin:20px 5px 20px 5px;
}
#content {
margin:10px 185px 10px 10px;
}
#content h1 {
font-family:Trebuchet MS, Geneva, Arial, Helvetica, sans-serif;
font-size:14px;
border-bottom:1px solid #eee;
padding:5px;
color:#000;
}
#content h1 a {
color:#000;
text-decoration:none;
display:block;
background-image:url(miniblog-images/backgrounds/h1.png);
background-position:right;
background-repeat:no-repeat;
}
#content h1 a:hover {
color:#444;
background-image:url(miniblog-images/backgrounds/h1_hover.png);
}
#content h2 {
font-size:11px;
color:#ccc;
margin:10px 0 10px 0;
padding:5px;
}
#content p {
padding:5px;
line-height:18px;
word-spacing: 0.1em;
}
#content .article_menu {
text-align:right;
padding:5px;
margin:10px 0 20px 0;
border-top:1px solid #eee;
}
#content .article_menu b {
float:left;
font-weight:normal;
}
#content .article_menu a {
padding:0 0 0 15px;
background-image:url(miniblog-images/backgrounds/comment.png);
background-position:left;
background-repeat:no-repeat;
color:#333;
text-decoration:none;
}
#content p a {
color:#333;
text-decoration:none;
}
#content p:hover a {
border-bottom:1px dotted #000;
}
#content p:hover a:hover {
border-bottom:1px solid #000;
}
#content .article_menu a:hover {
color:#000;
background-image:url(miniblog-images/backgrounds/comment_hover.png);
}
#content ul {
margin:0 0 0 15px;
padding:0;
border-top:1px solid #f6f6f6;
}
#content li {
margin:5px 0 5px 0;
border-bottom:1px solid #f6f6f6;
padding:0 0 5px 20px;
list-style:none;
background-image:url(miniblog-images/backgrounds/arrow.png);
background-position:top left;
background-repeat:no-repeat;
color:#999;
}
#content blockquote {
background-color:#f6f6f6;
margin:4px;
padding:5px;
border-top:1px solid #eee;
border-bottom:1px solid #eee;
}
#content blockquote p {
marign:0;
padding:0 10px 0 10px;
}
.comment_odd {
background-color:#f6f6f6;
padding:10px;
border-top:1px solid #fff;
border-bottom:1px solid #eee;
}
.comment_even {
padding:10px;
background-color:#fcfcfc;
border-top:1px solid #fff;
border-bottom:1px solid #eee;
}
.comnum {
float:right;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:25px;
color:#ccc;
}
input, textarea {
background-color:#fff;
border:1px solid #ccc;
padding:3px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#777;
}
#footer {
background-color:#eee;
border-top:2px solid #ccc;
padding:10px;
text-align:center;
}
a {
color:#333;
text-decoration:none;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1><a href="http://www.free-css.com/">mini<strong>BLOG</strong> 1.0</a></h1>
<h2>For all your blogging needs.</h2>
<ul id="nav">
<li><a href="http://www.free-css.com/" accesskey="h"><em>H</em>ome</a></li>
<li><a href="#css" title="CSS and XHTML (a:c)" accesskey="c"><em>c</em>ss & xhtml</a></li>
<li><a href="#about" title="All about me (a:a)" accesskey="a"><em>A</em>bout the author</a></li>
<li><a href="#contact" title="Get in Touch (a:o)" accesskey="o">C<em>o</em>ntact</a></li>
</ul>
</div>
<div id="sidebar">
<h1>The Sidebar</h1>
<p> This is where you will put anything that uhm, belongs here really. Latest Comments. Submenus. Blogrolls. Affiliates. Anything! </p>
<h1>Menu Take 2</h1>
<ul class="submenu">
<li><a href="#intro">Intro</a></li>
<li><a href="#css">css & xhtml</a></li>
<li><a href="#about">About the author</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<h1>Check it out!</h1>
<ul class="submenu">
<li><a href="http://www.free-css.com/">Six Shooter Media</a></li>
<li><a href="http://www.free-css.com/">JamesKoster.co.uk</a></li>
<li><a href="http://www.free-css.com/">Buy a Button!</a></li>
<li><a href="http://www.free-css.com/">Open Web Design</a></li>
<li><a href="http://www.free-css.com/">OSWD</a></li>
</ul>
<p class="note"> Here is a special paragraph for any important notes that you might want to display. </p>
</div>
<div id="content">
<h1><a href="#intro" id="intro">Introduction</a></h1>
<h2>Everyting needs an intro!</h2>
<p> Hello and welcome to miniBLOG! This is just a simple, small template designed specifically for the blog obsessives. Regarding colours, I've left everything very plain using mainly greys. These colours are all easily changed via the stylesheet. The backgorund image can be changed easily too by opening it in a graphics program and adjusting the hue/saturation. Got something to say? Say it with miniBLOG! </p>
<p> Speaking of the background image, it was created using a pattern which can be found on squidfingers.com. </p>
<div class="article_menu"> <b>Posted on Thursday 08 December 2005</b> <a href="http://www.free-css.com/">28 Comments</a> </div>
<h1><a href="#css" id="css">CSS & XHTML</a></h1>
<p> As you would expect, this web site makes use of css for its entire layout. No nasty tables here baby! The markup is also valid XHTML 1.1 strict. CSS & XHTML are important for the following reasons: </p>
<ul>
<li>Accessibility. Big subject</li>
<li>Keeping file sizes small</li>
<li>Search Engine Optimisation</li>
<li>Loads more</li>
</ul>
<p> Anyway, this site validates as both <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> and <a href="http://validator.w3.org/check?uri=referer">XHTML 1.1 Strict</a> compliant. Which is nice. </p>
<div class="article_menu"> <b>Posted on Thursday 08 December 2005</b> <a href="http://www.free-css.com/">28 Comments</a> </div>
<h1><a href="#about" id="about">About the Author</a></h1>
<p> Hi! My names Jay and I'm a 19 year old web designer from England. My main projects are conducted through my website Six Shooter Media. But I also run various other sites. These include my blog, nothing special really, and, more interestingly for people setting up new sites with these templates I run a tutorials web site which gives you some good techniques for spicing up your web sites. Be it a template site or something else, there's bound to be somehting interesting there, so take a look at Pretty as a Picture. </p>
<p> Another site of mine that you might find interesting if you're setting up a site with a free template like this is Buy a Button. There, for a great price you can purchase a link to your site in the form of a button. This link will obviously provide you site with some additional traffic which is always nice! </p>
<div class="article_menu"> <b>Posted on Thursday 08 December 2005</b> <a href="http://www.free-css.com/">28 Comments</a> </div>
<h1>Some Examples</h1>
<p> OK, here I'll just put some example html elements that you will most probably be using in your blog. </p>
<h2>Blockquote Example</h2>
<blockquote>
<p> Here's your blockquote text jfds jkndskf ndsknf sldnfjk sdnf jdsbf hdsbf jbsdjfk bdskj bdsjfb dsk bds bfsdj bfsjk bfsjdbf sbjd fjsbdk fsdbf sdb fksbd sb </p>
</blockquote>
<h2>List Example</h2>
<ul>
<li>Here</li>
<li>Is our friend</li>
<li>The list!</li>
</ul>
<h2>Comment Example</h2>
<div class="comment_odd"> <span class="comnum">3</span>
<p><a href="http://www.free-css.com/">Author Name</a> comments:</p>
<p> jd slksdnf dsnfk lndskfj ndskfj lndskfj dsn lksdnf kjsdnf sdlknf sjkf nsdlkfn sdjfk ndslk fnds jfknsdk fjnsdlk fnsdjf nsdlkjf nsdkljf nsdjfk nsdlf ndsjfk ndskl fnds jkfndsl jfknds jkfnds fknsdkn fksd nfsdknf lsdkn fksdn fklsdnfkjsndf ksdnf klsdn fsdknf </p>
</div>
<div class="comment_even"> <span class="comnum">2</span>
<p><a href="http://www.free-css.com/">Author Name</a> comments:</p>
<p> jd slksdnf dsnfk lndskfj ndskfj lndskfj dsn lksdnf kjsdnf sdlknf sjkf nsdlkfn sdjfk ndslk fnds jfknsdk fjnsdlk fnsdjf nsdlkjf nsdkljf nsdjfk nsdlf ndsjfk ndskl fnds jkfndsl jfknds jkfnds fknsdkn fksd nfsdknf lsdkn fksdn fklsdnfkjsndf ksdnf klsdn fsdknf </p>
</div>
<div class="comment_odd"> <span class="comnum">1</span>
<p><a href="http://www.free-css.com/">Author Name</a> comments:</p>
<p> jd slksdnf dsnfk lndskfj ndskfj lndskfj dsn lksdnf kjsdnf sdlknf sjkf nsdlkfn sdjfk ndslk fnds jfknsdk fjnsdlk fnsdjf nsdlkjf nsdkljf nsdjfk nsdlf ndsjfk ndskl fnds jkfndsl jfknds jkfnds fknsdkn fksd nfsdknf lsdkn fksdn fklsdnfkjsndf ksdnf klsdn fsdknf </p>
</div>
<div class="article_menu"> <b>Posted on Thursday 08 December 2005</b> <a href="http://www.free-css.com/">28 Comments</a> </div>
<h1><a href="#contact" id="contact">Contact</a></h1>
<p> If you decide to use this template please <a href="http://www.free-css.com/">drop me a line</a> to let me know! Don't hesitiate to get in touch if your interested in a custom template or just in any of my services in general. I look forward to hearing from you! </p>
<div class="article_menu"> <b>Posted on Thursday 08 December 2005</b> <a href="http://www.free-css.com/">28 Comments</a> </div>
</div>
<div id="footer">
<p> Template design by <a href="http://www.sixshootermedia.com">Six Shooter Media</a>.<br />
© All your copyright information here. </p>
</div>
</div>
</body>
</html>
Related examples in the same category