{% set active_page = 'contact.html' -%}

{% extends "layouts/default.html" %}

{% block extrajs %}
    <script type="text/javascript" src="assets/js/contact.min.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA53lVLoFr_BgRcgzx80ThvLm4vBJLp3x0"></script>
{% endblock %}

{% block content %}
<div class="section">
    <div class="section-background">
        <div class="section-bg-image section-bg-image-size-lg-contain section-bg-image-position-xs-top section-bg-image-paralax --o--opacity-3 --o--demo-bg-image-04-b section-bg-image-size-xs-100"></div>
    </div>
    <div class="section-content">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <h1 class="h2 --o--heading-bordered text-capitalize --o--os-animation m-t-25 m-b-3" data-os-animation="fadeIn" data-os-animation-delay=".3s">
                        <small class="text-muted font-italic --o--text-xs-light">Send Us</small> Your Message
                    </h1>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12" >
                    <div class="card card-hero --o--shadow-8 --o--shadow-hover-16 --o--transition --o--os-animation" data-os-animation="fadeIn" data-os-animation-delay=".6s">
                        <div class="card-img-container">
                            <img class="card-img --o--opacity-8" src="https://placehold.it/1600x1000" alt="Card image">
                        </div>
                        <div class="card-block">
                            <form action="contact_mailer.php" class="contact-form">
                                <div class="row text-xs-center">
                                    <div class="col-md-6">
                                        <input type="text" id="name" name="name" class="form-control --o--shadow-2 --o--shadow-focus-4 --o--transition m-b-2" placeholder="Name">
                                    </div>
                                    <div class="col-md-6">
                                        <input type="email" id="email" name="email" class="form-control --o--shadow-2 --o--shadow-focus-4 --o--transition m-b-2" placeholder="Your Email">
                                    </div>
                                    <div class="col-md-12">
                                        <textarea id="message" name="message" rows="8" class="form-control --o--shadow-2 --o--shadow-focus-4 --o--transition m-b-2" placeholder="Your Message"></textarea>
                                        <button type="submit" class="btn btn-primary --o--shadow-2">Send Message</button>
                                    </div>
                                </div>
                                <div class="oxy-messages p-t-2"></div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-6">
                    <h2 class="--o--heading-bordered text-capitalize --o--os-animation  m-t-9 m-b-3 m-t-15" data-os-animation="fadeIn" data-os-animation-delay=".3s">
                        <small class="text-muted font-italic">Address</small> & Details
                    </h2>
                </div>
            </div>

            <div class="row">
                <div class="col-md-12">
                    <div class="card card-horizontal card-hero --o--shadow-8 --o--shadow-hover-16 --o--transition --o--os-animation m-b-9" data-os-animation="fadeIn" data-os-animation-delay=".6s">
                        <div class="row flex-items-xs-middle">
                            <div class="col-lg-6 flex-lg-last --o--photo-filter-grayscale">
                                <div class="google-map" id="map" style="height:550px"></div>
                            </div>
                            <div class="col-lg-6 flex-lg-first">
                                <div class="card-block">
                                    <dl class="row m-b-0">
                                        <dt class="col-md-4">
                                            <span class="text-muted font-italic">Street:</span>
                                        </dt>
                                        <dd class="col-md-8">
                                            28th Envato Street
                                        </dd>
                                        <dt class="col-md-4">
                                            <span class="text-muted font-italic">City:</span>
                                        </dt>
                                        <dd class="col-md-8">
                                            New York
                                        </dd>
                                        <dt class="col-md-4">
                                            <span class="text-muted font-italic">Phone No:</span>
                                        </dt>
                                        <dd class="col-md-8">
                                            555-7894-1144
                                        </dd>
                                        <dt class="col-md-4">
                                            <span class="text-muted font-italic">E-Mail:</span>
                                        </dt>
                                        <dd class="col-md-8">
                                            info@divinitychurch.org
                                        </dd>
                                        <dt class="col-md-4">
                                            <span class="text-muted font-italic">Manager:</span>
                                        </dt>
                                        <dd class="col-md-8">
                                            Gary Jones
                                        </dd>
                                        <dt class="col-md-4">
                                            <span class="text-muted font-italic">Facebook:</span>
                                        </dt>
                                        <dd class="col-md-8">
                                            Divinity Church Group
                                        </dd>
                                        <dt class="col-md-4">
                                            <span class="text-muted font-italic">Twitter:</span>
                                        </dt>
                                        <dd class="col-md-8">
                                            @Divinity_Church
                                        </dd>
                                        <dt class="col-md-4">
                                            <span class="text-muted font-italic">Instagram:</span>
                                        </dt>
                                        <dd class="col-md-8">
                                            The Great Divinity Church
                                        </dd>
                                    </dl>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="section --o--demo-bg-gold-pattern">
    <div class="section-content">
        <div class="container-fluid">
            <div class="row --o--text-xs-light text-xs-center">
                <div class="col-md-3 p-y-6">
                    <i class="fa fa-handshake-o fa-2x --o--os-animation" data-os-animation="fadeIn" data-os-animation-delay=".3s"></i>
                    <h2 class="m-b-1 --o--os-animation" data-os-animation="fadeIn" data-os-animation-delay=".3s">3000</h2>
                    <h6 class="m-b-0 --o--os-animation" data-os-animation="fadeIn" data-os-animation-delay=".3s" >amazing partners</h6>
                </div>
                <div class="col-md-3 p-y-6 --o--demo-bg-black-05">
                    <i class="fa fa-heart-o fa-2x --o--os-animation" data-os-animation="fadeIn" data-os-animation-delay=".4s"></i>
                    <h2 class="m-b-1 --o--os-animation" data-os-animation="fadeIn" data-os-animation-delay=".4s">450</h2>
                    <h6 class="m-b-0 --o--os-animation" data-os-animation="fadeIn" data-os-animation-delay=".4s" >funded hospitals</h6>
                </div>
                <div class="col-md-3 p-y-6 --o--demo-bg-black-10">
                    <i class="fa fa-stethoscope fa-2x --o--os-animation" data-os-animation="fadeIn" data-os-animation-delay=".5s"></i>
                    <h2 class="m-b-1 --o--os-animation" data-os-animation="fadeIn" data-os-animation-delay=".5s">250</h2>
                    <h6 class="m-b-0 --o--os-animation" data-os-animation="fadeIn" data-os-animation-delay=".5s" >medical checks</h6>
                </div>
                <div class="col-md-3 p-y-6 --o--demo-bg-black-15">
                    <i class="fa fa-tint fa-2x --o--os-animation" data-os-animation="fadeIn" data-os-animation-delay=".6s"></i>
                    <h2 class="m-b-1 --o--os-animation" data-os-animation="fadeIn" data-os-animation-delay=".6s">200</h2>
                    <h6 class="m-b-0 --o--os-animation" data-os-animation="fadeIn" data-os-animation-delay=".6s" >water projects</h6>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}