transport
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Transport template</title>
<style type='text/css'>
html, body, h1, h2, h3, h4 {
margin: 0;
padding: 0;
}
h1 img {
display: block;
}
img {
border: 0;
}
a {
color: #464544;
}
a:hover {
color: #666666;
}
.left {
float: left;
}
.right {
float: right;
}
.more {
text-align: right;
}
.clear {
clear: both;
}
body {
background: url(transport-images/page_bg.gif);
text-align: center;
font: 12px arial, sans-serif;
color: #464544;
padding-bottom: 10px;
}
#outer {
background: top left url(transport-images/page_bg_top.gif) repeat-x;
padding-top: 20px;
}
/** layout **/
#wrapper {
text-align: left;
margin: auto;
width: 798px;
position: relative;
background: url(transport-images/body_bg.gif) repeat-y;
}
#body-bot {
background: bottom left url(transport-images/body_bg_bot.jpg) no-repeat;
}
#body-top {
background: url(transport-images/body_bg_top.gif) no-repeat;
min-height: 870px;
_height: 870px;
padding-bottom: 14px;
}
/** logo **/
#logo {
width: 25em;
text-align: center;
}
#logo h1 {
color: #6F7033;
font: 22px "Arial narrow", arial, sans-serif;
line-height: 1;
padding-top: 0.8em;
}
#logo p {
color: #464544;
font: 16px "Arial narrow", arial, sans-serif;
margin: 0;
}
/** nav **/
#nav {
margin-top: 50px;
}
#nav li {
list-style: none;
float: left;
background: left center url(transport-images/arr.gif) no-repeat;
padding-left: 15px;
padding-right: 20px;
}
#nav a {
color: #000;
text-decoration: none;
font-weight: bold;
}
#nav a:hover {
color: #FFA405;
}
/** page title **/
#page-title{
width:400px;
}
#page-title span{
position:relative;
top:25px;
left:55px;
}
#page-title p{
position:relative;
top:25px;
left:225px;
font-weight:bold;
}
/** green box **/
#gbox {
width: 431px;
margin-top: 51px;
margin-left: 22px;
}
#gbox-bg { background: url(transport-images/green_bg.gif) repeat-y; }
#gbox-grd { background: bottom url(transport-images/green_grad_bot.jpg) repeat-x; }
#gbox-top { background: url(transport-images/green_top.gif) no-repeat; height: 24px; }
#gbox-bot { background: bottom left url(transport-images/green_bot.gif) no-repeat; height: 23px; }
#gbox-grd {
min-height: 300px;
padding: 2px 24px;
}
#gbox h2 {
font: bold 14px arial, sans-serif;
color: #000;
margin: 0;
}
#gbox p {
margin: 1em 0;
}
#features {
background: #EDF0C4;
padding: 14px;
margin: 0 -14px;
}
#features h2 {
position: relative;
}
#features ul {
float: left;
width: 49%;
margin: 1em 0;
padding: 0;
}
#features li {
list-style: square;
margin-left: 12px;
}
/** footer **/
#newsletter, #events {
float: left;
width: 49%;
margin-top: 1em;
}
#newsletter h2, #events h2 {
color: #fff;
}
#newsletter .text {
width: 125px;
}
#newsletter form {
margin: 0.3em 0 0.6em 0;
}
#newsletter p {
margin: 0.3em 0;
font-size: 10px;
}
#newsletter a {
color: #000;
}
#events {
margin-left: 6%;
width: 38%;
}
#events ul {
margin: 0.3em 0;
padding: 0;
}
#events li {
list-style: none;
margin: 0;
padding: 0;
}
/** grey box **/
#greybox {
#background: url(transport-images/grey_bg.gif) repeat-y;
width: 331px;
position: absolute;
top: 192px;
left: 457px;
}
#greybox-top {
# background: url(transport-images/grey_img.jpg) no-repeat;
padding-left: 165px;
padding-top: 18px;
}
#greybox-bot {
background: bottom left url(transport-images/grey_bot.gif) no-repeat;
padding-bottom: 4px;
}
#greybox h2 {
font: bold 12px arial, sans-serif;
color: #E4EE6A;
line-height: 1.5;
}
#greybox a {
color: #fff;
}
#copyright {
font-size: 9px;
color: #fff;
margin-top: 60px;
}
</style>
</head>
<body>
<div id="outer">
<div id="wrapper">
<div id="body-bot">
<div id="body-top">
<div id="logo">
<h1>TRANSPORT COMPANY</h1>
<p>We care about your cargo</p>
</div>
<div id="nav">
<ul>
<li><a href="http://www.freewebsitetemplates.com">MAIN PAGE</a></li>
<li><a href="http://www.freewebsitetemplates.com">TRACKING</a></li>
<li><a href="http://www.freewebsitetemplates.com">RATES</a></li>
<li><a href="http://www.freewebsitetemplates.com">PICK UP</a></li>
<li><a href="http://www.freewebsitetemplates.com">SERVICES</a></li>
<li><a href="http://www.freewebsitetemplates.com">CONTACT US</a></li>
</ul>
<div class="clear"> </div>
</div>
<div id="page-title">
<span>
<h2 style="color:#4f7202;">MOST CONVINIENT & RELIABLE</h2>
<h2 style="color:#4f7202;">TRANSPORT SERVICES</h2>
</span>
<p>
<a href="http://www.freewebsitetemplates.com">Click here for details</a>
</p>
</div>
<div id="gbox">
<div id="gbox-top"> </div>
<div id="gbox-bg">
<div id="gbox-grd">
<h2>WELCOME TO OUR TRUCK TRACKING COMPANY</h2>
<p>You can find some <a href="http://www.webhostingservices.us/">web hosting services</a> which are also a need for website building which are listed in web hosting search.</p>
<p>You can remove any link to our websites from this template you're free to use the template without linking back to us.</p>
<p>This is just a place holder so you can see how the site would look like.</p>
<p>This is a template designed by free website templates for you for free you can replace all the text by your own text.</p>
<div id="features">
<h2>FEATURED SERVICES</h2>
<ul>
<li><a href="http://www.freewebsitetemplates.com">Free Website Templates</a></li>
<li><a href="http://www.freewebsitetemplates.com/forum/">The forum</a></li>
<li><a href="http://www.justwebtemplates.com">Just Web Templates</a></li>
<li><a href="http://www.templatebeauty.com">Template Beauty</a></li>
</ul>
<ul>
<li><a href="http://www.templatebeauty.com">Template Beauty</a></li>
<li><a href="http://www.freewebsitetemplates.com">Free Website Templates</a></li>
<li><a href="http://www.freewebsitetemplates.com/forum/">The forum</a></li>
<li><a href="http://www.justwebtemplates.com">Just Web Templates</a></li>
</ul>
<div class="clear"> </div>
</div>
<div id="newsletter">
<h2>NEWSLETTER</h2>
<form action="" method="get" accept-charset="utf-8">
<input type="text" class="text" name="q" value="" id="some_name" />
<input type="submit" value="go">
</form>
<p><a href="http://www.freewebsitetemplates.com">Click here for details</a></p>
</div>
<div id="events">
<h2>FEATURED EVENTS</h2>
<ul>
<li><a href="http://www.templatebeauty.com">Template Beauty</a></li>
<li><a href="http://www.freewebsitetemplates.com">Free Website Templates</a></li>
<li><a href="http://www.freewebsitetemplates.com/forum/">The forum</a></li>
<li><a href="http://www.justwebtemplates.com">Just Web Templates</a></li>
</ul>
</div>
<div class="clear"> </div>
</div>
</div>
<div id="gbox-bot"> </div>
</div>
<div id="greybox" >
<img src="transport-images/pic_1.jpg" width="164" height="167"></td><td> <img src="transport-images/pic_2.jpg" width="164" height="167">
<img src="transport-images/pic_3.jpg" width="164" height="167"></td><td> <img src="transport-images/pic_4.jpg" width="164" height="167">
<img src="transport-images/pic_5.jpg" width="164" height="167"></td><td> <img src="transport-images/pic_6.jpg" width="164" height="167">
<img src="transport-images/pic_7.jpg" width="164" height="167"></td><td> <img src="transport-images/pic_8.jpg" width="164" height="167">
</div>
</div>
</div>
</div>
</div>
<div id="copyright">
Hosting by <a href="http://www.webhostingservices.us/">Web Hosting Services</a>.
</div>
</body>
</html>
Related examples in the same category