bed-and-breakfast
<!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>Bed & Breakfast</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
/* CSS Document */
body{padding:0px; margin:0px; background:#ddcfb5; color:#969686; font:10px/14px Tahoma, sans-serif;}
div, p, ul, h2, h3, h4, img{padding:0px; margin:0px;}
ul{list-style-type:none;}
.clear {clear: both; margin: 0px; height:0}
p a{font:10px/14px Tahoma, sans-serif; color:#a06916; text-decoration:underline;}
p a:hover{ color:#000; text-decoration:none;}
p a.a2{font:10px/14px Tahoma, sans-serif; color:#969686; text-decoration:underline;}
p a.a2:hover{ color:#000; text-decoration:none;}
.headline{font:12px/14px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#3f3128; font-weight:bold}
#container{width:775px; position:relative; margin:0 auto;}
/* HEADER */
#header{width:775px; height:287px; position:relative; background:url(bed-and-breakfast-images/b_header.jpg) 0 0 no-repeat}
#header img#logo{position:absolute; top:27px; left:71px}
#header img#slogan{position:absolute; top:170px; left:73px}
#header ul.menu{position:absolute; top:32px; left:341px; width:420px}
#header ul.menu li{height:23px; margin-right:17px; float:left}
#header ul.menu li a{height:23px; display:block; text-indent:-20000px; }
#header ul.menu li a:hover{height:23px;}
#header ul.menu li.btn_1 a{width:33px; background:url(bed-and-breakfast-images/btn_1.gif) 0 0 no-repeat; }
#header ul.menu li.btn_1 a:hover{width:33px; background:url(bed-and-breakfast-images/btn_1_over.gif) 0 0 no-repeat;}
#header ul.menu li.btn_2 a{width:35px; background:url(bed-and-breakfast-images/btn_2.gif) 0 0 no-repeat; }
#header ul.menu li.btn_2 a:hover{width:35px; background:url(bed-and-breakfast-images/btn_2_over.gif) 0 0 no-repeat;}
#header ul.menu li.btn_3 a{width:49px; background:url(bed-and-breakfast-images/btn_3.gif) 0 0 no-repeat; }
#header ul.menu li.btn_3 a:hover{width:49px; background:url(bed-and-breakfast-images/btn_3_over.gif) 0 0 no-repeat;}
#header ul.menu li.btn_4 a{width:46px; background:url(bed-and-breakfast-images/btn_4.gif) 0 0 no-repeat; }
#header ul.menu li.btn_4 a:hover{width:46px; background:url(bed-and-breakfast-images/btn_4_over.gif) 0 0 no-repeat;}
#header ul.menu li.btn_5{margin-right:0}
#header ul.menu li.btn_5 a{width:52px; background:url(bed-and-breakfast-images/btn_5.gif) 0 0 no-repeat; }
#header ul.menu li.btn_5 a:hover{width:52px; background:url(bed-and-breakfast-images/btn_5_over.gif) 0 0 no-repeat;}
#header ul.menu li.line{width:2px; background:url(bed-and-breakfast-images/line_m.gif) 0 0 no-repeat}
/* CONTENT */
#content{width:675px; position:relative; clear:both; background:#fff; margin-left:50px}
#leftPan{width:335px; float:left; margin:21px 25px 0 28px; display:inline}
#rightPan{width:265px; float:left; margin:21px 0 0 0;}
#welcome{margin-bottom:20px}
#welcome h2{height:32px; position:relative; background:url(bed-and-breakfast-images/h_welcome.gif) 0 0 no-repeat; margin-bottom:10px}
#welcome img{float:left; margin-right:11px; margin-left:3px;}
#welcome p{margin-left:3px}
#welcome p#side{float:left; width:240px; margin-left:0}
#welcome p#side span{display:block; margin-bottom:8px}
.clear#welClear{height:6px}
#services{margin-bottom:20px}
#services h2{height:32px; position:relative; background:url(bed-and-breakfast-images/h_services.gif) 0 0 no-repeat; margin-bottom:10px}
#services ul li{font:11px/14px "Trebuchet MS", Arial, Helvetica, sans-serif; background:url(bed-and-breakfast-images/arrow.jpg) 0 2px no-repeat; padding-left:20px; height:26px;}
#services ul li a{color:#3f3128; text-decoration:underline;}
#services ul li a:hover{color:#3f3128; text-decoration:none;}
#rooms{margin-bottom:16px}
#rooms h2{height:32px; position:relative; background:url(bed-and-breakfast-images/h_rooms.gif) 0 0 no-repeat; margin-bottom:10px}
#rooms img{float:left; margin-right:10px; margin-left:5px; display:inline}
#rooms p{margin-left:5px; margin-top:10px}
#rooms p#roomsSide{float:left; width:170px; margin-left:0; margin-top:0}
#rooms p#roomsSide span{ display:block; margin-bottom:8px}
#food h2{height:32px; position:relative; background:url(bed-and-breakfast-images/h_food.gif) 0 0 no-repeat; margin-bottom:10px}
#food img{float:left; margin-right:10px; margin-left:5px; display:inline}
#food p{margin-left:5px; margin-top:10px}
#food p#foodSide{float:left; width:170px; margin-left:0; margin-top:0}
#food p#foodSide span{ display:block; margin-bottom:8px}
/* FOOTER */
#footer{height:61px; clear:both; width:775px;}
#footer p{padding: 15px 0 0 0; font:11px/16px Tahoma, sans-serif; font-weight:normal; text-align:center; color:#3f3128;}
#footer p a{font:11px/16px Tahoma, sans-serif; font-weight:normal; color:#3f3128; text-decoration:none; padding: 0 3px }
#footer p a:hover{text-decoration:underline; color:#3f3128}
</style>
</head>
<body>
<div id="container">
<div id="header"> <img src="bed-and-breakfast-images/logo.jpg" width="171" height="30" alt="" id="logo"/> <img src="bed-and-breakfast-images/slogan.jpg" width="457" height="38" alt="" id="slogan"/>
<ul class="menu">
<li class="btn_1"><a href="#">home</a></li>
<li class="line"></li>
<li class="btn_2"><a href="#">about</a></li>
<li class="line"></li>
<li class="btn_3"><a href="#">services</a></li>
<li class="line"></li>
<li class="btn_4"><a href="#">booking</a></li>
<li class="line"></li>
<li class="btn_5"><a href="#">contacts</a></li>
</ul>
</div>
<div id="content">
<div id="leftPan">
<div id="welcome">
<h2></h2>
<img src="bed-and-breakfast-images/img_welcome.jpg" width="66" height="66" alt="" />
<p id="side"><span class="headline">Nam justo augue, dictum a, hendrerit!</span> Fusce interdum. Maecenas eu elit sed nulla dignissim interdum. Sed laoreet. Aenean pede. Phasellus porta. Ut dictum nonummy diam. Cras ullamcorper nibh.</p>
<div class="clear" id="welClear"></div>
<p><a href="#">Fusce interdum. Maecenas eu elit sed nulla dignissim interdum. Sed laoreet. Aenean pede. Phasellus porta. Ut dictum nonummy diam.</a></p>
</div>
<div id="services">
<h2></h2>
<ul>
<li><a href="#">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam </a></li>
<li><a href="#">eu nulla. Donec lobortis purus vel urna. Nunc laoreet lacinia </a></li>
<li><a href="#">nunc. In volutpat sodales ipsum. Sed vestibulum. Integer in </a></li>
<li><a href="#">ante. Sed posuere ligula rhoncus erat. Fusce urna dui, </a></li>
<li><a href="#">nunc. In volutpat sodales ipsum. Sed vestibulum. Integer in </a></li>
</ul>
</div>
</div>
<div id="rightPan">
<div id="rooms">
<h2></h2>
<img src="bed-and-breakfast-images/img_rooms.jpg" width="66" height="66" alt="" />
<p id="roomsSide"><span class="headline">Fusce urna dui, sollicitudin ac, pulvinar quis, tincidunt </span> <a href="#" class="a2">Fusce interdum. Maecenas eu elit sed nulla dignissim interdum. Sed laoreet. </a></p>
<div class="clear"></div>
<p>Fusce interdum. Maecenas eu elit sed nulla dignissim interdum. Sed laoreet. Aenean pede. Phasellus porta. </p>
</div>
<div id="food">
<h2></h2>
<img src="bed-and-breakfast-images/img_food.jpg" width="66" height="66" alt="" />
<p id="foodSide"><span class="headline">Fusce urna dui, sollicitudin ac, pulvinar quis, tincidunt </span> <a href="#" class="a2">Fusce interdum. Maecenas eu elit sed nulla dignissim interdum. Sed laoreet. </a></p>
<div class="clear"></div>
<p>Fusce urna dui, sollicitudin ac, pulvinar quis, tincidunt et, risus. Quisque a nunc eget nibh interdum fringilla. Fusce dapibus odio in est. Nunc egestas mauris ac leo. Nullam orci. Fusce urna dui, sollicitudin ac, pulvinar quis</p>
</div>
</div>
<div class="clear"></div>
</div>
<div id="footer">
<p><a href="#">HOME PAGE</a> | <a href="#">ABOUT US</a> | <a href="#">SERVICES</a> | <a href="#">BOOKING</a> | <a href="#">SUPPORT</a> | <a href="#">NEWS</a> | <a href="#">CONTACTS</a><br/>
Copyright © Your Company Name | Design by <a href="http://freshtemplates.com/">Website Templates</a></p>
</div>
</div>
</body>
</html>
Related examples in the same category