office
<!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>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Office</title>
<style type='text/css'>
/*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
*/
* {
margin: 0;
padding: 0;
}
body {
background: #FFFFFF url(office-images/img01.jpg);
text-align: justify;
}
body, input, textarea, select {
font: normal small Arial, Helvetica, sans-serif;
color: #666666;
}
h1, h2, h3 {
margin-bottom: 1em;
font-weight: normal;
color: #990000;
}
h1 {
font-size: 2.2em;
}
h2 {
font-size: 1.7em;
}
h3 {
font-size: 1.3em;
}
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 {
color: #990000;
}
a:hover {
text-decoration: none;
}
hr {
display: none;
}
.hr {
}
img.left {
float: left;
margin: 0 15px 15px 0;
}
img.right {
float: right;
margin: 0 0 15px 15px;
}
/* Wrapper */
#wrapper {
padding: 20px 0;
background: url(office-images/img02.jpg) repeat-x;
}
/* Header */
#header {
width: 720px;
height: 170px;
margin: 0 auto;
background: url(office-images/img03.jpg) no-repeat;
}
#header h1, #header h2 {
margin: 0;
padding-left: 30px;
}
#header h1 {
padding-top: 80px;
font-size: 3em;
}
#header h2 {
font-size: 1em;
font-weight: bold;
font-style: italic;
}
#header a {
text-decoration: none;
color: #FFFFFF;
}
/* Content */
#content {
width: 720px;
margin: 0 auto;
background: #FBE8E8 url(office-images/img04.jpg) repeat-y;
}
/* Blog */
#blog {
float: left;
width: 424px;
padding: 50px 16px 0px 30px;
background: url(office-images/img05.jpg) no-repeat;
}
/* Post */
.post {
margin-bottom: 20px;
padding-bottom: 20px;
background: url(office-images/img08.gif) no-repeat center bottom;
}
.post .title {
margin-bottom: 15px;
padding-left: 15px;
border-bottom: 1px solid #D3B6AF;
text-transform: uppercase;
font-size: small;
font-weight: bold;
}
.post .title a {
text-decoration: none;
}
.post .title a:hover {
text-decoration: underline;
}
.post .date {
margin-top: -30px;
padding-right: 15px;
text-align: right;
font-size: x-small;
}
.post .entry {
padding: 20px 15px 10px 15px;
line-height: 1.8em;
}
.post .meta {
margin-bottom: 2em;
padding: 0 15px;
font-size: x-small;
}
/* Sidebar */
#sidebar {
float: right;
width: 204px;
padding: 50px 30px 0px 16px;
background: url(office-images/img06.jpg) no-repeat;
}
#sidebar ul {
margin: 0;
list-style: none;
}
#sidebar li {
margin-bottom: 20px;
}
#sidebar li ul {
padding-left: 5px;
line-height: 1.4em;
}
#sidebar li li {
margin: 0;
padding-left: 12px;
background: url(office-images/img07.gif) no-repeat left center;
}
#sidebar h2 {
margin-bottom: 15px;
padding-left: 5px;
border-bottom: 1px solid #D3B6AF;
text-transform: uppercase;
font-size: small;
font-weight: bold;
}
#sidebar a {
text-decoration: none;
}
#sidebar a:hover {
text-decoration: underline;
}
/* Search */
#search {
}
#search h2 {
}
#search form {
padding-left: 20px;
}
#search #inputtext1 {
width: 160px;
margin-bottom: 10px;
}
#search #inputsubmit1 {
}
/* Archives */
#archives {
}
/* Categories */
#categories {
}
/* Blogroll */
#blogroll {
}
/* Meta */
#meta {
}
/* Footer */
#footer {
width: 720px;
margin: 0 auto;
padding-top: 60px;
background: url(office-images/img09.jpg) no-repeat;
}
#footer p {
margin: 0;
text-align: center;
font-size: x-small;
color: #FFFFFF;
}
#footer a {
color: #FFFFFF;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1><a href="http://www.free-css.com/">Office</a></h1>
<h2><a href="http://www.free-css.com/">Free CSS Templates</a></h2>
<hr />
</div>
<div id="content">
<div id="blog">
<div id="post-1" class="post">
<h2 class="title"><a href="http://www.free-css.com/">Welcome to Office!</a></h2>
<h3 class="date">March 26, 2007</h3>
<div class="entry">
<p><strong>Office</strong> is a free template from Free CSS Templates released under a <a href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attribution 2.5 Licens</a>. You"re free to use it for both commercial or personal use. I only ask that you link back to my site in some way. <em><strong>Enjoy :)</strong></em></p>
</div>
<p class="meta">Posted in <a href="http://www.free-css.com/">Uncategorized</a> | <a href="http://www.free-css.com/">Edit</a> | <a href="http://www.free-css.com/">1 Comment »</a></p>
<div class="hr">
<hr />
</div>
</div>
<!-- end #post-1 -->
<div id="post-2" class="post">
<h2 class="title"><a href="http://www.free-css.com/">Sample Tags</a></h2>
<h3 class="date">January 31, 2007</h3>
<div class="entry">
<p>A one-sentence paragraph followed by a blockquoted paragraph.</p>
<blockquote>
<p>“Nam et orci et leo iaculis tempor. Duis ante ante, pretium sit amet, feugiat ut, semper ac, nisl. Praesent eget mauris. Duis in pede. Vestibulum nec libero.”</p>
</blockquote>
<h3>Heading Level Three</h3>
<ul>
<li>Proin eu ligula ut est congue malesuada.</li>
<li>Nunc eleifend felis nec purus.</li>
<li>Duis sodales urna sit amet nulla.</li>
</ul>
<h3>Ordered List</h3>
<ol>
<li>Donec fringilla leo eget erat.</li>
<li>Nunc condimentum cursus lorem.</li>
<li>Cras sodales venenatis metus.</li>
</ol>
</div>
<p class="meta">Posted in <a href="http://www.free-css.com/">Uncategorized</a> | <a href="http://www.free-css.com/">Edit</a> | <a href="http://www.free-css.com/">1 Comment »</a></p>
<div class="hr">
<hr />
</div>
</div>
<!-- end #post-2 -->
</div>
<!-- end #blog -->
<div id="sidebar">
<ul>
<li id="search">
<h2>Search</h2>
<form id="form1" method="get" action="http://www.free-css.com/">
<div>
<input id="inputtext1" type="text" name="inputtext1" value="" />
<input id="inputsubmit1" type="submit" name="inputsubmit1" value="Search" />
</div>
</form>
</li>
<!-- end #search -->
<li id="archives">
<h2>Archives</h2>
<ul>
<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>
<li><a href="http://www.free-css.com/">November 2006</a></li>
</ul>
</li>
<!-- end #archives -->
<li id="categories">
<h2>Categories</h2>
<ul>
<li><a href="http://www.free-css.com/">Uncategorized</a> <small>(6)</small></li>
<li><a href="http://www.free-css.com/">Condimentum Cursus</a> <small>(28)</small></li>
<li><a href="http://www.free-css.com/">Praesent Sit Mauris</a> <small>(14)</small></li>
<li><a href="http://www.free-css.com/">Leo Iaculis Tempor</a> <small>(23)</small></li>
<li><a href="http://www.free-css.com/">Dignissimos Ducimus</a> <small>(19)</small></li>
</ul>
</li>
<!-- end #categories -->
<li id="blogroll">
<h2>Blogroll</h2>
<ul>
<li><a href="http://www.free-css.com/">Lorem Ipsum Dolor</a></li>
<li><a href="http://www.free-css.com/">Tempor Leo Iaculis</a></li>
<li><a href="http://www.free-css.com/">Cursus Dignissimos</a></li>
<li><a href="http://www.free-css.com/">Ducimus Condimentum</a></li>
<li><a href="http://www.free-css.com/">Praesent Sit Mauris</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" title="This page validates as XHTML 1.0 Strict">Valid <abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a></li>
<li><a href="http://www.free-css.com/">Home</a></li>
<li><a href="http://www.free-css.com/">Free CSS Templates</a></li>
</ul>
</li>
<!-- end #meta -->
</ul>
</div>
<!-- end #sidebar -->
<div style="clear: both; height: 1px;"></div>
</div>
<!-- end #content -->
<div id="footer">
<p>Copyright © 2007 Office. Designed by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>.</p>
</div>
</div>
<!-- end #wrapper -->
</body>
</html>
Related examples in the same category