{% set header_title = 'Creative Designer Portfolio - Contact' %}
{% set header_show = false %}
{% extends 'layouts/layout-creative-designer-portfolio.html' %}

{% block content %}

<!-- START: Google Map -->
<div id="google-map-contact" class="nk-gmaps nk-gmaps-lg"></div>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?key=AIzaSyBlQNaWM2_jxXJbRwL2ozXWw3cg-uuld8w&sensor=false"></script>
<script>
    function initializeGmaps() {
        var LatLng = {lat: 40.716361, lng: -74.001836};
        var mapCanvas = document.getElementById('google-map-contact');
        var mapOptions = {
            center      : LatLng,
            scrollwheel : false,
            zoom        : 14,
            backgroundColor: 'none',
            mapTypeId   : 'nKStyle'
        };
        var map = new google.maps.Map(mapCanvas, mapOptions);
        var marker = new google.maps.Marker({
            position: LatLng,
            map: map,
            icon: 'assets/images/marker.png',
            title: 'Pond Park'
        });

        // style from https://snazzymaps.com/style/151/ultra-light-with-labels
        var styledMapType = new google.maps.StyledMapType([{"featureType":"water","elementType":"geometry","stylers":[{"color":"#e9e9e9"},{"lightness":17}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":20}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#ffffff"},{"lightness":17}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#ffffff"},{"lightness":29},{"weight":0.2}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":18}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":16}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":21}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#dedede"},{"lightness":21}]},{"elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#ffffff"},{"lightness":16}]},{"elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#333333"},{"lightness":40}]},{"elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#f2f2f2"},{"lightness":19}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#fefefe"},{"lightness":20}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#fefefe"},{"lightness":17},{"weight":1.2}]}], { name: 'nKStyle' });
        map.mapTypes.set('nKStyle', styledMapType);
    }
    if(typeof google !== 'undefined') {
        google.maps.event.addDomListener(window, 'load', initializeGmaps);
    }
</script>
<!-- END: Google Map -->

<!-- START: Contact Info -->
<div class="container">
    <div class="nk-gap-5 mnt-10"></div>
    <div class="row vertical-gap">
        <div class="col-lg-5">
            <!-- START: Info -->
            <h2 class="display-4">Contact Info:</h2>
            <div class="nk-gap mnt-3"></div>

            <p>Praesent interdum congue mauris, et fringilla lacus pel vitae. Quisque nisl mauris, aliquam eu ultrices vel, conse vitae sapien at imperdiet risus. Quisque cursus risus id. fermentum, in auctor quam consectetur.</p>

            <ul class="nk-contact-info">
                <li><strong>Address:</strong> 10111 Santa Monica Boulevard, LA</li>
                <li><strong>Phone:</strong> +44 987 065 908</li>
                <li><strong>Email:</strong> info@Example.com</li>
                <li><strong>Fax:</strong> +44 987 065 909</li>
            </ul>
            <!-- END: Info -->
        </div>
        <div class="col-lg-7">
            <!-- START: Form -->
            <form action="php/ajax-contact-form.php" class="nk-form nk-form-ajax">
                <div class="row vertical-gap">
                    <div class="col-md-6">
                        <input type="text" class="form-control required" name="name" placeholder="Your Name">
                    </div>
                    <div class="col-md-6">
                        <input type="email" class="form-control required" name="email" placeholder="Your Email">
                    </div>
                </div>

                <div class="nk-gap-1"></div>
                <input type="text" class="form-control required" name="title" placeholder="Your Title">

                <div class="nk-gap-1"></div>
                <textarea class="form-control required" name="message" rows="8" placeholder="Your Message" aria-required="true"></textarea>
                <div class="nk-gap-1"></div>
                <div class="nk-form-response-success"></div>
                <div class="nk-form-response-error"></div>
                <button class="nk-btn nk-btn-color-dark-1">Send Message</button>
            </form>
            <!-- END: Form -->
        </div>
    </div>
    <div class="nk-gap-5"></div>
</div>
<!-- END: Contact Info -->

{% endblock %}