iOrange
<!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: Orange Lanes */
/* Designed By: Santhosh */
/* Homepage: www.themebin.com */
/*-------------------------------------------------------------*/
/* HTML Elements */
body {
font : 80%/1.5em Verdana, Tahoma, arial, sans-serif;
}
/* Header Styles */
h1, h2, h3 {
font-family : Tahoma, Verdana, 'Trebuchet MS', Sans-serif;
font-weight : bold;
}
h1 {
font-size : 120%;
}
h2 {
font-size : 110%;
color : #cc9900;
}
h3 {
font-size : 110%;
color : #cc6600;
}
/* Header Layout */
#header-top {
background : #494949;
height : 10px;
}
#header-main {
background : url(header-bg.jpg) repeat-x;
height : 80px;
color : #ffffff;
}
/* Header Logo and Slogan */
#logo-text {
position : absolute;
width : 350px;
height : 50px;
padding : 0;
margin-top : 5px;
margin-left : 10px;
font : bolder 2.6em Geneva, Arial, Helvetica, sans-serif;
letter-spacing : -2px;
text-align : left;
color : #ffffff;
}
#logo-slogan {
position : absolute;
width : 250px;
height : 25px;
padding : 0;
margin-top : 52px;
margin-left : 15px;
font : bolder 1.1em Geneva, Arial, Helvetica, sans-serif;
letter-spacing : -2px;
text-align : left;
color : #333333;
}
/* Navigation Bar */
#nav {
background : #ec6a1c;
height : 25px;
border-bottom : 1px solid #666666;
}
#nav-bar {
position : relative;
width : auto;
height : 24px;
margin : 0;
padding : 0 0 0 0;
background : url(nav-bg.jpg) repeat-x;
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 : block;
float : left;
padding : 0 10px;
color : #ffffff;
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 : #ff9900;
padding : 5px 0 5px 15px;
border-bottom : 1px solid #f8f4f1;
text-align : justify;
background : url(post-bullet.png) no-repeat 0 56%;
}
#wrap {
width : 1001px;
margin : 0 auto;
text-align : left;
}
#content-wrap {
width : 1000px;
background : #f8f4f1;
margin : 0 auto;
padding-bottom : 20px;
text-align : left;
}
/* Search */
form.search {
position : relative;
top : 23px;
right : 15px;
background : transparent;
border : none;
float:right;
}
form.search input.textbox {
margin : 0;
padding : 1px 2px;
width : 120px;
background : #fff;
color : #333;
}
form.search input.button {
background : #ccc url(searchbg.gif) repeat-x;
color : #333;
border : none;
width : 70px;
height : 21px;
}
/* Sidebar */
#sidebar {
float : right;
width : 230px;
margin-right : 16px;
margin-left : 5px;
background : #ede7e1;
margin-top : 30px;
}
#sidebar h1 {
margin-top : 0;
padding : 5px 0 5px 5px;
font : bold 0.9em Verdana, 'Trebuchet MS', Sans-serif;
color : #ffffff;
background : #494949;
}
#sidebar .left-box {
background : #ede7e1;
margin-top : 0;
border-bottom : 10px solid #f8f4f1;
padding-left : 5px;
}
#sidebar ul.sidemenu {
margin-left : 3px;
list-style : none;
text-align : left;
margin : 3px 0 8px 0;
padding : 0;
text-decoration : none;
}
#sidebar ul.sidemenu li {
margin-left : 3px;
padding : 2px 0 2px 25px;
background : url(bullet.png) no-repeat 5px 5px;
margin : 0 2px;
}
#sidebar ul.sidemenu a {
font-weight : bolder;
text-decoration : none;
background-image : none;
}
/* Images */
img {
border : none;
}
img.float-right {
margin : 5px 0 10px 10px;
}
img.float-left {
margin : 5px 10px 10px 0;
}
code {
margin : 4px 8px;
padding : 8px;
text-align : left;
display : block;
overflow : auto;
font : 500 1em/1.5em 'Lucida Console', 'courier new', monospace;
background : #f8f4f1;
border : 1px dashed #D7C3C3;
}
/* Additional Formatting */
blockquote {
margin : 10px;
padding : 0 0 0 40px;
border : 1px solid #D7C3C3;
background : #f8f4f1 url(quote.png) no-repeat 5px 5px;
}
ul, ol {
margin : 5px 20px;
padding : 0 20px;
color : #333333;
}
ul span, ol span {
color : #333333;
}
form {
margin : 10px;
padding : 0 5px;
border : 1px solid #D7C3C3;
background-color : #f8f4f1;
}
label {
display : block;
font-weight : bold;
margin : 5px 0;
color: #333333;
}
input {
padding : 2px;
border : 1px solid #D7C3C3;
font : normal 1em Verdana, sans-serif;
color : #000000;
background-color : #ffffff;
}
textarea {
width : 400px;
padding : 2px;
font-family : Verdana, sans-serif;
border : 1px solid #D7C3C3;
background-color : #ffffff;
height : 100px;
display : block;
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 {
background : #ede7e1;
height : 25px;
border-top : 1px solid #ede7e1;
border-bottom : 10px solid #ec6a1c;
padding-top : 5px;
}
/* Post Footer */
.post-footer {
border-bottom : 1px solid #D7C3C3;
padding : 5px;
margin : 20px 10px 0 2px;
font-size : 95%;
background-color : #f8f4f1;
}
.post-footer .date {
padding-left : 20px;
margin : 0 10px 0 5px;
text-align : right;
font-size : 9px;
color : #009900;
}
.post-footer .readmore {
background : url(page.gif) no-repeat left center;
padding-left : 20px;
margin : 0 10px 0 5px;
}
</style>
<title>iOrange</title>
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color: #F8F4F1;
}
a:link {
color: #333333;
}
a:visited {
color: #333333;
}
-->
</style>
</head>
<body>
<div id="wrap">
<div id="header-top"></div>
<div id="header-main">
<h1 id="logo-text">iOrange</h1>
<h2 id="logo-slogan">Your Juicy Slogan Goes Here</h2>
<!--iOrange Template is free to use. Designed by Santhosh. Website: www.themebin.com -->
<form class="search" method="post" action="#">
<p>
<input class="textbox" type="text" name="search_query" value="" />
<input class="button" type="submit" name="Submit" value="Search" />
</p>
</form>
</div>
<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 id="content-wrap">
<div id="sidebar">
<h1>Sidebar Links</h1>
<div class="left-box">
<ul class="sidemenu">
<li><a href="index.html">Home</a></li>
<li><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>
</div>
<h1>Useful Resources</h1>
<div class="left-box">
<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/">Open Designs</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>
</div>
<h1>Some Text</h1>
<div class="left-box">
<p><strong>Quotes</strong></p>
<p align="left">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>
<h1>About Author</h1>
<div class="left-box">
<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 to read some tutorials.</p>
</div>
</div>
<div id="content">
<h1>Welcome to iOrange</h1>
<p><strong>iOrange</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 <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">Feb 23, 2008</span></p>
<h1>Samples</h1>
<h2>Image and Text</h2>
<p><img src="iOrange-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>
</div>
</body>
</html>
Related examples in the same category