businessdesign
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Business Design</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type='text/css'>
*{
padding:0;
margin:0;
}
body
{
background-color: white;
font-family: arial;
font-size: 12px;
}
#Inner
{
background: url("businessdesign-img/bac.gif") top left repeat-x;
height: 247px;
margin-top: 35px;
}
#Container
{
width: 900px;
margin: 0px auto;
}
#Top_left
{
background: url("businessdesign-img/logo.gif") top left no-repeat;
width: 240px;
height: 193px;
float: left;
padding-top: 30px;
padding-left: 60px;
}
.company
{
color: #fe8a01;
font-family: Candara;
font-size: 28px;
}
.name
{
color: #7d9d0d;
font-family: Candara;
font-size: 28px;
}
.link
{
color: #5a5551;
font-family: Candara;
font-size: 14px;
text-decoration: none;
padding-left: 23px;
}
#Top_right
{
background: url("businessdesign-img/welcome.gif") bottom right no-repeat;
width: 600px;
height: 218px;
float: right;
background-color: white;
}
.first_line
{
color: #272625;
font-family: Candara;
font-size: 18px;
padding-right: 23px;
margin-top: 110px;
float: right;
}
.second_line
{
color: #272625;
font-family: Candara;
font-size: 33px;
padding-left: 220px;
margin-top: 110px;
float: left;
}
.third_line
{
color: #272625;
font-family: Candara;
font-size: 25px;
padding-right: 43px;
float: right;
margin-top: 10px;
}
#Head
{
height: 54px;
}
#Menu
{
background: white;
width: 900px;
height: 50px;
float: left;
border-top: 4px solid #66615d;
}
#Menu a
{
width: 120px;
padding-top: 10px;
line-height: 40px;
vertical-align: middle;
float: left;
background: url("businessdesign-img/arrows.gif") top left no-repeat;
background-position: 0px 25px;
padding-left: 30px;
color: #6f6d6d;
font-family: Candara;
font-size: 16px;
text-decoration: none;
}
#Menu a:hover, #Menu a.active
{
text-decoration: underline;
color: #fe8a01;
}
#CentralPart
{
width: 900px;
clear: both;
}
#LeftPart
{
width: 300px;
float: left;
}
#RightPart
{
float: right;
width: 600px;
min-height: 550px;
height: 550px;
}
*>#RightPart
{
height: auto;
}
.cleaner
{
clear: both;
}
#Page
{
width: 600px;
}
h1
{
font-size: 14px;
color: #5a5551;
line-height: 25px;
font-weight: bold;
padding-left: 32px;
background: url("businessdesign-img/gray-arrow.gif") top left no-repeat;
}
h2
{
font-size: 14px;
line-height: 25px;
font-weight: bold;
padding-left: 25px;
margin-top: 10px;
}
h3
{
font-size: 12px;
line-height: 20px;
font-weight: bold;
color: #5a5551;
}
.article
{
padding: 7px;
background-color: #dfdfdf;
margin-top: 8px;
margin-left: 30px;
}
p
{
padding: 5px 12px 0px 32px;
text-align: justify;
}
.foto2
{
width: 94px;
height: 100px;
float: left;
padding: 7px 10px 7px 34px;
}
.gray
{
color: #5a5551;
background: url("businessdesign-img/black-i.gif") top left no-repeat;
background-position: 0px 4px;
}
*>.gray
{
margin-top: -20px;
}
.orange
{
color: #e3920c;
background: url("businessdesign-img/orange-i.gif") top left no-repeat;
background-position: 0px 4px;
}
.green
{
color: #80a012;
background: url("businessdesign-img/green-i.gif") top left no-repeat;
background-position: 0px 4px;
}
.left
{
padding: 0px 0px 5px 0px;
}
.decor
{
background: url("businessdesign-img/orange-arrow.gif") top left no-repeat;
padding-left: 25px;
background-position: 0px 2px;
}
.foto1
{
width: 83px;
height: 82px;
float: left;
padding: 0px 7px 0px 0px;
}
#Bottom
{
width: 900px;
float: left;
border-top: 4px solid #5a5551;
margin-top: 5px;
}
*>#Bottom
{
margin-top: -5px;
}
.down
{
font-size: 11px;
text-align: right;
padding-bottom: 10px;
}
.down a
{
color: #5a5551;
}
.down2
{
padding-bottom: 10px;
float: right;
}
.down2 img
{
border: 0px;
}
</style>
<link rel="icon" href="favicon.ico" type="image/x-icon"/>
<link rel="stylesheet" type="text/css" href="default.css" title="default"/>
</head>
<body>
<div id="WholePage">
<div id="Inner">
<div id="Container">
<div id="Head">
<div id="Menu"> <a class="homepage active" href="http://www.free-css.com/"><span>Homepage</span></a> <a class="about-us" href="http://www.free-css.com/"><span>About Us</span></a> <a class="products" href="http://www.free-css.com/"><span>Products</span></a> <a class="services" href="http://www.free-css.com/"><span>Services</span></a> <a class="support" href="http://www.free-css.com/"><span>Support</span></a> <a class="contact" href="http://www.free-css.com/"><span>Contact</span></a> </div>
</div>
<div id="TopPart">
<div id="Top_left"> <span class="company">BUSINESS</span> <span class="name">DESIGN</span><br/>
<a class="link" href="http://www.free-css.com/"><span>www.companyname.com</span></a> </div>
<div id="Top_right"> <span class="first_line">to our business partner's site</span><br/>
<span class="second_line">Welcome</span><br/>
<span class="third_line">to our website</span> </div>
</div>
<div id="CentralPart">
<div id="LeftPart">
<h2 class="gray">NEWS</h2>
<h3>| 17.3.2007 |</h3>
<p class="left">Suspendisse rhoncus. Nulla eros est, pellentesque in, tincidunt nec, dapibus at, turpis. Suspendisse tincidunt cursus eros. Maecenas lacus tellus, fringilla vitae.</p>
<h3>| 15.6.2007 |</h3>
<p class="left">Curabitur libero nunc, vehicula sit amet, placerat lacinia, pretium at, lectus. Nunc diam. Aenean at sapien. Nunc leo magna, ultrices sed, interdum et, faucibus a, orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<h2 class="orange">JOB VACANCIES</h2>
<h3 class="decor">Pellentesque scelerisque</h3>
<p class="left">Pellentesque scelerisque, turpis ac lobortis nonummy, massa urna aliquet ipsum, ac luctus turpis risus ac justo. Etiam ullamcorper auctor mi.</p>
<h3 class="decor">Pellentesque scelerisque</h3>
<p class="left">Pellentesque scelerisque, turpis ac lobortis nonummy, massa urna aliquet ipsum, ac luctus turpis risus ac justo. Etiam ullamcorper auctor mi.</p>
<h2 class="green">LOREM IPSUM</h2>
<img src="businessdesign-img/foto1.gif" class="foto1" alt="" />
<p class="left">Pellentesque scelerisque, turpis ac lobortis nonummy, massa urna aliquet ipsum, ac luctus turpis risus ac justo. Etiam ullamcorper auctor mi. Maecenas lacus tellus.</p>
</div>
<div id="RightPart">
<div id="Page">
<div class="article">
<h1>COMPANY PROFILE</h1>
<img src="businessdesign-img/foto2.gif" class="foto2" alt="" />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer scelerisque ipsum vel orci. Aliquam ac mauris. Aenean vulputate consectetuer erat. Sed nec nisi sit amet neque porta auctor. In in est. Suspendisse a velit. In hac habitasse platea dictumst. Nam at pede vel nulla pulvinar hendrerit. Nullam vitae nunc dapibus leo pellentesque lobortis. Duis nec eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer scelerisque ipsum vel orci. Aliquam ac mauris. Aenean vulputate consectetuer erat. Sed nec nisi sit amet neque porta auctor. In in est. Suspendisse a velit. In hac habitasse platea dictumst. Nam at pede vel nulla pulvinar hendrerit. Nullam vitae nunc dapibus leo pellentesque lobortis. Duis nec eros. </p>
</div>
<div class="article">
<h1>OUR SERVICES</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer scelerisque ipsum vel orci. Aliquam ac mauris. Aenean vulputate consectetuer erat. Sed nec nisi sit amet neque porta auctor. In in est. Suspendisse a velit. In hac habitasse platea dictumst. Nam at pede vel nulla pulvinar hendrerit. Nullam vitae nunc dapibus leo pellentesque lobortis. Duis nec eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer scelerisque ipsum vel orci. Aliquam ac mauris. Aenean vulputate consectetuer erat. Sed nec nisi sit amet neque porta auctor. In in est. Suspendisse a velit. In hac habitasse platea dictumst. Nam at pede vel nulla pulvinar hendrerit. Nullam vitae nunc dapibus leo pellentesque lobortis. Duis nec eros. </p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer scelerisque ipsum vel orci. Aliquam ac mauris. Aenean vulputate consectetuer erat. Sed nec nisi sit amet neque porta auctor. In in est. Suspendisse a velit. In hac habitasse platea dictumst. Nam at pede vel nulla pulvinar hendrerit. Suspendisse rhoncus. Nulla eros est, pellentesque in, tincidunt nec, dapibus at, turpis. Suspendisse tincidunt cursus eros. Maecenas lacus tellus, fringilla vitae, bibendum sit amet, posuere in, tellus. Curabitur libero nunc, vehicula sit amet, placerat lacinia, pretium at, lectus. </p>
</div>
</div>
</div>
<div class="cleaner"></div>
<div id="Bottom">
<p class="down">Copyright © 2007, <a href="http://www.sunlight.cz">Design by: Sunlight webdesign</a></p>
<div class="down2"> </div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Related examples in the same category