@extends('front.layout.app')
@section('title', 'Checks 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">
                                        Stamps
                                        <span class="float-right badge badge-light round">2</span>
                                    </a>
                                    <a href="#" class="list-group-item">
                                        Manual Checks
                                        <span class="float-right badge badge-light round">6</span>
                                    </a>
                                    <a href="#" class="list-group-item">
                                        Business Computer Checks
                                        <span class="float-right badge badge-light round">94</span>
                                    </a>
                                    <a href="#" class="list-group-item">
                                        Blank Checks
                                        <span class="float-right badge badge-light round">10</span>
                                    </a>
                                    <a href="#" class="list-group-item">
                                        Pressure Seal Checks/Forms
                                        <span class="float-right badge badge-light round">19</span>
                                    </a>
                                    <a href="#" class="list-group-item">
                                        Deposit Tickets
                                        <span class="float-right badge badge-light round">3</span>
                                    </a>
                                    <a href="#" class="list-group-item">
                                        Statement Paper
                                        <span class="float-right badge badge-light round">5</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: 108 <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/sYxUSiQcoeQRqhVWtk8LTJ5vGhVukZ9HpkZjqkFb.jpg" class="img-fluid all-products">
                                    <h1>Booked Deposit Tickets, Classic Design (100018)</h1>
                                    <span>$0.18</span>








                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 d-flex">
                            <a href="#">
                                <div class="boxxx">
                                    <img src="{{asset('')}}/media/20191008052438.jpg" class="img-fluid all-products">
                                    <h1>Booked Deposit Tickets, Extra Lines for Deposits, 8 7/8 x 3 3/8&quot; (100058)</h1>
                                    <span>$0.18</span>








                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 d-flex">
                            <a href="#">
                                <div class="boxxx">
                                    <img src="{{asset('')}}/media/ilmo2G1vn74kBEhOeecrqoqfHu6gQLUbji61Jle0.jpg" class="img-fluid all-products">
                                    <h1>3-On-A-Page High Security Business Size Checks, Side-Tear Voucher, 12 15/16 x 9&quot; (53220DS)</h1>
                                    <span>$0.21</span>








                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 d-flex">
                            <a href="#">
                                <div class="boxxx">
                                    <img src="{{asset('')}}/media/hK17EryVoNo6ySnCt229pd8xolZ6NTcTxhumrIVM.jpg" class="img-fluid all-products">
                                    <h1>Binder For 3-on-A-Page Checks, 14 3/16 x 9 5/8 (54255N)</h1>
                                    <span>$34.99</span>








                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 d-flex">
                            <a href="#">
                                <div class="boxxx">
                                    <img src="{{asset('')}}/media/20191008055528.jpg" class="img-fluid all-products">
                                    <h1>Laser Deposit Tickets, QuickBooks Compatible 8 1/2 x 11&quot; (80200)</h1>
                                    <span>$0.44</span>








                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 d-flex">
                            <a href="#">
                                <div class="boxxx">
                                    <img src="{{asset('')}}/media/20191008063527.png" class="img-fluid all-products">
                                    <h1>Classic Laser Bottom Check Stock, Perf At 7-1/2&quot; (L80513XX)</h1>
                                    <span>$0.09</span>








                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 d-flex">
                            <a href="#">
                                <div class="boxxx">
                                    <img src="{{asset('')}}/media/20191008063539.png" class="img-fluid all-products">
                                    <h1>Classic Blank Bottom Business Check, Perf At 7-1/3&quot; (L80523B14)</h1>
                                    <span>$0.09</span>








                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 d-flex">
                            <a href="#">
                                <div class="boxxx">
                                    <img src="{{asset('')}}/media/I5NqfiY4A5kGsLp9S9sRtibjryeJIht1yJHGxp17.png" class="img-fluid all-products">
                                    <h1>Classic Laser Bottom Check Stock , Perfs at 4&quot; &amp; 7-1/2&quot; (L80503XX)</h1>
                                    <span>$0.09</span>








                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 d-flex">
                            <a href="#">
                                <div class="boxxx">
                                    <img src="{{asset('')}}/media/iB3kzzyIQDM1nH8ERcEgptt2OexsNHDZiSZqCYW2.png" class="img-fluid all-products">
                                    <h1>Classic Bottom Check Stock Marble Background with  Perfs at 4&quot; &amp; 7-1/2&quot; (L80503MXX)</h1>
                                    <span>$0.09</span>








                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 d-flex">
                            <a href="#">
                                <div class="boxxx">
                                    <img src="{{asset('')}}/media/zhanOFuuUdUJPbOy9y7SJLmhtkPIsVjnphZ6KAo5.png" class="img-fluid all-products">
                                    <h1>Classic Herringbone Laser Middle Check Stock, Perfs at 3-1/2&quot; x 7&quot; (LSRBLKXX)</h1>
                                    <span>$0.09</span>








                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 d-flex">
                            <a href="#">
                                <div class="boxxx">
                                    <img src="{{asset('')}}/media/7L5tua2BvaAt35uTaZiNToVFA9JIghFiRVrDml6E.png" class="img-fluid all-products">
                                    <h1>Classic Herringbone Laser Middle Check Stock, Perfs 3-1/2&quot; &amp; 7&quot; with Signature Line (L80502XX)</h1>
                                    <span>$0.09</span>








                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 d-flex">
                            <a href="#">
                                <div class="boxxx">
                                    <img src="{{asset('')}}/media/hyiYdbPE3dEEbMWUveI28XcdTWkP75bIOUF7f6hu.png" class="img-fluid all-products">
                                    <h1>Classic Laser Middle Check Stock, Marble  with Perfs at 3-1/2&quot; &amp; 7&quot; (LSRBLKMXX)</h1>
                                    <span>$0.09</span>








                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 d-flex">
                            <a href="#">
                                <div class="boxxx">
                                    <img src="{{asset('')}}/media/H8tByjeEjATveKlD9xSN6UFRmXKaMA6gjjAtwQ3X.png" class="img-fluid all-products">
                                    <h1>Classic Herringbone Laser Top Check Stock, Perfs 3-1/2&quot; &amp; 7&quot; (LSR501XX)</h1>
                                    <span>$0.09</span>








                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 d-flex">
                            <a href="#">
                                <div class="boxxx">
                                    <img src="{{asset('')}}/media/H8tByjeEjATveKlD9xSN6UFRmXKaMA6gjjAtwQ3X.png" class="img-fluid all-products">
                                    <h1>Classic Laser Top Check Stock , Perfs at 3-1/2&quot; &amp; 7&quot;, With Signature Line (L80501XX)</h1>
                                    <span>$0.09</span>








                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 d-flex">
                            <a href="#">
                                <div class="boxxx">
                                    <img src="{{asset('')}}/media/bXk9Ma6KOtEpZplBMIAhJGmRBitmGvOTaEjUFlw0.png" class="img-fluid all-products">
                                    <h1>Classic Laser Top Check Stock Marble, Perfs at 3-/1&quot; &amp; 7&quot; (LSR501MXX)</h1>
                                    <span>$0.09</span>








                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 d-flex">
                            <a href="#">
                                <div class="boxxx">
                                    <img src="{{asset('')}}/media/iHnvwuxiuRvPV9IdQCVNoiEP8C0yVn0Yhgxh6hls.png" class="img-fluid all-products">
                                    <h1>Multi-Purpose 11&quot; Business Top Check, with extra perf (L81004P)</h1>
                                    <span>$0.28</span>








                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 d-flex">
                            <a href="#">
                                <div class="boxxx">
                                    <img src="{{asset('')}}/media/6wGDibqQZT7QFEoTPTsRWP1DVo0BWxiCkSX0pr7v.png" class="img-fluid all-products">
                                    <h1>Multi-Purpose 11&quot; Business Laser Middle Check (L81013)</h1>
                                    <span>$0.28</span>








                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 d-flex">
                            <a href="#">
                                <div class="boxxx">
                                    <img src="{{asset('')}}/media/gAjAsFMNaDb9KF4x7EKV21umhGO2weijl6kNuIE7.png" class="img-fluid all-products">
                                    <h1>Multi-Purpose 11&quot; Herringbone Top Check (L81004)</h1>
                                    <span>$0.28</span>








                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 d-flex">
                            <a href="#">
                                <div class="boxxx">
                                    <img src="{{asset('')}}/media/31KuwM9AVow2hc2AjSXoJ5a6kTx5pkondMEMNjpW.png" class="img-fluid all-products">
                                    <h1>Multi-Purpose 11&quot; Herringbone Middle Check (L1508)</h1>
                                    <span>$0.28</span>








                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 d-flex">
                            <a href="#">
                                <div class="boxxx">
                                    <img src="{{asset('')}}/media/NVoDWAFWr69GPUfpBZElIpEeyoq7KaE0JOSGjvn4.png" class="img-fluid all-products">
                                    <h1>Multi-Purpose 11&quot; Business Top Check (L81064)</h1>
                                    <span>$0.28</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