linuxblog
<!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>Linux Blog</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type='text/css'>
/* SET MARGIN AND PADDING TO 0 FOR ALL ELEMENTS */
* {
margin: 0; padding: 0;
}
/* SET BASE FONT ATTRUBUTES */
html, body {
font: Georgia, "Times New Roman", Times, serif 14px/1.5em;
color: #000;
}
/* REMOVE PADDING AND MARGIN VALUES */
html, body, h1, h2, h3, h4, h5, h6, p, ul, ol, dl, li, dd, dt, img,
blockquote, q, table, thead, tbody, tfoot, caption, th, tr, td, a, form,
input, textarea, fieldset, pre
{margin: 0; padding: 0;}
/* SORT OUT HEADER FORMATTING AND SIZES */
h1, h2, h3, h4, h5 {font-weight: bold;}
h1 {font-size: 3em;}
h2 {font-size: 1.5em;}
h3 {font-size: 1.25em;}
h4 {font-size: 1em;}
h5 {font-size: 0.75em;}
h6 {font-size: 0.5em;}
/* HARMONIZE LINKS, KILL BORDER ON IMG LINKS */
a {text-decoration: underline;}
a:link, a:visited {color: #00f;}
a:hover {color: #33f;}
a:active {color: #fff;}
a img, :link img, :visited img {border: none}
/* REMOVE BROWSERS DEFAULT TABLE BORDERS */
table {border-collapse: collapse;}
/* REMOVE AUTOMATIC TOP/BOTTOM MARGINS ON NESTED LISTS */
ul ul, ul ol, ul dir, ul menu, ul dl,
ol ul, ol ol, ol dir, ol menu, ol dl,
dir ul, dir ol, dir dir, dir menu, dir dl,
menu ul, menu ol, menu dir, menu menu, menu dl,
dl ul, dl ol, dl dir, dl menu, dl dl
{margin-top: 0; margin-bottom: 0;}
/* HARMONISE LIST-BULLET TYPE */
ul, ol, dl {list-style-type: disc;}
body {
background: #000000 url(linuxblog-images/bodybg.gif) repeat-x;
}
body, input, textarea, select {
font: normal .7em Arial, Verdana, Helvetica, sans-serif;
color: #FFFFFF;
margin: 0px auto;
}
h1, h2, h3, h4, h5, h6 {
margin-bottom: 1em;
color: #FFD133;
text-transform: lowercase;
}
p, blockquote, ul, ol, form {
margin-bottom: 1.5em;
}
blockquote, ul, ol {
margin-left: 3em;
}
blockquote {
margin-right: 3em;
font-style: italic;
}
ul {
list-style-type: square;
}
a {text-decoration: none;}
a:link, a:visited {color: #FFD133;}
a:hover {color: #FFD133; text-decoration: underline;}
a:active {color: #FFD133;}
/* Wrapper */
#wrapper {
margin: 0px auto;
}
/* Header */
#header {
height: 90px;
margin: 0px auto;
position: relative;
width: 950px;
}
#header #logo {
position: absolute;
top: 10px;
left: 30px;
}
#header h1 {
position: absolute;
top: 18px;
left: 100px;
font-variant: small-caps;
}
#header h3 {
position: absolute;
top: 60px;
left: 110px;
}
#header a {
text-decoration: none;
}
#header:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* Menu */
#menu
{
background: #000000 url(linuxblog-images/menubg.gif) no-repeat;
height: 50px;
width: 950px;
margin: 0px auto;
}
#menu ul
{
list-style: none;
text-align: right;
padding: 15px 10px 10px 0px;
margin: 0;
}
#menu li
{
padding: 0em 1em 0em 1em;
display: inline;
}
#menu li a
{
color: #000000;
font-weight: bold;
border-bottom: 1px dotted #000000;
text-decoration: none;
text-transform: lowercase;
font-size: 1.5em;
}
#menu li a.current
{
border-bottom: 3px solid #000000;
text-decoration: none;
}
#menu li a:hover
{
border-bottom: 3px solid #000000;
text-decoration: none;
}
/* Content */
#content {
width: 950px;
background: #000000 url(linuxblog-images/contentbg.gif) repeat-y;
border-bottom: 7px solid #FFFFFF;
margin: 0px auto;
}
/* Blog */
#blog {
float: right;
width: 700px;
margin: 0px auto;
}
/* Post */
.post {
margin-bottom: 20px;
padding: 10px 25px 10px 25px;
}
.post .title {
border-bottom: 1px dotted #FFFFFF;
}
.post .title a {
text-decoration: none;
font-variant: small-caps;
}
.post .title a:hover {
text-decoration: underline;
}
.post .date {
margin-top: -34px;
text-align: right;
}
.post .entry {
padding: 0px 15px 10px 15px;
line-height: 1.8em;
}
.post .meta {
padding: 0 15px;
font-size: x-small;
}
.post .meta a {
text-decoration: underline;
}
.post .meta a:hover {
text-decoration: none;
}
/* Sidebar */
#sidebar {
float: left;
width: 250px;
margin: 0px auto;
}
#sidebar ul {
list-style: none;
margin: 10px 30px;
}
#sidebar li {
margin: 0px;
padding: 0px;
margin-bottom: 30px;
}
#sidebar li ul {
margin: 0px;
padding: 0px;
list-style: none;
}
#sidebar li li {
line-height: 1.5em;
margin: 0px;
padding: 0px;
color: #97E300;
text-transform: lowercase;
}
#sidebar h2 {
height: 5px;
}
#sidebar a {
text-decoration: none;
color: #97E300;
text-transform: lowercase;
}
#sidebar a:hover {
text-decoration: underline;
}
/* Search */
#search {
}
#search h2 {
}
#search form {
}
#search #inputtext1 {
}
#search #inputsubmit1 {
}
/* Archives */
#archives {
}
/* Categories */
#categories {
}
/* Blogroll */
#blogroll {
}
/* Meta */
#meta {
}
/* Footer */
#footer {
width: 950px;
margin: 0px auto;
padding-top: 5px;
background: #000000;
color: #FFFFFF;
}
#footer p {
margin: 0px auto;
padding: 0px 10px;
text-align: right;
font-size: x-small;
text-transform: lowercase;
}
#footer a {
text-transform: lowercase;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header"> <img id="logo" src="linuxblog-images/tuxmini.png" alt="tux"/>
<h1> <a href="http://www.free-css.com/">Linux Blog</a></h1>
<h3>by Sumanasa.com</h3>
</div>
<div id="menu">
<ul>
<li><a class="current" href="http://www.free-css.com/">Home</a></li>
<li><a href="http://www.free-css.com/">Newsroom</a></li>
<li><a href="http://www.free-css.com/">FAQ</a></li>
<li><a href="http://www.free-css.com/">About Us</a></li>
<li><a href="http://www.free-css.com/">Links</a></li>
</ul>
</div>
<div id="content">
<div id="sidebar">
<ul>
<li id="categories">
<h2>Categories</h2>
<ul>
<li><a href="http://www.free-css.com/">drw-r--r-- .</a></li>
<li><a href="http://www.free-css.com/">drw-r--r-- ..</a></li>
<li><a href="http://www.free-css.com/">drw-r--r-- root</a> <small>(10)</small></li>
<li><a href="http://www.free-css.com/">drw-r--r-- bin</a> <small>(19)</small></li>
<li><a href="http://www.free-css.com/">drw-r--r-- usr</a> <small>(28)</small></li>
</ul>
</li>
<!-- end #categories -->
<li id="archives">
<h2>Archives</h2>
<ul>
<li><a href="http://www.free-css.com/">April 2007</a></li>
<li><a href="http://www.free-css.com/">March 2007</a></li>
<li><a href="http://www.free-css.com/">February 2007</a></li>
<li><a href="http://www.free-css.com/">January 2007</a></li>
<li><a href="http://www.free-css.com/">December 2006</a></li>
</ul>
</li>
<!-- end #archives -->
<li id="blogroll">
<h2>Blogroll</h2>
<ul>
<li><a href="http://www.free-css.com/">Jack Hogan</a></li>
<li><a href="http://www.free-css.com/">Jill Reagan</a></li>
<li><a href="http://www.free-css.com/">Humpty Smith</a></li>
<li><a href="http://www.free-css.com/">Bumpty Smith</a></li>
<li><a href="http://www.free-css.com/">Mary Lamb</a></li>
</ul>
</li>
<!-- end #blogroll -->
<li id="meta">
<h2>Meta</h2>
<ul>
<li><a href="http://www.free-css.com/">Site Admin</a></li>
<li><a href="http://www.free-css.com/">Logout</a></li>
<li><a href="http://validator.w3.org/check/referer">Valid <abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a></li>
</ul>
</li>
<!-- end #meta -->
</ul>
</div>
<!-- end #sidebar -->
<div id="blog">
<div id="post-1" class="post">
<h2 class="title"> <a href="http://www.free-css.com/">Introduction to Linux Blog</a></h2>
<h4 class="date">March 26, 2007</h4>
<div class="entry">
<p><strong>Linux Blog</strong> is a free template from Sumanasa.com released under a <a href="http://creativecommons.org/licenses/by/2.5/">Creative Commons License</a>. This is a simple linux-themed template with a header, a horizontal menu, content and sidebar columns. We have tested this template in Firefox 1.5, Opera 8.5, IE 6.0 and IE 7.0 and it works fine in all these browsers. This is a valid XHTML and CSS and it is also very easy to customize.</p>
<p>You can use this template with no restrictions; just leave the "Design by" information as it is at the bottom. Good luck to your website.</p>
</div>
<p class="meta">Posted in <a href="http://www.free-css.com/">Category #1</a> | <a href="http://www.free-css.com/">Edit</a> | <a href="http://www.free-css.com/">1 Comment »</a></p>
</div>
<!-- end #post-1 -->
<div id="post-2" class="post">
<h2 class="title"> <a href="http://www.free-css.com/">Sample Tags</a></h2>
<h4 class="date">January 31, 2007</h4>
<div class="entry">
<p>A one-sentence paragraph followed by a blockquoted paragraph.</p>
<blockquote>
<p>“A collection of nursery rhymes and songs to share and enjoy, with pictures to print off and color in.”</p>
</blockquote>
<h3>Heading Level Three</h3>
<ul>
<li>Jack and Jill went up the hill</li>
<li>To fetch a pail of water</li>
<li>Jack fell down, and broke his crown</li>
<li>And Jill came tumbling after.</li>
</ul>
<h3>Ordered List</h3>
<ol>
<li>Mary had a little lamb</li>
<li>Its fleece was white as snow</li>
<li>And everywhere that Mary went</li>
<li>The lamb was sure to go.</li>
</ol>
</div>
<p class="meta">Posted in <a href="http://www.free-css.com/">Category #1</a> | <a href="http://www.free-css.com/">Edit</a> | <a href="http://www.free-css.com/">1 Comment »</a></p>
</div>
<!-- end #post-2 -->
</div>
<!-- end #blog -->
<div style="clear: both; height: 1px;"></div>
</div>
<!-- end #content -->
<!-- Please do not remove the "Design by" information. -->
<div id="footer">
<p>Design by <a href="http://www.sumanasa.com/">Sumanasa.com</a></p>
</div>
<!-- end footer -->
</div>
<!-- end #wrapper -->
</body>
</html>
Related examples in the same category