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

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

{% block content %}

<div class="section">
    <div class="section-background">
        <div class="section-bg-image section-bg-image-size-lg-100 section-bg-image-position-xs-top section-bg-image-paralax --o--demo-bg-image-1 --o--opacity-9"></div>
    </div>
    <div class="section-content">
        <div class="container">
            <div class="row">
                <div class="col-md-6 offset-md-3 text-xs-center">
                    <h1 class="--o--m-xs-t-20 --o--m-md-t-20 --o--m-xl-t-30 --o--opacity-8 --o--os-animation" data-os-animation="fadeIn" data-os-animation-delay=".2s">
                        Divinity
                    </h1>
                    <p class="lead m-b-9 --o--os-animation" data-os-animation="fadeIn" data-os-animation-delay=".3s">
                        Heavenly church, charity & fund-raising HTML template.
                    </p>
                </div>
                <div class="col-md-4">
                    <div class="card text-xs-center --o--shadow-8 --o--shadow-hover-16 --o--photo-filter-hover-none --o--photo-filter-desaturate-50 --o--transition --o--os-animation" data-os-animation="fadeIn" data-os-animation-delay=".4s">
                        <a href="songs/index.html">
                            <div class="card-img-container --o--opacity-8">
                                <img class="card-img" src="https://placehold.it/400x500" alt="Card image">
                                <span class="btn-demo btn btn-primary btn-lg --o--shadow-8 --o--shadow-hover-16">
                                    vew demo
                                </span>
                            </div>
                            <div class="card-block">
                                <h2 class="h3 card-title">Songs</h2>
                                <h6 class="card-subtitle font-italic text-muted">Modern &amp; Colorful Church Site</h6>
                            </div>
                        </a>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card text-xs-center --o--shadow-8 --o--shadow-hover-16 --o--photo-filter-hover-none --o--photo-filter-desaturate-50 --o--transition --o--os-animation" data-os-animation="fadeIn" data-os-animation-delay=".5s">
                        <a href="psalms/index.html">
                            <div class="card-img-container --o--opacity-8">
                                <img class="card-img" src="https://placehold.it/400x500" alt="Card image">
                                <span class="btn-demo btn btn-primary btn-lg --o--shadow-8 --o--shadow-hover-16">
                                    vew demo
                                </span>
                            </div>
                            <div class="card-block">
                                <h2 class="h3 card-title">Psalms</h2>
                                <h6 class="card-subtitle font-italic text-muted">Clean &amp; Minimal Church Site</h6>
                            </div>
                        </a>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card text-xs-center --o--shadow-8 --o--shadow-hover-16 --o--photo-filter-hover-none --o--photo-filter-desaturate-50 --o--transition --o--os-animation" data-os-animation="fadeIn" data-os-animation-delay=".6s">
                        <a href="acts/index.html">
                            <div class="card-img-container --o--opacity-8">
                                <img class="card-img" src="https://placehold.it/400x500" alt="Card image">
                                <span class="btn-demo btn btn-primary btn-lg --o--shadow-8 --o--shadow-hover-16">
                                    vew demo
                                </span>
                            </div>
                            <div class="card-block">
                                <h2 class="h3 card-title">Acts</h2>
                                <h6 class="card-subtitle font-italic text-muted">Emotive Charity Site</h6>
                            </div>
                        </a>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card text-xs-center --o--shadow-8 --o--shadow-hover-16 --o--photo-filter-hover-none --o--photo-filter-desaturate-50 --o--transition --o--os-animation" data-os-animation="fadeIn" data-os-animation-delay=".7s">
                        <a href="genesis/index.html">
                            <div class="card-img-container --o--opacity-8">
                                <img class="card-img" src="https://placehold.it/400x500" alt="Card image">
                                <span class="btn-demo btn btn-primary btn-lg --o--shadow-8 --o--shadow-hover-16">
                                    vew demo
                                </span>
                            </div>
                            <div class="card-block">
                                <h2 class="h3 card-title">Genesis</h2>
                                <h6 class="card-subtitle font-italic text-muted">Unique Eyecatching Church Site</h6>
                            </div>
                        </a>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card text-xs-center --o--shadow-8 --o--shadow-hover-16 --o--photo-filter-hover-none --o--photo-filter-desaturate-50 --o--transition --o--os-animation" data-os-animation="fadeIn" data-os-animation-delay=".8s">
                        <a href="kings/index.html">
                            <div class="card-img-container --o--opacity-8">
                                <img class="card-img" src="https://placehold.it/400x500" alt="Card image">
                                <span class="btn-demo btn btn-primary btn-lg --o--shadow-8 --o--shadow-hover-16">
                                    vew demo
                                </span>
                            </div>
                            <div class="card-block">
                                <h2 class="h3 card-title">Kings</h2>
                                <h6 class="card-subtitle font-italic text-muted">Patriotic Veterans Fundraising Site</h6>
                            </div>
                        </a>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card text-xs-center --o--shadow-8 --o--shadow-hover-16 --o--photo-filter-hover-none --o--photo-filter-desaturate-50 --o--transition --o--os-animation" data-os-animation="fadeIn" data-os-animation-delay=".9s">
                        <div class="card-img-container --o--opacity-8">
                             <img class="card-img" src="https://placehold.it/400x500" alt="Card image">
                            <div class='cogs'>
                                <div class='cogs-overlay'></div>
                                <div class='cogs-parts'>
                                    <div class='cogs-parts-top'>
                                        <div class='top-part'></div>
                                        <div class='top-part'></div>
                                        <div class='top-part'></div>
                                        <div class='top_hole'></div>
                                    </div>
                                    <div class='cogs-parts-left'>
                                        <div class='left-part'></div>
                                        <div class='left-part'></div>
                                        <div class='left-part'></div>
                                        <div class='left_hole'></div>
                                    </div>
                                    <div class='cogs-parts-bottom'>
                                        <div class='bottom-part'></div>
                                        <div class='bottom-part'></div>
                                        <div class='bottom-part'></div>
                                        <div class='bottom-hole'></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card-block">
                            <h2 class="h3 card-title">More to come</h2>
                            <h6 class="card-subtitle font-italic text-muted">More demos will be added</h6>
                        </div>
                    </div>
                </div>
                <div class="col-md-12">
                     <h4 class="text-xs-center m-t-3 m-b-9 ---o--transition --o--os-animation" data-os-animation="fadeIn" data-os-animation-delay=".6s">Click on any demo to view it, more to follow.</h4>
                </div>
            </div>
        </div>
    </div>
</div>

{% endblock %}