Orange 2
?<!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">
<!--
Name : Orange
Design : http://www.psdtemplate.com/free-psd-templates/company-psd-template.html
Coder : Sumeet Chawla
Website : http://www.code-pal.com
-->
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<style type='text/css'>
?@import url('reset.css');
.clear {
clear: both;
}
a:focus {
outline: none;
}
#top {
height: 93px;
background-color: #303123;
}
#top-menu {
position: relative;
width: 960px;
height: 93px;
margin-right: auto;
margin-left: auto;
}
#top-menu h1 a {
background-image: url('Orange-images/top-logo.jpg');
width: 112px;
height: 32px;
position: relative;
display: block;
background-repeat: no-repeat;
text-indent: -9999px;
margin-left: 99px;
top: 34px;
float: left;
}
ul#nav-bar {
float: right;
margin-right: 54px;
margin-top: 34px;
position: relative;
width: 290px;
}
ul#nav-bar li {
border: 2px solid #303123;
position: relative;
float: left;
height: 17px;
padding-top: 2px;
margin-right: 2px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
ul#nav-bar li#home a{
width: 66px;
}
ul#nav-bar li#services a{
width: 66px;
}
ul#nav-bar li#about a{
width: 55px;
}
ul#nav-bar li#contact a{
width: 60px;
}
ul#nav-bar li a{
display: block;
color: #b5b3b3;
font-size: 11px;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
text-align: center;
}
ul#nav-bar li.current, ul#nav-bar li:hover, ul#nav-bar li.current a{
border-color:#444532;
color: #ffffff;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
ul#nav-bar li a:hover{
color: #ffffff;
}
#header {
background-image: url('Orange-images/header-bg.jpg');
background-repeat: repeat-x;
height: 235px;
}
#header-wrap {
position: relative;
width: 286px;
background-image: url('Orange-images/header.jpg');
height: 188px;
margin-right: auto;
margin-left: auto;
padding-left: 543px;
padding-top: 47px;
padding-right: 131px;
}
#header-wrap h2 {
background-image: url('Orange-images/header-title.png');
width: 258px;
height: 42px;
}
#header-wrap p {
font-family: helvetica, "Times New Roman", Times, serif;
font-size: 11px;
color: #ffffff;
line-height: 17px;
font-style: italic;
}
#header-title {
text-indent: -9999px;
position: relative;
}
#content {
background-image: url('Orange-images/main-content-bg.jpg');
background-color: #f2efef;
background-repeat: repeat-x;
padding-bottom: 70px;
}
#content-wrap {
margin-left:auto;
margin-right:auto;
padding-left:37px;
padding-top:47px;
position:relative;
width:789px;
}
#content-wrap h3 {
font-family: candara, arial, Helvetica, sans-serif;
color: #616161;
font-size: 19px;
margin-bottom: 26px;
}
.welcome p {
color: #9c9b9b;
font-family: helvetica, "Times New Roman", Times, serif;
font-size: 11px;
line-height: 17px;
margin-top: 22px;
}
.cols {
position: relative;
float: left;
margin-top: 45px;
}
#col-left {
margin-right:42px;
width:210px;
}
#col-mid {
margin-right:42px;
width:239px;
}
#col-right {
width: 249px;
}
.review {
background-image: url('Orange-images/customer.jpg');
background-repeat: no-repeat;
background-position: left center;
padding-left: 46px;
}
.features {
background-image: url('Orange-images/features.jpg');
background-repeat: no-repeat;
background-position: left center;
padding-left: 30px;
}
.price {
background-image: url('Orange-images/prices.jpg');
background-repeat: no-repeat;
background-position: left center;
padding-left: 30px;
}
.cols p {
color: #4c4b4b;
font-family: helvetica, "Times New Roman", Times, serif;
font-size: 12px;
line-height: 17px;
margin-bottom: 18px;
}
.cols ul {
font-family: helvetica, "Times New Roman", Times, serif;
font-size: 12px;
color: #616161;
line-height: 17px;
}
.cols ul li {
margin-bottom: 19px;
}
#col-mid ul li {
background-image: url('Orange-images/bullet.jpg');
background-repeat: no-repeat;
background-position: left top;
padding-left: 17px;
}
#col-right ul li {
background-image: url('Orange-images/bullet-coin.jpg');
background-repeat: no-repeat;
background-position: left top;
padding-left: 27px;
}
#footer {
background-image: url('Orange-images/footer-top-bg.jpg');
background-repeat: repeat-x;
background-position: top;
background-color: #303123;
}
#footer-wrap {
position: relative;
width: 770px;
height: 28px;
margin-right: auto;
margin-left: auto;
padding-top: 14px;
}
#footer-wrap h4 {
background-image: url('Orange-images/logo-footer.jpg');
width: 78px;
height: 24px;
position: relative;
background-repeat: no-repeat;
text-indent: -9999px;
float: left;
margin-right: 4px;
}
#footer-wrap p {
font-family: arial, Helvetica, sans-serif;
font-size: 9px;
color: #ffffff;
margin-top: 4px;
margin-left: 5px;
position: relative;
width: 365px;
}
#footer-wrap p a{
color: #ffffff;
}
.rss {
font-size: 9px;
text-decoration: none;
color: #ffffff;
background-image: url('Orange-images/rss-icon.jpg');
background-repeat: no-repeat;
padding-left: 17px;
width: 20px;
float: right;
}
</style>
</head>
<body>
<div id="top">
<div id="top-menu">
<h1><a href="index.html">Orange - wel luv it</a></h1>
<ul id="nav-bar">
<li id="home" class="current"><a href="#">Home</a></li>
<li id="services"><a href="#" >Services</a></li>
<li id="about"><a href="#" >About</a></li>
<li id="contact"><a href="#">Contact</a></li>
</ul>
<div class="clear" ></div>
</div>
</div>
<div id="header">
<div id="header-wrap">
<div id="header-title">
<h2>your title goes here</h2>
<h4>amet, consectetur, condimentum purus nec</h4>
</div>
<p>
Cras diam nibh, placerat sit amet, dictum eget, varius a, nisi. Suspendisse ac tellus. Sed nisi leo, commodo non, pharetra sit amet, consequat ut, nunc.<br/>
Sed nisi leo, commodo non, pharetra sit amet, consequat ut, nunc.
</p>
</div>
</div>
<div id="content">
<div id="content-wrap">
<div class="welcome">
<h3>Welcome to our website!</h3>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lectus. Donec pharetra molestie nunc. Sed mattis, erat sit amet vehicula consectetur, purus pede consectetur quam, non tempor orci ligula ac mauris. Vestibulum lacus erat, egestas vel, posuere sit amet, molestie eget, ipsum. Cras diam nibh, placerat sit amet, dictum eget, varius a, nisi. Suspendisse ac tellus.</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lectus. Donec pharetra molestie nunc. Sed mattis, erat sit amet vehicula consectetur, purus pede consectetur quam, non tempor orci ligula ac mauris. Vestibulum lacus erat, egestas vel, posuere sit amet, molestie eget, ipsum. Cras diam nibh, placerat sit amet, dictum eget, varius a, nisi. Suspendisse ac tellus.</p>
</div>
<div id="col-left" class="cols">
<h3 class="review">Customer Review</h3>
<p><b>Alex</b> says:</p>
<p><i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lectus. Donec pharetra molestie nunc.?</i></p>
<p><b>John</b> says:</p>
<p><i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lectus. Donec pharetra molestie nunc.?</i></p>
</div>
<div id="col-mid" class="cols">
<h3 class="features">Features</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lectus.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lectus.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lectus.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lectus.</li>
</ul>
</div>
<div id="col-right" class="cols">
<h3 class="price">Prices</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lectus.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lectus.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lectus.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lectus.</li>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
<div id="footer">
<div id="footer-wrap">
<h4 id="footer-logo"><a href="#">Orange</a></h4>
<a href="#" class="rss">RSS</a>
<p>2009 - PSDTemplate.com. All rights reserved. Coded By: <a href="http://www.code-pal.com">Code-pal</a></p>
<div class="clear"></div>
</div>
</div>
</body>
</html>
Related examples in the same category