Saturday, January 11, 2014

HTML code to Design front Page of any hotel

<!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>
<title>KHYBERS GUEST House</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="layout.css" rel="stylesheet" type="text/css" />
<script src="maxheight.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/s3Slider.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('#slider').s3Slider({
            timeOut: 3000
        });
    });
</script>

<script language="javascript" type="text/javascript">
function clearText(field)
{
    if (field.defaultValue == field.value) field.value = '';
    else if (field.value == '') field.value = field.defaultValue;
}
</script>
</head>
<body id="page1" onload="new ElementMaxHeight();">
<div id="main">
  <!-- header -->
  <div id="header">
    <div class="row-1">
      <div class="wrapper">
        <div class="logo">
          <h1><a href="#">KHYBERS GUEST HOUSE</a></h1>
          <em>KGH</em> <strong>True Luxury</strong> </div>
        <div class="phones">+923318983644<br />
          +923555179854 </div>
      </div>
    </div>
    <div class="row-2">
      <div class="indent">
        <!-- header-box begin -->
        <div class="header-box">
          <div class="inner">
            <ul class="nav">
              <li><a href="index.html" class="current">Home page</a></li>
              <li><a href="services.html">Services</a></li>
              <li><a href="gallery.html">Gallery</a></li>
              <li><a href="restaurant.html">Restaurant</a></li>
           
              <li><a href="booking.html">Booking</a></li>
            </ul>
          </div>
        </div>
        <!-- header-box end -->
      </div>
    </div>
  </div>
  <!-- content -->
  <div id="content">
    <div class="wrapper">
      <div class="aside maxheight">
        <!-- box begin -->
        <div class="box maxheight">
          <div class="inner">
            <h3>Reservation:</h3>
            <form action="#" id="reservation-form">
              <fieldset>
              <div class="field">
                <label>Check In:</label>
                <select class="select1">
                  <option>30</option>
                   <option>29</option>
                    <option>28</option>
                     <option>27</option>
                      <option>26</option>
                       <option>25</option>
                        <option>24</option>
                         <option>23</option>
                          <option>22</option>
                           <option>21</option>
                            <option>20</option>
                             <option>19</option>
                              <option>18</option>
                                <option>17</option>
                               <option>16</option>
                                <option>15</option>
                                 <option>14</option>
                                   <option>13</option>
                                    <option>12</option>
                                  <option>11</option>
                                   <option>10</option>
                                    <option>09</option>
                                     <option>08</option>
                                      <option>07</option>
                                       <option>06</option>
                                        <option>05</option>
                                          <option>04</option>
                                         <option>03</option>
                                          <option>02</option>
                                           <option>01</option>

                </select>
                <select class="select2">
                  <option>January 2013</option>
                  <option>feb 2013</option>
                  <option>mar 2013</option>
                  <option>Apr 2013</option>
                  <option>may 2009</option>
                  <option>june 2013</option>
                  <option>july 2013</option>
                  <option>aug 2013</option>
                  <option>sep 2013</option>
                  <option>oct 2013</option>
                  <option>nov 2013</option>
                  <option>Dec 2013</option>



                </select>
              </div>
              <div class="field"></br>
                <label>Check Out:</label>
                <select class="select1"></br>
                  <option>01</option>
                </select>
                <select class="select2"></br>
                  <option>May 2009</option></br>
                </select>
              </div></br></br>
              <div class="field"> Persons:</br>
                <input type="text" value="1"/></br>
               <label>Rooms</label>
                <input type="text" value="1"/>
              </div></br></br>
              <div class="button"><span><span><a href="#">Check Availability</a></span></span></div>
              </fieldset>
            </form>
          </div>
        </div>
        <!-- box end -->
      </div>
      <div class="content">
        <div class="indent">
          <h2>Khybers Guest House welcome you!</h2>
          <img class="img-indent png" alt="" src="images/1page-img1.png" />
          <p class="alt-top">Come alone or bring your family with you, stay here for a night or for weeks, stay here while on business trip or at some kind of conference - either way ourGues house is the best possible variant.</p>
          Feel free to contact us anytime in case you have any questions or concerns.
          <div class="clear"></div>
          <div class="line-hor"></div>
          <div class="wrapper line-ver">
            <div class="col-1">
              <h3>Special Offers</h3>
              <ul>
                <li>FREE wide-screen TV</li>
                <li>50% Discount for Restaraunt service</li>
                <li>30% Discount for 3 days+ orders</li>
                <li>FREE drinks and beverages in rooms</li>
                <li>Exclusive souvenirs</li>
              </ul>
              <div class="button"><span><span><a href="#">Order Now!</a></span></span></div>
            </div>
            <div class="col-2">
              <h3>Location</h3>
              <p>We are located in Jutial Gilgit-Baltistan, Pakistan.</p>
              <dl class="contacts-list">
                <dt>Jutial Gilgit</dt>
                <dd>+923318983644</dd>
                <dd>Email: khybersjan@gmail.com</dd>
              </dl>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- footer -->
  <div id="footer">
    <ul class="nav">
      <li><a href="#">Home</a>|</li>
      <li><a href="#">Services</a>|</li>
      <li><a href="#">Gallery</a>|</li>
      <li><a href="#">Restaurant</a>|</li>
   
      <li><a href="#">Booking</a></li>
    </ul>
    <div class="wrapper">
      <div class="fleft">Copyright &copy; 2013 Inayat Ali jan</a>. All Rights Reserved</div>
      <div class="fright">Designed by Inayat Ali Jan</div>
    </div>
  </div>
</div>
</body>
</html>

0 comments:

Post a Comment