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

{% block title %}Deville | Référence{% endblock %}

{% block body %}

<div class="top-visual ">
    <img class="" src="{{ asset('images/service1.jpg') }}" title="" alt="">

    <div class="grid">
        <h1 class="titleLabelWhite"><span class="label opacity-70">Références</span><span class="icon bgtitlelabel opacity-70"></span><span class="line lineBlack hidden"></span></h1>
    </div>
</div>


<!-- Content : Start -->
<div class="grid">
    <div class="mT-22">
        <div class="portfolio mB-20 overflow-hidden">
            <ul class="filter style4">
                <li>
                    <a href="{{ path('references') }}" data-filter=".deville2" class="all active">Tout</a></li>
                <li>
                    <a class="leinmobile" href="{{ path('references') }}" data-filter=".tag_1">
                        Nos châssis alu                        </a>
                </li>
                <li>
                    <a class="leinmobile" href="{{ path('references') }}" data-filter=".tag_4">
                        Constructions métalliques                        </a>
                </li>
                <li>
                    <a class="leinmobile" href="{{ path('references') }}" data-filter=".tag_5">
                        Nos portes d'entrée                        </a>
                </li>
                <li>
                    <a class="leinmobile" href="{{ path('references') }}" data-filter=".tag_6">
                        Portes Hörmann                        </a>
                </li>
                <li>
                    <a class="leinmobile" href="{{ path('references') }}" data-filter=".tag_7">
                        Chantiers en cours                        </a>
                </li>
            </ul>
            <div class="clearfix"></div>
            <div class="mT-20 overflow-hidden">
                <ul class="items col4 isotope" style="position: relative; overflow: hidden; height: 660px;">

                    {% for reference in references %}
                        <li class="item thumb tag_{{ reference.category.id }} deville2 isotope-item visible12" style="position: absolute; left: 0px; top: 0px; transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1); opacity: 1;">
                            <a href="{{ asset(reference.photo) }}" data-lightbox="tag_image_372" data-title="{{ reference.title }}">
                                <div class="text-overlay">
                                    <div class="info">
                                        <h3>VOIR LE PROJET</h3>
                                    </div>
                                </div>
                                <img src="{{ asset(reference.photo) }}" title="" alt="" style="object-fit: cover;">
                            </a>
                        </li>
                    {% endfor %}

                    {#
                    <li class="item thumb tag_7 deville2 isotope-item visible12" style="position: absolute; left: 0px; top: 0px; transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1); opacity: 1;">
                        <a href="{{ asset('images/GIO GRIDIS.jpg') }}" data-lightbox="tag_image_372" data-title="GIO GRIDIX">
                            <div class="text-overlay">
                                <div class="info">
                                    <h3>VOIR LE PROJET</h3>
                                </div>
                            </div>
                            <img src="{{ asset('images/GIO GRIDIS.jpg') }}" title="" alt="" style="object-fit: cover;">
                        </a>
                    </li>
                    <li class="item thumb tag_6 deville2 isotope-item visible12" style="position: absolute; left: 0px; top: 0px; transform: translate3d(229px, 0px, 0px) scale3d(1, 1, 1); opacity: 1;">
                        <a href="https://devillejsa.be/sites/default/files/images/reference/porte%20garage_0.jpg" data-lightbox="tag_image_370" data-title="Nouvelle construction à LAHAGE">
                            <div class="text-overlay">
                                <div class="info">
                                    <h3>VOIR LE PROJET</h3>
                                </div>
                            </div>
                            <img src="./Références _ Deville sa_files/porte garage_0.jpg" title="" alt="">
                        </a>
                    </li>
                    <li class="item thumb tag_5 deville2 isotope-item visible12" style="position: absolute; left: 0px; top: 0px; transform: translate3d(458px, 0px, 0px) scale3d(1, 1, 1); opacity: 1;">
                        <a href="https://devillejsa.be/sites/default/files/images/reference/porte%20entr%C3%A9e_2.jpg" data-lightbox="tag_image_369" data-title="Nouvelle construction à LAHAGE">
                            <div class="text-overlay">
                                <div class="info">
                                    <h3>VOIR LE PROJET</h3>
                                </div>
                            </div>
                            <img src="./Références _ Deville sa_files/porte entrée_2.jpg" title="" alt="">
                        </a>
                    </li>
                    <li class="item thumb tag_1 deville2 isotope-item visible12" style="position: absolute; left: 0px; top: 0px; transform: translate3d(0px, 220px, 0px) scale3d(1, 1, 1); opacity: 1;">
                        <a href="https://devillejsa.be/sites/default/files/images/reference/facade%202.jpg" data-lightbox="tag_image_367" data-title="Nouvelle construction à CHENE">
                            <div class="text-overlay">
                                <div class="info">
                                    <h3>VOIR LE PROJET</h3>
                                </div>
                            </div>
                            <img src="./Références _ Deville sa_files/facade 2.jpg" title="" alt="">
                        </a>
                    </li>
                    <li class="item thumb tag_7 deville2 isotope-item visible12" style="position: absolute; left: 0px; top: 0px; transform: translate3d(458px, 440px, 0px) scale3d(1, 1, 1); opacity: 1;">
                        <a href="https://devillejsa.be/sites/default/files/images/reference/Honville%20Arch%20NOVA%20en%20cours.jpg" data-lightbox="tag_image_361" data-title="Chantier à Honville">
                            <div class="text-overlay">
                                <div class="info">
                                    <h3>VOIR LE PROJET</h3>
                                </div>
                            </div>
                            <img src="./Références _ Deville sa_files/Honville Arch NOVA en cours.jpg" title="" alt="">
                        </a>
                    </li>
                    <li class="item thumb tag_1 deville2 isotope-item isotope-hidden" style="position: absolute; left: 0px; top: 0px; opacity: 0; transform: translate3d(0px, 220px, 0px) scale3d(0.001, 0.001, 1);">
                        <a href="https://devillejsa.be/" data-lightbox="tag_image_343" data-title="Rénovation extension à Fauvillers">
                            <div class="text-overlay">
                                <div class="info">
                                    <h3>VOIR LE PROJET</h3>
                                </div>
                            </div>
                            <img src="./Références _ Deville sa_files/public" title="" alt="">
                        </a>
                        <a href="https://devillejsa.be/" data-lightbox="tag_image_343" data-title="">
                        </a>
                    </li>
                    #}
                </ul>
                <ul class="filter text-center no-style ">
                    <li class="mT-20">
                        <div id="plusproj" align="center"><a href="https://devillejsa.be/r%C3%A9f%C3%A9rences#" class="PlusdeprojetLink" data-filter=".deville2">
                                <span class="Plusdeprojet">Plus de projets</span>
                                <br>
                                <img alt="" src="./Références _ Deville sa_files/fleche.png" class="imgfliche"></a></div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div><!-- Content : End -->
{% endblock %}