Card image

    <!--Card-->
    <div class="card-over rounded-3 overflow-hidden">
        <!--Image-->
        <img src="assets/img/960x640/6.jpg" alt="" class="img-fluid img-zoom">
        <!--overlay-->
        <div class="card-overlay p-4 text-white d-flex align-items-end">
            <!--Content list-->
            <ul class="list-unstyled overlay-items">
                <li>
                    <h5 class="mb-2">Snippets code</h5>
                </li>
                <li><span>Branding</span></li>
            </ul>
        </div>
    </div>

    <!--Card-->
    <div class="card-over rounded-3 card-hover overflow-hidden">
        <!--Image-->
        <img src="assets/img/960x640/7.jpg" alt="" class="img-fluid img-zoom">
        <!--Hover overlay-->
        <div class="card-overlay py-4 px-3 text-white d-flex align-items-end">
            <!--Overlay-items-->
            <ul class="list-unstyled overlay-items">
                <li>
                    <h5 class="fs-4 mb-1">Awesome title</h5>
                </li>
                <li><span>Awesome Subtitle</span></li>
            </ul>
        </div>
    </div>

    <!--Card-product-->
    <div class="card hover-shadow-lg overflow-hidden hover-lift-lg border-0">
        <div class="px-5 py-4 d-block overflow-hidden">
            <!--Product image-->
            <a href="#!">
                <img src="assets/img/shop/products/01.jpg" class="img-fluid" alt="Product">
            </a>
        </div>
        <div class="px-4 pb-4 text-center">
            <a href="#!" class="h5 text-dark d-block position-relative mb-2">Product Title</a>
            <!--Price-->
            <span class="card-product-price">
                <span>$256</span> <del>$299</del>
            </span>
        </div>
    </div>
    <!--/Card product end-->   

    
    <!--Card-->
    <a href="#!" class="card-split-hover position-relative d-block overflow-hidden">
        <!--Card Image-->
        <img src="assets/img/960x640/8.jpg" alt="" class="img-fluid">
        <div class="card-overlay text-white py-4 px-3 d-flex align-items-end">
            <!--Splitting text-->
            <ul class="list-unstyled overlay-items">
                <li>
                    <h5 class="fs-4 mb-1 splitting-up" data-splitting>Awesome title</h5>
                </li>
                <li>
                    <span class="text-body-secondary splitting-up d-block" data-splitting>Awesome
                        Subtitle</span>
                </li>
            </ul>
        </div>
    </a>

    <!--Card-->
    <a href="#!" class="d-block card-split-img position-relative overflow-hidden">
    <div class="splitting-img img-vertical mb-4" data-columns="4" data-split-image>
        <img src="assets/img/960x640/4.jpg" alt="" class="img-fluid">
    </div>
    <div class="card-body pb-0">
        <ul class="list-unstyled mb-0">
            <li>
                <h5 class="fs-4 mb-1">Awesome title</h5>
            </li>
            <li><span class="text-body-secondary d-block">Awesome Subtitle</span></li>
        </ul>
    </div>
