bloggersgreen : Blog « Templates « HTML / CSS

bloggersgreen
     

<!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>Bloggers Green</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type='text/css'>
/** BASIC */
html, body {
  height: 100%;
}

body {
  margin: 0px;
  padding: 0px;
  background: #FFFFFF url(bloggersgreen-images/0003a-background.jpg) repeat top left;
  font-family: "Tahoma", Arial, Helvetica, sans-serif;
  font-size: 11px;
  color: #80795F;
}

h1{
  margin-top: 0px;
  margin-left: 0px;
  text-transform: lowercase;
  font-weight: bold;
  font-size: 25px;
  color: #5E5945;
}

h2{
  margin-top: 0px;
  text-transform: lowercase;
  font-weight: bold;
  font-size: 13px;
  color: #5E5945;
}

hr {
  display: none;
}

p, ol, ul {
  text-align: justify;
  line-height: 160%;
}

ul {
  list-style-type: square;
}

a {
  color: #488081;
}

a:hover {
  text-decoration: none;
}

/** HEADER */

#header {
  float: left;
  width: 180px;
  margin-right: 1px;
  padding: 10px;
}

#header h1 {
  margin: 0px;
  padding-top: 12px;
  text-align: center;
  font-size: 20px;
}

#header h2 {
  margin: 0px;
  text-align: center;
  font-size: 11px;
}

/** MENU */

#menu {
  margin: 20px auto;
  width: 550px;
    padding: 20px 0px 20px 0px;
  background-color: #5E5945;
  font-size: 10px;
  color: #FFFFFF;
}

html>body #menu {
}

#menu ul {
  margin: 0px;
  padding: 0px;
  list-style: none;
}

#menu li {
  display: inline;
  text-align: center;
}

#menu a {
  display: inline;
  padding: 20px;
  background-color: #5E5945;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: bold;
  color: #FFFFFF;
}

#menu a:hover {
  padding: 20px;
  background-color: #AFC797;
  text-decoration: none;
  color: #5E5945;
}

/** CONTENT */

#content {
  margin: auto;
  width: 550px;
  padding: 20px;
  background-color: #FAF6F6;
  border-left: 1px solid #5E5945;
  border-right: 1px solid #5E5945;
}

#content h2 {
}

#left {
   float: left;
   margin: 0px auto;
   padding: 0px;
   width: 360px;
}

#right {
   float: right;
   margin: 0px;
   padding: 10px;
   width: 150px;
      border: 1px dashed #5E5945;
}

#right2 {
   float: right;
   margin: 5px 0px 10px 0px; 
   padding: 10px;
   width: 150px;
      border: 1px dashed #5E5945;
}

/** FOOTER */

#footer {
  clear: both;
}

#footer p {
  margin: 0px auto;
  width: 550px;
    padding: 10px 0px 10px 0px;
  background-color: #5E5945;
  font-size: 10px;
  text-align: center;
  color: #FFFFFF;
}

</style>


