{% load static %}
<div class="banner-area bg-cover" style="background-image: url(assets/img/shape-1.png);">
    <div id="bootcarousel" class="carousel light-bg top-padding text-dark slide animate_text" data-ride="carousel">
        <!-- Wrapper for slides -->
        <div class="carousel-inner">
            <div class="item active">
                <div class="container">
                    <div class="row">
                        <div class="double-items">
                            <div class="col-md-7">
                                <div class="info">
                                    <h2 data-animation="animated slideInLeft">Система Умный
                                        <strong>Дом</strong></h2>
                                    <ul data-animation="animated fadeInLeft">
                                        <li>Безопасность информации</li>
                                        <li>Контроль устройств</li>
                                        <li>Энергоэффективность</li>
                                        <li>Простота управления</li>
                                    </ul>
                                    <a data-animation="animated fadeInDown" class="btn circle btn-theme effect btn-md"
                                       href="#">Подробнее</a>
                                </div>
                            </div>
                            <div class="col-md-5">
                                <div class="thumb" data-animation="animated slideInRight">
                                    <img src="{% static 'file/home/img/illustrations/2.svg' %}" alt="Thumb">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
{#            <div class="item">#}
{#                <div class="container">#}
{#                    <div class="row">#}
{#                        <div class="double-items">#}
{#                            <div class="col-md-7">#}
{#                                <div class="info">#}
{#                                    <h2 data-animation="animated slideInLeft">We're offering <strong>Standard</strong>#}
{#                                        services</h2>#}
{#                                    <ul data-animation="animated fadeInLeft">#}
{#                                        <li>Full Security</li>#}
{#                                        <li>Team Collaboration</li>#}
{#                                        <li>Poweful admin panel</li>#}
{#                                        <li>Create and design responsive</li>#}
{#                                    </ul>#}
{#                                    <a data-animation="animated fadeInDown" class="btn circle btn-theme effect btn-md"#}
{#                                       href="#">Learn more</a>#}
{#                                </div>#}
{#                            </div>#}
{#                            <div class="col-md-5">#}
{#                                <div class="thumb" data-animation="animated slideInRight">#}
{#                                    <img src="{% static 'file/home/img/illustrations/1.svg' %}" alt="Thumb">#}
{#                                </div>#}
{#                            </div>#}
{#                        </div>#}
{#                    </div>#}
{#                </div>#}
{#            </div>#}
        </div>
        <!-- End Wrapper for slides -->

        <!-- Left and right controls -->
        <a class="left carousel-control theme" href="#bootcarousel" data-slide="prev">
            <i class="fa fa-angle-left"></i>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control theme" href="#bootcarousel" data-slide="next">
            <i class="fa fa-angle-right"></i>
            <span class="sr-only">Дальше</span>
        </a>
    </div>
</div>