chilli-blog : Blog « Templates « HTML / CSS

chilli-blog
     

<!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="cz">
<head>
<title>Spicy Blog</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type='text/css'>

*{
padding:0;
margin:0;
}

body
{
  background-color: white;
  font-family: arial;
  font-size: 12px;
}

#Container
{
  width: 826px;
  margin: 0px auto;
}

#TopPart
{
  width: 826px;
  height: 206px;
  float: left;
}

#Top_left
{
  background: url("chilli-blog-img/logo.gif") top left no-repeat;
  width: 563px;
  height: 206px;
  float: left;
}


#Top_right
{
  background: url("chilli-blog-img/head_right.gif") top left repeat-x;
  width: 263px;
  height: 201px;
  float: right;
  padding-top: 5px;
}

#Logo
{
  padding-left: 250px;
  padding-top: 15px;
}

.spicy
{
    color: #be2f35;
  font-family: Candara;
  font-size: 43px;
}

.blog
{
    color: #7a8e25;
  font-family: Candara;
  font-size: 43px;
}

.link
{
    color: #494a47;
  font-family: Candara;
  font-size: 14px;
  text-decoration: none;
  padding-left: 27px;
}

fieldset
{
  border: none;
  float: left;
  padding-left: 62px;
  padding-top: 5px;
}

input
{
  float: left;
  height: 15px;
  width: 125px;
}

.button
{
  float: right;
  background: url("chilli-blog-img/search.gif") top left no-repeat;
  background-position: 5px 0px;
  width: 65px;
  height: 25px;
  border: none;
  padding-left: 8px;
  padding-top: 4px;
  color: white;
  font-size: 11px;
  margin-top: -22px;
  margin-right: 5px;
  margin-left: 5px;
}

*>.button
{
    float: left;
    margin-top: -4px;
    margin-right: 0px;
    margin-left: 0px;
    padding-left: 5px;
    padding-top: 0px;
}

.button:hover
{
  text-decoration: underline;
}

#Welcome
{
  float: left;
  padding: 8px;
  padding-top: 5px;
  color: white;
}

h4
{
  font-size: 13px;
  line-height: 25px;
}

p
{
  text-align: justify;
}

#Menu
{
  width: 812px;
  height: 32px;
  float: right;
  margin-top: -40px;
}

#Menu a
{
  width: 69px;
  line-height: 32px;
    vertical-align: middle;
  float: right;
  background: url("chilli-blog-img/topmenu.gif") top left no-repeat;
  text-align: center;
  color: white;
  text-decoration: none;
}

#Menu a:hover, #Menu a.active
{
  text-decoration: underline;
}

#CentralPart
{
  width: 812px;
    clear: both;
    background: url("chilli-blog-img/bac.gif") top left repeat-y;
    margin-left: 15px;
}

*>#CentralPart
{

}

#LeftPart
{
  width: 520px;
  float: left;
  margin-right: 9px;
  padding: 10px;
}

#RightPart
{
  float: right;
  width: 263px;
}

.cleaner
{
    clear: both;
}

#Page
{
  width: 520px;
  padding-top: 20px;
}

#Left_menu
{
  float: left;
  width: 60px;
  height: 16px;
  margin-top: -10px;
  margin-left: -5px;
}

.contact
{
    background: url("chilli-blog-img/email.gif") top left no-repeat;
    width: 15px;
    height: 16px;
    float: left;
    padding-right: 3px;
}

.contact span
{
  display: none;
}

.home
{
    background: url("chilli-blog-img/home.gif") top left no-repeat;
    width: 15px;
    height: 16px;
    float: left;
    padding-right: 3px;
}

.home span
{
  display: none;
}


.personal
{
    background: url("chilli-blog-img/personal.gif") top left no-repeat;
    width: 15px;
    height: 16px;
    float: left;
}

.personal span
{
  display: none;
}

h1
{
  font-size: 14px;
  color: #5a5551;
  line-height: 25px;
  font-weight: bold;
  padding-left: 32px;
  background: url("chilli-blog-img/gray-arrow.gif") top left no-repeat;
}

h2
{
  font-size: 15px;
  line-height: 30px;
  font-weight: bold;
  color: white;
}

h3
{
  font-size: 12px;
  line-height: 20px;
  font-weight: bold;
  color: #5a5551;
}

h5
{
  font-size: 12px;
}

.article_head
{
  border-bottom: 2px solid #891f10;
}

.article_body p
{
  padding-top: 8px;
  padding-bottom: 5px;
}