</head>
<body>
<div id="content">
  <div>
    <h1>Bloggersgreen</h1>
    <h2>Free CSS Template</h2>
  </div>
  <div id="menu">
    <ul>
      <li><a href="http://www.free-css.com/" id="main-menu1">Home</a></li>
      <li><a href="http://www.free-css.com/" id="main-menu2">Products</a></li>
      <li><a href="http://www.free-css.com/" id="main-menu3">Services</a></li>
      <li><a href="http://www.free-css.com/" id="main-menu4">About Us</a></li>
      <li><a href="http://www.free-css.com/" id="main-menu5">Contact Us</a></li>
    </ul>
  </div>
  <div id="left">
    <h2>Welcome to Sitename.com!</h2>
    <p>BLOGGERSGREEN 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 License</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. Enjoy :)</p>
    <p>Suspendisse potenti. Donec nulla est, laoreet quis, pellentesque in, congue in, dui. Nunc rhoncus placerat augue. Donec justo odio, eleifend varius, volutpat venenatis, sagittis ut, orci. Donec nulla est, laoreet quis, pellentesque in, congue in, dui. Nunc rhoncus placerat augue. Donec justo odio, eleifend varius, volutpat venenatis, sagittis ut, orci. Nullam et orci in erat viverra ornare. Nunc pellentesque. Sed vestibulum blandit nisl. Quisque elementum convallis purus. Quisque pellentesque semper massa.</p>
    <p>Etiam odio mi, suscipit et, rhoncus ac, lacinia malesuada, nisl. Aliquam gravida massa eu arcu. Fusce mollis tristique sem. Sed eu eros imperdiet eros interdum blandit. Vivamus sagittis bibendum erat. Curabitur malesuada turpis nec ante. Suspendisse quis felis. Suspendisse potenti. Nullam et orci in erat viverra ornare. Nunc pellentesque. Sed vestibulum blandit nisl. Quisque elementum convallis purus.</p>
    <ul>
      <li><a href="http://www.free-css.com/">Suspendisse quis gravida massa felis.</a></li>
      <li><a href="http://www.free-css.com/">Vivamus sagittis bibendum erat.</a></li>
      <li><a href="http://www.free-css.com/">Nullam et orci in erat viverra ornare.</a></li>
      <li><a href="http://www.free-css.com/">Suspendisse quis gravida massa felis.</a></li>
      <li><a href="http://www.free-css.com/">Curabitur malesuada turpis nec ante.</a></li>
    </ul>
    <p>Aliquam gravida massa eu arcu. Fusce mollis tristique sem. Sed eu eros imperdiet eros interdum blandit. Vivamus sagittis bibendum erat. Curabitur malesuada turpis nec ante. Suspendisse quis felis. Suspendisse potenti. Nullam et orci in erat viverra ornare. Nunc pellentesque. Sed vestibulum blandit nisl. Quisque elementum convallis purus.</p>
    <p>Aliquam gravida massa eu arcu. Fusce mollis tristique sem. Sed eu eros imperdiet eros interdum blandit. Vivamus sagittis bibendum erat. Curabitur malesuada turpis nec ante. Suspendisse quis felis. Suspendisse potenti. Nullam et orci in erat viverra ornare. Nunc pellentesque. Sed vestibulum blandit nisl. Quisque elementum convallis purus.</p>
    <p>&nbsp;</p>
  </div>
  <div id="right">
    <h2>Lorem Ipsum</h2>
    <p>Nunc pellentesque. Sed vestibulum blandit nisl. Quisque elementum convallis purus. Suspendisse potenti. Donec nulla est, laoreet quis, pellentesque in. <a href="http://www.free-css.com/">More&#8230;</a></p>
    <h2>Ipsum Dolorem</h2>
    <ul>
      <li><a href="http://www.free-css.com/">Sagittis Bibendum Erat</a></li>
      <li><a href="http://www.free-css.com/">Malesuada Turpis</a></li>
      <li><a href="http://www.free-css.com/">Quis Gravida Massa</a></li>
      <li><a href="http://www.free-css.com/">Inerat Viverra Ornare</a></li>
    </ul>
  </div>
  <div>
    <p>&nbsp;</p>
  </div>
  <div id="right2">
    <h2>Recent Updates</h2>
    <p><strong>[06/09/2006]</strong> Etiam odio mi, suscipit et, rhoncus ac, lacinia, nisl. Aliquam gravida massa eu arcu. <a href="http://www.free-css.com/">More&#8230;</a></p>
    <p><strong>[06/06/2006]</strong> Fusce mollis tristique sem. Sed eu eros imperdiet eros interdum blandit. Vivamus sagittis bibendum erat. Curabitur malesuada. <a href="http://www.free-css.com/">More&#8230;</a></p>
    <p><strong>[06/03/2006]</strong> Nunc pellentesque. Sed vestibulum blandit nisl. Quisque elementum convallis purus. Suspendisse potenti. Donec nulla est, laoreet quis, pellentesque in. <a href="http://www.free-css.com/">More&#8230;</a></p>
  </div>
  <div id="footer">
    <p>Copyright &copy; 2006 Sitename.com. Designed by <a href="http://www.freecsstemplates.org" class="link1">Free CSS Templates</a></p>
  </div>
</div>
</body>
</html>
Related examples in the same category

1.	blog-style
2.	blogger
3.	blogging
4.	blogsmith
5.	blog_division
6.	blog_graphic_design
7.	christines-blog
8.	chilli-blog
9.	baronsblog
10.	dkblog
11.	metamorph_wordpress
12.	design-blog
13.	genericblog
14.	my_dog_spot
15.	orange-blog
16.	paper-blog
17.	personal
18.	personalwebsite
19.	slash-blog
20.	your-blog
21.	ntechblog
22.	oldenglishblog
23.	paint-blog
24.	spotlightblog
25.	theragblog
26.	tilersblog
27.	intrablog
28.	miniblog
29.	happyblog
30.	Day by day blog
31.	Blog by date
32.	Blog layout