lithium
<!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>Lithium</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
@charset "utf-8";
/* CSS Document */
body {
background: #F3F4F6 url(bg.png) repeat-x;
font: 100%/150% Geneva, Arial, Helvetica, sans-serif;
color: #222;
margin: 0;
}
a, a:visited {
color: #0099CC;
text-decoration: none;
}
a:hover {
color: #000;
text-decoration: underline;
}
h1 {
font-size: 24px;
color:#3399CC;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: lighter;
border-bottom: dotted 1px #666;
}
h2 {
font-size: 16px;
}
h3 {
font-size: 14px;
}
#wrap {
width: 1000px;
margin: 0 auto;
}
/* Header */
#header-space {
height: 88px;
}
#logo {
width: 60px;
padding-top: 25px;
float: left;
}
#company-name {
font-size: 28px;
padding-top: 28px;
font-weight: bold;
color: #fff;
}
#tagline {
color: #ccc;
font-size: 12px;
padding-top: 3px;
}
/* Navigation Bar */
#navbar {
height: 30px;
background: none;
position: relative;
}
#nbar a {
font-weight: normal;
}
#nbar {
position: relative;
width: auto;
height: 30px;
margin: 0;
padding : 2px 0 0 0;
font: 12px/25px Verdana, Arial, Tahoma, Sans-serif;
}
#nbar ul {
float: left;
list-style : none;
margin: 0;
padding: 0;
}
#nbar ul li {
display: inline;
}
#nbar ul li a {
display: block;
height: 25px;
float: left;
padding: 0 10px;
color: #ccc;
text-decoration: none;
background: none;
border-left: dotted 1px #666;
}
#nbar ul li a:hover {
color: #fff;
background: url(nbg-inv.png) top repeat-x;
}
#nbar ul li#selected a {
color: #3399FF;
background: url(nbg-inv.png) top repeat-x;
font-weight: bold;
}
/* Content */
#content-wrap {
padding: 10px 5px 0 5px;
}
#content {
width: 600px;
float: left;
font-size: 14px;
}
.post-footer {
background: url(post-footer.png) no-repeat;
height: 32px;
font-size: 12px;
font-weight: bold;
padding: 5px 10px 0 10px;
text-align: right;
color: #fff;
margin-bottom: 30px;
}
.dated {
padding-top: 2px;
background: url(calendar.png) left no-repeat;
padding-left: 20px;
float: left;
}
.category {
background: url(category.png) left no-repeat;
padding-left: 20px;
margin-left: 10px;
float: left;
height: 22px;
}
.author {
padding-left: 20px;
padding-bottom: 5px;
background: url(user.png) no-repeat;
}
.more {
padding-right: 20px;
margin-left: 20px;
padding-bottom: 2px;
background: url(more.png) right no-repeat;
}
/* Forms and Text Fields */
form {
margin : 10px;
padding : 0 5px;
border-top: dotted 2px #D7D7D7;
border-bottom: dotted 2px #D7D7D7;
}
label {
display : block;
font-weight : bold;
margin : 5px 0;
color: #333333;
}
input {
padding : 2px;
border : 1px solid #D7D7D7;
font : normal 1em Verdana, sans-serif;
color : #000000;
background: #F9F9F9;
}
textarea {
width : 400px;
padding : 2px;
font-family : Verdana, sans-serif;
border : 1px solid #D7D7D7;
height : 100px;
display : block;
background:#F9F9F9;
color : #000;
}
input.button {
margin : 0;
font : bolder 12px Arial, Sans-serif;
border : 2px solid #ccc;
padding : 2px 3px;
background : #fff;
color : #131212;
}
/* Addition Stuffs */
blockquote {
background: #F8F8F8;
border: dotted 1px #D7D7D7;
padding: 5px 5px 5px 25px;
}
code {
margin : 4px 8px;
padding : 10px;
text-align : left;
display : block;
overflow : auto;
font : 500 1em/1.5em 'Lucida Console', 'courier new', monospace;
background: #F8F8F8;
border : 1px dashed #D7C3C3;
}
ul, ol {
margin: 5px 20px;
padding: 0 20px;
color: #333333;
}
ul span, ol span {
color: #333333;
}
/* Sidebar */
#sidebar {
width: 360px;
float: right;
font-size: 14px;
border-bottom: dotted 2px #D7D7D7;
}
#sidebar h1 {
font-size: 16px;
font-weight: bold;
color: #333;
}
#left-sbar {
width: 175px;
float: left;
border-left: 2px dotted #ccc;
}
#right-sbar {
width: 175px;
float: right;
border-left: 2px dotted #ccc;
}
#sidebar .widgetspace {
padding: 5px 5px 0 10px;
margin: 0px;
background: url(side-footer.png) bottom no-repeat;
padding-bottom: 28px;
}
#sidebar ul.menu {
list-style: none;
text-decoration: none;
margin : 3px 0 2px 0;
padding: 0;
}
#sidebar ul.menu li {
padding : 2px 0 0px 5px;
margin : 0 0 0 2px;
border-bottom: 1px dotted #ccc;
}
#sidebar ul.menu li:hover {
background: #EBEBEB;
}
#sidebar ul.menu a {
text-decoration : none;
background-image : none;
color: #333;
}
#sidebar ul.menu a:hover {
}
#divider-line {
border-top: 1px dashed #A6A6A6;
height: 2px;
}
/* Images */
img {
border: none;
background: none;
}
img.float-right {
margin : 5px 0 10px 10px;
padding: 2px;
}
img.float-left {
margin : 5px 10px 10px 0;
padding: 2px;
}
/* Footer */
#footer {
background: #999999;
height: 25px;
padding-top: 5px;
border-top: 5px solid #666666;
color: #fff;
font-size: 12px;
text-align: center;
}
#footer a {
color: #000;
}
.clearfix {
clear:both;
overflow: hidden;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header-space">
<div id="logo"><img src="lithium-assets/logo.png" alt="" /></div>
<div id="company-name">Lithium</div>
<div id="tagline">The Powerful Tagline Goes Here..</div>
</div>
<div id="navbar">
<div id="nbar">
<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 id="content-wrap">
<div id="sidebar">
<div id="left-sbar">
<div class="widgetspace">
<h1>Sidebar Links</h1>
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Teach Me Linux</a></li>
<li><a href="#">deviantART</a></li>
<li><a href="#">Gigacore</a></li>
<li><a href="#">Digg</a></li>
</ul>
</div>
<div class="widgetspace">
<h1>Useful Resources</h1>
<ul class="menu">
<li><a href="#">w3schools</a><a href="#"></a></li>
<li><a href="#">CSS Zen Garden</a></li>
<li><a href="#">Open Designs</a><a href="#"></a></li>
<li><a href="#">W3C</a><a href="#"></a></li>
<li><a href="#">ThemeBot</a></li>
<li><a href="#">xHTML Validator</a></li>
<li><a href="#">CSS Validator</a></li>
<li><a href="#">noob2geek</a><a href="#"></a></li>
<li><a href="#">W3C</a><a href="#"></a></li>
<li><a href="#">My Templates</a></li>
</ul>
<ul class="menu">
<li><a href="#">deviantART</a></li>
<li><a href="#">Wordpress</a></li>
<li><a href="#">Woflram|Alpha</a></li>
<li><a href="#">GetFreeWebDesigns</a></li>
<li><a href="#">Ubuntu</a></li>
<li><a href="#">Fedora</a></li>
</ul>
</div>
</div>
<div id="right-sbar">
<div class="widgetspace">
<h1>Sidebar Links</h1>
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Teach Me Linux</a></li>
<li><a href="#">deviantART</a></li>
<li><a href="#">Gigacore</a></li>
<li><a href="#">Digg</a></li>
</ul>
</div>
<div class="widgetspace">
<h1>About me!</h1>
<p>I'm Santhosh. S. I love web-designing and learning xHTML and CSS. Visit my <a href="#">blog</a> for more info and to read some tutorials. <a href="#">Follow me on Twitter</a>!</p>
</div>
<div class="widgetspace">
<h1>Sample Text</h1>
<p><strong>Quotes</strong></p>
<p>A table, a chair, a bowl of fruit and a violin; what else does a man need to be happy? <br />
-Albert Einstein </p>
</div>
<div class="clearfix"></div>
</div>
</div>
<div id="content">
<h1>Welcome to Lithium!</h1>
<p><strong>Lithium</strong> template is a free Template for your website. This is a valid xHTML and Valid CSS template and W3C-Compilant. The template is designed by ThemeBin. This template is licensed under <a href="http://creativecommons.org/licenses/by/2.5/">Creative 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.</p>
<p>For more templates, themes, wallpapers and more, visit my website. Hope you find this template useful and best of luck! You can also visit My Templates page to see my designs.</p>
<p class="post-footer"><span class="dated">July 12, 2009</span><span class="category">Category</span><span class="author">Santhosh</span><span class="more">Read more...</span></p>
<h1>Samples</h1>
<h2>Image and Text</h2>
<p><img src="lithium-assets/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 class="post-footer"><span class="dated">July 12, 2009</span><span class="category">Category</span><span class="author">Santhosh</span><span class="more">Read more...</span></p>
<br />
</div>
</div>
</div>
<!--End Wrap-->
<div class="clearfix"></div>
<div id="divider-line"></div>
<div id="footer"> © 2008 <strong>Your Company</strong> | Design by: <a href="http://www.themebin.com/">ThemeBin</a> </div>
</body>
</html>
Related examples in the same category