{% extends "layout.html" %}

{% set title = 'Products' %}

{% block content %}

<div class="cover-img cover" style="background-image: url('_assets/img/slide.jpg')">
    <div class="container">
        <div class="row">
            <div class="col-sm-6">
                <div class="vcenter">
                    <div class="cover-content ">
                        <h2 class="text-upper">Blouses</h2>
                        <p class="mtmd">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam eum iste nihil nulla sit. Autem cupiditate debitis est excepturi exercitationem fugiat iusto laboriosam, laborum non quae quaerat quia recusandae rerum?</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="container">
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="#">Home</a></li>
            <li class="breadcrumb-item active" aria-current="page">Blouses</li>
        </ol>
    </nav>
    <div class="filter mtxlg mbxlg">
        <div class="row">
            <div class="col-sm-6 col-xs-12">
                <div class="dropdown mrlg">
                    <button class="dropdown-toggle" type="button" id="category" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Category <i class="fa fa-chevron-down mlxs"></i>
                    </button>
                    <div class="dropdown-menu" aria-labelledby="category">
                        <a class="dropdown-item" href="#">Action</a>
                        <a class="dropdown-item" href="#">Another action</a>
                        <a class="dropdown-item" href="#">Something else here</a>
                    </div>
                </div>
                <div class="dropdown mrlg">
                    <button class="dropdown-toggle" type="button" id="style" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Style <i class="fa fa-chevron-down mlxs"></i>
                    </button>
                    <div class="dropdown-menu" aria-labelledby="style">
                        <a class="dropdown-item" href="#">Action</a>
                        <a class="dropdown-item" href="#">Another action</a>
                        <a class="dropdown-item" href="#">Something else here</a>
                    </div>
                </div>
                <div class="dropdown mrlg">
                    <button class="dropdown-toggle" type="button" id="size" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Size <i class="fa fa-chevron-down mlxs"></i>
                    </button>
                    <div class="dropdown-menu" aria-labelledby="size">
                        <a class="dropdown-item" href="#">Action</a>
                        <a class="dropdown-item" href="#">Another action</a>
                        <a class="dropdown-item" href="#">Something else here</a>
                    </div>
                </div>
                <div class="dropdown mrlg">
                    <button class="dropdown-toggle" type="button" id="color" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Color <i class="fa fa-chevron-down mlxs"></i>
                    </button>
                    <div class="dropdown-menu" aria-labelledby="color">
                        <a class="dropdown-item" href="#">Action</a>
                        <a class="dropdown-item" href="#">Another action</a>
                        <a class="dropdown-item" href="#">Something else here</a>
                    </div>
                </div>
                <div class="dropdown">
                    <button class="dropdown-toggle" type="button" id="sort-mobile" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Sort by <i class="fa fa-chevron-down mlxs"></i>
                    </button>
                    <div class="dropdown-menu" aria-labelledby="sort-mobile">
                        <a class="dropdown-item" href="#">Action</a>
                        <a class="dropdown-item" href="#">Another action</a>
                        <a class="dropdown-item" href="#">Something else here</a>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 pull-right">
                <div class="text-right">
                    <span class="results">Showing 1–15 of 61 products</span>
                    <span class="seprator mob-off">|</span>
                    <div class="dropdown mob-off">
                        <button class="dropdown-toggle" type="button" id="sort" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Sort by <i class="fa fa-chevron-down mlxs"></i>
                        </button>
                        <div class="dropdown-menu" aria-labelledby="sort">
                            <a class="dropdown-item" href="#">Action</a>
                            <a class="dropdown-item" href="#">Another action</a>
                            <a class="dropdown-item" href="#">Something else here</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="products-list">
        <div class="row">
            <div class="col-sm-3 col-xs-6">
                <div class="product-item">
                    <a href="#" class="product-img">
                        <img src="_assets/img/products/03.jpg" alt="">
                        <img src="_assets/img/products/01.jpg" class="hover-img" alt="">
                        <div class="sale">
                            25% Off
                        </div>
                    </a>
                    <div class="product-content">
                        <a href="#">
                            <h2 class="mtmd">
                                Puff Sleeves Puff Sleeves
                                Puff Sleeves
                            </h2>
                        </a>
                        <div class="product-footer">
                            <div class="price pull-left">
                                <span class="text-upper">800 egp</span>
                            </div>
                            {% include 'component/product-cta.html' %}
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-3 col-xs-6">
                <div class="product-item">
                    <a href="#" class="product-img">
                        <img src="_assets/img/products/01.jpg" alt="">
                        <img src="_assets/img/products/02.jpg" class="hover-img" alt="">
                        <div class="sale">
                            25% Off
                        </div>
                    </a>
                    <div class="product-content">
                        <a href="#">
                            <h2 class="mtmd">
                                Puff Sleeves Puff Sleeves
                                Puff Sleeves
                            </h2>
                        </a>
                        <div class="product-footer">
                            <div class="price pull-left">
                                <span class="text-upper">800 egp</span>
                            </div>
                            {% include 'component/product-cta.html' %}
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-3 col-xs-6">
                <div class="product-item">
                    <a href="#" class="product-img">
                        <img src="_assets/img/products/02.jpg" alt="">
                        <img src="_assets/img/products/01.jpg" class="hover-img" alt="">
                        <div class="sale">
                            25% Off
                        </div>
                    </a>
                    <div class="product-content">
                        <a href="#">
                            <h2 class="mtmd">
                                Puff Sleeves Puff Sleeves
                                Puff Sleeves
                            </h2>
                        </a>
                        <div class="product-footer">
                            <div class="price pull-left">
                                <span class="text-upper">800 egp</span>
                            </div>
                            {% include 'component/product-cta.html' %}
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-3 col-xs-6">
                <div class="product-item">
                    <a href="#" class="product-img">
                        <img src="_assets/img/products/01.jpg" alt="">
                        <img src="_assets/img/products/02.jpg" class="hover-img" alt="">
                        <div class="sale">
                            25% Off
                        </div>
                    </a>
                    <div class="product-content">
                        <a href="#">
                            <h2 class="mtmd">
                                Puff Sleeves Puff Sleeves
                                Puff Sleeves
                            </h2>
                        </a>
                        <div class="product-footer">
                            <div class="price pull-left">
                                <span class="text-upper">800 egp</span>
                            </div>
                            {% include 'component/product-cta.html' %}
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-3 col-xs-6">
                <div class="product-item">
                    <a href="#" class="product-img">
                        <img src="_assets/img/products/03.jpg" alt="">
                        <img src="_assets/img/products/01.jpg" class="hover-img" alt="">
                        <div class="sale">
                            25% Off
                        </div>
                    </a>
                    <div class="product-content">
                        <a href="#">
                            <h2 class="mtmd">
                                Puff Sleeves Puff Sleeves
                                Puff Sleeves
                            </h2>
                        </a>
                        <div class="product-footer">
                            <div class="price pull-left">
                                <span class="text-upper">800 egp</span>
                            </div>
                            {% include 'component/product-cta.html' %}
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-3 col-xs-6">
                <div class="product-item">
                    <a href="#" class="product-img">
                        <img src="_assets/img/products/01.jpg" alt="">
                        <img src="_assets/img/products/02.jpg" class="hover-img" alt="">
                        <div class="sale">
                            25% Off
                        </div>
                    </a>
                    <div class="product-content">
                        <a href="#">
                            <h2 class="mtmd">
                                Puff Sleeves Puff Sleeves
                                Puff Sleeves
                            </h2>
                        </a>
                        <div class="product-footer">
                            <div class="price pull-left">
                                <span class="text-upper">800 egp</span>
                            </div>
                            {% include 'component/product-cta.html' %}
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-3 col-xs-6">
                <div class="product-item">
                    <a href="#" class="product-img">
                        <img src="_assets/img/products/02.jpg" alt="">
                        <img src="_assets/img/products/01.jpg" class="hover-img" alt="">
                        <div class="sale">
                            25% Off
                        </div>
                    </a>
                    <div class="product-content">
                        <a href="#">
                            <h2 class="mtmd">
                                Puff Sleeves Puff Sleeves
                                Puff Sleeves
                            </h2>
                        </a>
                        <div class="product-footer">
                            <div class="price pull-left">
                                <span class="text-upper">800 egp</span>
                            </div>
                            {% include 'component/product-cta.html' %}
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-3 col-xs-6">
                <div class="product-item">
                    <a href="#" class="product-img">
                        <img src="_assets/img/products/01.jpg" alt="">
                        <img src="_assets/img/products/02.jpg" class="hover-img" alt="">
                        <div class="sale">
                            25% Off
                        </div>
                    </a>
                    <div class="product-content">
                        <a href="#">
                            <h2 class="mtmd">
                                Puff Sleeves Puff Sleeves
                                Puff Sleeves
                            </h2>
                        </a>
                        <div class="product-footer">
                            <div class="price pull-left">
                                <span class="text-upper">800 egp</span>
                            </div>
                            {% include 'component/product-cta.html' %}
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-3 col-xs-6">
                <div class="product-item">
                    <a href="#" class="product-img">
                        <img src="_assets/img/products/03.jpg" alt="">
                        <img src="_assets/img/products/01.jpg" class="hover-img" alt="">
                        <div class="sale">
                            25% Off
                        </div>
                    </a>
                    <div class="product-content">
                        <a href="#">
                            <h2 class="mtmd">
                                Puff Sleeves Puff Sleeves
                                Puff Sleeves
                            </h2>
                        </a>
                        <div class="product-footer">
                            <div class="price pull-left">
                                <span class="text-upper">800 egp</span>
                            </div>
                            {% include 'component/product-cta.html' %}
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-3 col-xs-6">
                <div class="product-item">
                    <a href="#" class="product-img">
                        <img src="_assets/img/products/01.jpg" alt="">
                        <img src="_assets/img/products/02.jpg" class="hover-img" alt="">
                        <div class="sale">
                            25% Off
                        </div>
                    </a>
                    <div class="product-content">
                        <a href="#">
                            <h2 class="mtmd">
                                Puff Sleeves Puff Sleeves
                                Puff Sleeves
                            </h2>
                        </a>
                        <div class="product-footer">
                            <div class="price pull-left">
                                <span class="text-upper">800 egp</span>
                            </div>
                            {% include 'component/product-cta.html' %}
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-3 col-xs-6">
                <div class="product-item">
                    <a href="#" class="product-img">
                        <img src="_assets/img/products/02.jpg" alt="">
                        <img src="_assets/img/products/01.jpg" class="hover-img" alt="">
                        <div class="sale">
                            25% Off
                        </div>
                    </a>
                    <div class="product-content">
                        <a href="#">
                            <h2 class="mtmd">
                                Puff Sleeves Puff Sleeves
                                Puff Sleeves
                            </h2>
                        </a>
                        <div class="product-footer">
                            <div class="price pull-left">
                                <span class="text-upper">800 egp</span>
                            </div>
                            {% include 'component/product-cta.html' %}
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-3 col-xs-6">
                <div class="product-item">
                    <a href="#" class="product-img">
                        <img src="_assets/img/products/01.jpg" alt="">
                        <img src="_assets/img/products/02.jpg" class="hover-img" alt="">
                        <div class="sale">
                            25% Off
                        </div>
                    </a>
                    <div class="product-content">
                        <a href="#">
                            <h2 class="mtmd">
                                Puff Sleeves Puff Sleeves
                                Puff Sleeves
                            </h2>
                        </a>
                        <div class="product-footer">
                            <div class="price pull-left">
                                <span class="text-upper">800 egp</span>
                            </div>
                            {% include 'component/product-cta.html' %}
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-3 col-xs-6">
                <div class="product-item">
                    <a href="#" class="product-img">
                        <img src="_assets/img/products/03.jpg" alt="">
                        <img src="_assets/img/products/01.jpg" class="hover-img" alt="">
                        <div class="sale">
                            25% Off
                        </div>
                    </a>
                    <div class="product-content">
                        <a href="#">
                            <h2 class="mtmd">
                                Puff Sleeves Puff Sleeves
                                Puff Sleeves
                            </h2>
                        </a>
                        <div class="product-footer">
                            <div class="price pull-left">
                                <span class="text-upper">800 egp</span>
                            </div>
                            {% include 'component/product-cta.html' %}
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-3 col-xs-6">
                <div class="product-item">
                    <a href="#" class="product-img">
                        <img src="_assets/img/products/01.jpg" alt="">
                        <img src="_assets/img/products/02.jpg" class="hover-img" alt="">
                        <div class="sale">
                            25% Off
                        </div>
                    </a>
                    <div class="product-content">
                        <a href="#">
                            <h2 class="mtmd">
                                Puff Sleeves Puff Sleeves
                                Puff Sleeves
                            </h2>
                        </a>
                        <div class="product-footer">
                            <div class="price pull-left">
                                <span class="text-upper">800 egp</span>
                            </div>
                            {% include 'component/product-cta.html' %}
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-3 col-xs-6">
                <div class="product-item">
                    <a href="#" class="product-img">
                        <img src="_assets/img/products/02.jpg" alt="">
                        <img src="_assets/img/products/01.jpg" class="hover-img" alt="">
                        <div class="sale">
                            25% Off
                        </div>
                    </a>
                    <div class="product-content">
                        <a href="#">
                            <h2 class="mtmd">
                                Puff Sleeves Puff Sleeves
                                Puff Sleeves
                            </h2>
                        </a>
                        <div class="product-footer">
                            <div class="price pull-left">
                                <span class="text-upper">800 egp</span>
                            </div>
                            {% include 'component/product-cta.html' %}
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-3 col-xs-6">
                <div class="product-item">
                    <a href="#" class="product-img">
                        <img src="_assets/img/products/01.jpg" alt="">
                        <img src="_assets/img/products/02.jpg" class="hover-img" alt="">
                        <div class="sale">
                            25% Off
                        </div>
                    </a>
                    <div class="product-content">
                        <a href="#">
                            <h2 class="mtmd">
                                Puff Sleeves Puff Sleeves
                                Puff Sleeves
                            </h2>
                        </a>
                        <div class="product-footer">
                            <div class="price pull-left">
                                <span class="text-upper">800 egp</span>
                            </div>
                            {% include 'component/product-cta.html' %}
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-3 col-xs-6">
                <div class="product-item">
                    <a href="#" class="product-img">
                        <img src="_assets/img/products/03.jpg" alt="">
                        <img src="_assets/img/products/01.jpg" class="hover-img" alt="">
                        <div class="sale">
                            25% Off
                        </div>
                    </a>
                    <div class="product-content">
                        <a href="#">
                            <h2 class="mtmd">
                                Puff Sleeves Puff Sleeves
                                Puff Sleeves
                            </h2>
                        </a>
                        <div class="product-footer">
                            <div class="price pull-left">
                                <span class="text-upper">800 egp</span>
                            </div>
                            {% include 'component/product-cta.html' %}
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-3 col-xs-6">
                <div class="product-item">
                    <a href="#" class="product-img">
                        <img src="_assets/img/products/01.jpg" alt="">
                        <img src="_assets/img/products/02.jpg" class="hover-img" alt="">
                        <div class="sale">
                            25% Off
                        </div>
                    </a>
                    <div class="product-content">
                        <a href="#">
                            <h2 class="mtmd">
                                Puff Sleeves Puff Sleeves
                                Puff Sleeves
                            </h2>
                        </a>
                        <div class="product-footer">
                            <div class="price pull-left">
                                <span class="text-upper">800 egp</span>
                            </div>
                            {% include 'component/product-cta.html' %}
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-3 col-xs-6">
                <div class="product-item">
                    <a href="#" class="product-img">
                        <img src="_assets/img/products/02.jpg" alt="">
                        <img src="_assets/img/products/01.jpg" class="hover-img" alt="">
                        <div class="sale">
                            25% Off
                        </div>
                    </a>
                    <div class="product-content">
                        <a href="#">
                            <h2 class="mtmd">
                                Puff Sleeves Puff Sleeves
                                Puff Sleeves
                            </h2>
                        </a>
                        <div class="product-footer">
                            <div class="price pull-left">
                                <span class="text-upper">800 egp</span>
                            </div>
                            {% include 'component/product-cta.html' %}
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-3 col-xs-6">
                <div class="product-item">
                    <a href="#" class="product-img">
                        <img src="_assets/img/products/01.jpg" alt="">
                        <img src="_assets/img/products/02.jpg" class="hover-img" alt="">
                        <div class="sale">
                            25% Off
                        </div>
                    </a>
                    <div class="product-content">
                        <a href="#">
                            <h2 class="mtmd">
                                Puff Sleeves Puff Sleeves
                                Puff Sleeves
                            </h2>
                        </a>
                        <div class="product-footer">
                            <div class="price pull-left">
                                <span class="text-upper">800 egp</span>
                            </div>
                            {% include 'component/product-cta.html' %}
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-3 col-xs-6">
                <div class="product-item">
                    <a href="#" class="product-img">
                        <img src="_assets/img/products/03.jpg" alt="">
                        <img src="_assets/img/products/01.jpg" class="hover-img" alt="">
                        <div class="sale">
                            25% Off
                        </div>
                    </a>
                    <div class="product-content">
                        <a href="#">
                            <h2 class="mtmd">
                                Puff Sleeves Puff Sleeves
                                Puff Sleeves
                            </h2>
                        </a>
                        <div class="product-footer">
                            <div class="price pull-left">
                                <span class="text-upper">800 egp</span>
                            </div>
                            {% include 'component/product-cta.html' %}
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-3 col-xs-6">
                <div class="product-item">
                    <a href="#" class="product-img">
                        <img src="_assets/img/products/01.jpg" alt="">
                        <img src="_assets/img/products/02.jpg" class="hover-img" alt="">
                        <div class="sale">
                            25% Off
                        </div>
                    </a>
                    <div class="product-content">
                        <a href="#">
                            <h2 class="mtmd">
                                Puff Sleeves Puff Sleeves
                                Puff Sleeves
                            </h2>
                        </a>
                        <div class="product-footer">
                            <div class="price pull-left">
                                <span class="text-upper">800 egp</span>
                            </div>
                            {% include 'component/product-cta.html' %}
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-3 col-xs-6">
                <div class="product-item">
                    <a href="#" class="product-img">
                        <img src="_assets/img/products/02.jpg" alt="">
                        <img src="_assets/img/products/01.jpg" class="hover-img" alt="">
                        <div class="sale">
                            25% Off
                        </div>
                    </a>
                    <div class="product-content">
                        <a href="#">
                            <h2 class="mtmd">
                                Puff Sleeves Puff Sleeves
                                Puff Sleeves
                            </h2>
                        </a>
                        <div class="product-footer">
                            <div class="price pull-left">
                                <span class="text-upper">800 egp</span>
                            </div>
                            {% include 'component/product-cta.html' %}
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-3 col-xs-6">
                <div class="product-item">
                    <a href="#" class="product-img">
                        <img src="_assets/img/products/01.jpg" alt="">
                        <img src="_assets/img/products/02.jpg" class="hover-img" alt="">
                        <div class="sale">
                            25% Off
                        </div>
                    </a>
                    <div class="product-content">
                        <a href="#">
                            <h2 class="mtmd">
                                Puff Sleeves Puff Sleeves
                                Puff Sleeves
                            </h2>
                        </a>
                        <div class="product-footer">
                            <div class="price pull-left">
                                <span class="text-upper">800 egp</span>
                            </div>
                            {% include 'component/product-cta.html' %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="text-center">
            <div class="btn-wrapper mbxxlg">
                <a href="#" class="btn btn-main text-capitalize">view all</a>
            </div>
        </div>
    </div>

</div>


{% endblock content %}