Untitled

<!DOCTYPE html>
<html>
<title>Ariyani Hotel</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Noto+Serif:400,700,400italic|Roboto+Condensed:400,300,700" rel="stylesheet" />

<style>
body,h1,h2,h3,h4,h5,h6 {font-family: "Raleway", Arial, Helvetica, sans-serif}
</style>
<body class="w3-light-grey">

<!-- Navigation Bar -->
<div class="bar white w3-large">
  <a href="#" class="bar-item w3-button w3-blue w3-mobile"><i class="fa fa-bed w3-margin-right"></i>Logo</a>
  <a href="#rooms" class="w3-bar-item w3-button  w3-blue w3-mobile">Rooms</a>
  <a href="#about" class="w3-bar-item w3-button w3-blue w3-mobile">About</a>
  <a href="#feedback" class="w3-bar-item w3-button w3-blue w3-mobile">Feedback</a>
  <a href="#rooms" class="w3-bar-item w3-button w3-right w3-blue w3-mobile">Book Now</a>
</div>
<!-- Header -->
<header class="w3-display-container w3-content" style="max-width:1500px;">

  <img class="w3-image" src="2.jpg" alt="The Hotel" style="min-width:1000px" width="1500" height="1000">

  <div class="w3-display-left w3-padding w3-col 16 m8">
    <div class="w3-container w3-red">
      <h2><i class="fa fa-bed w3-margin-right"></i>Booking Now!</h2>
    </div>
    <div class="w3-container w3-white w3-padding-16">
      <form action="adminbooking.jsp" target="_blank">
        <div class="w3-row-padding" style="margin:0 -16px;">
          <div class="w3-half w3-margin-bottom">
            <label><i class="fa fa-calendar-o"></i> Check In</label>
            <input class="w3-input w3-border" type="text" placeholder="DD MM YYYY" name="CheckIn" required>
          </div>
          <div class="w3-half">
            <label><i class="fa fa-calendar-o"></i> Check Out</label>
            <input class="w3-input w3-border" type="text" placeholder="DD MM YYYY" name="CheckOut" required>
          </div>
        </div>
        <div class="w3-row-padding" style="margin:8px -16px;">
          <div class="w3-half w3-margin-bottom">
            <label><i class="fa fa-male"></i> Adults</label>
            <input class="w3-input w3-border" type="number" value="1" name="Adults" min="1" max="6">
          </div>
          <div class="w3-half">
            <label><i class="fa fa-child"></i> Kids</label>
          <input class="w3-input w3-border" type="number" value="0" name="Kids" min="0" max="6">
          </div>

		  <div class="w3-row-padding" style="margin:0 -16px;">
          <div class="w3-half w3-margin-bottom">
		   <div class="w3-half">
            <label><i class="fa fa-bed"></i> Choose Room</label>
            <input class="w3-input w3-border" type="text" value="" name="ChooseRoom" placeholder="" name="ChooseRoom" required>
          </div>
        </div>
        <button class="w3-button w3-blue" type="submit"><i class="fa fa-search w3-margin-right"></i> Booking </button>
      </form>
    </div>
  </div>
