{% extends 'base.html.twig' %}

{% block title %}Hello DefaultController!{% endblock %}

{% block body %}

<div class="tm-top-d-box tm-light-bg">
    <div class="uk-container uk-container-center">
        <section class="uk-grid-collapse tm-top-d uk-grid tm-xlarge-padding" data-uk-grid-match="{target:'> div > .uk-panel'}" data-uk-grid-margin>
            <div class="uk-width-1-1">
                <div class="uk-panel CuteImageGallery" >
                    <h1 class="tm-title tm-text-center tm-p-top-medium">
                        <span class="border">Gallery</span>
                    </h1>
                    <div>In sollicitudin, ipsum nec auctor malesuada, elit turpis fermentum odio, ac vestibulum dui risus non elit. Quisque varius ex arcu, vitae rhoncus justo lacinia ac. Nunc eu bibendum mauris, et tincidunt ex. Duis non aliquam nibh.</div>
                    <div class="uk-margin">
                        <ul id="tm-gallery-filter" class="uk-subnav uk-subnav-pill uk-margin-bottom">
                            <li class="uk-active" data-uk-filter="">
                                <a href="#">All</a>
                            </li>
                            <li class="" data-uk-filter="OTHER">
                                <a href="#">
                                OTHER                            </a>
                            </li>
                            <li class="" data-uk-filter="GALLERY">
                                <a href="#">
                                GALLERY                            </a>
                            </li>
                            <li class="" data-uk-filter="NEWS">
                                <a href="#">
                                NEWS                            </a>
                            </li>
                            <li class="" data-uk-filter="EVENTS">
                                <a href="#">
                                EVENTS                            </a>
                            </li>
                        </ul>
                        <div class="uk-grid-width-small-1-2 uk-grid-width-medium-1-3 uk-grid-width-large-1-4" data-uk-grid="{controls: '#tm-gallery-filter', animation: 'uk-animation-fade, uk-animation-slide-left'}">
                            <div data-uk-filter="OTHER">
                                <div class="uk-panel">
                                    <figure class="uk-overlay uk-overlay-hover">
                                        <img class="uk-overlay-scale" src="./images/gall-img-015.jpg" alt="">
                                    </figure>
                                    <div class="uk-position-cover uk-flex uk-flex-center uk-flex-bottom">
                                        <div class="tm-my-overlay uk-width-1-1">
                                            <p></p>
                                        </div>
                                    </div>
                                    <a class="uk-position-cover" 
                                           data-uk-lightbox="{group:'gallery-group'}" 
                                           data-lightbox-type="image" 
                                           href="./images/gall-img-015.jpg"></a>
                                </div>
                            </div>
                            <div data-uk-filter="OTHER">
                                <div class="uk-panel">
                                    <figure class="uk-overlay uk-overlay-hover">
                                        <img class="uk-overlay-scale" src="./images/gall-img-014.jpg" alt="">
                                    </figure>
                                    <div class="uk-position-cover uk-flex uk-flex-center uk-flex-bottom">
                                        <div class="tm-my-overlay uk-width-1-1">
                                            <p></p>
                                        </div>
                                    </div>
                                    <a class="uk-position-cover" 
                                       data-uk-lightbox="{group:'gallery-group'}" 
                                       data-lightbox-type="image" 
                                       href="./images/gall-img-014.jpg"></a>
                            	</div>
                            </div>
                            <div data-uk-filter="OTHER">
                                <div class="uk-panel">
                                    <figure class="uk-overlay uk-overlay-hover">
                                        <img class="uk-overlay-scale" src="./images/gall-img-011.jpg" alt="">
                                    </figure>
                                    <div class="uk-position-cover uk-flex uk-flex-center uk-flex-bottom">
                                        <div class="tm-my-overlay uk-width-1-1">
                                            <p></p>
                                        </div>
                                    </div>
                                    <a class="uk-position-cover" 
                                   data-uk-lightbox="{group:'gallery-group'}" 
                                   data-lightbox-type="image" 
                                   href="./images/gall-img-011.jpg"></a>
                                </div>
                            </div>
                            <div data-uk-filter="OTHER">
                                <div class="uk-panel">
                                    <figure class="uk-overlay uk-overlay-hover">
                                        <img class="uk-overlay-scale" src="./images/gall-img-0171.jpg" alt="">
                                    </figure>
                                    <div class="uk-position-cover uk-flex uk-flex-center uk-flex-bottom">
                                        <div class="tm-my-overlay uk-width-1-1">
                                            <p></p>
                                        </div>
                                    </div>
                                    <a class="uk-position-cover" data-uk-lightbox="{group:'gallery-group'}" data-lightbox-type="image" href="./images/gall-img-0171.jpg"></a>
                                </div>
                            </div>
                            <div data-uk-filter="OTHER">
                                <div class="uk-panel">
                                    <figure class="uk-overlay uk-overlay-hover">
                                        <img class="uk-overlay-scale" src="./images/gall-img-013.jpg" alt="gall-img-013">
                                    </figure>
                                    <div class="uk-position-cover uk-flex uk-flex-center uk-flex-bottom">
                                        <div class="tm-my-overlay uk-width-1-1">
                                            <p></p>
                                        </div>
                                    </div>
                                    <a class="uk-position-cover" data-uk-lightbox="{group:'gallery-group'}" data-lightbox-type="image" href="./images/gall-img-013.jpg"></a>
                                </div>
                            </div>
                            <div data-uk-filter="GALLERY">
                                <div class="uk-panel">
                                    <figure class="uk-overlay uk-overlay-hover">
                                        <img class="uk-overlay-scale" src="./images/gall-img-010.jpg" alt="">
                                    </figure>
                                    <div class="uk-position-cover uk-flex uk-flex-center uk-flex-bottom">
                                        <div class="tm-my-overlay uk-width-1-1">
                                            <p></p>
                                        </div>
                                    </div>
                                    <a class="uk-position-cover" data-uk-lightbox="{group:'gallery-group'}" data-lightbox-type="image" href="./images/gall-img-010.jpg"></a>
                                </div>
                            </div>
                            <div data-uk-filter="NEWS">
                                <div class="uk-panel">
                                    <figure class="uk-overlay uk-overlay-hover">
                                        <img class="uk-overlay-scale" src="./images/gall-img-012.jpg" alt="">
                                    </figure>
                                    <div class="uk-position-cover uk-flex uk-flex-center uk-flex-bottom">
                                        <div class="tm-my-overlay uk-width-1-1">
                                            <p></p>
                                        </div>
                                    </div>
                                    <a class="uk-position-cover" data-uk-lightbox="{group:'gallery-group'}" data-lightbox-type="image" href="./images/gall-img-012.jpg"></a>
                                </div>
                            </div>
                            <div data-uk-filter="EVENTS">
                                <div class="uk-panel">
                                    <figure class="uk-overlay uk-overlay-hover">
                                        <img class="uk-overlay-scale" src="./images/gall-img-016.jpg" alt="gall-img-016">
                                    </figure>
                                    <div class="uk-position-cover uk-flex uk-flex-center uk-flex-bottom">
                                        <div class="tm-my-overlay uk-width-1-1">
                                            <p></p>
                                        </div>
                                    </div>
                                    <a class="uk-position-cover" data-uk-lightbox="{group:'gallery-group'}" data-lightbox-type="image" href="./images/gall-img-016.jpg"></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
</div>


{% endblock %}