{% set header_title = 'Image Boxes' %}
{% set header_size = 'sm' %}
{% extends 'layouts/layout-1.html' %}

{% block content %}
    <div class="nk-gap-4"></div>

    <div class="container">
        <div class="row vertical-gap lg-gap">

            <!-- START: Image Box 1 -->
            <div class="col-md-6 col-lg-4">
                <div class="nk-image-box-1">
                    <a href="#" class="nk-image-box-link"></a>
                    <img src="assets/images/image-2-600x600.jpg" alt="">
                    <div class="nk-image-box-overlay nk-image-box-center">
                        <div>
                            <h3 class="nk-image-box-title h4">Heading</h3>
                            <div class="nk-image-box-sub-title">Sub Heading</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-lg-4">
                <div class="nk-image-box-1 nk-no-effect">
                    <a href="#" class="nk-image-box-link"></a>
                    <img src="assets/images/image-2-600x600.jpg" alt="">
                    <div class="nk-image-box-overlay nk-image-box-center">
                        <div>
                            <h3 class="nk-image-box-title h4">Heading</h3>
                            <div class="nk-image-box-sub-title">Sub Heading</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-lg-4">
                <div class="nk-image-box-1 nk-no-effect hover">
                    <a href="#" class="nk-image-box-link"></a>
                    <img src="assets/images/image-2-600x600.jpg" alt="">
                    <div class="nk-image-box-overlay nk-image-box-center">
                        <div>
                            <h3 class="nk-image-box-title h4">Heading</h3>
                            <div class="nk-image-box-sub-title">Sub Heading</div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- END: Image Box 1 -->

            <!-- START: Image Box 2 -->
            <div class="col-md-6 col-lg-4">
                <div class="nk-image-box-1-a">
                    <img src="assets/images/image-1-600x600.jpg" alt="">
                    <div class="nk-image-box-overlay nk-image-box-center">
                        <div>
                            <a href="#" class="nk-image-box-icon-btn"><span class="ion-eye"></span></a>
                            <a href="#" class="nk-image-box-icon-btn"><span class="fa fa-link"></span></a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-lg-4">
                <div class="nk-image-box-1-a nk-no-effect">
                    <img src="assets/images/image-1-600x600.jpg" alt="">
                    <div class="nk-image-box-overlay nk-image-box-center">
                        <div>
                            <a href="#" class="nk-image-box-icon-btn"><span class="ion-eye"></span></a>
                            <a href="#" class="nk-image-box-icon-btn"><span class="fa fa-link"></span></a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-lg-4">
                <div class="nk-image-box-1-a nk-no-effect hover">
                    <img src="assets/images/image-1-600x600.jpg" alt="">
                    <div class="nk-image-box-overlay nk-image-box-center">
                        <div>
                            <a href="#" class="nk-image-box-icon-btn"><span class="ion-eye"></span></a>
                            <a href="#" class="nk-image-box-icon-btn"><span class="fa fa-link"></span></a>
                        </div>
                    </div>
                </div>
            </div>
            <!-- END: Image Box 2 -->

            <!-- START: Image Box 3 -->
            <div class="col-md-6 col-lg-4">
                <div class="nk-image-box-2">
                    <a href="#" class="nk-image-box-link"></a>
                    <img src="assets/images/image-3-600x600.jpg" data-from='1.1' alt="">
                    <div class="nk-image-box-overlay nk-image-box-bottom">
                        <div>
                            <h3 class="nk-image-box-title h4">Heading</h3>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-lg-4">
                <div class="nk-image-box-2 nk-no-effect">
                    <a href="#" class="nk-image-box-link"></a>
                    <img src="assets/images/image-3-600x600.jpg" data-from='1.1' alt="">
                    <div class="nk-image-box-overlay nk-image-box-bottom">
                        <div>
                            <h3 class="nk-image-box-title h4">Heading</h3>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-lg-4">
                <div class="nk-image-box-2 nk-no-effect hover">
                    <a href="#" class="nk-image-box-link"></a>
                    <img src="assets/images/image-3-600x600.jpg" data-from='1.1' alt="">
                    <div class="nk-image-box-overlay nk-image-box-bottom">
                        <div>
                            <h3 class="nk-image-box-title h4">Heading</h3>
                        </div>
                    </div>
                </div>
            </div>
            <!-- END: Image Box 3 -->

            <!-- START: Image Box 4 -->
            <div class="col-md-6 col-lg-4">
                <div class="nk-image-box-3">
                    <a href="#" class="nk-image-box-link"></a>
                    <img src="assets/images/image-4-600x600.jpg" alt="">
                    <div class="nk-image-box-overlay nk-image-box-bottom">
                        <div>
                            <h3 class="nk-image-box-title h4">Heading</h3>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-lg-4">
                <div class="nk-image-box-3 nk-no-effect">
                    <a href="#" class="nk-image-box-link"></a>
                    <img src="assets/images/image-4-600x600.jpg" alt="">
                    <div class="nk-image-box-overlay nk-image-box-bottom">
                        <div>
                            <h3 class="nk-image-box-title h4">Heading</h3>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-lg-4">
                <div class="nk-image-box-3 nk-no-effect hover">
                    <a href="#" class="nk-image-box-link"></a>
                    <img src="assets/images/image-4-600x600.jpg" alt="">
                    <div class="nk-image-box-overlay nk-image-box-bottom">
                        <div>
                            <h3 class="nk-image-box-title h4">Heading</h3>
                        </div>
                    </div>
                </div>
            </div>
            <!-- END: Image Box 4 -->

            <!-- START: Image Box 6 -->
            <div class="col-md-6 col-lg-4">
                <div class="nk-image-box-4">
                    <img src="assets/images/image-5-600x600.jpg" alt="">
                    <div class="nk-image-box-overlay nk-image-box-center">
                        <div>
                            <a href="#" class="nk-image-box-icon-btn"><span class="ion-eye"></span></a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-lg-4">
                <div class="nk-image-box-4">
                    <a href="#" class="nk-image-box-link"></a>
                    <img src="assets/images/image-5-600x600.jpg" alt="">
                    <div class="nk-image-box-overlay nk-image-box-center">
                        <div>
                            <h3 class="nk-image-box-title h4">Heading</h3>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-lg-4">
                <div class="nk-image-box-4">
                    <a href="#" class="nk-image-box-link"></a>
                    <img src="assets/images/image-5-600x600.jpg" alt="">
                    <div class="nk-image-box-overlay nk-image-box-center">
                        <div>
                            <h3 class="nk-image-box-title h4 mb-20">Heading</h3>
                            <div class="nk-btn">Read More</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-lg-4">
                <div class="nk-image-box-4 nk-no-effect">
                    <a href="#" class="nk-image-box-link"></a>
                    <img src="assets/images/image-5-600x600.jpg" alt="">
                    <div class="nk-image-box-overlay nk-image-box-top">
                        <div>
                            <h3 class="nk-image-box-title h4 mb-20">Heading</h3>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-lg-4">
                <div class="nk-image-box-4 nk-no-effect">
                    <a href="#" class="nk-image-box-link"></a>
                    <img src="assets/images/image-5-600x600.jpg" alt="">
                    <div class="nk-image-box-overlay nk-image-box-bottom">
                        <div>
                            <h3 class="nk-image-box-title h4 mb-20">Heading</h3>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-lg-4">
                <div class="nk-image-box-4 nk-no-effect">
                    <a href="#" class="nk-image-box-link"></a>
                    <img src="assets/images/image-5-600x600.jpg" alt="">
                    <div class="nk-image-box-overlay"></div>
                </div>
            </div>
            <!-- END: Image Box 6 -->
        </div>
    </div>

    <div class="nk-gap-4"></div>
    <div class="nk-gap-4"></div>
{% endblock %}