travelling-train : Travel « Templates « HTML / CSS

travelling-train
  

<!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>Travelling Train</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
#Container {
  left: 0px;
  top: 0px;
  width: 760px;
  position: relative;
  margin-right: auto;
  margin-left: auto;
}

#header_ {
  float: left;
  left: 0px;
  top: 0px;
  width: 760px;
  height: 388px;
  background-image: url('travelling-train-images/header.jpg');
}
#header_ ul.navi{
  width: 750px;
  display: block;
  position: absolute;
  top: 347px;
  left: 58px;
  padding: 0;
  margin: 0;
  background: none;
}
#header_ ul.navi li{
  border-width: 1px;
  background: url(travelling-train-images/saparation.gif) no-repeat right;
  height: 22px;
  padding: 0 18px 0 5px;
  margin: 0;
  display: block;
  float: left;
}
#header_ ul.navi li a{
  font: 14px/21px Arial, Helvetica, sans-serif;
  color: #FFFFFF;
  text-decoration: none;
  text-indent: 0px;
  padding: 0 0 0 33px;
  font-weight: bold;
  margin: 0;
  width: inherit;
  letter-spacing: -1px;
  background-repeat: no-repeat;
  background-image: url('travelling-train-images/button.png');
}
#header_ ul.navi li a:hover{
  color: #FFFF99;
  text-decoration: none;
  background-repeat: no-repeat;
  background-image: url('travelling-train-images/button_over.png');
}
#left_ {
  float: left;
  left: 0px;
  top: 388px;
  width: 248px;
  background-image: url('travelling-train-images/left.jpg');
  background-repeat: no-repeat;
}
#left_ h2{
  font: 26px/24px "Calisto MT";
  color: #CCFF66;
  font-weight: normal;
  display: block;
  letter-spacing: -1px;
  word-spacing: 0em;
  text-indent: 0px;
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 10px;
  padding-top: 8px;
  padding-left: 65px;
}
#left_ p{
  background: no-repeat;
  color: #DDE6C8;
  padding: 0 0 0 65px;
  width: 160px;
  display: block;
  font: 12px/18px Tahoma;
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  letter-spacing: 0px;
}
#left_ p span{
  color: #99CC00;
  font-weight: bold;
  font-size: 15px;
  letter-spacing: 0px;
}
#left_ p span.bg{
  color: #799fbb;
}
#left_ p a{
  font: 13px/12px Tahoma;
  font-weight: normal;
  color: #FFCC00;
  text-decoration: underline;
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
}
#left_ p a:hover{
  background: no-repeat;
  color: #FFFF99;
  font-weight: normal;
  text-decoration: underline;
}

#right_ {
  float: left;
  left: 248px;
  top: 388px;
  width: 512px;
  background-image: url('travelling-train-images/right.jpg');
}
#right_ h2{
  font: 29px/24px "Calisto MT";
  color: #CCFF66;
  font-weight: normal;
  display: block;
  letter-spacing: -1px;
  word-spacing: 0em;
  text-indent: 0px;
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 10px;
  padding-top: 10px;
  padding-left: 10px;
}
#right_ p{
  background: no-repeat;
  color: #DDE6C8;
  padding: 0 0 0 10px;
  width: 460px;
  display: block;
  font: 12px/20px Tahoma;
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  letter-spacing: 0px;
}
#right_ p span{
  color: #99CC00;
  font-weight: bold;
  font-size: 15px;
  letter-spacing: 0px;
}
#right_ p span.bg{
  color: #799fbb;
}
#right_ p a{
  font: 13px/12px "trebuchet MS";
  font-weight: normal;
  color: #FFCC00;
  text-decoration: underline;
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
}
#right_ p a:hover{
  background: no-repeat;
  color: #FFFF66;
  font-weight: normal;
  text-decoration: underline;
}

#footer1_ {
  float: left;
  left: 0px;
  top: 600px;
  width: 760px;
  height: 23px;
  background-image: url('travelling-train-images/footer1.jpg');
}
#footer2_ {
  float: left;
  left: 0px;
  top: 623px;
  width: 760px;
  background-image: url('travelling-train-images/footer2.jpg');
}

