Travel & Tour Guide Card Template

<div class="card-body p-4">
          <div class="d-flex flex-column mt-2 mb-2">
            <h3 class="main-title text-uppercase">Pakistan</h3>
            <h5 class="sub-title">Your New Travel Destination</h5>
          </div>

<p class="card-text mb-5">
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ex, nemo
            deserunt tempore, vel neque necessitatibus recusandae animi est cum
            sunta.
          </p>

<div class="d-flex justify-content-between mt-2">
            <div class="posting-time">
              <i class="far fa-clock"></i> 10 minutes ago
            </div>

<a href="#" class="comments">
              <i class="fas fa-comments"></i> 27 Comments
            </a>
          </div>
        </div>
        
      </div>
      
    </div>
</div>
    <script
      src="https://kit.fontawesome.com/d91ebf4c9d.js"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
      integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct"
      crossorigin="anonymous"
    ></script>
    <script>
      $(document).ready(function () {
        $('[data-toggle="tooltip"]').tooltip();
      });
    </script>

.main-container {
        font-family: Verdana, Geneva, Tahoma, sans-serif;
      }

      .card {
        width: 90%;
        min-width: 310px;
        max-width: 350px;
        margin: auto;
        background-color: white;
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 2px 2px rgba(0, 0, 0, 0.12);
      }

      .image-container {
        position: relative;
        height: 230px;
        width: 100%;
      }

      .image-container .cover-image {
        width: 100%;
        height: 100%;
      }

      .photos-button {
        position: absolute;
        bottom: 0;
        left: 0;
        border: none;
        border-top-right-radius: 12px;
        background-color: rgba(0, 45, 179, 0.5);
        color: #fff;
        font-size: 14px;
        box-shadow: 0px 50px 100px -20px rgba(50, 50, 93, 0.25),
          0px 30px 60px -30px rgba(0, 0, 0, 0.3),
          inset 0px -2px 6px 0px rgba(10, 37, 64, 0.35);
      }

      .photos-button:hover {
        color: gray;
        background-color: rgba(0, 45, 179, 0.9);
      }

      .date-button {
        position: absolute;
        top: 15px;
        right: 15px;
        width: 50px;
        height: 50px;
        border: none;
        border-radius: 50%;
        background-color: rgba(0, 45, 179, 0.5);
        color: #fff;
        font-size: 12px;
        box-shadow: 0px 50px 100px -20px rgba(50, 50, 93, 0.25),
          0px 30px 60px -30px rgba(0, 0, 0, 0.3),
          inset 0px -2px 6px 0px rgba(10, 37, 64, 0.35);
      }

      .main-title {
        font-size: 25px;
      }

      .sub-title {
        color: #009900;
        font-size: 18px;
      }

      .card-text {
        font-size: 14px;
        color: #737373;
      }

      .posting-time {
        font-size: 14px;
        color: gray;
      }

      .comments {
        font-size: 14px;
        color: gray;
      }

      .comments:hover {
        text-decoration: none;
        color: darkgray;
      }

      @media (max-width: 991.98px) {
        .date-button {
          width: 45px;
          height: 45px;
          font-size: 10px;
        }

        .main-title {
          font-size: 23px;
        }

        .sub-title {
          font-size: 16px;
        }

        .card-text {
          font-size: 13px;
        }

        .posting-time {
          font-size: 12px;
        }

        .comments {
          font-size: 12px;
        }
      }

CDN

ACTION

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

Copy CDN

https://kit.fontawesome.com/d91ebf4c9d.js

Copy CDN

https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js

Copy CDN

https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js

Copy CDN

Bootstrap 4

Travel Guide Card 3

AdBlock Detected!