</header>

    <div class="w3-container w3-padding-32 w3-red w3-opacity w3-card w3-hover-opacity-off" style="margin:32px 0;">
    <h2>Let Booking First!</h2>
    <p>Enjoy our hotel.</p>
    <label>Just choose your room and book right now !</label>
  </div>
  <div class="w3-container w3-margin-top" id="rooms">
    <h3>Rooms</h3>
    <p>"Chilling out on the bed in your hotel room watching television, while wearing your own pajamas,is sometimes the best part of a vocation" -- Laura Marano.</p>
  </div>

  <div class="w3-row-padding w3-padding-16">
    <div class="w3-third w3-margin-bottom">
      <img src="e.jpeg" alt="Norway" style="width:100%">
      <div class="w3-container w3-white">
        <h3>Single Room</h3>
        <h6 class="w3-opacity">From RM49</h6>
        <p>Single bed</p>
        <p>15m<sup>2</sup></p>
        <p class="w3-large"><i class="fa fa-bath"></i> <i class="fa fa-phone"></i> <i class="fa fa-wifi"></i></p>
        <button class="w3-button w3-block w3-blue w3-margin-bottom">Choose Room</button>
      </div>
    </div>
    <div class="w3-third w3-margin-bottom">
      <img src="f.jpeg" alt="Norway" style="width:100%">
      <div class="w3-container w3-white">
        <h3>Standard Room</h3>
        <h6 class="w3-opacity">From RM80</h6>
        <p>Queen-size bed</p>
        <p>25m<sup>2</sup></p>
        <p class="w3-large"><i class="fa fa-bath"></i> <i class="fa fa-phone"></i> <i class="fa fa-wifi"></i> <i class="fa fa-tv"></i></p>
        <button class="w3-button w3-block w3-blue w3-margin-bottom">Choose Room</button>
      </div>
    </div>
    <div class="w3-third w3-margin-bottom">
      <img src="l.jpeg" alt="Norway" style="width:100%">
      <div class="w3-container w3-white">
        <h3>Deluxe Room</h3>
        <h6 class="w3-opacity">From RM120</h6>
        <p>King-size bed</p>
        <p>40m<sup>2</sup></p>cla
        <p class="w3-large"><i ss="fa fa-bath"></i> <i class="fa fa-phone"></i> <i class="fa fa-wifi"></i> <i class="fa fa-tv"></i> <i class="fa fa-glass"></i> <i class="fa fa-cutlery"></i></p>
        <button class="w3-button w3-block w3-blue w3-margin-bottom">Choose Room</button>
      </div>
    </div>
  </div>

  <div class="w3-panel w3-red w3-leftbar w3-padding-32">
    <h6><i class="fa fa-info w3-black w3-padding w3-margin-right"></i>""</h6>
  </div>

  <div class="w3-row-padding" id="about">
    <div class="w3-col l4 m7">
      <h3>About</h3>
      <h6>" When you walk into our hotel to start your day, we are dedicated to providing you with friendly service, a welcoming atmosphere, and above all else, excellent room made with the highest quality our services. If you are not satisfied, please let us know and we will do whatever we can to make things right!"
'Your Convenience Is Our Priority'</h6>
    <p>We accept: <i class="fa fa-credit-card w3-large"></i> <i class="fa fa-cc-mastercard w3-large"></i> <i class="fa fa-cc-amex w3-large"></i> <i class="fa fa-cc-cc-visa w3-large"></i><i class="fa fa-cc-paypal w3-large"></i></p>
    </div>
    <div class="w3-col l8 m5">
      <div id="googleMap" style="width:100%;height:400px;" class="w3-grayscale"></div>
    </div>

  <script src="http://maps.google.com/maps/api/js?v=3.1&amp;sensor=false&amp;language=en" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript" charset="utf-8">
//<![CDATA[
var map = null;
function mapOnLoad() {

        var GoogleMap_Options = {
            navigationControl: true,
            navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},scrollwheel: false,
                    mapTypeControl: true,
                    mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
                scaleControl: true,zoom: 12,center: new google.maps.LatLng(4.632952, 103.437504),mapTypeId: google.maps.MapTypeId.ROADMAP};mapObj = document.getElementById("map");if(mapObj != "undefined" && mapObj != null) {map = new google.maps.Map(mapObj,GoogleMap_Options);
            var marker0 = new google.maps.Marker({
                position: new google.maps.LatLng(4.6329517000,103.4375037000),
                map: map,
                title:"Ariyani Hotel ,Terengganu-09-848 5800"
            });
                var infowindow = new google.maps.InfoWindow({maxWidth: 400});
                google.maps.event.addListener(marker0, 'click', function() {
                  infowindow.close();
                  infowindow.setContent("<p>    Ariyani Hotel ,Terengganu-09-848 5800</p><p>Lot 8035, Jalan Dungun/Paka, 23000, Dungun, Terengganu<br />Terengganu<br />Malaysia</p>    Enter your address for directions:<br />    <form action=\"http://maps.google.com/maps\" method=\"get\" target=\"_blank\">        <input type=\"text\" name=\"saddr\" id=\"saddr\" style=\"width: 150px;\"><br />        <input class=\"button\" value=\"Submit\" type=\"submit\">        <input type=\"hidden\" name=\"daddr\" id=\"daddr\" value=\"4.6329517000,103.4375037000\">    </form>");
                  infowindow.open(map,marker0);
                });}}
