green-blog : Green « Templates « HTML / CSS

HTML / CSS » Templates » Green 
green-blog
    

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Green Blog</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
body {
  margin: 0;
  padding: 0;
  line-height: 1.5em;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: #ffffff;
  background: #000000;
}

a:link, a:visited color: #ffc64a; text-decoration:none; 
a:active, a:hover color: #FFFF00; text-decoration: underline; }

h1 {
  margin: 0px;
  padding: 10px 0;
  font-size: 26px;
  color: #d77707;
  font-weight: normal;
}

h2 {
  margin: 0 0 15px 0;
  padding: 0 0 10px 0;
  font-size: 20px;
  color: #ff9d11;
  border-bottom: 1px dotted #663e17;
}

h3 {
  margin: 0 0 15px 0;
  padding: 0 0 10px 0;
  font-size: 20px;
  color: #ffc64a;
  border-bottom: 1px dotted #663e17;
}

{
  margin: 0px;
  padding: 0 0 10px 0;
  text-align: justify;
}

.cleaner {
  clear: both;
  width: 100%;
  height: 1px;  
}

.comment {
  padding-left: 20px;
  margin-left: 5px;
  background: url(green-blog-images/comment_icon.gifbottom left no-repeat;
}
/* ----- Form ----- */

form{
  margin: 0px;
  padding: 0px;
  width: 100%;
  text-align: right;
}


#searchfield{
  background: none;
  border: 1px solid #ffffff;
  color: #ffffff;
  font-size: 13px;
  font-variant: normal;
  height: 15px;
  line-height: normal;
  padding: 4px;
  width: 230px;
}


#searchbutton{
  cursor: pointer;
  font-size: 12px;
  font-weight: bold;
  height: 26px;
  margin: 0 0 0 7px;
  padding: 0 6px;
  text-align: center;
  vertical-align: bottom;
  white-space: pre;
  width: 66px;
}

/* end of form */

/* menu */
#menu_panel{
  width:100%;
  height: 59px;  
  margin: auto;
  color: #ffffff;
  background: #000000;
}

#menu_panel #menu_section{
  width: 930px;
  height: 59px;  
  margin:auto;
  padding: 0 0 0 30px;
  color: #03a0a6;
  background:  url(green-blog-images/menu_panel_bg.jpgno-repeat;  
}

#menu_section ul {
  float: left;
  width: 930px;
  margin: 0;
  padding: 15px 0 0 0;
  list-style: none;
}

#menu_section ul li{
  display: inline;
}

#menu_section ul li a{
  float: left;
  width: 110px;
  padding: 5px 0;
  margin-right: 5px;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  color: #fbe270;
  border-right: 1px solid #5f3b11;  
}

#menu_section li a:hover, #menu_section li .current{
  color: #ffffff;
}
/* end of menu */

/* content and header panel */
#header_content_container {
  clear: both;
  overflow: hidden;
  width:100%;
  margin: auto;
  background: #000000 url(green-blog-images/content_bg.jpgtop center no-repeat; 
}

#header_content_container #header_section{
  clear: both;
  width: 960px;
  height: 150px;
  margin:auto;

}

#header_section #title_section{
  float: left;
  width: 400px;
  padding: 90px 0 15px 30px;
  font-size: 60px;
  color: #ffffff;
}

#header_section #search_section{
  float: right;
  margin-right: 30px;
  width: 330px;
  padding: 70px 0 15px 0;
}

#header_section #search_section form{
  text-align: left;
}

#header_content_container #content{
  clear: both;
  height: 100%;
  width: 930px;
  padding: 30px 0 0 15px;
  margin:auto;
}

#content_left {
  float: left;
  width: 600px;
  margin-bottom: 15px;
}

#content_right {
  float: right;
  width: 300px;
  margin-bottom: 15px;
}

/* for left column */
#content_left .post {
  width: 598px;
  padding: 0;
  padding-bottom: 10px;
  margin-bottom: 30px;
  border: 1px solid #191a0d;
  background: #0b0c04  url(green-blog-images/post_bg.jpgtop right no-repeat;  
}

html #content_left .post {
  margin-bottom: 15px;
}

