orangeroyalty : Orange « Templates « HTML / CSS

orangeroyalty
   

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>orangeroyalty - examples</title>
<style type='text/css'>
/* everything */
body {
  background:#142C41 url('orangeroyalty-images/bodybg.png') repeat-x scroll top left;
  font-family:Arial, Helvetica, sans-serif;
  font-size:1.0em;
  margin:0 auto;
  padding:0;
}
* {
  margin:0;
  padding:0;
}
*:focus {
  outline:none; /* removes ugly dotted border */
}


/* default element styles */
ul, ol {
  margin:10px 0 10px 30px;
}
p, ul, ol, blockquote {
  font-size:0.85em;
  line-height:1.9em;
  text-align:justify;
  margin-bottom:10px;
}
a {
  color:#ff6600;
  text-decoration:none;
}
a:hover {
  color:#204C78;
}
table {
  width:100%;
}
table tr th {
  background:#0C2136;
  padding:5px 10px;
  color:#ffffff;
  text-align:left;
  font-weight:bold;
  letter-spacing:2px;
  border-top:1px solid #060D14;
  border-bottom:1px solid #060D14;
}
table tr td {
  padding:5px 10px;
  color:#333333;
  letter-spacing:1px;
  border-bottom:1px solid #dddddd;
}
table tr.alt td {
  background-color:#e7e7e7;
}
blockquote {
  font-style:italic;
  letter-spacing:1px;
  margin:15px 0 15px 30px;
  background:#ffffff url('orangeroyalty-images/quote.png') no-repeat scroll top left;
  padding:10px 0 10px 55px;
}
code {
  font-family:"Courier New", Courier, monospace;
  letter-spacing:1px;
  margin:15px 0 15px 30px;
  display:block;
  border:1px solid #dddddd;
  padding:15px 10px;
}
fieldset {
  border:1px solid #dddddd;
  margin:20px 0;
  padding:10px;
  font-size:0.9em;
}
fieldset legend {
  background-color:#ffffff;
  padding:0 5px;
  font-weight:bold;
}
fieldset p label {
  float:left;
  display:block;
  width:100px;
  font-weight:bold;
}
fieldset p label span.required { 
  font-weight:bold;
  color:#ff0000;
}
fieldset p input, fieldset p textarea, fieldset p select {
  padding:3px;
  border:1px solid #dddddd;
  border-top:1px solid #B3B3B3;
  border-left:1px solid #B3B3B3;
  font-family:Arial, Helvetica, sans-serif;
  font-size:0.9em;
  color:#666666;
}
fieldset p input.formbutton {
  background-color:#1C436A;
  border:1px solid #112941;
  font-weight:bold;
  color:#ffffff;
  font-family:Verdana, Arial, Helvetica, sans-serif;
  padding:5px 10px;
  margin-left:100px;
}
.hidden {
  display:none;
  visibility:hidden;
}
.clear {
  clear:both;
}


/* page wrapper */
div#wrap {
  width:90%;

  margin:0 auto;
  padding:0;
}
div#header {
  padding:30px 20px;
}
div#header div#header-text {}
div#header div#header-text h1, div#header div#header-text h2 {
  padding:0;
  margin:0;
  float:left;
}
div#header div#header-text h1, div#header div#header-text h1 a {
  color:#FC8228;
  border-bottom:none;
  font-size:1.8em;
  letter-spacing:-5px;
  line-height:1.0em;
  text-transform:lowercase;
}
div#header div#header-text h1 a span {
  color:#ffffff;
}
div#header div#header-text h2 {
  color:#ffffff;
  font-family:"Trebuchet MS", Verdana, Arial;
  font-weight:normal;
  margin:12px 0 0;
  padding:0;
  width:50%;
  float:right;
  text-align:right;
}


