royal-cyan : Effect 2 « Templates « HTML / CSS






royal-cyan

  

<!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" dir="ltr">
<head profile="http://gmpg.org/xfn/11">
<title>Royal Cyan</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
/*  
Theme Name: Royal Cyan
Theme URI: http://www.paddsolutions.com
Description: Professional theme, Valid XHTML & CSS, 3 Columns, Widget Ready
Version: 1.0
Author: Padd IT Solutions
Author URI: http://www.paddsolutions.com
*/

/* Begin Typography & Colors */
body {
  font-size: 14px;
  font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Arial, Georgia, Helvetica, sans-serif;
  color: #2F2F2F;
  text-align: center;
  background: #69bdc1 url('royal-cyan-images/body-bg.jpg') top repeat-x; 
  }
 
#page {
  text-align: left;
  background: url(royal-cyan-images/page-bg.jpg) bottom repeat-x;
  }

#headerimg { 
  background: #fff url('royal-cyan-images/header-top-bg.jpg') top center no-repeat;
  }   
  
#header-bottom {
height:199px;
background:#69bdc1;
}

#header-bottom h2 {
font-size:20px; 
}

#hb-recent-post {
float:left;
width:230px;
text-align:left;
margin-left:48px;
}

#hb-popular-post {
float:left;
text-align:left;
margin-left:22px;
width:230px;
}

#hb-contactus { 
float:left;
margin-left:53px;
text-align:left;
width:328px; 
height:144px;
background: url(royal-cyan-images/hb-contactus-bg.jpg) no-repeat;
padding:10px;
padding-left:26px; 
margin-top:10px;
color:#ccc;
font-weight:bold;  
}

#hb-contactus ul {
width:305px;
}

#hb-contactus ul li {
background: url(royal-cyan-images/hb-contactus-icon.jpg) left center no-repeat;
line-height:15px;
font-size:18px;
font-weight:normal;
height:18px;
padding-left: 20px;
}

#header-bottom h2 { 
color:#000;
}

#header-bottom #hb-contactus h2 { 
color:#fff;
font-family: 'Trebuchet MS', 'Lucida Grande', Arial, Verdana, Sans-Serif;
margin:0;
}


#header-bottom  ul li a {
color: #fff;
list-style:none;
padding-bottom:2px; 
}

#header-bottom  ul li {
padding-bottom:3px; 
padding-top:3px;
border-bottom:1px dotted #ddd;
}

#hb-contactus ul li {
padding-top:10px;
border:none;
}

#hb-contactus h2 {
padding-top:5px;
}

#header-bottom  ul {
list-style:none;
margin:0;
padding:0;
}

#page-body { 
background: #fff url(royal-cyan-images/page-body-bg.jpg) top center no-repeat; 
}  
  
#content {
background-color:#fff;
line-height: 1.4em;
}

#sidebar {
    background-color:#fff;
    }

.narrowcolumn .entry  {
  line-height: 1.4em;
  }

.narrowcolumn .postmetadata {
  text-align: left;
  }

.alt {
  font-family: Georgia, Verdana, Arial, Helvetica, sans-serif;
  }

#footer {
   background: #69bdc1 url('royal-cyan-images/footer-bg.jpg') top no-repeat; 
  font-size:11px;
  border: none;
  }

#footer a { color: #66ccff; }  
  
small {
  font-family: Verdana, Arial, Georgia, Helvetica, sans-serif;
  font-size: 10px;
  line-height: 1.5em;
  }

h2, h3 {
  font-family: 'Trebuchet MS', 'Lucida Grande', Arial, Verdana, Sans-Serif;
  font-weight: normal;
  }

h1 {
  font-family: 'Trebuchet MS', 'Lucida Grande', Arial, Verdana, Sans-Serif;
  font-size: 40px;
  text-align: left;
  font-weight:normal;
  } 

#headerimg .description {
    font-family: 'Trebuchet MS', 'Lucida Grande', Arial, Verdana, Sans-Serif;
  font-size: 14px;
  text-align: left;
  color:#69BDC1;
  padding-left:20px;
  height:29px;
  width:520px;
  float:left;
  }