#footer2_  p{
  background: no-repeat;
  color: #DDE6C8;
  padding: 0;
  margin: 0 0 0 45px;
  width: 670px;
  display: block;
  font: 13px/17px Tahoma;
  text-align: center;
}
#footer2_  p span{
  color: #DDE6C8;
  font-weight: bold;
}
#footer2_  p span.bg{
  color: #799fbb;
}
#footer2_  p a{
  font: 13px/12px Tahoma;
  font-weight: bold;
  color: #FFCC00;
  text-decoration: underline;
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
}
#footer2_  p a:hover{
  background: no-repeat;
  color: #FFFF66;
}

#footer3_ {
  float: left;
  left: 0px;
  top: 673px;
  width: 760px;
  height: 27px;
  background-image: url('travelling-train-images/footer3.jpg');
}
body {
  margin: 0px;
  background-image: url('travelling-train-images/bg.jpg');
  background-repeat: repeat-x;
  background-color: #475810;
}

</style>


</head>
<body>
<div id="Container">
  <div id="header_"> &nbsp;
    <ul class="navi">
      <li><a href="http://www.free-css.com/">Home Page</a></li>
      <li><a href="http://www.free-css.com/">About Us</a></li>
      <li><a href="http://www.free-css.com/">Contact Us</a></li>
      <li><a href="http://www.free-css.com/">Photos Gallery</a></li>
      <li><a href="http://www.free-css.com/">Latest Events</a></li>
    </ul>
  </div>
  <div id="left_">
    <h2>latest events</h2>
    <p><span>Saturday,</span> Dorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh commodo conse. </p>
    <p>&nbsp;</p>
    <p>Donsectetuer adipiscing elit, sed diam nonummy nibh commodo consequat.</p>
    <p>&nbsp;</p>
    <p><a href="http://www.free-css.com/">read more</a></p>
    <p>&nbsp;</p>
    <p><span>Saturday,</span> Dorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh commdo conseq. </p>
    <p>&nbsp;</p>
  </div>
  <div id="right_">
    <h2>Welcome To Travelling Train!</h2>
    <p><span class="style1">Travelling Train</span> is a W3C compliance XHTML template designed by WebTemplatePortal.com. This template is designed 100% tableless and tested and compatible with major browser. You're freely to modify this template to suit your needs, we only ask you not to remove the link back to WebTemplatePortal.com. </p>
    <p>&nbsp;</p>
    <p>This template is under the <a target="_blank" href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attribution 2.5</a> License. That's mean you can modify the design to suit your needs but you must provided a link back to WebTemplatePortal.com </p>
    <p>&nbsp;</p>
    <p>Download more free XHTML templates at WebTemplatePortal.com.</p>
    <p>&nbsp;</p>
    <p>Downloads 1000's of premium web templates at our sister site at DeonixDesign.com.</p>
  </div>
  <div id="footer1_"> &nbsp;</div>
  <div id="footer2_">
    <p>&nbsp;</p>
    <p>Designed by <a href="http://www.webtemplateportal.com/">WebTemplatePortal.com</a><br />
      This template is under the <a target="_blank" href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attribution 2.5</a> License.<br />
      <br />
      <span>Adipiscing elit sed diam nonummy nibh commodo consequat sit amets. Sorem ipsum dolor sit amet, consectetuer adipiscing.</span></p>
    <p>&nbsp;</p>
    <p><a target="_blank" href="http://validator.w3.org/check?uri=referer"> <img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional" height="31" width="88" border="0" /></a></p>
    <p>&nbsp;</p>
  </div>
  <div id="footer3_"> &nbsp;</div>
</div>
</body>
</html>
Related examples in the same category

1.	metamorph_travelling
2.	travel-and-tour
3.	travel-company
4.	travel-portal
5.	travelagency
6.	travelcity
7.	SouthTravel
8.	travel 2