/* navigation menu */
div#navigation {
  height:55px;
  background:#0C1C29 url('orangeroyalty-images/nav-bg.png') repeat-x scroll top left;
}
div#innernav {
  background:transparent url('orangeroyalty-images/nav-left.png') no-repeat scroll top left;
  height:55px;
}
div#navigation ul {
  background:transparent url('orangeroyalty-images/nav-right.png') no-repeat scroll top right;
  list-style:none;
  margin:0; 
  padding:0 10px;
  position:relative;
  top:0;
  height:55px;
  display:block;
}
div#navigation ul li {
  display:block;
  float:left;
}
div#navigation ul li a {
  display:block;
  float:left;
  color:#ffffff;
  border-bottom:none;
  height:32px;
  font-family:"Trebuchet MS", Verdana, Arial;
  font-weight:bold;
  font-size:1.2em;
  padding:14px 20px 9px;
  border-right:1px solid #060D14;
  border-left:1px solid #244566;
}
div#navigation ul li.navleft a {
  border-left:none;
}
div#navigation ul li.navright a {
  border-right:none;
}
div#navigation ul li a:hover {
  color:#FC8228;
}

/* page content area */
div#content {
  background:#ffffff;
  clear:both;
  padding:25px 10px 10px 10px;
}


/* main content area + page styles */
div#page {
  float:right;
  padding:10px 20px 10px;
  width:60%;
  color:#555555;
  font-size:1.0em;
}
div#page h1 {
  color:#474747;
}
div#page h2 {
  color:#172C41;
  letter-spacing:-1px;
  font-size:1.7em;
  color:#0C2136;
}
h2, h3, h4, h5 {
  margin-bottom:6px;
  color:#333333;
}
h5 {
  font-size:0.95em;
}
div#page ul {
  margin:0 0 20px 30px;
}



/* sidebar + sidebar styles */
div#sidebar {
  float:left;
  width:28%;
  padding:10px 20px;
}
div#sidebar h3 {
  background:#FF6600 url('orangeroyalty-images/sidebar-header-left.png') no-repeat scroll top left;
  display:block;
  height:45px;
  color:#ffffff;
  letter-spacing:0;
  font-size:1.4em;
  margin-bottom:5px;
  font-weight:bold;
  font-family:"Trebuchet MS", Verdana, Arial;
}
div#sidebar h3 span {
  padding:8px 0 0 15px;
  display:block;
  height:45px;
  background:transparent url('orangeroyalty-images/sidebar-header-right.png') no-repeat scroll top right;
}

div#sidebar ul {
  list-style:none;
  margin-left:0;
}
div#sidebar p.newsitem {
  font-size:0.82em;
  line-height:1.6em;
  margin-bottom:35px;
  color:#333333;
}
div#sidebar p.newsitem span {
  font-size:0.75em;
  text-transform:uppercase;
  color:#ff6600;
  font-weight:bold;
  font-family:Verdana, Arial, Helvetica, sans-serif;
}
div#sidebar p.newsitem a.read-more-link {
  font-family:Tahoma, Arial, sans-serif;
  float:right;
  color:#999999;
  border-bottom:none;
  display:block;
  letter-spacing:1px;
  font-size:0.8em;
  padding:0 17px 0;
  margin:10px 0;
  background:#ffffff url('orangeroyalty-images/readmore.png') no-repeat scroll 100% 50%;
}
div#sidebar p.newsitem a.read-more-link:hover {
  text-decoration:underline;
}
div#sidebar ul {
  margin:0;
  padding:0;
}
div#sidebar ul li {
  padding:5px 0;
}
div#sidebar ul li a {
  border-bottom:none;
  text-decoration:underline;
}




/* footer styles */
div.footer {
  clear:both;
  padding:5px 10px 10px 10px;
  width:98%;
  margin:0 auto;
}
div.footer p {
  margin:0;
  color:#ffffff;
  font-size:0.7em;
  font-family:Verdana, Arial, Helvetica, sans-serif;
  width:50%;
  float:left;
  text-align:left;
}
div.footer p.right {
  float:right;
  text-align:right;
}
div.footer p a {
  color:#ffffff;
  border-bottom:none;
  text-decoration:underline;
}


</style>