h2,h2.pagetitle  {
  font-size: 30px; 
  }

#sidebar h2 {
  font-family: 'Trebuchet MS', 'Lucida Grande', Arial, Verdana, Sans-Serif;
  font-size: 12pt;
  font-weight:bold;
  width:148px;
  margin:0;
  padding-left:12px;
  color:#c33;
  border-bottom:1px dotted #ccc;
  }

h3 {
  font-size: 1.6em; 
  }

h1, h1 a, h1 a:hover, h1 a:visited{
  text-decoration: none;
  color:#e01f26;
  padding-left:6px;
  }

h2, h2 a, h2 a:visited, h3, h3 a, h3 a:visited {
  color: #e01f26; 
  }

h2, h2 a, h2 a:hover, h2 a:visited, h3, h3 a, h3 a:hover, h3 a:visited, #sidebar h2, #wp-calendar caption, cite {
  text-decoration: none;
  }

.entry p a:visited {
  color: #cc6600;
  }

.commentlist li, #commentform input, #commentform textarea {
  font: 0.9em Verdana, Arial, Sans-Serif;
  }

.commentlist li {
  font-weight: normal; 
  }

.commentlist cite, .commentlist cite a {
  font-weight: bold;
  font-style: normal;
  font-size: 1.1em;
  }

.commentlist p {
  font-weight: normal;
  line-height: 1.5em;
  text-transform: none;
  }

#commentform p {
  font-family: Verdana, Arial, Georgia, Helvetica, sans-serif;
  }

.commentmetadata {
  font-weight: normal;
  }

#sidebar {
    font: 11px Verdana, Arial, Georgia, Helvetica, sans-serif;
  line-height: 18px; 
  background: #fff;
  }

small, #sidebar ul ul li, #sidebar ul ol li, .nocomments, .postmetadata, blockquote, strike {
  color: #333; 
  }

code {
  font: 1.1em 'Courier New', Courier, Fixed;
  }

acronym, abbr, span.caps {
  font-size: 0.9em;
  letter-spacing: .07em;
  }

a, h2 a:hover, h3 a:hover {
  color: #006699;  
  text-decoration: none;
  }

a:hover { 
  color: #006699;
  text-decoration: underline; 
  }

#wp-calendar #prev a, #wp-calendar #next a {
  font-size: 9pt;
  }

#wp-calendar a {
  text-decoration: none;
  }

#wp-calendar caption {
  font: bold 1.3em Verdana, Arial, Georgia, Helvetica, sans-serif;
  text-align: center;
  }

#wp-calendar th {
  font-style: normal;
  text-transform: capitalize;
  }
/* End Typography & Colors */


/* Begin Structure */
body {
  margin: 0;
  padding: 0; 
  }

#header {
    margin: 0 auto;
    padding:0;
  margin-top:20px;
  height: 332px;   
  width:964px;
  }

#headerimg {
    margin:0;
  padding:0;
  padding-top:15px;
    height:118px; 
  width:964px;  
  }
  
#page {
  margin: 0 auto;
  padding: 0;
  width: 964px; 
  min-height: 500px;
  }

#page-top {
    margin: 0 auto;
  width: 964px; 
  height: 13px;
  }

#page-body { 
    margin: 0 auto;
  width: 964px; 
  min-height: 600px;
  }

#content {
    float:left;
  width: 530px; 
  min-height:500px;
  padding:0px 12px 10px 12px;  
  margin-top:20px;
  margin-right:20px;
  margin-left:9px;
  }

.narrowcolumn, .narrowcolumn  h2{ 
  padding:0;
  margin:0;
}

.post {
  text-align: justify;  
  font-size:0.9em;
  width:528px;
  min-height:50px;
  border-bottom:1px dotted #ccc;
  margin-bottom:20px;
  }
  
.post hr {
  display: block;
  }

.post-head {
    float:left;
  margin-top:10px;
  }
  
.post-head h2 { margin: 0;}  

.date-posted {
    float:left;
  line-height: 50px;
  text-align:center;
  height:55px;
  width:55px;
  font-size:9px;
  background: url(royal-cyan-images/post-date-bg.jpg) center center no-repeat;
  margin-right:15px;
  color:#1c6c95;
  }  
  
