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.jpg) no-repeat;
}
a {
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.gif) left top no-repeat;
margin: 5px;
padding: 5px;
}
blockquote p {
color: #FF9000;
font-family: verdana;
font-size: 10px;
padding: 15px;
background: url(iOrange2b-images/bq2.gif) right 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-1 {
margin: 5px;
padding: 5px;
}
#comment-2 {
margin: 5px;
padding: 5px;
background: #e4e4e4;
}
#linkcat-1 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> </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> & <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