.article_comments a
{
  color: black;
}

.article_comments
{
    padding-top: 5px;
  padding-bottom: 15px;
}

.photo
{
  padding-top: 8px;
  padding-bottom: 5px;
  float: left;
  padding-right: 8px;
}

.rightpart_header
{
  color: white;
  font-size: 15px;
  font-weight: bold;
  width: 263px;
    background: url("chilli-blog-img/pages.gif") top left repeat-x;
    line-height: 38px;
    text-indent: 8px;
    margin-top: 5px;
}

#RightPart a
{
  color: white;
  font-size: 13px;
  display: block;
  padding-left: 8px;
  line-height: 25px;
}

.main
{
    background: url("chilli-blog-img/arrow.gif") top left no-repeat;
    background-position: 8px 3px;
    text-indent: 23px;
}

.child
{
    text-indent: 36px;
}

#Bottom
{
  width: 812px;
  background: url("chilli-blog-img/bottom.gif") top left no-repeat;
  height: 55px;
  float: left;
  margin-top: 5px;
  margin-left: 7px;
}

*>#Bottom
{
  margin-left: 15px;
}

.down_left
{
  font-size: 11px;
  text-align: left;
  padding-top: 8px;
  padding-left: 8px;
  float: left;
}

.down_right
{
  font-size: 11px;
  text-align: right;
  padding-top: 8px;
  float: right;
  padding-right: 8px;
}

.down_right a, .down_left a
{
    text-decoration: none;
    color: black;
}


.down2
{
  padding-bottom: 10px;
  float: right;
  display: none;
}

.down2 img
{
    border: 0px;
}

</style>