.category-icon { 
    background: url(royal-cyan-images/category-icon.jpg) left center no-repeat;
  width:14px;
  height:14px;
  padding-left: 20px;
  padding-top:2px;
    }  
  
.comment-icon {
    background: url(royal-cyan-images/comment-icon.jpg) left center no-repeat;
  width:14px;
  height:14px;
  padding-left: 20px;
  padding-top:2px;
    }
  
.entry {
    margin:0;
  padding:0
    }

.postmetadata {
  clear: left;
  height:28px;
  line-height:2.3em;
  padding-left:5px;
  font-size: 10px;
  font-family: Verdana, Arial, Georgia, Helvetica, sans-serif;}

.postmetadata a {
    color: #006699;
  }

#footer {
    margin: 0 auto;
  padding: 0;
  width:964px;
  margin-bottom:10px;
  } 
  
#footer p {
  margin: 0;
  padding-top:20px;
  text-align: center;  
  color: #787878;
  }
/* End Structure */

/* Begin Headers */
h1 {
  margin: 0;
  padding:0;
  float:left;
  padding-left:12px; 
  height:50px; 
  width:520px;
  }

h2 {
  margin: 12px 0 10px 0;  
  line-height:30px;
  }

h2.pagetitle {
  text-align: left;
}

h3 {
  padding: 0;
  margin: 25px 0 0 0;
  }

/* End Headers */


/* Begin Images */
p img {
  padding: 0;
  max-width: 100%;
  }

/*  Using 'class="alignright"' on an image will (who would've
  thought?!) align the image to the right. And using 'class="centered',
  will of course center the image. This is much better than using
  align="center", being much more futureproof (and valid) */

img.centered {
  display: block;
  margin-left: auto;
  margin-right: auto;
  }

img.alignright {
  padding: 4px;
  margin: 0 0 2px 7px;
  display: inline;
  }

img.alignleft {
  padding: 4px;
  margin: 0 7px 2px 0;
  display: inline;
  }

.alignright {
  float: right;
  }

.alignleft {
  float: left;
  }
/* End Images */



/* Begin Lists

  Special stylized non-IE bullets
  Do not work in Internet Explorer, which merely default to normal bullets. */

html>body .entry ul {
  margin: 0 20px 15px;
  padding: 0 0 0 30px;
  list-style: disc;
  padding-left: 10px;
  text-indent: -5px;
  } 

html>body .entry li {
  margin: 7px 0 8px 0px;  
  }
  
.entry ul {
   margin-left:28px;
}

.entry ul li {
   padding:0;
   padding-left:10px; 
  }  

.entry ol {
  padding: 0 0 0 35px;
  margin: 0;
  }

.entry ol li {
  margin: 0;
  padding: 0;
  }

.postmetadata ul, .postmetadata li {
  display: inline;
  list-style-type: none;
  list-style-image: none;
  }

#sidebar ul, #sidebar ul ol {
  margin: 0px;
  padding: 0px;
  }

#sidebar ul li {
  list-style-type: none;
  list-style-image: none;
  margin-bottom: 10px;  
  }

#sidebar ul p, #sidebar ul select {
  margin: 5px 0 8px;
  }

#sidebar ul ul, #sidebar ul ol {
  margin: 5px 0 0 3px; 
  }

#sidebar ul ul ul, #sidebar ul ol {
  margin: 0 0 0 8px;
  }

ol li, #sidebar ul ol li {
  list-style: decimal outside;
  }

#sidebar ul ul li, #sidebar ul ol li {
  margin: 0px 10px 0 25px; 
  padding: 0;
  list-style-type:disc;  
  }

#sidebar ul ul li a {color:#066;}
/* End Entry Lists */

/* Begin Form Elements */
#searchform {
    float:right;
  width: 347px;
  height:67px;
  padding:0;
  margin:0;
    padding-right:61px;
  padding-top:15px;
  }

#header  #searchform  #s {
  width: 218px;
  }

#sidebar #searchsubmit {
  padding: 1px;
  }

