iOrange2b : Orange « Templates « HTML / CSS

HTML / CSS » Templates » Orange 
iOrange2b
    

<!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=iso-8859-1" />
  <title>iOrange2b</title>
<style type='text/css'>
/*
Theme Name: iOrange2b
Theme URI: http://www.darjanpanic.com
Description: iOrange2b Template v1 by Brian Green and Darjan Panic.
Version: 1.0
Author: Brian Green and Darjan Panic

Use it however you want, just leave the links in the footer :)
*/

body {
background: url(iOrange2b-images/bg.jpgno-repeat;
}

{
color: #FF9000;
}

#line1 {
background: #464646;
height:30px;
width: 360px;
float:left;
display: block;
background: url(iOrange2b-images/bg.gif);
}

#line2 {
background: #FF9000;
height:30px;
width: 380px;
float:right;
display: block;
}

#line3 {
text-align:center;
background: #464646;
height:30px;
width: 360px;
float:left;
display: block;
background: url(iOrange2b-images/bg.gif);
color: #ffffff;
font-size: 10px;
line-height: 30px;
font-family: tahoma;
}

#line3 a:link {
color: #ffffff;
font-size: 10px;
font-family: tahoma;
text-decoration: underline;
}
#line3 a:visited {
color: #ffffff;
font-size: 10px;
font-family: tahoma;
text-decoration: underline;
}

#line3 a:hover {
color: #ffffff;
font-size: 10px;
font-family: tahoma;
text-decoration: underline;
}

#line4 {
background: #FF9000;
height:30px;
width: 380px;
float:right;
display: block;
}

#container {
width: 750px;
border-top: dotted 1px #c7c7c7;
margin-top:5px;
padding-top: 5px;
}



#left {
margin-top:5px;
width: 180px;
height: 100px;
float: left;
color: #c7c7c7;
font-family: verdana;
font-size: 10px;
}

#center {
margin-top:5px;
width: 180px;
float: left;
}

#right {
margin-top:5px;
width: 380px;
float: right;
}

#name {
padding-left: 180px;
font-family: "trebuchet ms";
font-size: 36px;
color: #FF9000;
text-decoration: none;
}

#name a {
text-decoration: none;
}

.black {
font-family: "trebuchet ms";
font-size: 24px;
color: #464646;
}

h1 {
border-left: 5px solid #464646;
font-family: "trebuchet ms";
font-size: 24px;
padding: 0px;
margin: 0px;
padding-left: 10px;
color: #464646;
}

.storytitle {
border-left: 5px solid #464646;
font-family: "trebuchet ms";
font-size: 24px;
padding: 0px;
margin: 0px;
padding-left: 10px;
color: #464646;
}

.storytitle a:link {
border-left: 5px solid #464646;
font-family: "trebuchet ms";
font-size: 24px;
padding: 0px;
margin: 0px;
padding-left: 10px;
text-decoration: none;
color: #464646;
}

.storytitle a:visited{
border-left: 5px solid #464646;
font-family: "trebuchet ms";
font-size: 24px;
padding: 0px;
margin: 0px;
padding-left: 10px;
text-decoration: none;
color: #464646;
}

.storytitle a:hover{
border-left: 5px solid #464646;
font-family: "trebuchet ms";
font-size: 24px;
padding: 0px;
margin: 0px;
padding-left: 10px;
text-decoration: underline;
color: #464646;
}

h2 {
border-left: 5px solid #464646;
color: #FF9000;
font-family: verdana;
font-size: 10px;
padding: 2px;
margin: 0px;
line-height: 14px;
padding-left: 10px;
margin-top: 20px;
}

blockquote {
background: url(iOrange2b-images/bq1.gifleft top no-repeat;
margin: 5px;
padding: 5px;
}

blockquote p {
color: #FF9000;
font-family: verdana;
font-size: 10px;
padding: 15px;
background: url(iOrange2b-images/bq2.gifright bottom no-repeat;
}

#content {
border-top: dotted 1px #c7c7c7;
border-bottom: dotted 1px #c7c7c7;
color: #464646;
font-family: verdana;
font-size: 10px;
}

#menu p {
border-top: dotted 1px #464646;
border-bottom: 5px solid #464646;
color: #c7c7c7;
font-family: verdana;
font-size: 10px;
padding: 0px;
margin: 0px;
padding-right: 10px;
padding-left: 10px;
}

