@extends('front.layout.app')
@section('title', 'Business Envelope')
@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">
                                        Regular Envelopes
                                        <span class="float-right badge badge-light round">5</span>
                                    </a>
                                    <a href="#" class="list-group-item">
                                        Single Window Envelopes
                                        <span class="float-right badge badge-light round">24</span>
                                    </a>
                                    <a href="#" class="list-group-item">
                                        Double Window Envelopes
                                        <span class="float-right badge badge-light round">41</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 4</h4></div>
                            <div class="col-md-4 col-sm-4">
                                <p>Items: 70 <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/C5iRKKRqdafp8dJanZIU3fBQ7hPfzVG3TnHkFsD0.png" class="img-fluid all-products">
                                    <h1>6-3/4 Regular Envelope - White Wove (1002)</h1>
                                    <span>$0.12</span>








                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 d-flex">
                            <a href="#">
                                <div class="boxxx">
                                    <img src="{{asset('')}}/media/k68SQ6MeqI2PDVp1xPPuYdUayfI6nWH6bpxZDI8J.png" class="img-fluid all-products">
                                    <h1>10 Regular Envelope - White Wove (1010)</h1>
                                    <span>$0.11</span>








                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 d-flex">
                            <a href="#">
                                <div class="boxxx">
                                    <img src="{{asset('')}}/media/01GnHHee2ND8t4fnip8FNUyLnr3q9pFvIuWacG8n.png" class="img-fluid all-products">
                                    <h1>6-3/4 Window Envelope - White Wove (1022)</h1>
                                    <span>$0.13</span>








                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 d-flex">
                            <a href="#">
                                <div class="boxxx">
                                    <img src="{{asset('')}}/media/dnwq9PwfkGIb8q3tks3sn9AMURFJ1ftKsGj6uIEa.png" class="img-fluid all-products">
                                    <h1>10 Window Envelope - White Wove (1030)</h1>
                                    <span>$0.13</span>








                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 d-flex">
                            <a href="#">
                                <div class="boxxx">
                                    <img src="{{asset('')}}/media/PYsbiWlEwb76Vry2R9jyFpJGSVrwxXmvpVfZfQ4g.png" class="img-fluid all-products">
                                    <h1>6-3/4 Regular Envelope with Inside Tint - White Wove (1102)</h1>
                                    <span>$0.13</span>








                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 d-flex">
                            <a href="#">
                                <div class="boxxx">
                                    <img src="{{asset('')}}/media/9HJ4Qaq7Fjsmtupamar8jwRtc5zpSDMZbG1jUjvL.png" class="img-fluid all-products">
                                    <h1>10 Window Envelope with Inside Tint - White Wove (1110)</h1>
                                    <span>$0.11</span>








                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 d-flex">
                            <a href="#">
                                <div class="boxxx">
                                    <img src="{{asset('')}}/media/q3Q1wMz14j131vikbgUVQhbraPyXpXKWi5heC0qu.png" class="img-fluid all-products">
                                    <h1>6-3/4 Window Envelope with Inside Tint - White Wove (1122)</h1>
                                    <span>$0.13</span>








                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 d-flex">
                            <a href="#">
                                <div class="boxxx">
                                    <img src="{{asset('')}}/media/r5ruahDVrAF1Tn0LVTbJCkTKzVG9XUsKoJ8iTrl6.png" class="img-fluid all-products">
                                    <h1>8-5/8 Check Envelope Window with Tint - Alternate Size &amp; Position (1127)</h1>
                                    <span>$0.13</span>








                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 d-flex">
                            <a href="#">
                                <div class="boxxx">
                                    <img src="{{asset('')}}/media/Lfnm2Cewbikbqz3GJJmVarzSE8HNeXYFGHcarxUu.png" class="img-fluid all-products">
                                    <h1>8-5/8 Check Envelope Window with Tint - White Wove (1128)</h1>
                                    <span>$0.13</span>








                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 d-flex">
                            <a href="#">
                                <div class="boxxx">
                                    <img src="{{asset('')}}/media/8FNDaLAzRTAcjzIMbCyV3z6wtvBsaR4ASFFuJhz8.png" class="img-fluid all-products">
                                    <h1>9 Window Envelope with Inside Tint - White Wove (1129)</h1>
                                    <span>$0.11</span>








                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 d-flex">
                            <a href="#">
                                <div class="boxxx">
                                    <img src="{{asset('')}}/media/Rzd2oqMuBNHQrRimFYqyROxMRYubtZyaqDiDcwQ9.png" class="img-fluid all-products">
                                    <h1>10 Window Envelope with Inside Tint - White Wove (1130)</h1>
                                    <span>$0.13</span>








                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 d-flex">
                            <a href="#">
                                <div class="boxxx">
                                    <img src="{{asset('')}}/media/TeCUGNrmpcippuPV4AOYoz01OVL3pYAAxpCJ9PaJ.png" class="img-fluid all-products">
                                    <h1>8-5/8 Check Envelope Special Window - Tinted Inside (9005)</h1>
                                    <span>$0.18</span>








                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 d-flex">
                            <a href="#">
                                <div class="boxxx">
                                    <img src="{{asset('')}}/media/aeEj4YvBcCPlFNYPMhuJD2hgXYNYjjbcytxXctoX.png" class="img-fluid all-products">
                                    <h1>10 Window Envelope with Tint - White Wove (9006)</h1>
                                    <span>$0.17</span>








                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 d-flex">
                            <a href="#">
                                <div class="boxxx">
                                    <img src="{{asset('')}}/media/xVceQqn6RVkkJh4vKbOZ39NeHsby9CHUDcdlN2Oe.png" class="img-fluid all-products">
                                    <h1>8-5/8 Check Envelope Special Window - Tinted Inside (94001)</h1>
                                    <span>$0.18</span>








                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 d-flex">
                            <a href="#">
                                <div class="boxxx">
                                    <img src="{{asset('')}}/media/6oxiCgflgxmIN8inAOftKRDMBAGA45obolMryikE.png" class="img-fluid all-products">
                                    <h1>8-5/8 Check Envelope Special Window - Tinted Inside (94004)</h1>
                                    <span>$0.17</span>








                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 d-flex">
                            <a href="#">
                                <div class="boxxx">
                                    <img src="{{asset('')}}/media/g876wQzT5fnoy6SCMS0QBNyM9oaaw42Nly9mwPku.png" class="img-fluid all-products">
                                    <h1>8-5/8 Check Envelope Special Window - Tinted Inside (94006)</h1>
                                    <span>$0.17</span>








                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 d-flex">
                            <a href="#">
                                <div class="boxxx">
                                    <img src="{{asset('')}}/media/xZtirl5wPUzS5LAtlUiuB6ayZpbCamfQEOtt9zR2.png" class="img-fluid all-products">
                                    <h1>9 Special Window Envelope - Inside Tinted (95001)</h1>
                                    <span>$0.17</span>








                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 d-flex">
                            <a href="#">
                                <div class="boxxx">
                                    <img src="{{asset('')}}/media/xZtirl5wPUzS5LAtlUiuB6ayZpbCamfQEOtt9zR2.png" class="img-fluid all-products">
                                    <h1>9 Special Window Envelope - Inside Tinted (95005)</h1>
                                    <span>$0.17</span>








                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 d-flex">
                            <a href="#">
                                <div class="boxxx">
                                    <img src="{{asset('')}}/media/kb3kSCZzaXZ1FR5WFcxYwiWubK2PZhx5K5ht6oLT.jpg" class="img-fluid all-products">
                                    <h1>9 Special Window Envelope - Inside Tinted (95010)</h1>
                                    <span>$0.17</span>








                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 d-flex">
                            <a href="#">
                                <div class="boxxx">
                                    <img src="{{asset('')}}/media/5Khswjwg54hF3rwl3jPRKUTI3WmIoa8x3ub0HUTs.png" class="img-fluid all-products">
                                    <h1>9 Special Window Envelope - Inside Tinted (95011)</h1>
                                    <span>$0.17</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="#" rel="next" aria-label="pagination.next">&rsaquo;</a>
                            </li>
                        </ul>

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


@endsection