.entry form { /* This is mainly for password protected posts, makes them look better. */
  text-align:center;
  }

select {
  width: 130px;
  }

#commentform {
    margin:0;
  padding:0;
}  
  
#commentform input {
  width: 170px;
  padding: 2px;
  margin: 5px 5px 1px 0; 
  }

#commentform textarea {
  width: 98%;
  padding: 2px;
  }

#commentform #submit {
  margin: 0;
  float: right;
    margin-bottom: 2em;
  }
/* End Form Elements */



/* Begin Comments*/
.alt {
  margin: 0;
  padding: 10px;
  }

.commentlist {
  padding: 0;
  text-align: justify; 
  }

.commentlist li {
  margin: 15px 0 3px;
  padding: 5px 10px 3px;
  list-style: none;
  }

.commentlist li ul li {
    list-style: disc outside;
    border:0;
  margin:0;
  }
  
.commentlist li ol li {  
  list-style: decimal outside;
  margin:0;
  border:0;
    margin-left:4px;
  padding:5px;
  }

.commentlist p {
margin: 10px 5px 10px 0px;
}

#commentform p {
  margin: 5px 0;
  }

.nocomments {
  text-align: center;
  margin: 0;
  padding: 0;
  }

.commentmetadata {
  margin: 0;
  display: block;
  }
/* End Comments */

/* Begin Sidebar */
#sidebar {
    float:left;
  padding: 0;
  margin:0;
  width: 362px;  
  min-height: 430px;
  margin-top:20px;
  background: #ecf8f9;
  }

#sidebar-top {
    padding: 0;
  margin:0;
  width: 362px;  
  height: 15px;
  background: #ecf8f9 url(royal-cyan-images/sidebar-top-bg.jpg) top center no-repeat;
  }
#sidebar-content {
padding:0 15px;
width: 332px;  
min-height: 430px;
}
  
#sidebar-bot {
    padding: 0;
  margin:0;
  width: 362px;  
  height: 15px;
  background: #ecf8f9 url(royal-cyan-images/sidebar-bot-bg.jpg) top center no-repeat;
  }
  
#sidebar1 {
    float:left;
  width:158px;
  min-height:100px;
  }
  
#sidebar2{
    float:right;
  margin-left:0px;
  width:158px;
  min-height:100px;
  }

#sidebar form {
  margin: 0;
  } 
  
#sidebar p {
    padding:5px;
  color:#333
  }  
  
#sidebar .subscribe-rss {
  margin:0;
  }  
  
#sidebar .rss-feed-a {
    color: #c33;
    background: url(royal-cyan-images/rss-icon.jpg) right no-repeat;
  padding-right:30px
  }  
  

/* End Sidebar */


/* Begin Calendar */
#wp-calendar {
  empty-cells: show;
  margin: 10px auto 0;
  width: 155px;
  }

#wp-calendar #next a {
  padding-right: 10px;
  text-align: right;
  }

#wp-calendar #prev a {
  padding-left: 10px;
  text-align: left;
  }

#wp-calendar a {
  display: block;
  }

#wp-calendar caption {
  text-align: center;
  width: 100%;
  }

#wp-calendar td {
  padding: 3px 0;
  text-align: center;
  }

#wp-calendar td.pad:hover { /* Doesn't work in IE */
  background-color: #fff; }
/* End Calendar */

/* Begin Various Tags & Classes */
acronym, abbr, span.caps {
  cursor: help;
  }

acronym, abbr {
  border-bottom: 1px dashed #999;
  }

blockquote {
  margin:0;
    padding:0; 
  padding-left:50px;
  min-height:30px;
    color:#999999;  
  background: #fff url(royal-cyan-images/blockquote-bg.jpg) top left no-repeat;  
    font-style:italic; 
  width:85%;   
  }

blockquote blockquote {
     margin:0;
    }  
  
blockquote cite {
  margin: 5px 0 0;
  display: block;
  }


.center {
  text-align: center;
  }

hr {
  display: none;
  }

a img {
  border: none;
  }

.navigation {
   height:15px;
  text-align: center;
  padding-bottom: 20px; 
  }
