@extends('front.layout.app')
@section('title', 'Promotional Items')
@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">
                                        Calendars
                                        <span class="float-right badge badge-light round">16</span>
                                    </a>
                                    <a href="#" class="list-group-item">
                                        Gift Certificates
                                        <span class="float-right badge badge-light round">5</span>
                                    </a>
                                    <a href="#" class="list-group-item">
                                        Slogan Banners
                                        <span class="float-right badge badge-light round">36</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 3</h4></div>
                            <div class="col-md-4 col-sm-4">
                                <p>Items: 56 <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/HUmM5jXechRdeDBc6Z3yZpJ8hlcsK1itZfnIO0VO.jpg" class="img-fluid all-products">
                                    <h1>Classic Cars Wall Calendar (0048)</h1>
                                    <span>$1.08 <span class='previous-price'>$1.40</span></span>








                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 d-flex">
                            <a href="#">
                                <div class="boxxx">
                                    <img src="{{asset('')}}/media/wSN8cy0s7GlG6AYHzVXYQfmwJq8EH98iHjeV905u.jpg" class="img-fluid all-products">
                                    <h1>Exotic Cars Wall Calendar English &amp; Spanish/English (0050/0224)</h1>
                                    <span>$1.08 <span class='previous-price'>$1.40</span></span>








                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 d-flex">
                            <a href="#">
                                <div class="boxxx">
                                    <img src="{{asset('')}}/media/UeKjkZVGyYM1CMYWZBHourhIh7zCnbM25UI0mFoy.jpg" class="img-fluid all-products">
                                    <h1>Recipes Wall Calendar (0061)</h1>
                                    <span>$1.08 <span class='previous-price'>$1.40</span></span>








                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 d-flex">
                            <a href="#">
                                <div class="boxxx">
                                    <img src="{{asset('')}}/media/xS9lHNRH751cdtZi0JwgXPghvYRn7xwmWhWZ8jbi.jpg" class="img-fluid all-products">
                                    <h1>Road Warriors Wall Calendar (0062)</h1>
                                    <span>$1.08 <span class='previous-price'>$1.40</span></span>








                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 d-flex">
                            <a href="#">
                                <div class="boxxx">
                                    <img src="{{asset('')}}/media/7XvbAvl4nzYMbGrOdfPAdHKdB3QLJ03dsYIJG3oo.jpg" class="img-fluid all-products">
                                    <h1>Dogs &quot; Man&#039;s Best Frends&quot; (0136)</h1>
                                    <span>$1.08 <span class='previous-price'>$1.40</span></span>








                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 d-flex">
                            <a href="#">
                                <div class="boxxx">
                                    <img src="{{asset('')}}/media/R5Z14MBgGvkK7JwiK2EZ1H3paTFtAC0yn3sPiVqG.jpg" class="img-fluid all-products">
                                    <h1>Kittens Wall Calendar (0186)</h1>
                                    <span>$1.08 <span class='previous-price'>$1.40</span></span>








                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 d-flex">
                            <a href="#">
                                <div class="boxxx">
                                    <img src="{{asset('')}}/media/eJyyRlHddZWu34ZLOBHTpkQWsJCt1mAxH6hTQBMi.jpg" class="img-fluid all-products">
                                    <h1>America the Beautiful Wall Calendar (0195)</h1>
                                    <span>$1.08 <span class='previous-price'>$1.40</span></span>








                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 d-flex">
                            <a href="#">
                                <div class="boxxx">
                                    <img src="{{asset('')}}/media/9A124tvTHxK3W5AlTZdoR0WEzKXU0VOzAH7eNyIy.jpg" class="img-fluid all-products">
                                    <h1>Beauty of Latin America Spanish/English (0218)</h1>
                                    <span>$1.08 <span class='previous-price'>$1.40</span></span>








                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 d-flex">
                            <a href="#">
                                <div class="boxxx">
                                    <img src="{{asset('')}}/media/alMgd5heyMlqi1eJjxjyECfwVhpOloiY8RgyzFP9.jpg" class="img-fluid all-products">
                                    <h1>Black History Celebration Wall Calendar (0219)</h1>
                                    <span>$1.08 <span class='previous-price'>$1.40</span></span>








                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 d-flex">
                            <a href="#">
                                <div class="boxxx">
                                    <img src="{{asset('')}}/media/UqPJXXaVOY1kCb25XJffKh1ERLkJwQdjt4mip7kC.jpg" class="img-fluid all-products">
                                    <h1>Catholic Inspirations Wall Calendars Spanish/English (0220)</h1>
                                    <span>$1.08 <span class='previous-price'>$1.40</span></span>








                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 d-flex">
                            <a href="#">
                                <div class="boxxx">
                                    <img src="{{asset('')}}/media/HPAfPW4PwksPDBVCPHELwMJf4s3k2mSNVduXXK0z.jpg" class="img-fluid all-products">
                                    <h1>Catholic Inspirations Wall Calendar English (0221)</h1>
                                    <span>$1.08 <span class='previous-price'>$1.40</span></span>








                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 d-flex">
                            <a href="#">
                                <div class="boxxx">
                                    <img src="{{asset('')}}/media/CnfLgBgukN1XTudXKcLZnXj1XHLbVHdM68uInMSG.jpg" class="img-fluid all-products">
                                    <h1>Home of the Brave Wall Calendar (0226)</h1>
                                    <span>$1.08 <span class='previous-price'>$1.40</span></span>








                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 d-flex">
                            <a href="#">
                                <div class="boxxx">
                                    <img src="{{asset('')}}/media/20191008052136.jpg" class="img-fluid all-products">
                                    <h1>Pet Wall Calendar (0228)</h1>
                                    <span>$1.08 <span class='previous-price'>$1.40</span></span>








                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 d-flex">
                            <a href="#">
                                <div class="boxxx">
                                    <img src="{{asset('')}}/media/20191008052222.jpg" class="img-fluid all-products">
                                    <h1>Scenes of Mexico Spanish/English (0232)</h1>
                                    <span>$1.08 <span class='previous-price'>$1.40</span></span>








                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 d-flex">
                            <a href="#">
                                <div class="boxxx">
                                    <img src="{{asset('')}}/media/173J1NVE7Ljz9QchPJXOkFUQfisjuyacQ1Y0p5kB.jpg" class="img-fluid all-products">
                                    <h1>Living Healthy Wall Calendar (0244)</h1>
                                    <span>$1.08 <span class='previous-price'>$1.40</span></span>








                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 d-flex">
                            <a href="#">
                                <div class="boxxx">
                                    <img src="{{asset('')}}/media/CySqN9PZXpUA5TRM4NhnxEFPYFmo5xrFUtRsg5Ct.jpg" class="img-fluid all-products">
                                    <h1>Kings of The Road Wall Calendar (0927)</h1>
                                    <span>$1.08 <span class='previous-price'>$1.40</span></span>








                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 d-flex">
                            <a href="#">
                                <div class="boxxx">
                                    <img src="{{asset('')}}/media/20191008062346.jpg" class="img-fluid all-products">
                                    <h1>3&#039;x10&#039; Heavy-Duty Giant Scrim Banner &quot;GRAND OPENING&quot; (G10A</h1>
                                    <span>$54.50</span>








                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 d-flex">
                            <a href="#">
                                <div class="boxxx">
                                    <img src="{{asset('')}}/media/20191008062352.jpg" class="img-fluid all-products">
                                    <h1>3&#039;x10&#039; Heavy-Duty Giant Scrim Banner &quot;Stop &amp; Save&quot; (G10B)</h1>
                                    <span>$54.50</span>








                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 d-flex">
                            <a href="#">
                                <div class="boxxx">
                                    <img src="{{asset('')}}/media/20191008062358.jpg" class="img-fluid all-products">
                                    <h1>3&#039;x10&#039; Heavy-Duty Giant Scrim Banner &quot;Open House&quot; (G10C)</h1>
                                    <span>$54.50</span>








                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 d-flex">
                            <a href="#">
                                <div class="boxxx">
                                    <img src="{{asset('')}}/media/20191008062404.jpg" class="img-fluid all-products">
                                    <h1>3&#039;x10&#039; Heavy-Duty Giant Scrim Banner &quot;Let&#039;s Deal&quot; (G10D)</h1>
                                    <span>$54.50</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="#" rel="next" aria-label="pagination.next">&rsaquo;</a>
                            </li>
                        </ul>

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



@endsection