<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="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!-- Sections -->
<section id="contact">
<div id="map"></div>
<div class="container text-center">
<!-- Example row of columns -->
<div class="row">
<div class="col-md-4 col-md-offset-4 col-sm-12 col-xs-12">
<div class="contact-form-area">
<form>
<h3>Contact</h3>
<div class="form-group">
<input type="text" class="form-control" placeholder="Your Name" required >
</div>
<div class="form-group">
<input type="email" class="form-control" placeholder="Your Email" required>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Your Subject">
</div>
<div class="form-group">
<textarea class="form-control" rows="7" placeholder="Message" required></textarea>
</div>
<button type="submit" class="btn btn-primary contact-btn">SEND</button>
</form>
</div>
</div>
</div>
</div> <!-- /container -->
</section>
<!-- ADD THis before ending body tag -->
<script src="http://maps.google.com/maps/api/js?key=AIzaSyCZ3R3HV2ECPiClKyFX8Y_UMFg6T_2L1e0"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gmaps.js/0.4.24/gmaps.min.js"></script>
<div style="text-align: center;margin-top: 150px;margin-bottom: 150px">Snippet Created by <a href="https://bootstrapthemes.co" target="_blank">Bootstrap themes</a></div>
/* For Contact Section*/
#map{
height:650px;
width:100%;
position:relative;
overflow:hidden;
}
.contact-form-area{
position:absolute;
bottom:40px;
background:rgba(0, 0, 0, 0.6);
padding:30px;
width:85%;
border:1px solid #cdcaca;
border-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
margin-bottom:30px;
-ms-border-radius:5px;
box-shadow:1px 1px 1px 0 rgba(55,50,40, .10);
-webkit-box-shadow:1px 1px 1px 0 rgba(55,50,40, .10);
-moz-box-shadow:1px 1px 1px 0 rgba(55,50,40, .10);
-ms-box-shadow:1px 1px 1px 0 rgba(55,50,40, .10);
}
.contact-form-area form h3{
font-size:36px;
color:#fff;
font-family: 'latobold';
margin-bottom:20px;
}
.form-control {
height: 35px;
border: none;
}
.contact-form-area form .contact-btn{
background: #dcdcdc;
padding: 10px 70px;
color: #000000;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
-ms-transition: all 0.5s;
transition: all 0.5s;
}
.contact-form-area form .contact-btn:hover{
background:#fff;
}
var map = new GMaps({
el: '#map',
lat: 52.265413,
lng: -113.827363,
scrollwheel: false
});