.post .post_title{
  width: 570px;
  height: 50px; /* padding 20px + */
  margin: 0 0 10px 0;
  padding: 20px 0 5px 30px;
  font-size: 26px;
  font-weight: bold;
  color: #d77707;
}

.post .post_title .post_info{
  width: 100%;
  font-weight: normal;
  font-size: 12px;
  color: #acb66c;
  padding-top: 10px;
}

.post .post_body{
  padding: 0 30px 15px 30px;
}

.post .post_body img{
  margin-bottom: 15px;
  border: 5px solid #21240e;
}

.post .post_comment{
  padding: 5px 30px;
  font-weight: bold;
}

/* end of left colun */

/* for right column */
#content_right .right_section{
  clear: both;
  display:inline-block;
  width: 248px;
  padding: 15px 15px 10px 15px;
  margin-bottom: 30px;
  background: #0b0c04 url(green-blog-images/right_section_bg.jpgtop center no-repeat;  
  border: 1px solid #191a0d;  
}

#content_right .right_section .popular_post {
  list-style: none;
  margin: 0;
  padding: 0;
}
#content_right .right_section .popular_post li{
  margin: 0 0 5px 0;
  padding: 0 0 5px 0;
  border-bottom: 1px solid #22250e;
}

#content_right .right_section ul{
  clear: both;
  margin: 0 0 0 15px;
  padding: 0px;
}

#content_right .right_section ul li{
  margin: 0 0 5px 0;
}

/* end of right column */

/* for bottom palen */
#bottom_panel{
  width:100%;
  min-height: 250px;
  margin: auto;
  border-top: 1px solid #050702;
  background: #050702 url(green-blog-images/content_bottom.jpgcenter bottom no-repeat;  

}

#bottom_panel #bottom_section{
  overflow: hidden;
  height: 100%;
  width: 930px;
  margin:auto;
  padding: 40px 0 15px 30px;  

}

#bottom_section .bottom_section_content {
  display: inherit;
  float: left;
  width: 270px;
  padding-right: 20px;
  margin:0 0 15px 10px;
}

#bottom_section .bottom_section_content img{
  float: left;
  margin-right: 5px;
  margin-bottom: 5px;
}

.bottom_section_content .gallery {
  list-style: none;
  margin: 0;
  padding: 0;
  background: #000000;
}

.bottom_section_content .gallery li {
  padding: 0;
  float: left;
  margin: 0 4px 4px 0;  
  width: 80px;
  height: 70px;
  border: 3px solid #000000;
}

.bottom_section_content .gallery img {
  border: none;
}

.bottom_section_content .list_section{
  margin: 0 0 15px 30px;
  padding: 0;
}
/* end of bottom panel */

/*  footer */

#footer_panel{
  width:100%;
  height: 50px;
  margin: auto;
  background: #040500 url(green-blog-images/footer_bg.jpgcenter top no-repeat;
  border-top: 1px solid #141204;
}

#footer_panel #footer_section{
  width: 960px;
  height: 10px;
  margin:auto;
  padding: 20px 15px;  
  text-align: center;

}
/* end of footer */

</style>


</head>
<body>
<div id="menu_panel">
  <div id="menu_section">
    <ul>
      <li><a href="http://www.free-css.com/" class="current">Home</a></li>
      <li><a href="http://www.free-css.com/">Photos</a></li>
      <li><a href="http://www.free-css.com/">Videos</a></li>
      <li><a href="http://www.free-css.com/">Archives</a></li>
      <li><a href="http://www.free-css.com/">Links</a></li>
      <li><a href="http://www.free-css.com/">Contact</a></li>
    </ul>
  </div>
