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

{% block content %}
<div class="main-container">
    <section class="text-center imagebg space--md" data-overlay="3">
        <div class="background-image-holder">
            <img alt="background" src="img/banner_colours.jpg" />
        </div>
        <div class="container">
            <div class="row">
                <div class="col-md-8 col-lg-6">
                    <h1>Colours</h1>
                </div>
            </div>
            <!--end of row-->
        </div>
        <!--end of container-->
    </section>
    <section class="text-center space--md">
        <div class="col-md-8">
            <div class="slider" data-arrows="true" data-paging="true">
                <ul class="slides">
                    <li>
                        <a href="/img/colours_01.jpg" data-lightbox="Gallery 1">
                            <img alt="Image" src="/img/colours_01.jpg" />
                        </a>
                    </li>
                    <li>
                        <a href="/img/colours_02.jpg" data-lightbox="Gallery 1">
                            <img alt="Image" src="/img/colours_02.jpg" />
                        </a>
                    </li>
                    <li>
                        <a href="/img/colours_03.jpg" data-lightbox="Gallery 1">
                            <img alt="Image" src="/img/colours_03.jpg" />
                        </a>
                    </li>
                    <li>
                        <a href="/img/colours_04.jpg" data-lightbox="Gallery 1">
                            <img alt="Image" src="/img/colours_04.jpg" />
                        </a>
                    </li>
                    <li>
                        <a href="/img/colours_05.jpg" data-lightbox="Gallery 1">
                            <img alt="Image" src="/img/colours_05.jpg" />
                        </a>
                    </li>
                    <li>
                        <a href="/img/colours_06.jpg" data-lightbox="Gallery 1">
                            <img alt="Image" src="/img/colours_06.jpg" />
                        </a>
                    </li>
                    <li>
                        <a href="/img/colours_07.jpg" data-lightbox="Gallery 1">
                            <img alt="Image" src="/img/colours_07.jpg" />
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </section>
</div>
{% endblock content %}