#menu a:link {
color: #464646;
font-family: "trebuchet ms";
font-size: 12px;
font-size: 12px;
padding-left: 10px;
margin-left: 0px;
padding-right: 10px;
margin-right: 0px;
text-decoration: none;
font-weight: bold;

}

#menu a:visited {
color: #464646;
font-family: "trebuchet ms";
font-size: 12px;
font-size: 12px;
padding-left: 10px;
margin-left: 0px;
padding-right: 10px;
margin-right: 0px;
text-decoration: none;
font-weight: bold;
}

#menu a:hover{
color: #ffffff;
font-family: "trebuchet ms";
font-size: 12px;
text-decoration: none;
font-weight: bold;
background: #FF9000;
}

ul, li {
margin: 0px;
padding: 0px;
list-style: none;
list-style-image: none;
font-family:"Century Gothic""Trebuchet MS""Arial Narrow", Arial, sans-serif;
font-weight:normal;
border-bottom:1px solid #C7C7C7;
color:#464646;
text-align:left;
}

#comments {
border-left: 5px solid #464646;
color: #464646;
font-family: verdana;
font-size: 14px;
padding: 0px;
margin: 0px;
line-height: 16px;
padding-left: 10px;
margin-top: 20px;
}

#comment-{
margin: 5px;
padding: 5px;
}

#comment-{
margin: 5px;
padding: 5px;
background: #e4e4e4;
}

#linkcat-h2 {
font-family:"Century Gothic""Trebuchet MS""Arial Narrow", Arial, sans-serif;
font-weight:normal;
color:#464646;
font-size: 24px;
margin-bottom: 3px;
line-height: 20px;
}

#categories h2 {
font-family:"Century Gothic""Trebuchet MS""Arial Narrow", Arial, sans-serif;
font-weight:normal;
color:#464646;
font-size: 24px;
margin-bottom: 3px;
line-height: 20px;
}

#pagenav h2{
font-family:"Century Gothic""Trebuchet MS""Arial Narrow", Arial, sans-serif;
font-weight:normal;
color:#464646;
font-size: 24px;
margin-bottom: 3px;
line-height: 20px;
}

#search h2{
font-family:"Century Gothic""Trebuchet MS""Arial Narrow", Arial, sans-serif;
font-weight:normal;
color:#464646;
font-size: 24px;
margin-bottom: 3px;
line-height: 20px;
}

#archives h2{
font-family:"Century Gothic""Trebuchet MS""Arial Narrow", Arial, sans-serif;
font-weight:normal;
color:#464646;
font-size: 24px;
margin-bottom: 3px;
line-height: 20px;
}

#meta h2{
font-family:"Century Gothic""Trebuchet MS""Arial Narrow", Arial, sans-serif;
font-weight:normal;
color:#464646;
font-size: 24px;
margin-bottom: 3px;
line-height: 20px;
}

.feedback {
font-size: 14px;
padding-bottom: 20px;
margin-bottom: 20px;
}

</style>


</head>
<body>

<div id="container">
<div id="line1"> </div>
<div id="line2"> </div>
<div style="clear: both"></div>
<div id="name">iOrange2b</div>

  <div id="left">

  </div>
  
<div id="center">
  
  <div id="menu">
