<section>
<div class="container">
<div class="row justify-content-between align-items-center">
<div class="col-lg-6">
<h2 class="font-weight-bold">Let's make something big. Together.</h2>
<div class="form-row">
<div class="form-group col-lg-6">
<label for="yourName">Your Name</label>
<input type="text" class="form-control" id="yourName" placeholder="Your Name">
</div>
<div class="form-group col-lg-6">
<label for="yourCompany">Your Company</label>
<input type="text" class="form-control" id="yourCompany" placeholder="Your Company">
</div>
</div>
<div class="form-row">
<div class="form-group col-lg-12">
<label for="yourMessage">Message</label>
<textarea class="form-control" id="yourMessage" rows="3" placeholder="Message"></textarea>
</div>
</div>
<div class="form-row">
<div class="col-lg-8">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck1">
<label class="custom-control-label small text-muted" for="customCheck1">I accept the <a href="">Terms & Conditions</a> and acknowledge that my information will be used in accordance with Privacy Policy.</label>
</div>
</div>
</div>
<div class="form-row mt-5">
<div class="col-12">
<a href="" class="btn btn-primary btn-lg btn-rounded btn-with-icon btn">Start 30 days trial <i class="icon-arrow-right"></i></a>
</div>
</div>
</div>
<div class="col-lg-5">
<img src="assets/images/figure-9.svg" alt="Illustration">
</div>
</div>
</div>
</section>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate odio ipsa provident ducimus tenetur quos architecto voluptatibus inventore similique, hic sunt nisi officia eaque alias magni minima recusandae nobis quia.
<section class="section-hero">
<div class="container">
<div class="row align-items-center justify-content-between">
<div class="col-lg-6 mb-4 mb-lg-0">
<h1 class="font-weight-bold">Interested in working together? Get started!</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate odio ipsa provident ducimus tenetur quos architecto voluptatibus inventore similique, hic sunt nisi officia eaque alias magni minima recusandae nobis quia.</p>
<hr class="my-4 fw-25 ml-0">
<ul class="list-group list-group-sm list-group-minimal">
<li class="list-group-item d-flex align-items-center">
<span class="fw-25 text-muted">Email</span>
contact@webuildthemes.com
</li>
<li class="list-group-item d-flex align-items-center">
<span class="fw-25 text-muted">Phone</span>
+1 234 56 78 90
</li>
<li class="list-group-item d-flex align-items-center">
<span class="fw-25 text-muted">Instagram</span>
@webuildthemes
</li>
</ul>
</div>
<div class="col-lg-5">
<div class="equal equal-2-1 equal-lg-1-1">
<div class="canvas">
<div id="map1" class="map"></div>
</div>
</div>
<div class="card bg-black text-white">
<div class="card-body">
<h5>5th Avenue, New York <span class="font-weight-bold d-block">USA 10255</span></h5>
</div>
</div>
</div>
</div>
</div>
</section>
<script>
function initMap() {
var latlng = new google.maps.LatLng(40.702888,-74.012420);
var myOptions = {
zoom: 18,
center: latlng,
disableDefaultUI: true,
styles: [
{
"elementType": "geometry",
"stylers": [
{
"color": "#f5f5f5"
}
]
},
{
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
},
{
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#616161"
}
]
},
{
"elementType": "labels.text.stroke",
"stylers": [
{
"color": "#f5f5f5"
}
]
},
{
"featureType": "administrative.land_parcel",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#bdbdbd"
}
]
},
{
"featureType": "poi",
"elementType": "geometry",
"stylers": [
{
"color": "#eeeeee"
}
]
},
{
"featureType": "poi",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#757575"
}
]
},
{
"featureType": "poi.park",
"elementType": "geometry",
"stylers": [
{
"color": "#e5e5e5"
}
]
},
{
"featureType": "poi.park",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#9e9e9e"
}
]
},
{
"featureType": "road",
"elementType": "geometry",
"stylers": [
{
"color": "#ffffff"
}
]
},
{
"featureType": "road.arterial",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#757575"
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry",
"stylers": [
{
"color": "#dadada"
}
]
},
{
"featureType": "road.highway",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#616161"
}
]
},
{
"featureType": "road.local",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#9e9e9e"
}
]
},
{
"featureType": "transit.line",
"elementType": "geometry",
"stylers": [
{
"color": "#e5e5e5"
}
]
},
{
"featureType": "transit.station",
"elementType": "geometry",
"stylers": [
{
"color": "#eeeeee"
}
]
},
{
"featureType": "water",
"elementType": "geometry",
"stylers": [
{
"color": "#c9c9c9"
}
]
},
{
"featureType": "water",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#9e9e9e"
}
]
}
]
};
var map = new google.maps.Map(document.getElementById("map1"), myOptions);
map.panBy(-100, -40);
var myMarker = new google.maps.Marker(
{
position: latlng,
map: map,
icon: 'assets/images/pin.svg'
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAME5wJgLdn1aQSxC7-iWxJ3isuveK9Rv4&callback=initMap"
async defer></script>
<section>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-10 col-lg-6">
<h2 class="font-weight-bold">Let us hear from you directly!</h2>
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-10 col-lg-6">
<form>
<div class="form-row">
<div class="col">
<div class="form-group">
<label for="yourName">Your Name</label>
<input type="text" class="form-control" id="yourName" placeholder="Your Name">
</div>
</div>
<div class="col">
<div class="form-group">
<label for="yourCompany">Your Company</label>
<input type="text" class="form-control" id="yourCompany" placeholder="Your Company">
</div>
</div>
</div>
<div class="form-group">
<label for="yourEmail">Your Email</label>
<input type="email" class="form-control" id="yourEmail" placeholder="Your Email">
</div>
<div class="form-group">
<label for="yourMessage">Message</label>
<textarea class="form-control" id="yourMessage" rows="3" placeholder="Message"></textarea>
</div>
<a class="btn btn-primary btn-rounded btn-lg btn-with-icon mt-3" href="">
Send Message <i class="icon-arrow-up-right"></i>
</a>
</form>
</div>
</div>
</div>
</section>