</div>
<div id="header_content_container">
  <div id="header_section">
    <div id="title_section"> GREEN BLOG </div>
    <div id="search_section">
      <form method="get" action="http://www.free-css.com/">
        <input type="radio" name="search" value="thissite" />
        this site
        <input type="radio" name="search" value="theweb" checked="checked" />
        the web <br />
        <input type="text" name="q" size="10" id="searchfield" title="searchfield" />
        <input type="submit" name="Search" value="Search" alt="Search" id="searchbutton" title="Search" />
      </form>
    </div>
  </div>
  <div id="content">
    <div id="content_left">
      <div class="post">
        <div class="post_title"> Free Blog Template
          <div class="post_info"> Posted by TemplateMo.com, December 72024 at 2:13 am, in <a href="http://www.free-css.com/">Web Template.</a> </div>
        </div>
        <div class="post_body"> <img src="green-blog-images/image_01.jpg" alt="" />
          <p>This is a free blog template provided by TemplateMo.com website. You may download, modify and apply this CSS layout for your personal or business websites.</p>
          <p>Credit goes to photovaco.com for photos.</p>
        </div>
        <div class="post_comment"> <a href="http://www.free-css.com/">12 comments</a></div>
      </div>
      <div class="post">
        <div class="post_title"HTML CSS Website Layout
          <div class="post_info"> Posted by TemplateMo.com, December 22024 at 6:45 am, in <a href="http://www.free-css.com/">Web Template.</a> </div>
        </div>
        <div class="post_body"> <img src="green-blog-images/image_02.jpg" alt="" />
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc quis sem nec tellus blandit tincidunt. Suspendisse hendrerit turpis id augue.</p>
          <p>Suspendisse at pede vel lorem pulvinar laoreet. Etiam et neque. Donec dapibus viverra est. Maecenas dignissim, quam a posuere scelerisque, ligula arcu dictum turpis, id tempus turpis erat at nulla.</p>
        </div>
        <div class="post_comment"> <a href="http://www.free-css.com/">No comment</a></div>
      </div>
    </div>
    <div id="content_right">
      <div class="right_section">
        <h2>Categories</h2>
        <ul>
          <li><a href="http://www.free-css.com/">Morbi nec magna pulvinar</a></li>
          <li><a href="http://www.free-css.com/">Suspendisse rhoncus lectus</a></li>
          <li><a href="http://www.free-css.com/">Pellentesque rutrum est</a></li>
          <li><a href="http://www.free-css.com/">Nunc blandit orci</a></li>
        </ul>
      </div>
      <div class="right_section">
        <h2>Archives</h2>
        <ul>
          <li><a href="http://www.free-css.com/">January 2024</a></li>
          <li><a href="http://www.free-css.com/">December 2023</a></li>
          <li><a href="http://www.free-css.com/">November 2023</a></li>
          <li><a href="http://www.free-css.com/">October 2023</a></li>
          <li><a href="http://www.free-css.com/">September 2023</a></li>
        </ul>
      </div>
      <div class="right_section">
        <h2>Popular Posts</h2>
        <ul class="popular_post">
          <li><a href="http://www.free-css.com/">Donec mollis aliquet</a><br />
            Author - Oct 142024 <span class="comment">12 replies</span></li>
          <li><a href="http://www.free-css.com/">Aliquam tristique lacust</a><br />
            Author - Oct 142024 <span class="comment">replies</span></li>
          <li><a href="http://www.free-css.com/">Suspendisse potent</a><br />
            Author - Oct 142024 <span class="comment">10 replies</span></li>
          <li><a href="http://www.free-css.com/">Nullam vitae tellus</a><br />
            Author - Oct 142024 <span class="comment">30 replies</span></li>
        </ul>
      </div>
      <div class="right_section">
        <h2>Recent Comments</h2>
        <ul>
          <li>Lorem Ipsum on <a href="http://www.free-css.com/">Donec mollis aliquet</a></li>
          <li>Consectetuer on <a href="http://www.free-css.com/">Suspendisse a nibh</a></li>
          <li>Sed on <a href="http://www.free-css.com/">Pellentesque vitae magna</a></li>
          <li>Vitae Neque on <a href="http://www.free-css.com/">Nunc blandit orci sit amet</a></li>
          <li>Donec Mollis on <a href="http://www.free-css.com/">Maecenas adipiscing</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>
