orangeflex : Orange « Templates « HTML / CSS

orangeflex
   

<!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>orangeflex - a free web template</title>
<style type='text/css'>
/* everything */
body {
  background-color:#e0e0e0;
  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;
  border-bottom:1px dotted #ff6600;
}
a:hover {
  color:#E25C03;
}
table {
  width:100%;
}
table tr th {
  background:#ff6600 url('orangeflex-images/nav-bg.png') repeat-x scroll 0 50%;
  padding:5px 10px;
  color:#ffffff;
  font-weight:bold;
  letter-spacing:2px;
  border:1px solid #D65600;
}
table tr td {
  padding:5px 10px;
  color:#333333;
  letter-spacing:1px;
  border-bottom:1px solid #dddddd;
}
table tr.alt td {
  background-color:#EFEFEF;
}
blockquote {
  font-style:italic;
  letter-spacing:1px;
  margin:15px 0 15px 30px;
  background:#ffffff url('orangeflex-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;
}

/* page wrapper */
div#wrap {
  width:90%;
  background:#ffffff url('orangeflex-images/header-bg.png') no-repeat scroll top left;
  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;
}
div#header div#header-text h1, div#header div#header-text h1 a {
  color:#ff6600;
  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:#333333;
}
div#header div#header-text h2 {
  color:#cccccc;
  letter-spacing:-2px;
  margin-top:-5px;
  text-transform:lowercase;
}

/* navigation menu */
div#navigation {
  height:55px;
  background:#FF9900 url('orangeflex-images/nav-bg.png') repeat-x scroll bottom left;
  border-top:1px solid #D65600;
}
div#navigation ul {
  list-style:none;
  margin:0 10px; 
  padding:0;
  position:relative;
  top:0;
}
div#navigation ul li {
  display:block;
  float:left;
}
div#navigation ul li.selected {
  background:#ffffff url('orangeflex-images/item-right.png') no-repeat scroll bottom right;
  position:relative;
  top:-1px;
}
div#navigation ul li a {
  display:block;
  float:left;
  color:#ffffff;
  border-bottom:none;
  height:25px;
  font-weight:bold;
  font-size:1.05em;
  padding:15px 20px 9px;
}
div#navigation ul li.selected a {
  background:transparent url('orangeflex-images/item-left.png') no-repeat scroll bottom left;
  color:#ff6600;
  padding:16px 20px 9px;
}

/* page content area */
div#content {
  background:#ffffff url('orangeflex-images/body-bg.png') repeat-x scroll top left;
  border-top:1px solid #D65600;
}

/* main content area + page styles */
div#page {
  float:left;
  padding:10px;
  width:66%;
  color:#555555;
}
div#page h2 {
  color:#444444;
  letter-spacing:-2px;
}
div#page h3 {
  color:#FF6600;
}
div#page h5 {
  font-size:0.9em;
  font-style:italic;
  font-weight:normal;
  color:#333333;
}


/* sidebar + sidebar styles */
div#sidebar {
  float:right;
  width:28%;
  padding:10px;
}
div#sidebar h3 {
  background:transparent url('orangeflex-images/h3-bg.png') no-repeat scroll bottom left;
  color:#ff6600;
  letter-spacing:0;
  font-size:1.4em;
  margin-bottom:5px;
  padding:10px 0;
  font-weight:normal;
}
div#sidebar h3 strong {
  color:#333333;
}
div#sidebar ul {
  list-style:none;
  margin-left:0;
}
div#sidebar p.newsitem {
  font-size:0.82em;
  line-height:1.6em;
  margin-bottom:35px;
}
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 0 0 17px;
  margin:10px 0;
  background:#ffffff url('orangeflex-images/read-more.png') no-repeat scroll 0 50%;
}
div#sidebar p.newsitem a.read-more-link:hover {
  text-decoration:underline;
}
div#sidebar ul {
  margin:0 0 0 10px;
}
div#sidebar ul li {
  padding:5px 0;
}
div#sidebar ul li a {
  border-bottom:none;
  text-decoration:underline;
}
div#sidebar ul.blocklist {
  margin:0;
}
div#sidebar ul.blocklist li {
  padding:0;
}
div#sidebar ul.blocklist li a {
  display:block;
  border:none;
  text-decoration:underline;
  color:#ff6600;
  padding:5px 10px;
}
div#sidebar ul.blocklist li.selected-item a {
  background:#ff6600 url('orangeflex-images/nav-bg.png') repeat-x scroll 0 50%;
  color:#ffffff;
  border:1px solid #D65600;
}

/* footer styles */
div.footer {
  clear:both;
  padding:15px 5px;
  border-top:1px solid #dbdbdb;
  width:98%;
  margin:0 auto;
}
div.footer p {
  margin:0;
  color:#999999;
}
div.footer p a {
  color:#999999;
  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 black, default color orange -->
      <h1><a href="#">orange<span>flex</span></a></h1>
      
      <!-- sub title, text here is transformed to lower case -->
      <h2>Welcome To Our Website</h2>
      
    </div>
  </div>

  <div id="navigation">
    <ul>
    
      <!-- top navigation use selected class for selected item -->
      <li><a href="index.html">home</a></li>
      <li class="selected"><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><a href="#">contact</a></li>
    </ul>
  </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>
      <h6>Heading H6</h6>
      
      <br /><br />
      
      <h3>Table</h3>
      <table cellpadding="0" cellspacing="2">
        <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: use <strong> for black text -->
      <h3>latest <strong>news</strong></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="#">Read more</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="#">Read more</a>
      </p>
      
      
      <h3>helpful <strong>links</strong></h3>
      
      <!-- sidebar blocklist: use class selected-item for selected item -->
      <ul class="blocklist">
        <li><a href="http://www.spyka.net" title="spyka Webmaster resources">spyka webmaster</a></li>
        <li class="selected-item"><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>

      
      <h3>top <strong>categories</strong></h3>
      <ul>
        <li><a href="#">Lorem ipsum dolor sit amet.</a></li>
        <li><a href="#">Quisque consequat nunc a felis.</a></li>
        <li><a href="#">Suspendisse consequat magna at.</a></li>
        <li><a href="#">Etiam eget diam id ligula rhoncus.</a></li>
        <li><a href="#">Sed in mauris non nibh.</a></li>
      </ul>
        

    </div>
    <!-- end sidebar -->
    
    <!-- start footer -->
    <div class="footer">
      <p>&copy; 2009 sitename. Design by <a href="http://www.spyka.net">spyka webmaster</a> | <a href="http://www.justfreetemplates.com">Free Web Templates</a> | <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>
    <!-- end footer -->
  </div>
</div>
</body>
</html>
Related examples in the same category

1.	metamorph_orange
2.	metamorph_orangemess
3.	freecss_orangelights
4.	orangeandblack
5.	orangeblue
6.	orangeflower
7.	orangefocus
8.	orangejuice
9.	orangemint
10.	orangeroyalty
11.	Oranges
12.	orangesin
13.	OrangeSquareShadow
14.	OrangeVillage
15.	Orangezest
16.	Orange 2
17.	iOrange
18.	iOrange2b
19.	hot-orange