Collection

<div class="col-lg-4 col-md-6">
<div class="bg-light img-hover">
    <img src="../../assets/images/product/product-img-10.jpg"
        alt="product image" class="img-fluid" />
</div>
<div class="mt-4">
    <h3>Sofa</h3>
    <p>Accusantium culpa, perspiciatis dolorem quo est atque laudantium non
        obcaecati tempore
        temporibus quidem
        quis laborum. Perspiciatis, ipsam placeat.</p>
    <a href="../../product-grid.html"
        class="d-flex align-items-center gap-2 btn-dark-link">
        <span class="text-link">Shop Sofa</span>
        <span
            class="btn btn-outline-primary btn-icon btn-xxs rounded-circle">
            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"
                fill="currentColor" class="bi bi-chevron-right"
                viewBox="0 0 16 16">
                <path fill-rule="evenodd"
                    d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708">
                </path>
            </svg>
        </span>
    </a>
</div>
</div>

<a href="#" class="text-center p-4 card-animation d-block bg-light">
    <img src="../../assets/images/product/product-img-1.jpg"
        alt="product image" class="mb-3 img-fluid" />

    <div
        class="d-flex align-items-center gap-2 justify-content-center link-animation">
        <h3 class="fs-6 mb-0">Armchair</h3>
        <span
            class="btn btn-outline-dark btn-icon btn-xxs rounded-circle circle-chevron">
            <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10"
                fill="currentColor" class="bi bi-chevron-right"
                viewBox="0 0 16 16">
                <path fill-rule="evenodd"
                    d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708" />
            </svg>
        </span>
    </div>
</a>
                                       

<div class=" bg-light p-lg-6 p-4 mb-5 position-relative">
<h2 class="mb-0 fs-4 position-absolute top-0 start-0 m-4">
    <a href="../../product-grid.html">Office
        & Accessories</a>
</h2>
<span class="position-absolute bottom-0 start-0 m-4">
    <a href="#!" class="text-link">Office</a>
</span>
<div class="d-flex justify-content-end">
    <img src="../../assets/images/png/collection-img-1.png"
        alt="collection image" class="img-fluid">
</div>
                                        </div>