{% 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 --o--demo-bg-black">
    <div class="section-background">
        <div class="section-bg-image section-bg-image-size-md-cover --o--demo-bg-image-6 section-bg-image-paralax --o--opacity-5"></div>
    </div>
    <div class="section-content">
        <div class="container">
            <div class="row p-y-10 --o--text-xs-light">
                <div class="col-md-12">
                    <h1 class="--o--heading-bordered --o--heading-bordered text-capitalize --o--os-animation m-b-0" data-os-animation="fadeIn" data-os-animation-delay=".3s">
                    <small class="text-muted font-italic">Contact</small> Divinity
                    </h1>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="section">
    <div class="section-content">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <h2 class="--o--heading-bordered text-capitalize --o--os-animation  m-t-10 m-b-4" data-os-animation="fadeIn" data-os-animation-delay=".3s">
                        <small class="text-muted font-italic">Send your</small> Message
                    </h2>
                </div>
                <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=".3s">
                        <div class="card-img-container">
                            <img class="card-img-top" src="https://placehold.it/1100x300" alt="Card image cap">
                        </div>
                        <div class="card-block">
                            <p class="lead">Do you have anything in your mind to tell us? Please don't hesitate to get in touch to us via our contact form.</p>
                            <form action="contact_mailer.php" class="contact-form" id="contactForm">
                                <div class="row 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>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="col-md-12">
                    <h2 class="--o--heading-bordered text-capitalize --o--os-animation  m-t-10 m-b-4" data-os-animation="fadeIn" data-os-animation-delay=".3s">
                        <small class="text-muted font-italic">Address</small> & Details
                    </h2>
                </div>
                <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-10" data-os-animation="fadeIn" data-os-animation-delay=".4s">
                        <div class="row flex-items-xs-middle">
                            <div class="col-lg-6 flex-lg-last">
                                <div class="google-map --o--photo-filter-grayscale" 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-black">
    <div class="section-background">
        <div class="section-bg-image section-bg-image-size-md-cover --o--demo-bg-image-6 section-bg-image-paralax --o--opacity-5"></div>
    </div>
    <div class="section-content">
        <div class="container-fluid">
            <div class="row ">
                <div class="col-md-3 col-xs-6 p-y-6 text-xs-center --o--demo-bg-orange-45 --o--text-xs-light text-capitalize --o--os-animation" data-os-animation="fadeInUp" data-os-animation-delay=".3s">
                    <i class="fa fa-graduation-cap fa-2x"></i>
                    <h2 class="m-b-1">250</h2>
                    <h5 class="m-b-0">School Graduates</h5>
                </div>
                <div class="col-md-3 col-xs-6 p-y-6 text-xs-center --o--demo-bg-orange-60 --o--text-xs-light text-capitalize --o--os-animation" data-os-animation="fadeInUp" data-os-animation-delay=".4s">
                    <i class="fa fa-heartbeat fa-2x"></i>

                    <h2 class="m-b-1">450</h2>
                    <h5 class="m-b-0">Health Check-ups</h5>
                </div>
                <div class="col-md-3 col-xs-6 p-y-6 text-xs-center --o--demo-bg-orange-75 --o--text-xs-light text-capitalize --o--os-animation" data-os-animation="fadeInUp" data-os-animation-delay=".5s">
                    <i class="fa fa-stethoscope fa-2x"></i>
                    <h2 class="m-b-1">250</h2>
                    <h5 class="m-b-0">medical checks</h5>
                </div>
                <div class="col-md-3 col-xs-6 p-y-6 text-xs-center --o--demo-bg-orange-90 --o--text-xs-light text-capitalize --o--os-animation" data-os-animation="fadeInUp" data-os-animation-delay=".6s">
                    <i class="fa fa-university fa-2x"></i>
                    <h2 class="m-b-1">85</h2>
                    <h5 class="m-b-0">University Scholarships</h5>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}