<!--
Author: W3layouts
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Home Booking Form Responsive Widget Template :: W3layouts</title>
<!-- Meta tag Keywords -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Home Booking Form Responsive Widget,Login form widgets, Sign up Web forms , Login signup Responsive web form,Flat Pricing table,Flat Drop downs,Registration Forms,News letter Forms,Elements" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- Meta tag Keywords -->
<!-- css files -->
<link href="css/style.css" rel="stylesheet" type="text/css" media="all">
<!-- //css files -->
<!-- online-fonts -->
<link href="//fonts.googleapis.com/css?family=Ubuntu+Condensed&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext" rel="stylesheet">
<!--//online-fonts -->
</head>
<body>
<div class="header">
<h1>Home Booking Form</h1>
</div>
<div class="w3-main">
<!-- Main -->
<div class="about-bottom">
<div class="w3l_about_bottom_right two">
<h2 class="tittle">Booking home</h2>
<div class="book-form">
<form action="#" method="post">
<div class="form-date-w3-agileits">
<label> Name :</label>
<input type="text" name="name" placeholder="Your name" required="">
</div>
<div class="form-date-w3-agileits second-agile">
<label> Email :</label>
<input type="email" name="email" placeholder="Your email" required="">
</div>
<div class="form-date-w3-agileits">
<label> Check In Date :</label>
<input id="datepicker" name="Text" type="text" value="mm/dd/yyyy" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'mm/dd/yyyy';}" required="">
</div>
<div class="form-date-w3-agileits">
<label> Check Out Date :</label>
<input id="datepicker1" name="Text" type="text" value="mm/dd/yyyy" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'mm/dd/yyyy';}" required="">
</div>
<div class="form-left-agileits-w3layouts second-agile">
<label> No.of Guests :</label>
<select class="form-control">
<option></option>
<option>Guest 1</option>
<option>Guests 2</option>
<option>Guests 3</option>
<option>Guests 4</option>
<option>Guests 5</option>
<option>More</option>
</select>
</div>
<div class="make wow shake">
<input type="submit" value="Book Now">
</div>
</form>
</div>
</div>
<div class="w3l_about_bottom_left">
<img src="images/real1.jpg" alt="" class="img-responsive" />
</div>
<div class="clear"> </div>
</div>
</div>
<!-- //Main -->
<!-- footer -->
<div class="footer-w3l">
<p>© 2017 Home Booking Form. All rights reserved | Design by <a href="http://w3layouts.com">W3layouts</a></p>
</div>
<!-- //footer -->
<!-- js-scripts-->
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<!-- Calendar -->
<link rel="stylesheet" href="css/jquery-ui.css" />
<script src="js/jquery-ui.js"></script>
<script>
$(function() {
$( "#datepicker,#datepicker1,#datepicker2,#datepicker3" ).datepicker();
});
</script>
<!-- //Calendar -->
<!-- //js-scripts-->
</body>
</html>