<div id="bottom_panel">
  <div id="bottom_section">
    <div class="bottom_section_content">
      <h3>Gallery</h3>
      <ul class="gallery">
        <li><a href="http://www.free-css.com/"><img src="green-blog-images/thumb_01.jpg" alt="" /></a></li>
        <li><a href="http://www.free-css.com/"><img src="green-blog-images/thumb_02.jpg" alt="" /></a></li>
        <li><a href="http://www.free-css.com/"><img src="green-blog-images/thumb_03.jpg" alt="" /></a></li>
        <li><a href="http://www.free-css.com/"><img src="green-blog-images/thumb_04.jpg" alt="" /></a></li>
        <li><a href="http://www.free-css.com/"><img src="green-blog-images/thumb_05.jpg" alt="" /></a></li>
        <li><a href="http://www.free-css.com/"><img src="green-blog-images/thumb_06.jpg" alt="" /></a></li>
      </ul>
    </div>
    <div class="bottom_section_content">
      <h3>Friends</h3>
      <ul class="list_section">
        <li><a href="http://www.free-css.com/">Lorem ipsum</a></li>
        <li><a href="http://www.free-css.com/">Duis mollis</a></li>
        <li><a href="http://www.free-css.com/">Maecenas adipiscing</a></li>
        <li><a href="http://www.free-css.com/">Nunc blandit orci</a></li>
        <li><a href="http://www.free-css.com/">Cum sociis natoque</a></li>
      </ul>
    </div>
    <div class="bottom_section_content">
      <h3>Other Links</h3>
      <ul class="list_section">
        <li><a href="http://www.free-css.com/">About</a></li>
        <li><a href="http://www.free-css.com/">Contact</a></li>
        <li><a href="http://www.free-css.com/">Privacy</a></li>
        <li><a href="http://www.free-css.com/">Terms</a></li>
      </ul>
      <a target="_blank" href="http://validator.w3.org/check?uri=referer"><img style="border:0;width:88px;height:31px" src="http://www.w3.org/Icons/valid-xhtml10" alt="" width="88" height="31" vspace="8" border="0" /></a> <a target="_blank" href="http://jigsaw.w3.org/css-validator/check/referer"><img style="border:0;width:88px;height:31px"  src="http://jigsaw.w3.org/css-validator/green-blog-images/vcss-blue" alt="" vspace="8" border="0" /></a> </div>
  </div>
</div>
<div id="footer_panel">
  <div id="footer_section"> Copyright © 2024 <a href="http://www.free-css.com/">Your Company Name</a> | Designed by <a href="http://www.templatemo.com">Free CSS Templates</a> </div>
</div>
</body>
</html>

   
    
    
    
  
Related examples in the same category
1.metamorph_abstractgreen
2.metamorph_blueandgreen
3.metamorph_bluegreen
4.metamorph_green
5.metamorph_greenfield
6.metamorph_greenfish
7.metamorph_greenice
8.metamorph_greenisland
9.metamorph_greenland
10.metamorph_greenlight_lt
11.metamorph_greenmint
12.metamorph_greenplanet
13.metamorph_greenpound
14.metamorph_greenwood
15.metamorph_greeny
16.cleanandgreen
17.green-day
18.green-mile
19.green-solutions
20.green-stripes
21.green-web
22.greenbusiness
23.greencastle
24.greencogs
25.greencommunity
26.greener
27.greenery
28.greenfeeling
29.greenfest
30.greenforest
31.GreenHome
32.greenlight
33.greenorange
34.greenparks
35.greenpeace
36.greenpeople
37.greenpiece
38.greenred
39.GreenSpan
40.greenspark
41.GreenSquareShadow
42.greensteps
43.greenstripes
44.greenthumb
45.greenway
46.greenworld
47.GreenWOW
48.greeny
49.greenybox
50.greenygrass
51.greenylife
52.greenypat
53.greenzap
54.curiouslygreen
55.gogreen
56.green piece
57.Green 3
58.green80
59.GreeNadReD
60.greenandplain
61.Green_Corporate_NMK
62.Green_dream
63.Green_Feeling
64.Green_Glass
65.green_light
66.green_mile
67.Green_Template
68.green_web
69.evergreen
70.simplygreen
71.wide-green
72.WonderfulGreen
73.soft_green
74.simplegreen
75.thingreenline
76.ibex_green
77.liquidgreen
78.leafy_green
79.Green link template
80.Green background template
java2s.com  | Contact Us | Privacy Policy
Copyright 2009 - 12 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.