@extends('front.layout.app')
@section('title', 'Mailing Labels')
@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">
                                        Laser/Inkjet
                                        <span class="float-right badge badge-light round">0</span>
                                    </a>
                                    <a href="#" class="list-group-item">
                                        Rolls
                                        <span class="float-right badge badge-light round">7</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>7 item(s) - Page 1 of 1</h4></div>
                            <div class="col-md-4 col-sm-4">
                                <p>Items: 7 <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/20191008063941.png" class="img-fluid all-products">
                                    <h1>Designer 19 - Roll Mailing Label with Your Company Imprint (ML19R)</h1>
                                    <span>$60.00</span>
                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 d-flex">
                            <a href="#">
                                <div class="boxxx">
                                    <img src="{{asset('')}}/media/20191008063947.png" class="img-fluid all-products">
                                    <h1>Designer 21 - Roll Mailing Label with Your Company Imprint (ML21R)</h1>
                                    <span>$60.00</span>
                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 d-flex">
                            <a href="#">
                                <div class="boxxx">
                                    <img src="{{asset('')}}/media/20191008063953.png" class="img-fluid all-products">
                                    <h1>Designer 22 - Roll Mailing Label with Your Company Imprint (ML22R)</h1>
                                    <span>$60.00</span>
                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 d-flex">
                            <a href="#">
                                <div class="boxxx">
                                    <img src="{{asset('')}}/media/20191008063958.png" class="img-fluid all-products">
                                    <h1>Designer 23 - Roll Mailing Label with Your Company Imprint (ML23R)</h1>
                                    <span>$60.00</span>
                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 d-flex">
                            <a href="#">
                                <div class="boxxx">
                                    <img src="{{asset('')}}/media/20191008064004.png" class="img-fluid all-products">
                                    <h1>Designer 24 - Roll Mailing Label with Your Company Imprint (ML24R)</h1>
                                    <span>$60.00</span>
                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 d-flex">
                            <a href="#">
                                <div class="boxxx">
                                    <img src="{{asset('')}}/media/20191008064013.png" class="img-fluid all-products">
                                    <h1>Designer 25 - Roll Mailing Label with Your Company Imprint (ML25R)</h1>
                                    <span>$60.00</span>
                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 d-flex">
                            <a href="#">
                                <div class="boxxx">
                                    <img src="{{asset('')}}/media/Ryb5uXBDPljZEytUI79HMB8hLbHqxSsow8GfYvU2.png" class="img-fluid all-products">
                                    <h1>Designer Roll Mailing Label (ML11R)</h1>
                                    <span>$0.12</span>
                                </div>
                            </a>
                        </div>
                    </div>
                    <div class="text-center pt-4">

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


@endsection