</a>

  <!--article-->
  <article
  class="card card-hover hover-lift hover-shadow-lg text-white rounded-4 border-0 overflow-hidden">
  <img src="assets/img/960x640/3.jpg" class="img-fluid img-zoom" alt="...">
  <!--Overlay background-->
  <div class="bg-gradient-dark position-absolute start-0 top-0 w-100 h-100"></div>
  <!--Overlay Content-->
  <div
      class="card-body z-1 d-flex flex-column position-absolute start-0 top-0 w-100 h-100 justify-content-end p-4">
     <div class="position-relative">
      <p class="small mb-1"><span>Design</span></p>
      <h5 class="h3 mb-3"><span>How good designs helps to grow business</span>
      </h5>
      <div class="d-flex align-items-center">
          <span>
              <img src="assets/img/avatar/4.jpg" alt=""
                  class="avatar sm rounded-circle me-2">
          </span>
          <div class="small">
              Asako Takakura
          </div>
      </div>
     </div>
  </div>
  <a href="#!" class="stretched-link"></a>
  </article>

    <!--article-->
    <article class="card-hover card shadow-sm hover-lift hover-shadow-lg overflow-hidden rounded-3">
       <!--image-->
       <a href="#!" class="d-block overflow-hidden">
           <img src="assets/img/960x640/7.jpg" alt=""
               class="img-fluid img-zoom position-relative">
       </a>
       <div class="position-relative d-block p-4">
           <!--Date-->
           <div class="d-flex justify-content-start w-100 pb-3">
               <small class="text-body-secondary">Mar 12, 2021</small>
           </div>
           <div>
               <a href="#!" class="text-reset">
                   <h5 class="link-multiline">10 Best Slack Apps for Remote Work In 2021</h5>
   
               </a>
           </div>
       </div>
   </article>
   <!--/.article-->

   <!--article-->
   <article class="card-hover border-0">
    <a href="#" class="stretched-link"></a>
    <div class="card-body position-relative p-0">
        <div class="d-block rounded-3 position-relative overflow-hidden mb-4">
            <img src="assets/img/960x640/1.jpg" class="img-fluid img-zoom" alt="">
        </div>
        <div class="d-flex mb-3 flex-grow-1 align-items-center">
            <img src="assets/img/avatar/1.jpg" alt="" class="avatar sm rounded-circle me-2">
            <small class="fw-semibold">Emily</small>
        </div>
        <h5 class="mb-3">4 Business Trends Fueling the Future of Business</h5>
        <div class="blog-content">
            <p class="mb-4">Lorem ipsum is placeholder text commonly used in the graphic,
                print, and publishing...</p>
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <span class="small text-body-secondary">Mar 9, 2021</span>
                </div>
                <div
                    class="d-flex justify-content-end flex-grow-1 align-items-center text-primary">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor"
                        class="bx bx-dot" width="24px" height="24px" viewBox="0 0 16 16"
                        id="dot">
                        <path d="M8 9.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path>
                    </svg>
                    <small>Business</small>
                </div>
            </div>
        </div>
    </div>
   </article>

