<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>
