Banner

<div style="max-width: 440px;">
    <div class="card border-0 hover-zoom-in">
        <div class="card-img">
            <img src="../../images/banner-01.jpg" alt="Sneakers">
        </div>
        <div class="card-img-overlay d-flex align-items-end px-6 py-4">
            <div class="mr-auto">
                <h5 class="card-title fs-24 mb-0">
                    <a href="#">
                        Sneakers
                    </a>
                </h5>
                <p class="mb-0 card-text">20 Items</p>
            </div>
            <a href="#"
               class="w-45px h-45px bg-white bg-hover-primary rounded-circle fs-14 d-flex align-items-center justify-content-center hover-white"><i
                    class="fal fa-arrow-right"></i></a>

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

<div style="max-width: 440px;">
    <div class="card border-0">
        <div class="card-img">
            <img src="../../images/banner-09.jpg" alt="Sneakers">
        </div>
        <div class="card-img-overlay d-flex align-items-end p-6 justify-content-center">
            <a href="#" class="btn btn-white fs-18 lh-13 bg-hover-primary hover-white border-hover-primary">Handbags</a>
        </div>
    </div>
</div>

<div style="max-width: 570px;">
    <div class="card border-0 banner-03">
        <div class="card-img bg-img-cover-center" style="background-image: url('../../images/banner-12.jpg');">
        </div>
        <div class="card-img-overlay d-flex flex-column p-6">
            <p class="mb-0 card-text font-weight-500 text-primary">New Arrivals</p>
            <h5 class="card-title fs-36 lh-128 mb-0">
                <a href="#" class="d-inline-block">
                    Sneakers
                </a>
            </h5>
            <div class="mt-auto">
                <a href="shop-page-01.html"
                   class="border-bottom">Shop Now</a>
            </div>

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

<div style="max-width: 408px;" class="mb-6">
    <div class="card border-0">
        <div style="background-image: url('../../images/banner-14.jpg')"
             class="card-img ratio bg-img-cover-center ratio-1-1">
        </div>
        <div class="card-img-overlay d-flex align-items-end p-6 justify-content-center">
            <a href="#" class="btn btn-white fs-18 lh-13 bg-hover-primary hover-white border-hover-primary">Handbags</a>
        </div>
    </div>
</div>