<!--article-->
<article class="card card-hover text-center hover-shadow-lg overflow-hidden border-0 rounded-3 shadow-sm">
<div class="overflow-hidden position-relative">
<!--Article image-->
<img src="assets/img/960x640/1.jpg" alt="" class="img-fluid img-zoom">
<!--Article image divider-->
<svg class="position-absolute start-0 bottom-0 mb-n1" style="color: var(--bs-body-bg);"
preserveAspectRatio="none" width="100%"
height="48" viewBox="0 0 1460 120" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M122 22.8261L0 0V120H1460V0L1338 22.8261C1217 44.1304 973 88.2609 730 88.2609C487
88.2609 243 44.1304 122 22.8261Z" fill="currentColor"></path>
</svg>
</div>
<!--Content-body-->
<div class="card-body pb-5 position-relative">
<small class="text-body-secondary"><i class="bx bx-calendar-alt me-1"></i> 12 June
2021</small>
<h5 class="py-3 mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing
elit</h5>
<p class="mb-0 text-truncate px-lg-4">
Lorem ipsum dolor sit amet sed do eiusmod tempor labore et dolore magna
aliqua.
Viverra nam libero justo laoreet.
</p>
</div>
<!--Article link-->
<a href="#!" class="stretched-link"></a>
</article>

    <!--Card-->
    <div class="card-over card-hover text-center card border-0 
    shadow-sm overflow-hidden hover-shadow-lg">
        <div class="card-image mx-auto d-block overflow-hidden position-relative">
            <img src="assets/img/team/2.jpg" alt="" class="img-fluid">
            <div class="card-overlay text-white overlay-linear d-flex flex-column
             justify-content-end align-items-center">
                <!--Social List-->
                <ul class="d-flex align-items-center list-inline pb-5 overlay-items">
                    <li class="list-inline-item me-3">
                        <a href="#!" class="d-block fs-5">
                            <i class="bx bxl-facebook"></i>
                        </a>
                    </li>
                    <li class="list-inline-item me-3">
                        <a href="#!" class="d-block fs-5">
                            <i class="bx bxl-twitter"></i>
                        </a>
                    </li>
                    <li class="list-inline-item">
                        <a href="#!" class="d-block fs-5">
                            <i class="bx bxl-instagram"></i>
                        </a>
                    </li>
                
                <!--card hover-transition-list+items-->
            </div>
            <!--/.overlay-->
            <!--Image divider-->
            <svg class="position-absolute start-0 bottom-0 mb-n2" style="color: var(--bs-body-bg);" preserveAspectRatio="none" width="100%"
                height="30" viewBox="0 0 1200 160" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd"
                    d="M0 16L67 29.3333C133 42.6667 267 69.3333 400 82.6667C533 96 667 96 800 80C933 64 1067 32 1133 16L1200 0V160H1133C1067
                     160 933 160 800 160C667 160 533 160 400 160C267 160 133 160 67 160H0V16Z"
                    fill="currentColor"></path>
            </svg>
        </div>
        <!--/.image and overlay-->
        <div class="card-body">
            <h5 class="mb-1">Adam Howkins</h5>
            <p class="mb-0">Founder</p>
        </div>
    </div>

    <!--Card-->
    <a href="#!" class="d-block rounded-3 bg-primary position-relative text-white overflow-hidden card-hover hover-lift-lg hover-shadow-lg">
        <div class="overflow-hidden bg-gradient-light position-relative">
            <img src="assets/img/960x640/3.jpg" alt="" class="img-fluid img-zoom">
            <div class="card-overlay py-4 px-3 text-white d-flex align-items-end justify-content-center">
                <ul class="list-unstyled overlay-items">
                    <li>
                        <span class="btn btn-lg btn-white">View case study</span>
                    </li>
                </ul>
            </div>
        </div>
        <!--Card-body-->
        <div class="card-body px-4 py-5">
            <p class="text-body-secondary mb-2">Print design . Branding</p>
            <h5 class="mb-0">Duis commonly aute irure dolor in reprehenderit in
                voluptate velit
            </h5>
        </div>
    </a>

    <!--Card-->
    <div data-aos>
        <!--Card-->
        <a href="#!" class="d-block overflow-hidden position-relative card-hover text-body">
            <!--Image-->
            <div class="overflow-hidden card-reveal-effect">
                <img src="assets/img/projects/lg1.jpg" alt="" class="img-fluid img-zoom">
            </div>
            <div class="card-body pt-4 pb-0">
                <!--Card-content-->
                <ul class="list-unstyled mb-0">
                    <li>
                        <h5 class="mb-1">Awesome title</h5>
                    </li>
                    <li><span class="width-3x border-top border-secondary border-2 d-inline-block align-middle me-2"></span><span class="text-body-secondary">Awesome Subtitle</span></li>
                </ul>
            </div>
        </a>
    </div>

    <!--Card-property-->
    <div class="card rounded-4 mb-5 aos-init aos-animate" data-aos="fade-up">
        <div class="mb-0">
            <a href="#!" class="d-block overflow-hidden rounded-top-4">
                <img src="assets/img/estate/listing/1.jpg" class="img-fluid" alt="">
            </a>
        </div>
        <div class="card-body overflow-hidden p-4 px-lg-5 flex-grow-1">
            <span class="badge bg-body-tertiary text-primary mb-3">For Sale</span>
            <a href="#!" class="text-dark d-block mb-4">
                <!--Heading-->
                <h4>Villa in Coral Gables</h4>
            </a>
            <div class="row mb-3 mb-lg-4">
                <div class="col-3" data-bs-toggle="tooltip" data-bs-placement="top" title=""
                    data-bs-original-title="Bedrooms">
                    <div class="d-flex align-items-center">
                        <i class="bx bx-bed fs-5 me-2"></i>
                        <strong class="small">4</strong>
                    </div>
                </div>
                <div class="col-3 border-start border-end" data-bs-toggle="tooltip" data-bs-placement="top" title=""
                    data-bs-original-title="Bathrooms">
                    <div class="d-flex align-items-center">
                        <i class="bx bx-bath fs-5 me-2"></i>
                        <strong class="small">2</strong>
                    </div>
                </div>
                <div class="col-6" data-bs-toggle="tooltip" data-bs-placement="top" title="" data-bs-original-title="Area">
                    <div class="d-flex align-items-center">
                        <i class="bx bx-area fs-5 me-2"></i>
                        <strong class="small">6400 Sq Ft</strong>
                    </div>
                </div>
            </div>
            <!--Description-->
            <p class="mb-4 mb-lg-5 text-truncate">
                Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
                mollit anim id est laborum.
            </p>
            <div class="row justify-content-between justify-content-lg-start">
    
                <div class="col-6">
                    <!--Price-->
                    <h4 class="mb-0">$983,000</h4>
                </div>
                <div class="col-6">
                    <!--Agent-->
                    <div class="d-flex align-items-center justify-content-end flex-shrink-0">
                        <img src="assets/img/avatar/2.jpg" alt=""
                            class="flex-shrink-0 flex-shrink-0 avatar sm rounded-circle me-2 img-fluid">
                        <span class="small">
                            Monika
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>