/* End Various Tags & Classes*/  

/* PAGE MENU */
#menu-bar {
    float:left;
  margin:0;
  padding:0;
    width: 944px; 
  line-height:29px;
  padding-left:20px;
  background:#000;
  height:45px;
  font-family: Verdana, Arial;
  }

#menu-bar .mb-menu{
padding-top:16px;
}
    
#menu-bar ul {
padding:0;
margin:0; 
}  
  
.pagenav-home { 
   width: 100px;
   height:33px;
   list-style-type:none; 
   padding:0;
   margin:0;
   display:inline;
   }
   
.pagenav {
   list-style-type:none; 
  }

.pagenav h2 {
   display:none;
   margin:0;
   padding:0; 
   }  

.pagenav ul, .pagenav-home ul   {
    list-style-type:none;
  float:left; 
  padding:0;
  margin:0;
  }
  
.pagenav ul li {
    padding:0;
  margin:0;
    display:inline;
    }
  
.pagenav ul li a, .pagenav-home ul li a {
    width:116px;
  text-decoration: none;
  float: left;
  background: url('royal-cyan-images/pagemenu-inactive-bg.jpg') top no-repeat; 
    color:#69bdc1;
  font-size:11px; 
  font-weight:bold;
  text-align:center;
  margin-left:2px;
    }  
  
.pagenav ul li a:hover, .pagenav-home ul li a:hover {
   background: url('royal-cyan-images/pagemenu-active-bg.jpg')  top no-repeat; 
    color:#fff;
  }    

.pagenav ul li.current_page_item a, .pagenav-home ul li.current_page_item a { 
    background: url('royal-cyan-images/pagemenu-active-bg.jpg') top no-repeat;  
    color:#fff;
  }  
  
.pagenav ul li.current_page_item ul li a { 
    background: url('royal-cyan-images/pagemenu-inactive-bg.jpg')  top no-repeat; 
    color:#69bdc1;
  }  

.pagenav ul li.current_page_item ul li a:hover { 
    background: url('royal-cyan-images/pagemenu-active-bg.jpg')  top no-repeat; 
    color:#fff;
  }    
  
.yellow-green {
color:#006699;
background: url(royal-cyan-images/author-icon.jpg) left center no-repeat;
width:12px;
height:12px;
padding-left: 20px;
padding-top:2px; 
}

#footer-bot {
   margin:0 auto;
   width:964px;
   height:87px;
   text-align:center;  
}
/* SIDEBAR addons */  
  
#sidebar .categories ul li  {
   list-style-type:none;   
   padding-left:20px;
   margin-left:10px;    
   background: url(royal-cyan-images/category-bullet.jpg) left no-repeat;
   }
  
#sidebar .archives ul li  {   
   list-style-type:none;   
   padding-left:20px;
   margin-left:10px; 
   background: url(royal-cyan-images/category-bullet.jpg) left no-repeat;
}

#sidebar .widget #searchform {
   width:128px;  
   height:50px;  
} 

#sidebar .widget #searchform #s {
   width:130px;  
}

/* widgets */
#sidebar .widget {
width: 168px; 
margin:0;
padding:0;
}  

#sidebar .widget ul { 
margin:0;
padding:0;
padding-top:5px;
}

#sidebar .widget {
margin:0;
padding:0;
padding-bottom:10px;
}

.cyan {
color:#6ff;
}  

#sidebar .widget_tag_cloud, #sidebar .widget_text {
width:148px;
}

#sidebar .widget_tag_cloud h2, #sidebar .widget_text h2 { 
padding:0;
padding-left:10px; 
}

#sidebar #get-recent-comments {
list-style-type:none; 
width:148px;
}

</style>


