Business_Elegance
<!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>Business Template</title>
<style type='text/css'>
/*
* Title: Business Elegance v.1.0
* Site: http://www.chamadigital.com
* Author: Anselmo Ribeiro
* Last Modified: 28_02_2008
*/
/*global reset */
html *{
padding: 0;
margin: 0;
}
a img, :link img, :visited img {
border: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
ol, ul {
list-style: none;
}
p{
line-height: 18px;
}
/* global reset */
/* base html */
body {
background: #343a3d url(Business_Elegance-images/bgd.gif);
color: #fff;
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: center;/*this is in place to center in older browsers*/
}
a {
text-decoration: none;
color:#05c7c0;
}
a:link {/* unvisited link */
color:#05c7c0;
}
a:hover { /* mouse over link */
color:#05c7c0;
text-decoration: underline;
}
a:active {/* selected link */
color:#05c7c0;
}
/* end base html */
/* layout */
#wrapper{
width: 900px;
margin: 0 auto;
text-align: left;
background: #2d3235;
}
#header{
width: 856px;
padding: 20px 22px 25px 22px;
height: 390px;
background: #262b2e;
position: relative;
}
#header h1{
position: absolute;
top:20px;
left: 22px;
width: 350px;
height: 23px;
font-family:Arial, Helvetica, sans-serif;
font-size:30px;
color:#fff;
font-weight: bold;
}
#header h1 a{
text-decoration: none;
color:#fff;
}
#content{
float: left;
width: 900px;
background: #2d3235 url(Business_Elegance-images/main_bgd.gif) repeat-y top left;
}
#col_left{
float: left;
width: 571px;
padding: 30px 22px;
}
#col_right{
float: right;
width: 197px;
padding: 30px 58px 30px 30px;
}
#footer{
width: 900px;
margin: 10px auto 20px auto;
}
#footer p{
text-align: center;
}
#welcome{
padding-bottom: 35px;
border-bottom: 1px solid #343a3d;
}
/*navigation*/
#navigation{
position: absolute;
top:25px;
right: 22px;
}
#navigation li{
float: left;
}
#navigation a {
display: inline-block;
font-size: 11px;
text-transform: uppercase;
text-decoration:none;
padding:10px 15px 35px 15px;;
background-color:#000;
border-bottom: 3px solid #fff;
color:#fff;
margin-right: 1px;
font-weight: normal;
}
#navigation a:hover{
border-bottom: 3px solid #05c7c0;
color:#05c7c0;
}
#navigation li.selected a{
border-bottom: 3px solid #05c7c0;
color:#05c7c0;
}
#imagem{
position: absolute;
top:142px;
}
#search{
position: absolute;
top: 105px;
left: 22px;
}
h2#slogan{
position: absolute;
top: 100px;
right: 22px;
font-family: Georgia, "Times New Roman", Times, serif;
font-size:28px;
font-weight: normal;
}
h2#slogan span{
font-style: italic;
color: #95ca05;
}
h2{
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 24px;
font-weight: normal;
margin-bottom: 20px;
}
#search input{
float: left;
background-color: #141718;
border: 1px solid #393e41;
padding: 3px;
color: #fff;
width: 152px;
}
#search .btn{
border: 0;
margin: 0 0 0 7px;
padding: 0;
width: auto;
}
#about_us{
float: left;
width: 194px;
margin-right: 27px;
display: inline;
}
#services{
float: left;
width: 151px;
margin-right: 42px;
display: inline;
}
#clients{
float: left;
width: 146px;
display: inline;
}
#services ul li{
padding:0 0 14px 18px;
background: url(Business_Elegance-images/bullet.jpg) no-repeat top left;
}
#clients ul li{
padding:0 0 14px 20px;
background: url(Business_Elegance-images/arrow.jpg) no-repeat top left;
}
h3{
padding: 30px 0 20px 0;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 18px;
font-weight: normal;
}
#center{
float:left;
padding-bottom: 35px;
border-bottom: 1px solid #343a3d;
}
#quote{
float:left;
padding: 35px 0;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 17px;
font-style: italic;
letter-spacing: 2px;
color: #8b8b8c;
}
#quote p{
line-height: 22px;
}
#quote p.testimonial{
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
font-style: normal;
color: #fff;
}
#quote .quote{
font-size: 26px;
}
#news{
padding-bottom: 10px;
border-bottom: 1px solid #343a3d;
}
#news li{
margin-bottom: 20px;
}
#news li p.date{
color: #95ca05;
font-weight: bold;
}
#news li p.archive{
padding-left: 25px;
background: url(Business_Elegance-images/folder.jpg) no-repeat 0 50%;;
}
#contacts h2{
margin-top: 20px;
}
.green{
color: #95ca05;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1><a href="index.html" title="home">BUSINESS ELEGANCE</a></h1>
<div id="navigation">
<ul>
<li class="selected"><a href="index.html" title="About Us">HOME</a></li>
<li><a href="index.html" title="About Us">ABOUT US</a></li>
<li><a href="index.html" title="Services">SERVICES</a></li>
<li><a href="index.html" title="Clients">CLIENTS</a></li>
<li><a href="index.html" title="Contacts">CONTACTS</a></li>
</ul>
</div><!--end navigation-->
<form action="">
<div id="search">
<input type="text" value="Search text here..." />
<input name="n1" type="image" src="Business_Elegance-images/go.gif" value="Search" class="btn" />
</div>
</form>
<h2 id="slogan">Your own <span>business</span> slogan here!</h2>
<img id="imagem" src="Business_Elegance-images/business.jpg" alt="Business" />
</div>
<div id="content">
<div id="col_left">
<div id="welcome">
<h2>Welcome to our Company</h2>
<p>
Etiam vehicula, augue eu ultricies dictum, orci nisi suscipit sem, nec sollicitudin neque est ac massa. Phasellus elementum nibh vel odio. Proin orci nulla, viverra tempus, pharetra ut, varius nec, justo. Donec euismod molestie erat. Nulla lobortis bibendum magna. Nulla adipiscing justo eu erat. Aliquam libero lacus, tincidunt in, consectetuer ac, sagittis in, orci. Etiam sed nulla quis nibh nonummy dignissim. Suspendisse purus tellus, volutpat vitae, lacinia eget, hendrerit et, ligula. Fusce id velit ac purus fermentum elementum. Duis orci risus, molestie ultricies, pellentesque ac, molestie in, metus.
</p>
</div><!--end welcome-->
<div id="center">
<div id="about_us">
<h3>About Us</h3>
<p>
Etiam vehicula, augue eu ultricies dictum, orci nisi suscipit sem, nec sollicitudin neque est ac massa. Phasellus elementum nibh vel odio. Proin orci nulla, viverra tempus, pharetra ut, varius nec, justo. Donec euismod molestie erat.
</p>
<p><a href="index.html" title="Continue Reading">Continue Reading »</a></p>
</div>
<div id="services">
<h3>Services</h3>
<ul>
<li>Proin orci nulla est erat.</li>
<li>Proin orci nulla est erat.</li>
<li>Proin orci nulla est erat.</li>
<li>Proin orci nulla est erat.</li>
<li>Proin orci nulla est erat.</li>
</ul>
<p><a href="index.html" title="Continue Reading">Continue Reading »</a></p>
</div>
<div id="clients">
<h3>Clients</h3>
<ul>
<li>Phasellus elementum</li>
<li>Phasellus elementum</li>
<li>Phasellus elementum</li>
<li>Phasellus elementum</li>
<li>Phasellus elementum</li>
</ul>
<p><a href="index.html" title="Continue Reading">Continue Reading »</a></p>
</div>
<div style="clear:both;"></div>
</div>
<div id="quote">
<p><span class="quote">“ </span>Etiam vehicula, augue eu ultricies dictum, orci nisi suscipit sem, nec sollicitudin neque est ac massa. Phasellus elementum nibh vel odio. Proin orci nulla, viverra tempus, pharetra ut, varius nec, justo. Donec euismod molestie erat. Nulla lobortis bibendum magna. <span class="quote">“</span></p>
<p class="testimonial">Lorem Ipsum - Client Testimonial</p>
</div>
</div><!--end col_left-->
<div id="col_right">
<div id="news">
<h2>News</h2>
<ul>
<li>
<p class="date">February 26th, 2008 </p>
<p>Lorem ipsum dolor sit amet, consect adipiscing elit. In iaculis vestibulum elit. Nam blandit. Proin...</p>
<p><a href="index.html">Read more »</a></p>
</li>
<li>
<p class="date">February 27th, 2008 </p>
<p>Lorem ipsum dolor sit amet, consect adipiscing elit. In iaculis vestibulum elit. Nam blandit. Proin...</p>
<p><a href="index.html">Read more »</a></p>
</li>
<li>
<p class="date">February 28th, 2008 </p>
<p>Lorem ipsum dolor sit amet, consect adipiscing elit. In iaculis vestibulum elit. Nam blandit. Proin...</p>
<p><a href="index.html">Read more »</a></p>
</li>
<li>
<p class="archive"><a href="index.html">News archive »</a></p>
</li>
</ul>
</div><!--end news-->
<div id="contacts">
<h2>Contact Us</h2>
<p><span class="green">Name:</span> Chama Digital</p>
<p><span class="green">Phone:</span> +351 235 456 739</p>
<p><span class="green">Email:</span><a href="index.html"> seo@yourcompany.com</a></p>
</div>
</div><!--end col_right-->
</div><!--end content-->
<div style="clear:both"></div>
</div>
<!--end wrapper-->
<div id="footer"><p>© 2008 <a href="#">Yourcompany.com</a>. Valid CSS & XHTML. Template design by <a href="http://www.chamadigital.com" title="Chama Digital">Chama Digital</a> | <a href="http://www.free-templates.ru" title="free-templates.ru">Free-templates.ru</a></p>
</div>
</body>
</html>
Related examples in the same category