@extends('front.layout.app')
@section('title', 'Retail Store Supplies Packaging')
@section('extra-css')
    <style>
        span.previous-price {
            text-decoration: line-through;
            font-weight: 100;
            color: black !important;
        }

        .all-products{
            height: 200px;
            background-position: center;
            object-fit: contain;
        }
    </style>
@endsection
@section('content')

    <section class="main">
        <div class="container">

            <div class="row">
                <div class="col-md-3 col-sm-12">
                    <div class="card">
                        <article class="card-group-item">
                            <header class="card-header header-card"><h6 class="title">Product Categories </h6></header>
                            <div class="filter-content">
                                <div class="list-group list-group-flush">
                                    <a href="#" class="list-group-item">
                                        Gift Boxes
                                        <span class="float-right badge badge-light round">29</span>
                                    </a>
                                    <a href="#" class="list-group-item">
                                        Retail &amp; Shipping Supplies
                                        <span class="float-right badge badge-light round">30</span>
                                    </a>
                                    <a href="#" class="list-group-item">
                                        Shopping Bags
                                        <span class="float-right badge badge-light round">29</span>
                                    </a>
                                    <a href="#" class="list-group-item">
                                        Tissue Paper
                                        <span class="float-right badge badge-light round">28</span>
                                    </a>
                                </div>  <!-- list-group .// -->
                            </div>
                        </article> <!-- card-group-item.// -->
                    </div>
                </div>

                <div class="col-md-9 col-sm-12">



                    <div class="row">
                        <div class="mainboxx">
                            <div class="col-md-4 col-sm-4"><h4>20 item(s) - Page 1 of 6</h4></div>
                            <div class="col-md-4 col-sm-4">
                                <p>Items: 116 <i class="fa fa-arrow-down" aria-hidden="true"></i>
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4 d-flex">
                            <a href="#">
                                <div class="boxxx">
                                    <img src="{{asset('')}}/media/20191008052601.jpg" class="img-fluid all-products">
                                    <h1>White One-Piece Gift Boxes, 3&quot; x 3&quot; x 2&quot; (106200)</h1>
                                    <span>$21.62</span>








                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 d-flex">
                            <a href="#">
                                <div class="boxxx">
                                    <img src="{{asset('')}}/media/20191008052606.jpg" class="img-fluid all-products">
                                    <h1>Kraft One-Piece Gift Boxes, 3&quot; x 3&quot; x 2&quot; (106201)</h1>
                                    <span>$21.62</span>








                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 d-flex">
                            <a href="#">
                                <div class="boxxx">
                                    <img src="{{asset('')}}/media/20191008052611.jpg" class="img-fluid all-products">
                                    <h1>White One-Piece Gift Boxes, 4&quot; x 4&quot; x 2&quot; (106202)</h1>
                                    <span>$25.40</span>








                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 d-flex">
                            <a href="#">
                                <div class="boxxx">
                                    <img src="{{asset('')}}/media/20191008052616.jpg" class="img-fluid all-products">
                                    <h1>Kraft One-Piece Gift Boxes, 4&quot; x 4&quot; x 4&quot; (106373)</h1>
                                    <span>$30.48</span>








                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 d-flex">
                            <a href="#">
                                <div class="boxxx">
                                    <img src="{{asset('')}}/media/20191008052622.jpg" class="img-fluid all-products">
                                    <h1>White One-Piece Gift Boxes, 5&quot; x 5&quot; x 3&quot; (106374)</h1>
                                    <span>$38.10</span>








                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 d-flex">
                            <a href="#">
                                <div class="boxxx">
                                    <img src="{{asset('')}}/media/20191008052627.jpg" class="img-fluid all-products">
                                    <h1>Kraft One-Piece Gift Boxes, 5&quot; x 5&quot; x 3&quot; (106375)</h1>
                                    <span>$38.10</span>








                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 d-flex">
                            <a href="#">
                                <div class="boxxx">
                                    <img src="{{asset('')}}/media/20191008052632.jpg" class="img-fluid all-products">
                                    <h1>Kraft One-Piece Gift Boxes, 6&quot; x 6&quot; x 4&quot; (106376)</h1>
                                    <span>$49.56</span>








                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 d-flex">
                            <a href="#">
                                <div class="boxxx">
                                    <img src="{{asset('')}}/media/20191008052638.jpg" class="img-fluid all-products">
                                    <h1>White One-Piece Gift Boxes, 6&quot; x 6&quot; x 4&quot; (106377)</h1>
                                    <span>$49.56</span>








                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 d-flex">
                            <a href="#">
                                <div class="boxxx">
                                    <img src="{{asset('')}}/media/20191008052643.jpg" class="img-fluid all-products">
                                    <h1>White One-Piece Gift Boxes, 6&quot; x 6&quot; x 6&quot; (106379)</h1>
                                    <span>$62.27</span>








                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 d-flex">
                            <a href="#">
                                <div class="boxxx">
                                    <img src="{{asset('')}}/media/20191008052649.jpg" class="img-fluid all-products">
                                    <h1>Kraft One-Piece Gift Boxes, 6&quot; x 4-1/2&quot; x 4-1/2&quot; (106380)</h1>
                                    <span>$39.33</span>








                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 d-flex">
                            <a href="#">
                                <div class="boxxx">
                                    <img src="{{asset('')}}/media/20191008052654.jpg" class="img-fluid all-products">
                                    <h1>White One-Piece Gift Boxes, 6&quot; x 4-1/2&quot; x 4-1/2&quot; (106381)</h1>
                                    <span>$39.33</span>








                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 d-flex">
                            <a href="#">
                                <div class="boxxx">
                                    <img src="{{asset('')}}/media/20191008052659.jpg" class="img-fluid all-products">
                                    <h1>White One-Piece Gift Boxes, 9&quot; x 4 1/2&quot; x 4 1/2&quot; (106382)</h1>
                                    <span>$48.26</span>








                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 d-flex">
                            <a href="#">
                                <div class="boxxx">
                                    <img src="{{asset('')}}/media/20191008052705.jpg" class="img-fluid all-products">
                                    <h1>Kraft One-Piece Gift Boxes, 9&quot; x 4 1/2&quot; x 4 1/2&quot; (106383)</h1>
                                    <span>$48.26</span>








                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 d-flex">
                            <a href="#">
                                <div class="boxxx">
                                    <img src="{{asset('')}}/media/20191008052710.jpg" class="img-fluid all-products">
                                    <h1>Kraft One-Piece Gift Boxes, 12&quot; x 6&quot; x 6&quot; (106384)</h1>
                                    <span>$55.23</span>








                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 d-flex">
                            <a href="#">
                                <div class="boxxx">
                                    <img src="{{asset('')}}/media/20191008052721.jpg" class="img-fluid all-products">
                                    <h1>Varnish Stripe Shoppers, 16&quot; x 6&quot; x 12-1/2&quot; (106409)</h1>
                                    <span>$130.62</span>








                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 d-flex">
                            <a href="#">
                                <div class="boxxx">
                                    <img src="{{asset('')}}/media/20191008052727.jpg" class="img-fluid all-products">
                                    <h1>Color-on-Kraft Shoppers, 5 1/4&quot; x 3 1/2&quot; x 8 1/4&quot; (106410)</h1>
                                    <span>$97.20</span>








                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 d-flex">
                            <a href="#">
                                <div class="boxxx">
                                    <img src="{{asset('')}}/media/20191008052732.jpg" class="img-fluid all-products">
                                    <h1>Brown &amp; Blue Dots Clear Frosted Flex Loop Shoppers, 16&quot; x 6&quot; x 12&quot; (106422)</h1>
                                    <span>$103.20</span>








                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 d-flex">
                            <a href="#">
                                <div class="boxxx">
                                    <img src="{{asset('')}}/media/20191008052738.jpg" class="img-fluid all-products">
                                    <h1>Stars Frosted High Density Merchandise Bags, 9&quot; x 12&quot; (106425)</h1>
                                    <span>$66.16</span>








                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 d-flex">
                            <a href="#">
                                <div class="boxxx">
                                    <img src="{{asset('')}}/media/20191008052744.jpg" class="img-fluid all-products">
                                    <h1>White Stripe Frosted High Density Merchandise Bags, 12 x 15&quot; (106428)</h1>
                                    <span>$105.84</span>








                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 d-flex">
                            <a href="#">
                                <div class="boxxx">
                                    <img src="{{asset('')}}/media/20191008052749.jpg" class="img-fluid all-products">
                                    <h1>Colored Paper Merchandise Bags, 12&quot; x 15&quot; (106437)</h1>
                                    <span>$146.26</span>








                                </div>
                            </a>
                        </div>
                    </div>
                    <div class="text-center pt-4">
                        <ul class="pagination" role="navigation">

                            <li class="page-item disabled" aria-disabled="true" aria-label="pagination.previous">
                                <span class="page-link" aria-hidden="true">&lsaquo;</span>
                            </li>





                            <li class="page-item active" aria-current="page"><span class="page-link">1</span></li>
                            <li class="page-item"><a class="page-link" href="#">2</a></li>
                            <li class="page-item"><a class="page-link" href="#">3</a></li>
                            <li class="page-item"><a class="page-link" href="#">4</a></li>
                            <li class="page-item"><a class="page-link" href="#">5</a></li>
                            <li class="page-item"><a class="page-link" href="#">6</a></li>


                            <li class="page-item">
                                <a class="page-link" href="#" rel="next" aria-label="pagination.next">&rsaquo;</a>
                            </li>
                        </ul>

                    </div>
                </div>
            </div>
        </div>
    </section>


@endsection