<!--[if IE]>
<link rel="stylesheet" href="ie_hacks.css" type="text/css" media="screen" />
<![endif]-->
</head>
<body>
<div id="header">
  <div id="headerimg">
    <form method="get" id="searchform" action="http://www.free-css.com/">
      <div>
        <input value="" name="s" id="s" type="text" />
        <input id="searchsubmit" value="Search" type="submit" />
      </div>
    </form>
    <h1><a href="http://www.free-css.com/">Royal Cyan</a></h1>
    <div class="description">Free CSS Blog Template</div>
    <div id="menu-bar">
      <ul class="mb-menu">
        <li class="pagenav-home">
          <ul>
            <li class="current_page_item"><a href="http://www.free-css.com/">Home</a></li>
          </ul>
        </li>
        <li class="pagenav">
          <h2>Pages</h2>
          <ul>
            <li class="page_item page-item-2"><a href="http://www.free-css.com/">Page 1</a>
              <ul>
                <li class="page_item page-item-10"><a href="http://www.free-css.com/">Child Page</a></li>
              </ul>
            </li>
            <li class="page_item page-item-8"><a href="http://www.free-css.com/">Page 2</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
  <div id="header-bottom">
    <div id="hb-popular-post">
      <h2>Popular Posts</h2>
      <ul>
        <li><a href="http://www.free-css.com/">Hello world!</a></li>
        <li><a href="http://www.free-css.com/"> An image in a post</a></li>
        <li><a href="http://www.free-css.com/"> Blockquotes galore</a></li>
        <li><a href="http://www.free-css.com/">Ordered or Unordered List</a></li>
      </ul>
    </div>
    <div id="hb-recent-post">
      <h2>Recent Posts</h2>
      <ul>
        <li><a href="http://www.free-css.com/">An image in a post</a></li>
        <li><a href="http://www.free-css.com/">Blockquotes galore</a></li>
        <li><a href="http://www.free-css.com/">Ordered or Unordered List</a></li>
        <li><a href="http://www.free-css.com/">Hello world!</a></li>
      </ul>
    </div>
    <div id="hb-contactus">
      <h2>CONTACT US</h2>
      <ul>
        <li>EMAIL <span class="cyan">info@domain.com</span></li>
        <li>PHONE <span class="cyan">+ 123 1234532</span></li>
        <li>FAX <span class="cyan">+ 123 1234532</span></li>
      </ul>
    </div>
  </div>
