Elegant Map Card Template for Your Website

<link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
    />
    
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
      integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />

<div class="main-body d-flex justify-content-center align-items-center vh-100">
    <div class="card mx-auto mt-5 border-0 shadow" style="width: 20rem">
      <img src="https://tse1.mm.bing.net/th?id=OIP.0ZZ_wR6YXUFIHjek4j6CFwHaEK&pid=Api&P=0&h=220" class="card-img-top" alt="Central Park Zoo" />
      <div class="cycle shadow">
        <i class="fa-solid fa-bicycle"></i>
      </div>
      <div class="card-body">
        <div class="heading d-flex">
          <div>
            <h5 class="text-orange">Central Park Zoo</h5>
            <small class="text-orange">A place to relax</small>
          </div>
          <p class="text-orange">25 min</p>
        </div>
        <div class="hr">
          <hr />
        </div>

<div class="card-btns d-flex">
          <div>
            <p>CALL</p>
            <i class="fa-solid fa-phone"></i>
          </div>
          <div>
            <p>LOVE</p>
            <i class="fa-solid fa-cat"></i>
          </div>
          <div>
            <p>SMILE</p>
            <i class="fa-solid fa-smile"></i>
          </div>
        </div>

<hr>

<div class="address">
           <div class="address-icon d-flex">
            <i class="fa-solid fa-location-dot"></i>
            <p>East 64th Street , New York , NY 100021 , US</p>
           </div>
           <div class="address-heading d-flex">
            <i class="fa-solid fa-clock"></i>
            <p>Closed  Opens 10 AM</p>
           </div>
        </div>
      </div>
    </div>
  </div>

.main-body {
        background-color: whitesmoke;
      }
      .card {
        height: 500px;
      }
      .cycle {
        width: 13%;
        padding: 8px 0px;
        position: absolute;
        z-index: 3;
        top: 31%;
        right: 4%;
        background-color: #ec5800;
        border-radius: 20px;
        text-align: center;
        color: white;
      }
      .text-orange {
        color: #ec5800;
      }

      .cycle i {
        font-size: 13px;
      }

      .heading {
        width: 100%;
        margin: 5px;
      }

      .heading p {
        margin-top: 13%;
        margin-left: 32%;
        font-size: 14px;
      }
    

      .card-btns {
        justify-content: space-between;
        margin: 0px 10px;
        font-size: 14px;
        text-align: center;
        color: #ec5800;
      }

      .card-btns i {
        font-size: 15px;
      }

      .address {
        width: 100%;
        font-size: 14px;
      }
      .address i {
         font-size: 14px;
         margin-right: 10px;
         margin-top: 4px;
         color: #ec5800;
      }

CDN

ACTION

https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css

Copy CDN

https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css

Copy CDN

BootStrap 5

Map Card

AdBlock Detected!