@extends('front.layout.app')
@section('title', 'Mortgage Products')
@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="carrrtt">
                        <div class="panel-group">
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a href="index.html">
                                            <div class="boxx1">
                                                <h2>No More Categories <i class="fa fa-angle-left" aria-hidden="true"></i></h2>
                                            </div>
                                        </a>
                                    </h4>
                                </div>
                            </div>
                        </div>
                    </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>8 item(s) - Page 1 of 1</h4></div>
                            <div class="col-md-4 col-sm-4">
                                <p>Items: 8 <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/CUrwIV0zks6L2COlO7OyX6ieqnAWaRDeCZdl3YrK.png" class="img-fluid all-products">
                                    <h1>Mortgage Status Folder (7429)</h1>
                                    <span>$1.76</span>








                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 d-flex">
                            <a href="#">
                                <div class="boxxx">
                                    <img src="{{asset('')}}/media/BdKZWAdgqXR5Z2c2FmSa42MIYuw0PgqqVkXbP9nz.png" class="img-fluid all-products">
                                    <h1>Hud Case Binder - Yellow (4212)</h1>
                                    <span>$2.43</span>








                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 d-flex">
                            <a href="#">
                                <div class="boxxx">
                                    <img src="{{asset('')}}/media/Aq2kVW2gZrQBmzfRq8wNeU0qeeJ1SWO64l2ngc8Q.png" class="img-fluid all-products">
                                    <h1>Hud Case Binder - Manila (4213)</h1>
                                    <span>$2.06</span>








                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 d-flex">
                            <a href="#">
                                <div class="boxxx">
                                    <img src="{{asset('')}}/media/qEp7Bw5I8cSxgT1WSxE8rMoXXiDOqmgxF5ZRgxKA.jpg" class="img-fluid all-products">
                                    <h1>ECOA Lobby Poster (8455)</h1>
                                    <span>$34.70</span>








                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 d-flex">
                            <a href="#">
                                <div class="boxxx">
                                    <img src="{{asset('')}}/media/i50bA1l4cro0wfhHbz0T4415oeXSROJ4sXmqj7MN.png" class="img-fluid all-products">
                                    <h1>ECOA Lobby Poster (8457)</h1>
                                    <span>$37.50</span>








                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 d-flex">
                            <a href="#">
                                <div class="boxxx">
                                    <img src="{{asset('')}}/media/JvTus8zA4sVPhGpgacaONTukkm2jtES6ceGmtgSC.png" class="img-fluid all-products">
                                    <h1>Home Mortgage Disclosure Act Notice (8458)</h1>
                                    <span>$34.70</span>








                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 d-flex">
                            <a href="#">
                                <div class="boxxx">
                                    <img src="{{asset('')}}/media/9lWk6Pkeu46aVz2GEzNfn3viJ6nU0ABbA9lpy9UV.png" class="img-fluid all-products">
                                    <h1>URLA Form 1003 - Uniform Residential Loan Application (7300)</h1>
                                    <span>$1.67</span>








                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 d-flex">
                            <a href="#">
                                <div class="boxxx">
                                    <img src="{{asset('')}}/media/sOmltTjo2f3NVAPBgdWueCO9gP8A1Fz0QYpfkpp5.png" class="img-fluid all-products">
                                    <h1>URLA Demographic Addendum (7300ADD)</h1>
                                    <span>$0.29</span>








                                </div>
                            </a>
                        </div>
                    </div>
                    <div class="text-center pt-4">

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


@endsection