abc-company
<!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">
<head>
<title>ABC Company</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
vertical-align: baseline;
background: transparent;
}
body {
background: #dde0dd url(abc-company-images/bg.jpg) repeat-x top;
font: normal 14px/24px Arial, Helvetica, sans-serif;
color: #171817;
padding-bottom: 20px;
}
a {
color: #112002;
}
a:hover {
color: #569814;
}
p {
margin: 20px 0;
}
#header {
width: 100%;
height: 170px;
background: url(abc-company-images/header-bg.jpg) no-repeat center top;
}
#headerInner {
width: 960px;
height: 130px;
margin: 0 auto;
}
h1 img {
margin: 11px 0 0 5px;
}
#nav {
width: 960px;
height: 40px;
margin: 0 auto;
}
#nav ul {
width: 960px;
height: 40px;
list-style: none;
}
#nav li {
height: 40px;
float: left;
}
#nav li a {
width: 190px;
height: 39px;
line-height: 39px;
background: #959695;
color: #171817;
border-top: solid 1px #787a78;
border-right: solid 1px #bdbebd;
border-left: solid 1px #787a78;
display: block;
text-align: center;
text-decoration: none;
}
#nav li a:hover {
text-decoration: underline;
}
#nav li a.active {
height: 40px;
background: #356406;
color: #fff;
border: solid 1px #224003;
border-bottom: none;
}
#wrapper {
width: 960px;
background: #fff;
border: solid 1px #cccfcc;
margin: 39px auto 0;
}
#teaser {
width: 900px;
height: 68px;
background: url(abc-company-images/teaser-bg.jpg) repeat-x top;
margin: 10px;
padding: 10px 20px;
border: solid 1px #646464;
}
#teaser p {
width: 635px;
float: left;
font-size: 16px;
margin: 10px 0 0 0;
display: inline;
}
#teaser img {
float: right;
margin-top: 8px;
}
.largeText {
font-size: 20px;
}
#featured {
width: 900px;
height: 212px;
background: #3c3934 url(abc-company-images/featured-bg.jpg) repeat-x top;
margin: 10px;
padding: 10px 20px;
border: solid 1px #312f2b;
}
h2 {
width: 670px;
font-size: 30px;
font-weight: normal;
color: #f8fcf8;
margin: 10px 0;
}
#featured p {
width: 670px;
float: left;
font-size: 16px;
line-height: 24px;
color: #cfd1cf;
margin: 0;
}
.featured-button {
margin: 30px 45px 0 0;
}
.featured-icon {
float: right;
margin: 0 36px 0 0;
display: inline;
}
#mainContent {
width: 580px;
float: left;
display: inline;
margin: 30px 30px;
}
h3 {
font-size: 18px;
font-weight: normal;
color: #112002;
}
#sidebar {
width: 290px;
float: right;
display: inline;
margin: 30px 30px 30px 0;
}
h4 {
height: 26px;
line-height: 26px;
font-size: 18px;
font-weight: normal;
color: #112002;
padding-left: 40px;
background: url(abc-company-images/news-icon.png) no-repeat left center;
}
h5 {
font-size: 14px;
font-weight: normal;
color: #112002;
margin: 15px 0 0 0;
}
h5 a {
text-decoration: none;
}
.small-text {
font-size: 12px;
color: #43433e;
margin: -5px 0 0 0;
}
.clear {
clear: both;
}
#footer {
width: 960px;
margin: 0 auto;
padding: 20px 0;
}
#footer ul {
list-style-type: none;
}
#footer li {
float: left;
}
#footer li a {
margin-left: 30px;
}
</style>
<!--[if lt IE 7]><script type="text/javascript" src="unitpngfix.js"></script><![endif]-->
</head>
<body>
<div id="header">
<div id="headerInner">
<h1><a href="#"><img src="abc-company-images/logo.png" alt="" width="213" height="119" /></a></h1>
</div>
<div id="nav">
<ul>
<li><a class="active" href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Case Studies</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
<div id="wrapper">
<div id="teaser">
<p><span class="largeText">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span><br />
Pellentesque non enim in lectus rhoncus ultricies mauris sodales fermentum.</p>
<a href="#"><img src="abc-company-images/get-in-touch-button.png" alt="" width="262" height="52" /></a> </div>
<div id="featured"> <img class="featured-icon" src="abc-company-images/chart-icon.png" alt="" width="178" height="200" />
<h2>Sed Pharetra Varius Laoreet Mauris Scelerisque</h2>
<p>Fusce iaculis rhoncus accumsan. Vivamus semper nisl non libero iaculis quis vehicula lorem porta. Praesent lobortis volutpat sapien, a facilisis lorem consectetur et. Etiam et metus nec augue convallis lacinia. Morbi sagittis lorem non diam feugiat faucibus. In tempor tincidunt neque, sed congue ligula vulputate a.</p>
<a href="#"><img class="featured-button" src="abc-company-images/services-button.png" alt="" width="130" height="35" /></a> <a href="#"><img class="featured-button" src="abc-company-images/testimonials-button.png" alt="" width="130" height="35" /></a> </div>
<div id="mainContent">
<h3>Lorem Ipsum Dolor Sit Amet Consectetur Adipiscing Elit</h3>
<p>Pellentesque non enim in lectus rhoncus ultricies. Mauris sodales fermentum vulputate. Sed ut convallis magna. Aliquam ullamcorper ornare sem sit amet pharetra. Nunc vitae ante nulla, in consequat felis. Nam eget nisl enim, quis dapibus sapien. Ut semper magna in dui feugiat accumsan. Nunc eget arcu lorem. Curabitur ultrices, odio a mollis aliquam, tellus nunc bibendum quam, eget molestie justo ipsum vitae justo. In et varius sem.</p>
<p>Sed pharetra varius laoreet. Mauris scelerisque diam ut nisl volutpat consectetur. Fusce iaculis rhoncus accumsan. Vivamus semper nisl non libero iaculis quis vehicula lorem porta. Praesent lobortis volutpat sapien, a facilisis lorem consectetur et. Etiam et metus nec augue convallis lacinia. Morbi sagittis lorem non diam feugiat faucibus. In tempor tincidunt neque, sed congue ligula vulputate a. Integer sagittis, lectus ac consectetur egestas, sem eros rutrum sem, at pharetra purus nulla sed ligula. Sed bibendum feugiat suscipit. Pellentesque at mi magna, eu convallis mi.</p>
</div>
<div id="sidebar">
<h4>Company News</h4>
<h5><a href="#">Recent Company News Item Title</a></h5>
<p class="small-text">January 5, 2010</p>
<h5><a href="#">Recent Company News Item Title</a></h5>
<p class="small-text">December 27, 2009</p>
<h5><a href="#">Recent Company News Item Title</a></h5>
<p class="small-text">December 17, 2009</p>
<h5><a href="#">Recent Company News Item Title</a></h5>
<p class="small-text">December 4, 2009</p>
<h5><a href="#">Recent Company News Item Title</a></h5>
<p class="small-text">November 21, 2009</p>
</div>
<div class="clear"></div>
</div>
<div id="footer">
<ul id="footerNav">
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Case Studies</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Testimonials</a></li>
</ul>
<div style="float:right;">Design by <a href="http://designm.ag/">DESIGNM.AG</a></div>
</div>
</body>
</html>
Related examples in the same category