WP-Bliss
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
@charset "utf-8";
/*-------------------------------------------------------------*/
/* CSS Document */
/* Template Name: WP Bliss */
/* Designed By: Santhosh. S */
/* Homepage: www.themebin.com */
/*-------------------------------------------------------------*/
/* HTML Elements */
body {
margin: 0;
padding: 0;
font-size:small;
font-size:10px;
text-align: center;
color:#555555;
background: #fff;
font-size:12px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
a:link, a:visited {
text-decoration: none;
color:#2583AD;
border-bottom:none;
font-weight:bold;
}
a:hover, a:active
{
text-decoration:none;
color: #D54E21;
}
ol, ul
{
margin:1em;
padding:0 0 0 2em;
}
/* Headers */
h1,h2,h3,h4,h5,h6
{
font-family: Georgia, "Lucida Grande", "Lucida Sans Unicode", lucida, Verdana, sans-serif;
color:#2E2017;
}
h2 {
font-size : 110%;
color : #37371e;
}
h3 {
font-size:1.4em;
margin:0;
margin-bottom:5px;
padding:10px 0 0 0;
font-weight:normal;
}
h4 {
margin-top: 0;
margin-bottom: 0;
font-size: 1.1em;
color: #999;
}
/* Header */
#header {
height: 88px;
background: #464646;
text-align:left;
}
#logo-text {
position : absolute;
width : 350px;
height : 50px;
padding : 0;
margin-top : 10px;
margin-left : 20px;
font-size: 22px;
text-align : left;
color : #ffffff;
}
#logo-slogan {
position : absolute;
width : 250px;
height : 25px;
padding : 0;
margin-top : 45px;
margin-left : 20px;
font : bolder 1.1em Geneva, Arial, Helvetica, sans-serif;
text-align : left;
color : #999999;
}
#header-low {
background: #E4F2FD;
height: 23px;
text-align:center;
position:relative;
border-bottom: solid 1px #C6D9E9;
}
/* Images */
img {
border: none;
}
img.center, img[align="center"] {
display: block;
margin-left: auto;
margin-right: auto;
}
.alignleft {
float: left;
}
img.alignleft, img[align="left"] {
float:left;
margin: 2px 10px 5px 0px;
}
/* Formatting */
code {
margin: 4px 0;
padding: 8px;
text-align: left;
display: block;
overflow: auto;
font: 500 1em/1.5em 'Lucida Console', 'courier new', monospace ;
}
blockquote{
background: #fff;
margin: 0.5em;
font-family:Georgia, "Times New Roman", Times, serif;
padding:0.5em;
border-left:#C6D9E9 2px solid;
}
p {
margin: 0 0 1em;
padding: 0;
line-height: 1.8em;
}
/* Wrap */
#wrap {
width: 980px;
margin: 0px auto;
padding: 0;
text-align: left;
line-height: 18px;
background:#fff;
}
/* Navigation Bar */
#nav {
height : 25px;
padding-left: 25px;
}
#nav-bar {
position : relative;
width : auto;
height : 24px;
margin : 0;
padding : 0 0 0 0;
font : bold 12px/25px Verdana, Arial, Tahoma, Sans-serif;
}
#nav-bar ul {
list-style : none;
margin : 0;
padding : 0;
}
#nav-bar ul li {
display : inline;
}
#nav-bar ul li a {
display : block;
float : left;
padding : 0 10px;
color : #666666;
text-decoration : none;
}
#nav-bar ul li a:hover {
color : #000000;
}
#nav-bar ul li#selected a {
color : #000000;
}
/* Content */
#content {
background : #ffffff;
width : 700px;
margin-top : 30px;
margin-left : 10px;
position : relative;
text-align : left;
padding-left : 10px;
padding-right : 10px;
border-bottom : 8px solid #ffffff;
}
#content h1 {
margin-top : 10px;
font : bold 125% Verdana, 'Trebuchet MS', Sans-serif;
color : #2583AD;
padding : 5px 0 5px 0px;
text-align : justify;
background : url(post-bullet.png) no-repeat 0 56%;
}
/* Sidebar */
#sidebar {
margin: 0;
width: 190px;
padding: 10px;
float:right;
font-size:0.9em;
text-align:justify;
}
#sidebar h1 {
margin-top : 0;
padding : 5px 0 5px 5px;
font : bold 0.9em Verdana, 'Trebuchet MS', Sans-serif;
font-size: 15px;
color : #333333;
}
#sidebar ul {
list-style-type: none;
padding:1em 0;
margin: 0 0 1em 0;
list-style-type:square;
font-size:12px;
}
/* Forms and Text Fields */
form {
margin : 10px;
padding : 0 5px;
border : 1px solid #C6D9E9;
background-color : #E4F2FD;
}
label {
display : block;
font-weight : bold;
margin : 5px 0;
color: #333333;
}
input {
padding : 2px;
border : 1px solid #C6D9E9;
font : normal 1em Verdana, sans-serif;
color : #000000;
background:#fff url(gradtop.gif) repeat-x top;
background-color : #ffffff;
}
textarea {
width : 400px;
padding : 2px;
font-family : Verdana, sans-serif;
border : 1px solid #C6D9E9;
background-color : #ffffff;
height : 100px;
display : block;
background:#fff url(gradtop.gif) repeat-x top;
color : #000;
}
input.button {
margin : 0;
font : bolder 12px Arial, Sans-serif;
border : 1px solid #ccc;
padding : 2px 3px;
background : #fff;
color : #131212;
}
/* Footer */
#footer
{
clear: both;
margin:0;
padding: 1.0em 10%;
font-size: 0.9em;
color: #999;
background:#fff;
text-align:center;
border-top:#C6D9E9 1px solid;
}
.post-footer
{
font-size:0.9em;
margin-bottom: 3em;
color: #666;
text-align:right;
border-bottom: solid 1px #C6D9E9;
padding-left:12px;
}
.post-footer .date {
padding-left : 20px;
margin : 0 10px 0 5px;
text-align : right;
font-size : 9px;
color : #666;
}
</style>
<title>WP Bliss</title>
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
-->
</style></head>
<body>
<div id="header">
<h1 id="logo-text">WP Bliss</h1>
<h2 id="logo-slogan">Your happy slogan goes here.</h2>
<!--iOrange Template is free to use. Designed by Santhosh. Website: www.themebin.com -->
</div>
<div id="header-low">
<div id="nav">
<div id="nav-bar">
<ul>
<li id="selected"><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Downloads</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
</div>
</div>
<div id="wrap">
<div id="sidebar">
<h1>Sidebar Links</h1>
<ul class="sidemenu">
<li><a href="index.html">Home</a></li>
<li class="sidemenu"><a href="http://teachmelinux.googlepages.com">Teach Me Linux</a></li>
<li><a href="http://nuahs.deviantart.com">nuaHs</a></li>
<li><a href="http://gigacore.deviantart.com">Gigacore</a></li>
<li><a href="http://www.gigasmilies.com">GigaSmilies</a></li>
</ul>
<h1>Useful Resources</h1>
<ul class="sidemenu">
<li><a href="http://www.w3schools.com">w3schools</a><a href="http://partners.ipower.com/z/57/CD5822/"></a></li>
<li><a href="http://www.csszengarden.com">CSS Zen Garden</a></li>
<li><a href="http://www.opendesigns.org">OpenDesigns</a><a href="http://www.fotolia.com/partner/114283"></a></li>
<li><a href="http://www.w3.com/">W3C</a><a href="http://www.bigstockphoto.com/?refid=grKPpdNw6k"></a></li>
<li><a href="http://en.wikipedia.org">Wikipedia</a></li>
</ul>
<h1>Some Text</h1>
<p>Deadly sayings?</p>
<p>At an Auto Body Shop: "May we have the next dents?"</p>
<h1>About Author</h1>
<p>I'm Santhosh. S. I love web-designing and learning xHTML and CSS. Visit my <a href="http:/santhosh.themebin.com/blog">blog</a> for more info. And visit template homepage.</p>
</div>
<div id="content">
<h1>Welcome to WP Bliss</h1>
<p><strong>WP Bliss</strong> template is a free Template for your website. The template is inspired by the latest release of wordpress 2.5.1 and resembles the admin CP. This is a valid xHTML and Valid CSS template and W3C-Compilant. The template is designed by <a href="http://www.themebin.com">ThemeBin</a>. The template weighs just 13 KB. This template is licensed under <a href="http://creativecommons.org/licenses/by/2.5/">Creavtive Commons India 2.5 License,</a> which means you are free to modify this template as per your needs for any purpose. And please keep the back link to my site in the credits (footer) intact. That will make the CC License vaild. You can find the wordpress version of this template <a href="http://www.themebin.com/wordpress-templates/wp-bliss-wordpress-theme/">here</a>.</p>
<p>For more templates, themes, wallpapers and more, visit <a href="http://www.themebin.com">my website</a>. Hope you find this template useful and best of luck!</p>
<p align="right" class="post-footer"><a href="#" class="readmore">Read more</a><span class="date">Feb 23, 2008</span></p>
<h1>Samples</h1>
<h2>Image and Text</h2>
<p><img src="WP-Bliss-images/ff.jpg" alt="FireFox" align="left" class="float-left" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce velit pede, lacinia eu, tempor nec, vestibulum non, dolor. Aenean malesuada laoreet lacus. Vivamus lementum, felis ac ullamcorper blandit, neque erat porttitor lorem, non aliqfet quam magna ac enim. Morbi tempus odio eu lorem. Quisque volutpat, odio id gravida commodo, turpis orci consequat augue, eget dignissim odio tellus et lacus. Nulla nulla nisl, porta eu, ullamcorper vitae, facilisis in, nulla.Curabitur a pede. Mauris at metus quis nulla eleifend pharetra. Sed accumsan. Maecenas ipsum. Aliquam erat volutpat.</p>
<h2>Code</h2>
<p><code>
#sample {<br />
text-align: left;<br />
font-weight: bold;<br />
color: #FFFFFF;<br />
}</code></p>
<h2>Block Quote</h2>
<blockquote><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce velit pede, lacinia eu, tempor nec, vestibulum non, dolor. Aenean malesuada laoreet lacus....</p>
</blockquote>
<h2>Example List </h2>
<ol>
<li><span>Sunday</span></li>
<li><span>Monday</span></li>
</ol>
<ul>
<li><span>Tuesday</span></li>
<li><span>Wednesday</span></li>
</ul>
<h3>Sample Form</h3>
<form action="#">
<p>
<label>Name</label>
<input name="dname" value="Your Name" type="text" size="30" />
<label>Email</label>
<input name="demail" value="Your Email" type="text" size="30" />
<label>Your Comments</label>
<textarea rows="5" cols="5"></textarea>
<br />
<input class="button" type="submit" />
</p>
</form>
<p> </p>
<p align="right" class="post-footer"><a href="#" class="readmore">Read more</a><span class="date">Feb 24, 2008</span></p>
<p></p>
</div>
</div>
<div id="footer">
<!--Removing the links will void the Creative Commons License. If you want to remove the link, contact me via mail.-->
<div align="center">© 2008 <strong>Your Company</strong> | Valid <a href="http://validator.w3.org/check?uri=referer">XHTML</a> | <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> | Design by: <a href="http://www.themebin.com/">ThemeBin</a> <a href="#">Home</a>|Sitemap</div>
<div style="display:none;"><a href="http://free-templates.ru/">free-templates.ru</a></div>
</div>
</body>
</html>
Related examples in the same category