<p><a href="#">menulink</a><br />
 menu </p>
 <p><a href="#">menulink</a><br />
 menu </p>
 <p><a href="#">menulink</a><br />
 menu </p>
 <p><a href="#">menulink</a><br />
 menu </p>
 <p><a href="#">menulink</a><br />
 menu </p>
 <p><a href="#">menulink</a><br />
 menu </p>
    </div>
  
  </div>
  


  <div id="right">
    
          <div id="content">
            
   <h1 class="storytitle">Lorem ipsum</h1>
   <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus ac  nisl. Fusce egestas. Praesent vitae neque. Phasellus ultricies, lacus  quis sagittis vulputate, nisi tellus laoreet libero, vitae suscipit  urna urna ullamcorper augue. Phasellus enim. Fusce est tortor, cursus  sit amet, blandit id, sollicitudin a, pede. Sed eu massa id mauris  aliquam placerat. Curabitur turpis. Nulla id tellus. Praesent dolor  odio, tincidunt sit amet, vehicula nec, ornare nec, lectus. Vestibulum  rhoncus quam sed leo. Quisque leo odio, venenatis et, dictum non,  suscipit ut, lacus. Duis eleifend, metus imperdiet sagittis  scelerisque, nibh eros dictum arcu, in aliquam est tortor nec mi. Sed  quis massa vitae mauris ullamcorper faucibus. </p>
   <blockquote>
     <p>Nunc magna. Aliquam sodales porttitor elit. Etiam laoreet ligula sit  amet est. Aliquam vel quam vel diam tempor dictum. Nulla a lorem non  ipsum sagittis dignissim. Integer vestibulum quam eget lorem. Ut in  risus. Suspendisse lacinia posuere lacus. Proin egestas enim sit amet  urna. Cras sit amet lorem sed orci semper.</p>
     </blockquote>
   <p>Proin accumsan magna iaculis leo. Curabitur eget lorem. Vivamus eu  nisi ut risus nonummy scelerisque. Aenean faucibus fermentum orci. Duis  aliquet. Vestibulum non elit in ante condimentum pellentesque. Maecenas  ultricies lacus convallis leo. In hac habitasse platea dictumst.  Quisque imperdiet varius lectus. Vivamus lobortis scelerisque ligula.  Nulla sapien. Cras porta, tellus a dapibus mollis, dolor nisl lobortis  turpis, quis tincidunt turpis est eu nulla. Nullam tincidunt enim at  nulla. Etiam leo orci, porttitor ut, euismod eget, viverra eget,  lectus. Praesent quis augue. Phasellus ac nibh. Duis nulla. Curabitur  at tortor. </p>
   <h1 class="storytitle">Lorem ipsum</h1>
   <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus ac  nisl. Fusce egestas. Praesent vitae neque. Phasellus ultricies, lacus  quis sagittis vulputate, nisi tellus laoreet libero, vitae suscipit  urna urna ullamcorper augue. Phasellus enim. Fusce est tortor, cursus  sit amet, blandit id, sollicitudin a, pede. Sed eu massa id mauris  aliquam placerat. Curabitur turpis. Nulla id tellus. Praesent dolor  odio, tincidunt sit amet, vehicula nec, ornare nec, lectus. Vestibulum  rhoncus quam sed leo. Quisque leo odio, venenatis et, dictum non,  suscipit ut, lacus. Duis eleifend, metus imperdiet sagittis  scelerisque, nibh eros dictum arcu, in aliquam est tortor nec mi. Sed  quis massa vitae mauris ullamcorper faucibus. </p>
   <p>Nunc magna. Aliquam sodales porttitor elit. Etiam laoreet ligula sit  amet est. Aliquam vel quam vel diam tempor dictum. Nulla a lorem non  ipsum sagittis dignissim. Integer vestibulum quam eget lorem. Ut in  risus. Suspendisse lacinia posuere lacus. Proin egestas enim sit amet  urna. Cras sit amet lorem sed orci semper molestie. </p>
   <p>Proin accumsan magna iaculis leo. Curabitur eget lorem. Vivamus eu  nisi ut risus nonummy scelerisque. Aenean faucibus fermentum orci. Duis  aliquet. Vestibulum non elit in ante condimentum pellentesque. Maecenas  ultricies lacus convallis leo. In hac habitasse platea dictumst.  Quisque imperdiet varius lectus. Vivamus lobortis scelerisque ligula.  Nulla sapien. Cras porta, tellus a dapibus mollis, dolor nisl lobortis  turpis, quis tincidunt turpis est eu nulla. Nullam tincidunt enim at  nulla. Etiam leo orci, porttitor ut, euismod eget, viverra eget,  lectus. Praesent quis augue. Phasellus ac nibh. Duis nulla. Curabitur  at tortor. </p>
   <p>&nbsp;</p>
      </div>


  </div>


<div style="clear: both"></div>
<div id="line3">Template by 

<!-- Please leave this if you use our template. Thank you -->
<a href="http://www.darjanpanic.com" target="_blank" title="Freelance Graphic artist">Darjan Panic</a> &amp; <a href="http://www.briangreens.com" target="_blank">Brian Green</a>
<!-- Please leave this if you use our template. Thank you -->
</div>
<div id="line4"></div>
</div>

</body>
</html>

   
    
    
    
  
Related examples in the same category
1.metamorph_orange
2.metamorph_orangemess
3.freecss_orangelights
4.orangeandblack
5.orangeblue
6.orangeflex
7.orangeflower
8.orangefocus
9.orangejuice
10.orangemint
11.orangeroyalty
12.Oranges
13.orangesin
14.OrangeSquareShadow
15.OrangeVillage
16.Orangezest
17.Orange 2
18.iOrange
19.hot-orange
java2s.com  | Contact Us | Privacy Policy
Copyright 2009 - 12 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.