<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>My Example</title>
<!-- Bootstrap 4 alpha CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid">
<!-- Carousel container -->
<div id= "scroll-pics" class= "carousel slide" data-ride="carousel">
<!-- Indicators -->
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#scroll-pics" data-slide-to="0" class="active"></li>
<li data-target="#scroll-pics" data-slide-to="1"></li>
<li data-target="#scroll-pics" data-slide-to="2"></li>
</ol>
<!-- Content -->
<div class="carousel-inner" role="listbox">
<!-- Slide 1 -->
<div class="carousel-item active">
<img src="http://blogs-images.forbes.com/davidvinjamuri/files/2014/07/airbnb_horizontal_lockup_print.jpg" alt="Sunset over beach">
<div class = "carousel-caption">
<p>Hey look at this caption!</p></div>
</div>
<!-- Slide 2 -->
<div class="carousel-item">
<img src="http://www.bizion.com/data/cheditor4/1407/1315d5fb735097eae7ced7cf5a1311e9_A2A2KJq5w.jpg" alt="Rob Roy Glacier">
</div>
<!-- Slide 3 -->
<div class="carousel-item">
<img src="http://lovelace-media.imgix.net/uploads/191/d6b93350-f30d-0131-c08f-0eb233c768fb.jpg?" alt="Longtail boats at Phi Phi">
<div class = "carousel-caption">
<h3>Hey look at this caption too!</h3></div>
</div>
</div>
<!-- Previous/Next controls -->
<a class="left carousel-control" href="#scroll-pics" role="button" data-slide="prev">
<span class="icon-prev" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#scroll-pics" role="button" data-slide="next">
<span class="icon-next" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<form class="form-inline" role="form">
<div class="form-group">
<input type="text" class="form-control" id="location-input" placeholder="Where to?">
</div>
<form class="form-inline" role="form">
<div class="form-group" id="calendar">
<input type="text" placeholder="Check In" id="from" name="from">
<input type="text" id="to" placeholder="Check Out" name="to">
</div>
<form class="form-inline" role="form">
<div class="form-group">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="Guests" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Number of Guests
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#" data-guest-amount="1">1 Guest</a><br />
<a class="dropdown-item" href="#" data-guest-amount="2">2 Guests</a><br />
<a class="dropdown-item" href="#" data-guest-amount="3">3 Guests</a><br />
<a class="dropdown-item" href="#" data-guest-amount="4">4 Guests</a><br />
<a class="dropdown-item" href="#" data-guest-amount="5">5 Guests</a><br />
<a class="dropdown-item" href="#" data-guest-amount="6">6 Guests</a><br />
<a class="dropdown-item" href="#" data-guest-amount="7">7 Guests</a><br />
<a class="dropdown-item" href="#" data-guest-amount="8">8 Guests</a><br />
<a class="dropdown-item" href="#" data-guest-amount="9">9 Guests</a><br />
<a class="dropdown-item" href="#" data-guest-amount="10">10 Guests</a><br />
<a class="dropdown-item" href="#" data-guest-amount="11">11 Guests</a>
</div>
<button type="button" class="btn btn-search">Search</button>
</div>
</form>
</div>
<row>
<div class = "col-lg-12" id ="visit-header">
<h2>Just for the Weekend</h2>
<p>Discover new and inspiring places</p>
</div>
</row>
<row>
<div class = "visit-img col-xs-4" id="visit-first"><h3> <br /> <br />Anchorage</h3></div>
<div class = "visit-img col-xs-4 " id ="visit-second"><h3><br /><br />Boulder</h3></div>
<div class = "visit-img col-xs-4" id ="visit-third"><h3><br /><br />Miami</h3></div>
</row>
<row>
<div class = "col-xs-12" id ="see-all-destinations-button-wrapper">
<button type="button" class="btn btn-secondary" id ="see-all-destinations-button">See All Destinations</button>
</div>
</row>
<row>
<div class = "col-xs-12" id ="expl-header">
<h2>Explore the World</h2>
<p>See where people are traveling, all around the world</p>
</div>
</row>
<row>
<div class = "expl-img col-md-8" id="expl-first"><h3> <br /> <br />Philidelphia</h3></div>
<div class = "expl-img col-md-4" id ="expl-second"><h3><br /><br />San Diego</h3></div>
</row>
<row>
<div class = "expl-img col-md-4" id ="expl-third"><h3><br /><br />Portland</h3></div><div class = "expl-img col-md-4" id ="expl-fourth"><h3><br /><br />Boston</h3></div>
<div class = "expl-img col-md-4" id ="expl-fifth"><h3><br /><br />Acadia</h3></div>
</row>
<row>
<div class = "expl-img col-md-4" id ="expl-sixth"><h3><br /><br />Branson</h3></div>
<div class = "expl-img col-md-8" id ="expl-seventh"><h3><br /><br />New Orleans</h3></div></row>
<row>
<div class = "expl-img col-md-4" id ="expl-eigth"><h3><br /><br />Seattle</h3></div><div class = "expl-img col-md-4" id ="expl-ninth"><h3><br /><br />Dallas</h3></div><div class = "expl-img col-md-4" id ="expl-tenth"><h3><br /><br />Las Vegas</h3></div>
</row>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- Bootstrap 4 Alpha JS -->
<!-- IMPORTANT: Don't use this .js file in production. Use Bootstrap 3 until Bootstrap 4.0.0 is released. -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>
</body>
* {
box-sizing: border-box;
}
body {
background: #EDEFED !important;
}
.carousel-item img {
margin: 0 auto;
max-height: 500px;
}
.carousel-item p {
color: blue;
font-size: 2rem;
}
.form-inline {
text-align: center;
margin-bottom: 5rem;
}
.btn-search {
background-color: #FF5A5F;
color: white;
}
#visit-first, #visit-second, #visit-third {
background-size: cover;
height: 300px;
color: white;
text-shadow: 0 0 3px black;
}
#visit-first {
background-image: url("https://upload.wikimedia.org/wikipedia/commons/1/1b/Anchorage_from_Earthquake_Park.jpg");
}
#visit-second {
background-image: url("https://res-1.cloudinary.com/simpleview/image/upload/c_fill,f_auto,h_360,q_50,w_1024/v1/clients/boulder/Panorama%20of%20downtown%20Boulder%20-%20fall_d6baa374-d1f1-4293-a6f6-483d7a1bb984.jpg");
}
#visit-third {
background-image: url("http://www.miamiandbeaches.com/~/media/images/miamiandbeaches/plan-your-trip/gettingaround/miami-from-ft-lauderdale/causeway-miami-skyline-612x338.jpg");
}
.visit-img {
border: 10px solid white;
text-align: center;
}
#visit-header {
text-align: center;
}
#see-all-destinations-button-wrapper {
text-align: center;
}
#expl-first, #expl-second, #expl-third, #expl-fourth, #expl-fifth, #expl-sixth, #expl-seventh, #expl-eigth, #expl-ninth, #expl-tenth {
background-size: cover;
height: 300px;
color: white;
text-shadow: 0 0 3px black;
}
#expl-first {
background-image: url("http://cpphilawest.com/wp-content/uploads/Philadelphia_LovePark.jpg");
}
#expl-second {
background-image: url("http://www.sandiego.edu/law/_billboards/_home/images/perfect-climate.png");
}
#expl-third {
background-image: url("https://media-cdn.tripadvisor.com/media/photo-s/03/d4/43/79/portland.jpg");
}
#expl-fourth {
background-image: url("http://www.ninezero.com/images/1700-960/sailboats-in-boston-0a5755ca.jpg");
}
#expl-fifth {
background-image: url("http://www.acadiamagic.com/720x480/bar-harbor-0415.jpg");
}
#expl-sixth {
background-image: url("https://4.bp.blogspot.com/-r-6xQbY3IA0/VmXlgScJNTI/AAAAAAAAV9U/H9yvqbINI80/s1600/20039478636_6b4c8ac9a5_o.jpg");
}
#expl-seventh {
background-image: url("http://www.pompo.com/wp-content/uploads/2012/07/IMG_0905.jpg");
}
#expl-eigth {
background-image: url("https://media-cdn.tripadvisor.com/media/photo-s/03/9b/30/26/seattle.jpg");
}
#expl-ninth {
background-image: url("http://www.lennar.com/images/com/images/new-homes/18/14/mhi/DallasSkyline21200X540opt.jpg");
}
#expl-tenth {
background-image: url("https://upload.wikimedia.org/wikipedia/commons/e/e7/Las_Vegas_89.jpg");
}
.expl-img {
border: 10px solid white;
text-align: center;
}
#expl-header {
text-align: center;
}
#see-all-destinations-button-wrapper {
text-align: center;
margin-bottom: 5rem;
}
//jquery jquery ui bootstrap
$( function dates() {
var dateFormat = "mm/dd/yy",
from = $( "#from" )
.datepicker({
defaultDate: "+0",
changeMonth: true,
numberOfMonths: 1
})
.on( "change", function() {
to.datepicker( "option", "minDate", getDate( this ) );
}),
to = $( "#to" ).datepicker({
defaultDate: "+0",
changeMonth: true,
numberOfMonths: 1
})
.on( "change", function() {
from.datepicker( "option", "maxDate", getDate( this ) );
});
function getDate( element ) {
var date;
try {
date = $.datepicker.parseDate( dateFormat, element.value );
} catch( error ) {
date = null;
}
return date;
}
} );
$(".dropdown-item").on("click", function(){
var guestAmount = ($(this).data("guest-amount"));
console.log(guestAmount);
$("#Guests").text(guestAmount + " Guests");
});