</div>
<div id="page">
  <div id="page-body">
    <div id="content">
      <div class="date-posted">18.01.08</div>
      <div class="post-head">
        <h2><a href="http://www.free-css.com/">An image in a post</a></h2>
      </div>
      <div style="clear: both;"></div>
      <div class="post" id="post-6">
        <div class="entry">
          <p><img src="royal-cyan-images/photo.jpg" alt="" class="alignleft" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis suscipit. Aenean quis risus sit amet eros volutpat ullamcorper. Ut a mi. Etiam nulla. Mauris interdum.</p>
          <p class="akpc_pop">Popularity: 94% <span class="akpc_help">[<a href="http://www.free-css.com/">?</a>]</span></p>
        </div>
        <p class="postmetadata">Posted by <span class="yellow-green">admin</span> | Posted in <span class="category-icon"><a href="http://www.free-css.com/">Img Category</a></span> | <span class="comment-icon"> <a href="http://www.free-css.com/">No Comments</a></span></p>
        <p class="postmetadata">Tags: <a href="http://www.free-css.com/">beach</a>, <a href="http://www.free-css.com/">coconuts</a>, <a href="http://www.free-css.com/">image</a>, <a href="http://www.free-css.com/">sand</a> &nbsp; </p>
      </div>
      <div class="date-posted">17.01.08</div>
      <div class="post-head">
        <h2><a href="http://www.free-css.com/">Blockquotes galore</a></h2>
      </div>
      <div style="clear: both;"></div>
      <div class="post" id="post-4">
        <div class="entry">
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis suscipit. Aenean quis risus sit amet eros volutpat ullamcorper. Ut a mi. Etiam nulla. Mauris interdum.</p>
          <p>With some blockquotes too of course</p>
          <blockquote>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis suscipit. Aenean quis risus sit amet eros volutpat ullamcorper. Ut a mi. Etiam nulla. Mauris interdum.</p>
          </blockquote>
          <p>and a suggestion by Steve Cooley for a blockquote within a blockquote:</p>
          <blockquote>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra.</p>
            <blockquote>
              <p>This is a blockquote within a blockquote</p>
            </blockquote>
            <p>Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis suscipit. Aenean quis risus sit amet eros volutpat ullamcorper. Ut a mi. Etiam nulla. Mauris interdum.</p>
          </blockquote>
          <p class="akpc_pop">Popularity: 93% <span class="akpc_help">[<a href="http://www.free-css.com/">?</a>]</span></p>
        </div>
        <p class="postmetadata">Posted by <span class="yellow-green">admin</span> | Posted in <span class="category-icon"><a href="http://www.free-css.com/">Blockquotes Category</a></span> | <span class="comment-icon"> <a href="http://www.free-css.com/">No Comments</a></span></p>
        <p class="postmetadata">Tags: <a href="http://www.free-css.com/">quotations</a> &nbsp; </p>
      </div>
      <div class="date-posted">17.01.08</div>
      <div class="post-head">
        <h2><a href="http://www.free-css.com/">Ordered or Unordered List</a></h2>
      </div>
      <div style="clear: both;"></div>
      <div class="post" id="post-3">
        <div class="entry">
          <p>A post with list. <img src="royal-cyan-images/icon_smile.gif" alt="" class="wp-smiley" /> </p>
          <p>Ordered list:</p>
          <ol>
            <li>Item one</li>
            <li>Item two</li>
            <li>Item three</li>
          </ol>
          <p>Unordered list:</p>
          <ul>
            <li>Item one</li>
            <li>Item two</li>
            <li>Item three</li>
          </ul>
          <p class="akpc_pop">Popularity: 93% <span class="akpc_help">[<a href="http://www.free-css.com/">?</a>]</span></p>
        </div>
        <p class="postmetadata">Posted by <span class="yellow-green">admin</span> | Posted in <span class="category-icon"><a href="http://www.free-css.com/">List Category</a></span> | <span class="comment-icon"> <a href="http://www.free-css.com/">No Comments</a></span></p>
        <p class="postmetadata">Tags: <a href="http://www.free-css.com/">lists</a>, <a href="http://www.free-css.com/">ordered</a>, <a href="http://www.free-css.com/">unordered</a> &nbsp; </p>
      </div>
      <div class="date-posted">17.01.08</div>
      <div class="post-head">
        <h2><a href="http://www.free-css.com/">Hello world!</a></h2>
      </div>
      <div style="clear: both;"></div>
      <div class="post" id="post-1">
        <div class="entry">
          <p>Welcome to <a href="http://www.free-css.com/">WordPress</a>. This is your first post. Edit or delete it, then start blogging!</p>
          <p class="akpc_pop">Popularity: 100% <span class="akpc_help">[<a href="http://www.free-css.com/">?</a>]</span></p>
        </div>
        <p class="postmetadata">Posted by <span class="yellow-green">admin</span> | Posted in <span class="category-icon"><a href="http://www.free-css.com/">Uncategorized</a></span> | <span class="comment-icon"> <a href="http://www.free-css.com/">3 Comments</a></span></p>
        <p class="postmetadata"></p>
      </div>
      <div class="navigation">
        <div class="alignleft"></div>
        <div class="alignright"></div>
      </div>
    </div>
    <div id="sidebar">
      <div id="sidebar-top"></div>
      <div id="sidebar-content">
        <div id="sidebar1">
          <ul>
            <li>
              <h2 class="subscribe-rss"><a href="http://www.free-css.com/" class="rss-feed-a">Subscribe RSS</a></h2>
            </li>
            <li>
              <h2>Popular Posts</h2>
              <ul>
                <li><a href="http://www.free-css.com/">Hello world!</a></li>
                <li><a href="http://www.free-css.com/"> An image in a post</a></li>
                <li><a href="http://www.free-css.com/"> Blockquotes galore</a></li>
                <li><a href="http://www.free-css.com/">Ordered or Unordered List</a></li>
              </ul>
            </li>
            <li class="categories">
              <h2>Categories</h2>
              <ul>
                <li class="cat-item cat-item-4"><a href="http://www.free-css.com/">Blockquotes Category</a> (1) </li>
                <li class="cat-item cat-item-5"><a href="http://www.free-css.com/">Img Category</a> (1) </li>
                <li class="cat-item cat-item-3"><a href="http://www.free-css.com/">List Category</a> (1) </li>
                <li class="cat-item cat-item-1"><a href="http://www.free-css.com/">Uncategorized</a> (1) </li>
              </ul>
            </li>
            <li>
              <h2>Recent Articles</h2>
              <ul>
                <li><a href="http://www.free-css.com/">An image in a post</a></li>
                <li><a href="http://www.free-css.com/">Blockquotes galore</a></li>
                <li><a href="http://www.free-css.com/">Ordered or Unordered List</a></li>
                <li><a href="http://www.free-css.com/">Hello world!</a></li>
              </ul>
            </li>
            <li class="archives">
              <h2>Archives</h2>
              <ul>
                <li><a href="http://www.free-css.com/">January 2008</a></li>
              </ul>
            </li>
          </ul>
        </div>
        <div id="sidebar2">
          <ul>
            <li>
              <h2>Recent Comments:</h2>
              <ul>
                <li><a href="http://www.free-css.com/">admin</a>: Blockquotes anyone? Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit...</li>
                <li><a href="http://www.free-css.com/">admin</a>: Another comment. Ordered List List 1 List 2 List 3 Unordered List List 1 List 2 List 3 </li>
                <li><a href="http://www.free-css.com/">Mr WordPress</a>: Hi, this is a comment.To delete a comment, just log in and view the post's comments. There you...</li>
              </ul>
            </li>
            <li>
              <h2>Meta</h2>
              <ul>
                <li><a href="http://www.free-css.com/">Log in</a></li>
                <li><a href="http://validator.w3.org/check/referer">Valid <abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a></li>
                <li><a href="http://www.free-css.com/"><abbr title="XHTML Friends Network">XFN</abbr></a></li>
                <li><a href="http://www.free-css.com/">WordPress</a></li>
              </ul>
            </li>
            <li id="linkcat-2" class="linkcat">
              <h2>Blogroll</h2>
              <ul>
                <li><a href="http://www.free-css.com/">Blog Contests</a></li>
                <li><a href="http://www.free-css.com/">Conch Paradise</a></li>
                <li><a href="http://www.free-css.com/">Free Wordpress Themes</a></li>
                <li><a href="http://www.free-css.com/">Gadget News</a></li>
                <li><a href="http://www.free-css.com/">Make Money Online</a></li>
                <li><a href="http://www.free-css.com/">PinoyVibes</a></li>
                <li><a href="http://www.free-css.com/">Travel Philippines</a></li>
              </ul>
            </li>
          </ul>
        </div>
        <div style="clear: both;"></div>
      </div>
      <div id="sidebar-bot"></div>
    </div>
    <div style="clear: both;"></div>
  </div>