</head>
<body>
<div id="wrap">
  <div id="header">
    <div id="header-text">
      
      <!-- page header - use <span></span> to colour text white, default color orange -->
      <h1><a href="#">orange<span>royalty</span></a></h1>
    
      <!-- sub title here -->
      <h2>put your totally awesome slogan here</h2>
      
      <div class="clear"></div>
    </div>
  </div>

  <div id="navigation">
    <div id="innernav">
      <ul>
        <!-- top navigation  -->
        <!-- add class navleft to first item and navright to last item as shown -->
        <li class="navleft"><a href="index.html">home</a></li>
        <li><a href="examples.html">examples</a></li>
        <li><a href="#">solutions</a></li>
        <li><a href="#">our service</a></li>
        <li><a href="#">support</a></li>
        <li class="navright"><a href="#">contact</a></li>
      </ul>
    </div>
  </div>
  
  <div id="content">
    <!-- left hand main content -->
    <div id="page">
      
      <h2>Examples</h2>
      <p>The page shows a selection of the default styling of page elements.</p>
      
      <h3>Headings</h3>
      <h1>Heading H1</h1>
      <h2>Heading H2</h2>
      <h3>Heading H3</h3>
      <h4>Heading H4</h4>
      <h5>Heading H5</h5>
      
      <br /><br />
      
      <h3>Table</h3>
      <table cellpadding="0" cellspacing="0">
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Age</th>
        </tr>
        <tr>

          <td>1</td>
          <td>John Smith</td>
          <td>28</td>
        </tr>
        <tr class="alt">
          <td>2</td>
          <td>Fred James</td>
          <td>49</td>
        </tr>
        <tr>
          <td>3</td>
          <td>Rachel Johnson</td>
          <td>19</td>
        </tr>
        <tr class="alt">
          <td>4</td>
          <td>Debbie Cook</td>
          <td>33</td>
        </tr>

      </table>
      
      <br /><br />
      
      <h3>Unordered list</h3>
      <ul>
        <li>List item #1</li>
        <li>List item #2</li>
        <li>List item #3</li>
        <li>List item #4</li>
      </ul>
      
      <h3>Ordered list</h3>
      <ol>
        <li>List item #1</li>
        <li>List item #2</li>
        <li>List item #3</li>
        <li>List item #4</li>
      </ol>
      
      <h3>Blockquote</h3>
      <blockquote><p>640K ought to be enough for anybody</p></blockquote>
      
      <h3>Code</h3>
      <code>&lt;?php echo('Hello world!'); ?&gt;</code>
    

    </div>
    <!-- end left hand main content -->
    
    <!-- start sidebar -->    
    <div id="sidebar">
    
      <!-- sidebar h3: wrap text in <span></span> tags as shown -->
      <h3><span>latest news</span></h3>
      <p class="newsitem">
        <span>18 April 2009</span><br />
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas in massa. Curabitur id nisl. Duis tempus lorem nec justo. In hac habitasse platea dictumst.
        <a class="read-more-link" href="#">Continue reading</a>
      </p>
      
      <p class="newsitem">
        <span>14 April 2009</span><br />
        Duis dolor ante, pharetra vitae, aliquam consectetur, ultricies sed, sem. Maecenas consequat magna ac ligula. Phasellus tincidunt odio non magna. Nullam tincidunt convallis lorem.
        <a class="read-more-link" href="#">Continue reading</a>
      </p>
      

            
      <h3><span>pharetra vitae</span></h3>
      <ul>
          <li><a href="http://www.spyka.net" title="spyka Webmaster resources">spyka webmaster</a></li>
        <li><a href="http://www.justfreetemplates.com" title="free web templates">Free web templates</a></li>
        <li><a href="http://www.spyka.net/forums" title="webmaster forums">Webmaster forums</a></li>
        <li><a href="http://www.profileartist.net" title="premium templates">Premium templates</a></li>
        <li><a href="http://www.awesomestyles.com" title="free phpbb3 themes">phpBB3 styles</a></li>
      </ul>
        

    </div>
    <!-- end sidebar -->
    
    <div class="clear"></div>    
  </div>
    <!-- start footer -->
    <div class="footer">
      <p class="left">&copy; 2009 sitename.  Design: <a href="http://www.spyka.net">spyka Webmaster</a> | <a href="http://www.justfreetemplates.com">Free Web Templates</a></p>
      <p class="right">
        <a href="http://validator.w3.org/check/referer" title="valid XHTML">XHTML</a> | <a href="http://jigsaw.w3.org/css-validator/check/referer" title="valid CSS">CSS</a>
      </p>  
      <div class="clear"></div>      
    </div>
    <!-- end footer -->
</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.	Oranges
12.	orangesin
13.	OrangeSquareShadow
14.	OrangeVillage
15.	Orangezest
16.	Orange 2
17.	iOrange
18.	iOrange2b
19.	hot-orange