//]]>
</script>


  </div>

  <div class="w3-row w3-large w3-center" style="margin:32px 0">
    <div class="w3-third"><i class="fa fa-map-marker w3-text-red"></i> Lot 8035 A,Jalan Dungun-Paka, KM 8,Hadapan Politeknik Dungun, 23000 Dungun Terengganu</div>
    <div class="w3-third"><i class="fa fa-phone w3-text-red"></i> http://www.wasap.my/+60199844848</div>
    <div class="w3-third"><i class="fa fa-envelope w3-text-red"></i> Email: mohdamirrani@gmail.com </div>
  </div>

  <div class="w3-panel w3-red w3-leftbar w3-padding-32">
    <h6><i class="fa fa-info w3-black w3-padding w3-margin-right"></i> If you're looking for cheap hotels and the easiest online hotel booking experience around, you've come to the right place.</h6>
  </div>

  <div class="w3-container">
    <h3>Our Room</h3>
    <h6>You can find our hotels anywhere in the world:</h6>
  </div>

  <div class="w3-row-padding w3-padding-16 w3-text-white w3-large">
    <div class="w3-half w3-margin-bottom">
      <div class="w3-display-container">
        <img src="1.jpg" alt="Deluxe Bed" style="width:100%">
        <span class="w3-display-bottomleft w3-padding">""</span>
      </div>
    </div>
    <div class="w3-half">
      <div class="w3-row-padding" style="margin:0 -16px">
        <div class="w3-half w3-margin-bottom">
          <div class="w3-display-container">
            <img src="d.jpg" alt="Toilet" style="width:100%">
            <span class="w3-display-bottomleft w3-padding">Toilet</span>
          </div>
        </div>
        <div class="w3-half w3-margin-bottom">
          <div class="w3-display-container">
            <img src="b.jpeg" alt="Counter" style="width:100%">
            <span class="w3-display-bottomleft w3-padding">Counter</span>
          </div>
        </div>
      </div>
      <div class="w3-row-padding" style="margin:0 -16px">
        <div class="w3-half w3-margin-bottom">
          <div class="w3-display-container">
            <img src="f.jpeg" alt="Queen Bed" style="width:100%">
            <span class="w3-display-bottomleft w3-padding">Queen Bed</span>
          </div>
        </div>
        <div class="w3-half w3-margin-bottom">
          <div class="w3-display-container">
            <img src="h.jpg" alt="Single Bed" style="width:100%">
            <span class="w3-display-bottomleft w3-padding">Single Bed</span>
          </div>
        </div>
      </div>
    </div>
  </div>

   <div class="w3-panel w3-red w3-leftbar w3-padding-32">
    <h6><i class="fa fa-info w3-black w3-padding w3-margin-right"></i>""</h6>
  </div>

  <div class="w3-container" id="feedback">
    <h2>Feedback</h2>
    <p>Want to give us feedback ? Don't hesitate to get in touch!.</p>
    <i class="fa fa-map-marker w3-text-red" style="width:30px"></i> Dungun, Terengganu <br>
    <i class="fa fa-phone w3-text-red" style="width:30px"></i> http://www.wasap.my/+60199844848<br>
    <i class="fa fa-envelope w3-text-red" style="width:30px"> </i> Email: mohdamirrani@gmail.com<br>
    <form action="feedbackcust.jsp" target="_blank">
      <p><input class="w3-input w3-padding-16 w3-border" type="text" placeholder="Name" required name="Name"></p>
      <p><input class="w3-input w3-padding-16 w3-border" type="text" placeholder="Email" required name="Email"></p>
      <p><input class="w3-input w3-padding-16 w3-border" type="text" placeholder="Message" required name="Message"></p>
      <p><button class="w3-button w3-blue w3-padding-large" type="submit">SEND MESSAGE</button></p>
    </form>
  </div>
  <a href="#" class="scrollup"><i class="icon-chevron-up icon-square icon-48 active"></i></a>

<!-- End page content -->
</div>

<!-- Footer -->
<footer class="w3-padding-32 w3-red w3-center w3-margin-top">
  <h5>Find Us On</h5>
  <div class="w3-xlarge w3-padding-16">
    <i class="fa fa-facebook-official w3-hover-opacity"></i>
    <i class="fa fa-instagram w3-hover-opacity"></i>
    <i class="fa fa-snapchat w3-hover-opacity"></i>
    <i class="fa fa-pinterest-p w3-hover-opacity"></i>
    <i class="fa fa-twitter w3-hover-opacity"></i>
    <i class="fa fa-linkedin w3-hover-opacity"></i>
  </div>
  <p>""<a href="https://www.w3schools.com/w3css/default.asp" target="_blank" class="w3-hover-text-green"></a></p>
</footer>

<!-- Add Google Maps -->
<script>
function myMap()
{
  myCenter=new google.maps.LatLng(41.878114, -87.629798);
  var mapOptions= {
    center:myCenter,
    zoom:12, scrollwheel: false, draggable: false,
    mapTypeId:google.maps.MapTypeId.ROADMAP
  };
  var map=new google.maps.Map(document.getElementById("googleMap"),mapOptions);

  var marker = new google.maps.Marker({
    position: myCenter,
  });
  marker.setMap(map);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU&callback=myMap"></script>

<!--
To use this code on your website, get a free API key from Google.
Read more at: https://www.w3schools.com/graphics/google_maps_basic.asp
-->

</body>
</html>