</head>
<body>
<div id="WholePage">
  <div id="Inner">
    <div id="Container">
      <div id="TopPart">
        <div id="Top_left">
          <div id="Logo"> <span class="spicy">spicy</span>&nbsp;&nbsp;<span class="blog">blog</span><br/>
            <a class="link" href="http://www.free-css.com/"><span>www.spicyblog.com</span></a> </div>
        </div>
        <div id="Top_right">
          <fieldset>
          <input type="text" id="search" name="search" />
          <input type="submit" class="button" value="Search" />
          </fieldset>
          <div id="Welcome">
            <h4>Welcome to my site</h4>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent gravida. Integer eget tellus sed magna condimentum scelerisque. Quisque sed lacus. Morbi consequat pellentesque ipsum. Ut eu nunc et turpis semper auctor. </p>
          </div>
        </div>
      </div>
      <div id="Menu"> <a class="homepage active" href="http://www.free-css.com/"><span>Home</span></a> <a class="about-us" href="http://www.free-css.com/"><span>Page 1</span></a> <a class="products" href="http://www.free-css.com/"><span>Page 2</span></a> </div>
      <div id="CentralPart">
        <div id="LeftPart">
          <div id="Left_menu">
            <table>
              <tr>
                <td><a class="contact" href="http://www.free-css.com/"><span>Contact</span></a></td>
                <td><a class="home" href="http://www.free-css.com/"><span>Home</span></a></td>
                <td><a class="personal" href="http://www.free-css.com/"><span>Personal</span></a></td>
              </tr>
            </table>
          </div>
          <div id="Page">
            <div id="article1">
              <div class="article_head">
                <h5>18.7.2007</h5>
                <h2>LOREM IPSUM DOLOR SIT AMET, CONSECTETUEROREM</h2>
                <h4>autor: lorem ipsum</h4>
              </div>
              <div class="article_body">
                <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent gravida. Integer eget tellus sed magna condimentum scelerisque. Quisque sed lacus. Morbi consequat pellentesque ipsum. Ut eu nunc et turpis semper auctor. Donec non lorem. Cras pede. Cras luctus neque et nulla. Sed vitae ipsum eget lectus dictum elementum. Etiam vel metus. Quisque malesuada pharetra lacus. Phasellus id augue. Vestibulum non augue. Cras commodo. Nunc suscipit mi faucibus enim. Nunc risus sapien, tristique nec, bibendum sit amet, eleifend convallis, nibh. Nunc vel orci. Cras egestas consequat sem. Praesent id justo eget lorem vehicula suscipit. Nulla eget nunc.</p>
                <p> Ut fermentum tristique purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent diam lorem, porta vel, pharetra id, tristique at, velit. Mauris accumsan, augue ut consectetuer pulvinar, felis nulla viverra erat, sed commodo diam leo a massa. Phasellus sed nunc. Donec porttitor erat et nulla. Aliquam aliquet erat non tellus. Fusce pede. Integer ut sapien. Praesent eu orci sed tellus molestie tempus. Aliquam vestibulum, neque non dapibus posuere, sapien nunc pretium massa, nec fringilla tortor risus in nulla. Maecenas sed sem. Nunc tortor. Proin tempus leo id leo. </p>
              </div>
              <p class="article_comments"> <a class="comments" href="http://www.free-css.com/"><span>Comments (10)</span></a> </p>
            </div>
            <div id="article2">
              <div class="article_head">
                <h5>3.7.2007</h5>
                <h2>MAECENAS SUSCIPIT PURUS A PEDE. NULLA CONSECTETUR</h2>
                <h4>autor: lorem ipsum</h4>
              </div>
              <div class="article_body"> <img class="photo" src="chilli-blog-img/ptoto.gif" alt="illustration photo" />
                <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent gravida. Integer eget tellus sed magna condimentum scelerisque. Quisque sed lacus. Morbi consequat pellentesque ipsum. Ut eu nunc et turpis semper auctor. Donec non lorem. Cras pede. Cras luctus neque et nulla. Sed vitae ipsum eget lectus dictum elementum. Etiam vel metus. Quisque malesuada pharetra lacus. Phasellus id augue. Vestibulum non augue. Cras commodo. Nunc suscipit mi faucibus enim. Nunc risus sapien, tristique nec, bibendum sit amet, eleifend convallis, nibh. Nunc vel orci. Cras egestas consequat sem. Praesent id justo eget lorem vehicula suscipit. Nulla eget nunc.
                  Ut fermentum tristique purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
              </div>
              <p class="article_comments"> <a class="comments" href="http://www.free-css.com/"><span>Comments (10)</span></a> </p>
            </div>
          </div>
        </div>
        <div id="RightPart">
          <div id="Pages">
            <div class="rightpart_header">Pages</div>
            <a class="main" href="http://www.free-css.com/"><span>Page 1</span></a> <a class="child" href="http://www.free-css.com/"><span>- Page 1</span></a> <a class="main" href="http://www.free-css.com/"><span>Page 2</span></a> <a class="main" href="http://www.free-css.com/"><span>Page 3</span></a> </div>
          <div id="Archives">
            <div class="rightpart_header">Archives</div>
            <a href="http://www.free-css.com/"><span>October 2006</span></a> <a href="http://www.free-css.com/"><span>November 2006</span></a> <a href="http://www.free-css.com/"><span>December 2006</span></a> <a href="http://www.free-css.com/"><span>January 2007</span></a> </div>
          <div id="Categories">
            <div class="rightpart_header">Categories</div>
            <a class="main" href="http://www.free-css.com/"><span>Categorie 1</span></a> <a class="child" href="http://www.free-css.com/"><span>- Categorie 1 child 1</span></a> <a class="child" href="http://www.free-css.com/"><span>- Categorie 1 child 2</span></a> <a class="child" href="http://www.free-css.com/"><span>- Categorie 1 child 3</span></a> <a class="main" href="http://www.free-css.com/"><span>Categorie 2</span></a> <a class="child" href="http://www.free-css.com/"><span>- Categorie 2 child 1</span></a> <a class="child" href="http://www.free-css.com/"><span>- Categorie 2 child 2</span></a> </div>
          <div id="Friends">
            <div class="rightpart_header">Friends</div>
            <a href="http://www.free-css.com/"><span>Peter</span></a> <a href="http://www.free-css.com/"><span>Susan</span></a> <a href="http://www.free-css.com/"><span>Jane</span></a> <a href="http://www.free-css.com/"><span>Michal</span></a> <a href="http://www.free-css.com/"><span>Richard</span></a> <a href="http://www.free-css.com/"><span>Ola</span></a> </div>
        </div>
        <div class="cleaner"></div>
      </div>
      <div id="Bottom">
        <p class="down_left">Copyright &copy; 2007 | <a href="http://www.free-css.com/">photo</a> </p>
        <p class="down_right"> <a href="http://www.sunlight.cz">Webdesign, tvorba www strnek</a></p>
        <div class="down2">
          <p> <a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml11" alt="Valid XHTML 1.1" height="31" width="88" /></a> </p>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>
Related examples in the same category

1.	blog-style
2.	blogger
3.	bloggersgreen
4.	blogging
5.	blogsmith
6.	blog_division
7.	blog_graphic_design
8.	christines-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