@extends('front.layout.app')
@section('title', 'Filing Supplies')
@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">
                                        Folders
                                        <span class="float-right badge badge-light round">115</span>
                                    </a>
                                    <a href="#" class="list-group-item">
                                        Exhibit Labels
                                        <span class="float-right badge badge-light round">10</span>
                                    </a>
                                    <a href="#" class="list-group-item">
                                        Label Bands
                                        <span class="float-right badge badge-light round">8</span>
                                    </a>
                                    <a href="#" class="list-group-item">
                                        Index Chart Dividers
                                        <span class="float-right badge badge-light round">16</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 8</h4></div>
                            <div class="col-md-4 col-sm-4">
                                <p>Items: 148 <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/20191008053744.jpg" class="img-fluid all-products">
                                    <h1>11 pt Manila Folders, Full Cut End Tab, Letter Size, Double Pockets Outside Back (12991)</h1>
                                    <span>$80.00</span>








                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 d-flex">
                            <a href="#">
                                <div class="boxxx">
                                    <img src="{{asset('')}}/media/20191008053749.jpg" class="img-fluid all-products">
                                    <h1>Top Tab Manila Pocket, 11 pt, No expansion (1346)</h1>
                                    <span>$0.48</span>








                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 d-flex">
                            <a href="#">
                                <div class="boxxx">
                                    <img src="{{asset('')}}/media/20191008053807.jpg" class="img-fluid all-products">
                                    <h1>11 Pt. Top Tab Half Pocket Manila Folder (1751)</h1>
                                    <span>$69.30</span>








                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 d-flex">
                            <a href="#">
                                <div class="boxxx">
                                    <img src="{{asset('')}}/media/20191008055148.jpg" class="img-fluid all-products">
                                    <h1>Center Tab Vinyl Outguides 10/Pk (74500-XX)</h1>
                                    <span>$23.59</span>








                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 d-flex">
                            <a href="#">
                                <div class="boxxx">
                                    <img src="{{asset('')}}/media/20191008055200.jpg" class="img-fluid all-products">
                                    <h1>Center Tab Vinyl Outguide, Legal 10/Pk (74520)</h1>
                                    <span>$28.50</span>








                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 d-flex">
                            <a href="#">
                                <div class="boxxx">
                                    <img src="{{asset('')}}/media/20191008055205.jpg" class="img-fluid all-products">
                                    <h1>Bottom Tab Vinyl Outguides 10/Pk (74530-XX)</h1>
                                    <span>$23.59</span>








                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 d-flex">
                            <a href="#">
                                <div class="boxxx">
                                    <img src="{{asset('')}}/media/20191008055701.jpg" class="img-fluid all-products">
                                    <h1>Yellow Plaintiff&#039;s Exhibit Label (9006YL)</h1>
                                    <span>$6.99</span>








                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 d-flex">
                            <a href="#">
                                <div class="boxxx">
                                    <img src="{{asset('')}}/media/20191008055706.jpg" class="img-fluid all-products">
                                    <h1>Green Plaintiff&#039;s Exhibit Label (9002GRN)</h1>
                                    <span>$6.99</span>








                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 d-flex">
                            <a href="#">
                                <div class="boxxx">
                                    <img src="{{asset('')}}/media/20191008055711.jpg" class="img-fluid all-products">
                                    <h1>Orange Petitioner&#039;s Exhibit Label (9003OR)</h1>
                                    <span>$6.99</span>








                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 d-flex">
                            <a href="#">
                                <div class="boxxx">
                                    <img src="{{asset('')}}/media/20191008055717.jpg" class="img-fluid all-products">
                                    <h1>Blue Respondent&#039;s Exhibit (9004BL)</h1>
                                    <span>$6.99</span>








                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 d-flex">
                            <a href="#">
                                <div class="boxxx">
                                    <img src="{{asset('')}}/media/20191008055735.jpg" class="img-fluid all-products">
                                    <h1>Blue Defendant&#039;s Exhibit (9005BL)</h1>
                                    <span>$6.99</span>








                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 d-flex">
                            <a href="#">
                                <div class="boxxx">
                                    <img src="{{asset('')}}/media/20191008055758.jpg" class="img-fluid all-products">
                                    <h1>Red Deposition Exhibit Label (9007R)</h1>
                                    <span>$6.99</span>








                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 d-flex">
                            <a href="#">
                                <div class="boxxx">
                                    <img src="{{asset('')}}/media/20191008055803.jpg" class="img-fluid all-products">
                                    <h1>Yellow Exhibit (9008YL)</h1>
                                    <span>$6.99</span>








                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 d-flex">
                            <a href="#">
                                <div class="boxxx">
                                    <img src="{{asset('')}}/media/20191008055809.jpg" class="img-fluid all-products">
                                    <h1>Blue Exhibit Label (9009BL)</h1>
                                    <span>$6.99</span>








                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 d-flex">
                            <a href="#">
                                <div class="boxxx">
                                    <img src="{{asset('')}}/media/20191008055825.jpg" class="img-fluid all-products">
                                    <h1>White Exhibit Label (9010WH)</h1>
                                    <span>$6.99</span>








                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 d-flex">
                            <a href="#">
                                <div class="boxxx">
                                    <img src="{{asset('')}}/media/20191008063132.gif" class="img-fluid all-products">
                                    <h1>20 pt Color End Tab Folders, Full Cut, Fastener Pos #1 &amp; #3 (HD22)</h1>
                                    <span>$1.27</span>








                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 d-flex">
                            <a href="#">
                                <div class="boxxx">
                                    <img src="{{asset('')}}/media/20191008063813.jpg" class="img-fluid all-products">
                                    <h1>Colored File Envelopes (M1025)</h1>
                                    <span>$0.23</span>








                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 d-flex">
                            <a href="#">
                                <div class="boxxx">
                                    <img src="{{asset('')}}/media/20191008063819.jpg" class="img-fluid all-products">
                                    <h1>File Envelopes with Colored Borders (M1026)</h1>
                                    <span>$0.23</span>








                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 d-flex">
                            <a href="#">
                                <div class="boxxx">
                                    <img src="{{asset('')}}/media/n6bf05LAX6M4Gk6LYSS0VYQ2bvZwdZabhlvYbU0B.jpg" class="img-fluid all-products">
                                    <h1>Heavy Duty Colored File Envelopes  (M1075)</h1>
                                    <span>$0.35</span>








                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 d-flex">
                            <a href="#">
                                <div class="boxxx">
                                    <img src="{{asset('')}}/media/MffDzCE1rHAa1KuJIll9xiKUf7eB6Ot96zYkgpFi.jpg" class="img-fluid all-products">
                                    <h1>11 pt. Color Tab Folder (M1306)</h1>
                                    <span>$0.63</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="#">7</a></li>
                            <li class="page-item"><a class="page-link" href="#">8</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