</div>
<div id="footer">
  <div id="footer-top"></div>
  <div id="footer-bot">
    <p> Copyright  2008 by <a href="http://www.paddsolutions.com/">Padd IT Solutions</a>.</p>
  </div>
</div>
</body>
</html>

   
    
  








Related examples in the same category

1.bigpixels
2.binary-news
3.mosaic
4.perfection
5.plain1
6.plain2
7.plastic-surgery
8.plastics
9.overdose
10.outlined
11.optimism
12.optimistic
13.Modern_Theme
14.MultiStrangeColor
15.modern
16.minimalistic
17.primitive
18.sparkle
19.sparkling
20.spotlight
21.simplyfluid
22.slider
23.pragmatic
24.popular
25.primitif
26.pure-web-2.0
27.pure
28.reflection
29.reflections
30.royal_policy
31.smalltown
32.smallwindow
33.smartdesign
34.smarttouch
35.splendid
36.workfire
37.webtile
38.Wide_Side
39.zionnarrow
40.zionnarrows
41.xtreme
42.ZEN
43.zenlike
44.wondrous
45.stonewalled
46.tattoopatt
47.tattoopattern
48.tastelessly
49.tasty
50.thebarn
51.tinfoil_helmet
52.tomato
53.metal-feel
54.metal
55.historical
56.historicpaper
57.historyofwar
58.lonelyness