<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ppc-1</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<!-- Start Calendar -->
<link href="https://unpkg.com/gijgo@1.9.13/css/gijgo.min.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://unpkg.com/gijgo@1.9.13/js/gijgo.min.js" type="text/javascript"></script>
<!-- End Calendar -->
</head>
<body>
<header class="topmenu">
<nav class="navbar navbar-inverse navbar-fixed-top t1">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"><img src="images/logo.png"></a>
</div></div>
<div class="col-md-6">
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="#">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div> </div></div>
</nav>
</header>
<section class="bannerbg">
<div class="jumbotron">
<div class="container">
<div class="col-md-12 co1">
<h2>Theme example</h2>
<p>This is a template showcasing the optional theme stylesheet ....</p>
</div>
<div class="row">
<div class="col-md-5">
<div class="searchbox">
<h3 class="text-center enheading"> Your Enquiry </h3>
<div class="col-md-12 col-xs-12 mar01 wrap">
<span class="glyphicon glyphicon-remove remove-icon2 crossIco" onclick="ClearData('flying_from')" style="display:none;"></span>
<input id="flying_from" class="form-control" placeholder="Full Name" >
</div>
<div class="col-md-12 col-xs-12 wrap">
<span class="glyphicon glyphicon-remove remove-icon2 crossIco" onclick="ClearData('flying_from2')" style="display:none;"></span>
<input type="email" id="flying_from2" class="form-control" placeholder="Email address">
</div>
<div class="col-md-6 col-xs-12"> <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required="" autofocus=""></div>
<div class="col-md-6 col-xs-12"> <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required="" autofocus=""></div>
<div class="col-md-6 col-xs-6">
<div class="form-group">
<select id="" name="Name" class="form-control">
<option>Name</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div></div>
<div class="col-md-6 col-xs-6">
<div class="form-group">
<select id="" name="Name" class="form-control">
<option>Name</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div></div>
<div class="col-md-6 col-xs-6"> <input id="datepicker" class="form-control" placeholder="Date"></div>
<div class="col-md-6 col-xs-6"> <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required="" autofocus=""></div>
<div class="col-md-6 col-xs-6"> <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required="" autofocus=""></div>
<div class="col-md-6 col-xs-6"> <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required="" autofocus=""></div>
<div class="col-md-12 col-xs-12 p1 pad1"> <a href="#" class="btn btn-danger btn-lg W1">Submit Now</a></div>
<div class="col-md-12 col-xs-12 pad01"><span><strong>Note : </strong> Quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid nisi ut aliquidnisi ut aliquid </span> </div>
</div></div>
<div class="col-md-7 hidden"></div>
</div>
</div></div>
</section>
<section>
<div class="container">
<div class="col-md-7">
<h1>Welcome To Avigovacation!</h1>
<p class="t1 mar01">Quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex
ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur,
vel illum qui dolorem eum fugiat quo voluptas nulla pariatur.Quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex
ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur,
vel illum qui dolorem eum fugiat quo voluptas nulla pariatur.</p>
<p class="t1 mar001">Quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur,
vel illum qui dolorem eum fugiat quo voluptas nulla pariatur.Quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex
ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur,
vel illum qui dolorem eum fugiat quo voluptas nulla pariatur.
Quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex
ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur,
vel illum qui dolorem eum fugiat quo voluptas nulla pariatur.</p>
<div class="more wthree_more1 mar001">
<a href="index.html" class="btn btn-danger" data-toggle="modal" data-target="#myModal">Read More <span class="glyphicon glyphicon-arrow-right"></span></a>
</div>
</div>
<div class="col-md-5">
<div class="img_agile"><img src="http://bestjquery.com/tutorial/product-grid/demo9/images/img-1.jpg" class="img-responsive" alt=""></div>
</div>
</div>
</section>
<section>
<div class="container">
<div class="col-xs-12">
<h2 class="headings mrT20 text-center"> Our Amazing Tour Packages </h2>
<p class="text-center"> While you can book hotels, and exercises separately onavigovacation.com, you can truly score great arrangements on this site with movement bundles.</p>
</div>
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="product-grid">
<div class="product-image">
<a href="#myModal" data-toggle="modal">
<img class="pic-1" src="http://bestjquery.com/tutorial/product-grid/demo9/images/img-1.jpg">
<img class="pic-2" src="http://bestjquery.com/tutorial/product-grid/demo9/images/img-1.jpg">
</a>
<span class="product-new-label">Paris</span>
<span class="product-discount-label">20%</span>
</div>
<div class="product-content">
<h3 class="title"><a href="#">Starts from</a></h3>
<div class="price">
4 Nights/5 Day
<span>$599.10</span>
</div>
<a class="add-to-cart" href="">$499.40</a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="product-grid">
<div class="product-image">
<a href="#">
<img class="pic-1" src="http://bestjquery.com/tutorial/product-grid/demo9/images/img-1.jpg">
<img class="pic-2" src="http://bestjquery.com/tutorial/product-grid/demo9/images/img-1.jpg">
</a>
<span class="product-new-label">London</span>
<span class="product-discount-label">20%</span>
</div>
<div class="product-content">
<h3 class="title"><a href="#">Starts from</a></h3>
<div class="price">
5 Nights/6 Day
<span>$699.30</span>
</div>
<a class="add-to-cart" href="">$599.20</a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="product-grid">
<div class="product-image">
<a href="#">
<img class="pic-1" src="http://bestjquery.com/tutorial/product-grid/demo9/images/img-1.jpg">
<img class="pic-2" src="http://bestjquery.com/tutorial/product-grid/demo9/images/img-1.jpg">
</a>
<span class="product-new-label">Singapore</span>
<span class="product-discount-label">20%</span>
</div>
<div class="product-content">
<h3 class="title"><a href="#">Starts from</a></h3>
<div class="price">
6 Nights/7 Day
<span>$799.30</span>
</div>
<a class="add-to-cart" href="">$699.20</a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="product-grid">
<div class="product-image">
<a href="#">
<img class="pic-1" src="http://bestjquery.com/tutorial/product-grid/demo9/images/img-1.jpg">
<img class="pic-2" src="http://bestjquery.com/tutorial/product-grid/demo9/images/img-1.jpg">
</a>
<span class="product-new-label">New York</span>
<span class="product-discount-label">20%</span>
</div>
<div class="product-content">
<h3 class="title"><a href="#">Starts from</a></h3>
<div class="price">7 Nights/8 Day
<span>$899.30</span>
</div>
<a class="add-to-cart" href="">$799.30</a>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="testimonial" class="mar001 testimonial-1 t1-color">
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-xs-12 text-center">
<h2><span class="ion-minus"></span> Testimonials <span class="ion-minus"></span></h2>
<i class="fa fa-quote-right"></i>
<div id="slider" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#slider" data-slide-to="0" class="active"></li>
<li data-target="#slider" data-slide-to="1"></li>
<li data-target="#slider" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
<img src="images/Testimonials-img1.jpg">
<h5>Jane Doe</h5>
</div>
<div class="item">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
<img src="images/Testimonials-img1.jpg">
<h5>John Doe</h5>
</div>
<div class="item">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
<img src="images/Testimonials-img1.jpg">
<h5>Jack Doe</h5>
</div>
</div> <!-- carousel-inner -->
</div> <!-- carousel slide -->
</div>
</div>
</div>
</section>
<section class="mar001">
<div class="footerlink">
<div class="container">
<div class="row">
<div class="col-md-12 mar01">
<div class="col-md-3 col-xs-6">
<h3>Quick Links</h3>
<ul>
<li><a href="#" target="_blank">About Us </a> </li>
<li><a href="#" target="_blank">Contact Us</a> </li>
<li><a href="#" target="_blank">Privacy Policy</a></li>
<li><a href="#" target="_blank">Terms & Conditions </a></li>
<li><a href="#" target="_blank">Cancellation & Refund Policy</a></li>
<li><a href="#" target="_blank">Taxes & Fees</a> </li>
</ul>
</div>
<div class="col-md-3 col-xs-6">
<h3>Top Destination</h3>
<ul>
<li><a href="#" target="_blank">Flights to Barcelona</a></li>
<li><a href="#" target="_blank">Flights to Dubai</a></li>
<li><a href="#" target="_blank">Flights to Zurich</a> </li>
<li><a href="#" target="_blank">Flights to New York</a></li>
<li><a href="#" target="_blank">Flights to Chicago</a> </li>
<li><a href="#" target="_blank">Flights to Dallas</a> </li>
</ul>
</div>
<div class="col-md-3 col-xs-12 n-padding">
<h3>Top Airlines</h3>
<ul>
<li><a href="#" target="_blank">Qantas </a> </li>
<li><a href="" target="_blank">Swiss International Air Lines </a> </li>
<li><a href="#" target="_blank">Iberia </a> </li>
<li><a href="#" target="_blank">American Airlines </a> </li>
<li><a href="#" target="_blank">Frontier Airlines</a> </li>
<li><a href="#" target="_blank">Turkish Airlines </a> </li>
</ul>
</div>
<div class="col-md-3 col-xs-12 n-padding">
<h3>Follow Us</h3>
<a href="#" target="_blank"><img src="images/tw.png" alt="Twitter"></a>
<a href="#" target="_blank"><img src="images/fb.png" alt="Facebook"></a>
<a href="#" target="_blank"><img src="images/instagram.png" alt="Instagram"></a>
<a href="#" target="_blank"><img src="images/linkdin.png" alt="Linkdin"></a>
</div>
<div class="clearfix"></div>
<p class="disclaimer mar001"><strong>Disclaimer :</strong> Quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
Quis autem vel eum iure reprehenderit qui inQuis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in.</p>
</div>
</div>
</div></div>
<div class="container-fluid copyright">
<div class="container">
<div class="clearfix"></div>
<p class="text-center text-color">Copyright © 2018-2019 FareFerry Inc. All Rights Reserved.</p>
</div>
</div>
</section>
<!-- Start Input clear text for serach engine -->
<script>
function ClearData(crossI){
$("#" + crossI).val("");
};
$(document).ready(function () {
$(".wrap input").focus(function () {
$(this).parent().find('.crossIco').show('slow');
});
$('.wrap input').blur(function () {
if (!$(this).val()) {
$('.crossIco').hide('slow');
}
});
});
</script>
<!-- End Input clear text for serach engine -->
<!-- Start Calendar -->
<script>
$('#datepicker').datepicker({
uiLibrary: 'bootstrap'
});
</script>
<!-- Start Calendar -->
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
body{ font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; margin:0px;}
.topmenu{ margin: 0px;}
.W1{width:100%;background-color:#de002f; border-radius:none;}
.pad1{padding-top: 10px;}
.pad01{padding-top: 20px;}
.pad001{padding-top: 30px;}
.padb1{padding-bottom: 10px;}
.padb01{padding-bottom: 20px;}
.padb001{padding-bottom: 30px;}
.mar-1{margin-top: 5px;}
.mar1{margin-top: 10px;}
.mar01{margin-top: 20px;}
.mar001{margin-top: 30px;}
.marb{margin-bottom: 10px;}
.marb01{margin-bottom: 20px;}
.marb001{margin-bottom: 30px;}
.t1-color{color:#fff;}
.t1{text-align: justify;}
.co1{color: #fff; padding: 38px 0px 28px 0px;}
.topmenu .t1{ background: #05307d;border: none;}
.bannerbg{ background:url(https://pbs.twimg.com/media/EGHYvttU4AAYKb7?format=jpg&name=large); background-size: cover;}
.jumbotron{ background: transparent;}
.jumbotron p {font-size: 16px;}
.remove-icon2 {height:42px;position:absolute !important;right:20px;top:2px !important;z-index:2;font-size:10px;color:#3a3c3c; padding-top:16px;}
.searchbox{background-color: #05307d;color: #fff;padding: 0px 0px 25px 0px; float:left;}
.searchbox input.form-control {margin-bottom:10px; height: 40px; border-radius: 0;}
.searchbox .form-group .form-control {margin-bottom:10px; height: 40px; float: left;border-radius: 0;}
.enheading{background:#de002f;margin:0px;padding:10px;}
.navbar-inverse .navbar-nav>li>a{color: #fff; font-size: 16px;}
.navbar-brand{ padding:7px 0px;}
.navbar-nav{float:right;}
.navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:focus, .navbar-inverse .navbar-nav>.active>a:hover{background-color:#de002f;}
.input-group-addon{ background-color:#fff; border:none; float:right; z-index:9; margin-top:-40px; padding:3px 26px 0px 9px;}
/********************* shopping Demo-1 **********************/
.product-grid{font-family:Raleway,sans-serif;text-align:center;padding:0 0 72px;border:1px solid rgba(0,0,0,.1);overflow:hidden;position:relative;z-index:1}
.product-grid .product-image{position:relative;transition:all .3s ease 0s}
.product-grid .product-image a{display:block}
.product-grid .product-image img{width:100%;height:auto}
.product-grid .pic-1{opacity:1;transition:all .3s ease-out 0s}
.product-grid:hover .pic-1{opacity:1}
.product-grid .pic-2{opacity:0;position:absolute;top:0;left:0;transition:all .3s ease-out 0s}
.product-grid:hover .pic-2{opacity:1}
.product-grid .social{width:150px;padding:0;margin:0;list-style:none;opacity:0;transform:translateY(-50%) translateX(-50%);position:absolute;top:60%;left:50%;z-index:1;transition:all .3s ease 0s}
.product-grid:hover .social{opacity:1;top:50%}
.product-grid .social li{display:inline-block}
.product-grid .social li a{color:#fff;background-color:#333;font-size:16px;line-height:40px;text-align:center;height:40px;width:40px;margin:0 2px;display:block;position:relative;transition:all .3s ease-in-out}
.product-grid .social li a:hover{color:#fff;background-color:#ef5777}
.product-grid .social li a:after,.product-grid .social li a:before{content:attr(data-tip);color:#fff;background-color:#000;font-size:12px;letter-spacing:1px;line-height:20px;padding:1px 5px;white-space:nowrap;opacity:0;transform:translateX(-50%);position:absolute;left:50%;top:-30px}
.product-grid .social li a:after{content:'';height:15px;width:15px;border-radius:0;transform:translateX(-50%) rotate(45deg);top:-20px;z-index:-1}
.product-grid .social li a:hover:after,.product-grid .social li a:hover:before{opacity:1}
.product-grid .product-discount-label,.product-grid .product-new-label{color:#fff;background-color:#05307d;font-size:15px;text-transform:uppercase;padding:2px 7px;display:block;position:absolute;top:10px;left:0}
.product-grid .product-discount-label{background-color:#333;left:auto;right:0}
.product-grid .rating{color:#FFD200;font-size:12px;padding:12px 0 0;margin:0;list-style:none;position:relative;z-index:-1}
.product-grid .rating li.disable{color:rgba(0,0,0,.2)}
.product-grid .product-content{background-color:#fff;text-align:center;padding:12px 0;margin:0 auto;position:absolute;left:0;right:0;bottom:-27px;z-index:1;transition:all .3s}
.product-grid:hover .product-content{bottom:0}
.product-grid .title{font-size:13px;font-weight:400;letter-spacing:.5px;text-transform:capitalize;margin:0 0 10px;transition:all .3s ease 0s}
.product-grid .title a{color:#828282}
.product-grid .title a:hover,.product-grid:hover .title a{color:#ef5777}
.product-grid .price{color:#fff;font-size:17px;font-family:Montserrat,sans-serif;font-weight:700;letter-spacing:.6px;margin-bottom:8px;text-align:center;transition:all .3s;
background:#05307d; padding: 10px;}
.product-grid .price span{color:#e8e8e8;font-size:13px;font-weight:400;text-decoration:line-through;margin-left:3px;display:inline-block}
.product-grid .add-to-cart{color: #ef5777;font-size: 15px;font-weight: 600;}
@media only screen and (max-width:990px){.product-grid{margin-bottom:30px}
}
/********************* Start Testimonial **********************/
.testimonial-1{background: url(../images/Testimonials.jpg)no-repeat center center;}
#testimonial{padding:30px 0px 65px 0px;}
#testimonial .fa.fa-quote-right{color:#5db4c0;font-size:30px;}
#testimonial p{font-family: 'Raleway', sans-serif;margin-bottom:20px;margin-top:20px;}
#testimonial img{width: 150px; height: 150px; margin: 0 auto;border-radius: 50%;border: 1px solid #5db4c0;}
#testimonial .carousel-indicators li {background-color: #5db4c0;height: 13px; width: 13px;margin: 5px;}
#testimonial .carousel-indicators li.active {background-color: #888383;}
#testimonial .carousel-indicators {bottom: -50px;}
/********************* eND Testimonial **********************/
.footerlink {width: 100%;float: left;background:#e5e5f4;}
.footerlink ul{width:100%; float:left;list-style:none;margin:0;padding:0;}
.footerlink ul li {display:block;width:100%;float:left;margin:0;padding:0;}
.footerlink ul li a {color:#555; float: left;padding: 3px 0;}
.copyright {background:#0f1640;padding:10px;}
.copyright .text-color {color: #ababab;padding-top: 10px;}
@media only screen and (max-width:479px) {
.navbar-nav{float:left;}
}
<!-- Start Input clear text for serach engine -->
<script>
function ClearData(crossI){
$("#" + crossI).val("");
};
$(document).ready(function () {
$(".wrap input").focus(function () {
$(this).parent().find('.crossIco').show('slow');
});
$('.wrap input').blur(function () {
if (!$(this).val()) {
$('.crossIco').hide('slow');
}
});
});
</script>
<!-- End Input clear text for serach engine -->
