travelcity
<!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=utf-8" />
<title>Travelcity a free template</title>
<style type='text/css'>
* {
margin-top: 0;
}
.clear{
clear:both;
}
.line{
border-bottom:1px solid #c9c9c9;
}
#wrapper{
width:780px;
margin:0 auto;
padding:0px 4px 0px 4px;
background:url(travelcity-images/bg.jpg) repeat-y;
}
#top{
background-image:url(travelcity-images/top800.jpg);
height:209px;
width:772px;
}
/* menu*/
#menu{
width:770px;
height:40px;
border:1px solid #1566cf;
background:url(travelcity-images/sfondo_menu.jpg) repeat-x;
}
#menu ul{
list-style:none;
margin-top:10px;
}
#menu li{
display:inline;
}
#menu a{
text-decoration:none;
display:block;
float:left;
padding:0px 5px 0px 5px ;
font: bold 100% Arial, Helvetica, sans-serif;
color:#FFF;
border-right:1px solid #15c2cf;
border-left:1px solid #159dcf;
}
#menu a.first{
border-right:1px solid #15c2cf;
border-left:0px solid #FFF;
}
#menu a.last{
border-left:1px solid #159dcf;
border-right:0px solid #FFF;
}
/*content*/
#content{
width:770px;
}
/*principal*/
#principal{
width:480px;
padding:10px;
float:left;
}
#section h5{
color:#2b77d4;
}
#section img{
border:1px solid #c1c1c1;
padding:1px;
margin-right:10px;
}
#section p{
width:270px;
float:left;
text-align:justify;
font-size:11px;
padding-bottom:10px;
border-bottom:1px solid #c1c1c1;
color:#606060;
}
#section .price{
text-align:center;
font-size:16px;
font-weight:bold;
color:#606060;
border-right:1px solid #c1c1c1;
line-height:23px;
}
#section .coll{
padding-left:15px;
}
.coll .reserve{
font-size:12px;
color:#2b77d4;
}
.coll .details{
font-size:12px;
color:#ffb600;
}
/*Sidebar*/
#sidebar{
width:229px;
height:auto;
float:left;
background-color:#fbecdd;
padding:20px;
}
.bord{
border:1px solid #c1c1c1;
padding:1px;
background-color:#FFF;
}
/*search*/
#search {
margin-top:10px;
}
#search input{
padding:2px;
margin:2px;
font-weight:bold;
border:1px solid #c1c1c1;
}
/*link*/
#categories ul{
list-style:none;
margin:0;
padding:10px;
border:1px solid #c1c1c1;
background:#e8e8e8 url(travelcity-images/back_menu_side.jpg) no-repeat bottom;
}
#categories h3{
background-color:#e8e8e8;
color:#159dcf;
font: bold 100% tahoma;
padding:5px 0px 0px 5px;
}
#categories li{
display:block;
border-bottom:1px dotted #FFF;
}
#categories a{
text-decoration:none;
color:#575757;
font-size:12px;
height:20px;
background:url(travelcity-images/bg_list_marker.gif) left 4px no-repeat; padding-left:25px;}
}
#categories a:hover{
text-decoration:underline;
}
/*offerte*/
#information{
margin-top:10px;
background-color:#fff;
}
#information ul{
list-style:none;
margin:0;
padding:10px;
border:1px solid #c1c1c1;
background:#fff url(travelcity-images/back_information_side.jpg) no-repeat center;
}
#information h3{
background-color:#fff;
color:#159dcf;
font: bold 100% tahoma;
padding:5px 0px 0px 5px;
}
#information li{
display:block;
border-bottom:1px dotted #000;
}
#information a{
text-decoration:none;
color:#575757;
font-size:12px;
height:20px;
background:url(travelcity-images/bg_list_marker.gif) left 4px no-repeat;
padding-left:25px;
}
#information a:hover{
text-decoration:underline;
}
/*footer*/
#footer{
background-color:#c1c1c1;
width:770px;
height:20px;
color:#FFF;
font-weight:bold;
font-size:10px;
line-height:20px;
}
</style>
<meta name="keywords" content="" />
<meta name="description" content="" />
</head>
<body>
<div id="wrapper">
<div id="top">
</div>
<!--fine del top -->
<div id="menu">
<ul>
<li><a href="#" class="first">Home</a></li>
<li><a href="#" >Contact</a></li>
<li><a href="#" >About</a></li>
<li><a href="#" class="last">Support</a></li>
</ul>
</div>
<!--fine del menu -->
<div id="content">
<div id="principal">
<table id="section">
<!--start first session -->
<tr>
<td rowspan="2">
<img src="travelcity-images/example.jpg" alt="" />
</td>
<td colspan="2">
<h5>Sed ut perspiciatis</h5>
<p>Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium</p>
</td>
</tr>
<tr>
<td class="price">?30,00</td>
<td class="coll">
<a href="#" class="reserve">>> Reserve</a><br />
<a href="#" class="details">>> Details</a>
</td>
</tr>
<tr>
<td class="line" style="height:1px;" colspan="3">
</td>
</tr>
<!--inizio second session -->
<tr>
<td rowspan="2">
<img src="travelcity-images/example1.jpg" alt="" />
</td>
<td colspan="2">
<h5>Sed ut perspiciatis</h5>
<p>Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium</p>
</td>
</tr>
<tr>
<td class="price">?30,00</td>
<td class="coll">
<a href="#" class="reserve">>> Reserve</a><br />
<a href="#" class="details">>> Details</a>
</td>
</tr>
<tr>
<td class="line" style="height:1px;" colspan="3">
</td>
</tr>
<!--start third session -->
<tr>
<td rowspan="2">
<img src="travelcity-images/example.jpg" alt="" />
</td>
<td colspan="2">
<h5>Sed ut perspiciatis</h5>
<p>Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium</p>
</td>
</tr>
<tr>
<td class="price">?30,00</td>
<td class="coll">
<a href="#" class="reserve">>> Reserve</a><br />
<a href="#" class="details">>> Details</a>
</td>
</tr>
<tr>
<td class="line" style="height:1px;" colspan="3">
</td>
</tr>
</table>
</div>
<!--fine principal -->
<div id="sidebar">
<div id="search">
<form id="searchform" method="get" action="">
<p><input id="searchfield" type="text" name="q" value="" />
<input id="searchsubmit" type="submit" value="Search" /></p>
</form>
</div>
<!--fine search -->
<div class="bord">
<div id="categories">
<ul>
<li><h3>Categories</h3></li>
<li><a href="#">Semper vestibulum</a></li>
<li><a href="#">Vestibulum luctus</a></li>
<li><a href="#">Integer rutrum</a></li>
<li><a href="#">Etiam malesuada</a></li>
<li><a href="#">Elementum facilisis</a></li>
<li><a href="#">Ut tincidunt</a></li>
<li><a href="#">Odio sagittis</a></li>
<li><a href="#">Semper vestibulum</a></li>
<li><a href="#">Vestibulum luctus</a></li>
<li><a href="#">Integer rutrum</a></li>
<li><a href="#">Etiam malesuada</a></li>
<li><a href="#">Elementum facilisis</a></li>
<li><a href="#">Ut tincidunt</a></li>
<li><a href="#">Odio sagittis</a></li>
</ul>
</div>
</div>
<!--fine link -->
<div id="information">
<ul>
<li><h3>Information</h3></li>
<li><a href="#">Semper vestibulum</a></li>
<li><a href="#">Vestibulum luctus</a></li>
<li><a href="#">Integer rutrum</a></li>
<li><a href="#">Etiam malesuada</a></li>
<li><a href="#">Elementum facilisis</a></li>
<li><a href="#">Ut tincidunt</a></li>
<li><a href="#">Odio sagittis</a></li>
</ul>
</div>
<!--fine information -->
</div>
<!--fine sidebar -->
<div class="clear"></div>
</div>
<!-- fine content -->
<div id="footer">
You're free to use it for both commercial or personal use. I only ask that you link back to my site in some way. Enjoy :)
<a href="http://www.ischiahotel.info" title="hotel ischia">Hotel ischia</a>
</div>
</div>
<!--fine wrapper -->
</body>
</html>
Related examples in the same category