The-Carbon
<!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: Carbon Page */
/* Designed By: Santhosh */
/* Homepage: www.themebin.com */
/*-------------------------------------------------------------*/
body {
background: #181818;
color: #FFFFFF;
position: relative;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
margin-left : 0;
margin-top : 0;
margin-right : 0;
margin-bottom : 0;
}
h1 {
font-size: 20px;
padding-top: 0px;
}
h2 {
font-size : 14px;
color : #999999;
}
a:link {
color: #CCCCCC;
text-decoration: underline;
}
a:visited {
text-decoration: underline;
color: #CCCCCC;
}
a:hover {
text-decoration: none;
color: #666666;
}
a:active {
text-decoration: underline;
color: #666666;
}
/* Wraps */
#wrap {
width : 990px;
margin : 0 auto;
text-align : left;
background : #181818 url(content-bg.png) repeat-y;
}
#content-wrap {
text-align:left;
background: url(content-bg.png) repeat-y;
}
/* Site Header */
#header {
background: #3A3A3A url(header-bg.png) top repeat-x; /* Important, Don't change background color */
height: 70px;
border-top: solid 5px #444;
padding-left: 20px;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#header-desc {
font-size: 12px;
top: 40px;
position: absolute;
}
/* Navigation Bar */
#nav-bar {
background: url(nav-bg.png) repeat-x;
padding-left: 5px;
}
#nav-left {
background: url(left-corner.png) left no-repeat;
height: 25px;
}
#nav-right {
background: url(right-corner.png) right no-repeat;
height: 25px;
}
#nav-bar {
position : relative;
width : auto;
height : 25px;
margin : 0;
padding : 0 0 0 0;
font : bold 12px/25px Verdana, Arial, Tahoma, Sans-serif;
}
#nav-bar ul {
float : left;
list-style : none;
margin : 0;
padding : 0;
}
#nav-bar ul li {
display : inline;
}
#nav-bar ul li a {
display: inline;
float : left;
padding : 0 10px;
color : #EDEDED;
text-decoration : none;
}
#nav-bar ul li a:hover {
color : #AAAAAA;
}
#nav-bar ul li#selected a {
color : #fff;
}
* html #nav-bar ul li a { /*IE bug fix */
float: left;
text-decoration: none;
}
/* Extra Formatting */
code {
margin: 4px 0;
padding: 8px;
text-align: left;
display: block;
overflow: auto;
font: 500 1em/1.5em 'Lucida Console', 'courier new', monospace ;
background: #222;
border: 1px dashed #333333;
}
blockquote {
margin: 10px;
padding: 0 0 0 40px;
border: 1px solid #464646;
background: #222 url(quote.png) no-repeat 5px 5px;
}
/* Images */
img {
border: solid 1px #666666;
padding:3px;
}
img.float-right {
margin : 5px 0 10px 10px;
}
img.float-left {
margin : 5px 10px 10px 0;
}
/* Forms and Lists */
ul, ol {
margin: 5px 20px;
padding: 0 20px;
color: #999;
}
ul span, ol span {
color: #FFFFFF;
}
form {
margin:10px; padding: 0 5px;
border: 1px solid #464646;
background-color: #222;
}
label {
display:block;
font-weight:bold;
margin:5px 0;
color: #999;
}
input {
padding:2px;
border:1px solid #333333;
font: normal 1em Verdana, sans-serif;
color:#FFFFFF;
background-color:#131212;
}
textarea {
width:400px;
padding:2px;
font-family: Verdana, sans-serif;
border:1px solid #333333;
background-color:#131212;
height:100px;
display:block;
color:#FFF;
}
input.button {
margin: 0;
font: bolder 12px Arial, Sans-serif;
border: 1px solid #464646;
padding: 2px 3px;
background: #333;
color: #999;
}
/* Content */
#content {
padding-left: 28px;
padding-right: 16px;
width: 549px;
text-align: justify;
}
#content h1 {
margin-top : 10px;
font : bold 125% Verdana, 'Trebuchet MS', Sans-serif;
color : #C0C0C0;
border-bottom : 2px dotted #464646;
text-align : justify;
}
#content-top {
background: #181818 url(content-top.png) no-repeat;
height: 40px;
margin-top: 0px;
}
#content-bottom {
background: #181818 url(content-bottom.png) no-repeat;
height: 56px;
}
/* Sidebar */
#sidebar-wrap {
width: 363px;
float:right;
padding-right: 15px;
}
#sidebar-big-ad {
width: 361px;
height: 260px;
text-align: center;
padding-bottom: 10px;
background:url(ad-bottom.png) center bottom no-repeat;
}
#sidebar-big-ad img {
border:none;
}
#sidebar {
width: 361px;
height: 12px;
padding-right: 2px;
}
#sidebar-top {
background:url(sidebar-top.png) center top no-repeat;
height: 16px;
margin-left: 0px;
}
#sidebar img {
border:none;
}
#sidebar-left {
width: 160px;
float:left;
padding-left: 20px; /* Important */
text-align: justify;
padding-top: 10px;
}
#sidebar-right {
width: 160px;
float:right;
padding-right: 6px; /* Important */
text-align: justify;
padding-top: 10px;
}
#sidebar h1 {
margin-top : 0;
padding : 5px 0 0 0;
font-size : 14px;
border-bottom : 1px solid #999;
color : #c0c0c0;
}
#sidebar ul {
list-style-type: none;
padding-left: 15px;
font-size:12px;
}
#sidebar .left-box {
background : #ede7e1;
margin-top : 0;
border-bottom : 10px solid #f8f4f1;
padding-left : 5px;
}
#sidebar ul.sidemenu {
margin-left : 1px;
list-style : none;
text-align : left;
margin : 1px 0 10px 0;
padding : 0;
text-decoration : none;
}
#sidebar ul.sidemenu li {
margin-left : 5px;
list-style-type: disc;
padding : 2px 0 0px 0px;
border-bottom: dotted 1px #999999;
margin : 0 2px;
}
#sidebar ul.sidemenu a {
font-weight : bolder;
text-decoration : none;
background-image : none;
}
/* Footer */
#footer-left {
background: url(footer-left.png) left no-repeat;
height: 18px;
}
#footer-right {
background: url(footer-right.png) right no-repeat;
height:18px;
}
#footer-top {
background:url(footer-top.png) repeat-x;
height:18px;
}
#footer {
background:url(footer-bg.png) top repeat-x;
height: 25px;
border-bottom: solid 1px #333;
padding-top: 5px;
}
/* Post Footer */
.post-footer {
border-bottom : 1px solid #666;
padding : 5px;
margin : 20px 10px 0 2px;
font-size : 95%;
background-color : #464646;
}
.post-footer .date {
padding-left : 20px;
margin : 0 10px 0 5px;
text-align : right;
font-size : 9px;
color : #999;
}
.post-footer .readmore {
padding-left : 20px;
margin : 0 10px 0 5px;
}
</style>
<title>Carbon Page</title></head>
<body>
<div id="wrap">
<div id="header">
<h1>Carbon Page</h1>
<h2 id="header-desc">Your Slogan Goes Here</h2>
</div>
<div id="nav-bar">
<div id="nav-left">
<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 id="nav-right"></div></div></div> <!--Important-->
<div id="content-top"></div> <!--Important-->
<div id="content-wrap">
<div id="sidebar-wrap">
<div id="sidebar-big-ad">
<!-- Place your 300 x 250 Adsense Ad inside this div -->
<p> </p> <!--Remove this-->
<p> </p> <!--Remove this-->
<p> </p> <!--Remove this-->
<p>You can use this space to </p>
<p>place your 300 x 250 Ad.</p>
<!--REPLACE this-->
</div>
<div id="sidebar-top"></div>
<div id="sidebar">
<div id="sidebar-left">
<h1>Sidebar Links</h1>
<ul class="sidemenu">
<li><a href="file:///J|/Template Workshop/Web Templates/WP Carbon/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>Calculating how much carbon is absorbed by which forests and farms is a tricky task, especially when politicians do it. <br />
- Donella Meadows</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="sidebar-right">
<h1>Ads</h1>
<p>You can use this space to place your 160 x 600 Skyscraper ad or something else.</p>
</div>
</div> <!-- Sidebar End -->
</div> <!-- Sidebar Wrap End -->
<div id="content">
<h1>Welcome to Carbon Page</h1>
<p><strong>Carbon Page </strong>template is a free open source Template for your website. 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 16.8 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.</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">May 06, 2008</span></p>
<h1>Samples</h1>
<h2>Image and Text</h2>
<p><img src="The-Carbon-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">May 06, 2008</span></p>
<p></p>
</div> <!-- Content End -->
<div id="content-bottom"></div> <!-- Important -->
</div> <!-- Content Wrap End -->
<div id="footer-top">
<div id="footer-left">
<div id="footer-right">
</div></div>
</div>
<div id="footer">
<!-- Please don't remove the link to the author's page -->
<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 style="display:none;"><a href="http://free-templates.ru">??????? ??????</a></div>
</div>
</div> <!-- Footer End -->
</div> <!--Wrap End-->
</body>
</html>
Related examples in the same category