Bootstrap 4

Employee Profile Card

    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
      integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N"
      crossorigin="anonymous"
    />

  <div class="main-container d-flex justify-content-center align-items-center vh-100">
    <div class="container-fluid">
      <div class="card mx-auto">
        <img
          src="https://images.unsplash.com/photo-1560884117-8e9be30e4aec?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTEyfHxwcm9maWxlJTIwcGljdHVyZXxlbnwwfHwwfHx8MA%3D%3D"
          class="card-img-top profile-image"
          alt="user-profile-image"
        />
        <div class="card-body text-center">
          <h5 class="card-title text-uppercase font-weight-bold">
            donn gabriel
          </h5>
          <h3 class="card-subtitle text-uppercase">Junior Developer</h3>
          <p class="card-text font-weight-bold mt-3">
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ut ratione
            officia, quasi impedit quidem dolorem voluptates esse mollitia
            corrupti cumque quas ipsa incidunt obcaecati necessitatibus maxime
            vel magni deserunt ipsam.
          </p>

          <div
            class="d-flex justify-content-center align-items-center Social-links"
          >
            <ul class="d-flex p-0">
              <li>
                <a
                  href="#"
                  class="circle-icon icon-facebook rounded-circle d-flex justify-content-center align-items-center mr-3"
                  ><i class="fa-brands fa-facebook-f"></i
                ></a>
              </li>
              <li>
                <a
                  href="#"
                  class="circle-icon icon-youtube rounded-circle d-flex justify-content-center align-items-center mr-3"
                  ><i class="fa-brands fa-youtube"></i
                ></a>
              </li>
              <li>
                <a
                  href="#"
                  class="circle-icon icon-linkedin rounded-circle d-flex justify-content-center align-items-center mr-3"
                  ><i class="fa-brands fa-linkedin-in"></i
                ></a>
              </li>
              <li>
                <a
                  href="#"
                  class="circle-icon icon-snapchat rounded-circle d-flex justify-content-center align-items-center"
                  ><i class="fa-brands fa-snapchat"></i
                ></a>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <!-- .card -->
    </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>

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

      .card {
        width: 90%;
        min-width: 320px;
        max-width: 350px;
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25), 0 2px 8px rgba(0, 0, 0, 0.25),
          inset 0px 0px 0px 1px rgba(255, 255, 255, 0.1);
      }

      .profile-image {
        height: 300px;
      }

      .card-title {
        font-size: 20px;
      }

      .card-subtitle {
        font-size: 13px;
        color: #4cc7cd;
      }

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

      .Social-links li {
        list-style: none;
      }

      .circle-icon {
        width: 40px;
        height: 40px;
        color: #fff;
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25), 0 2px 8px rgba(0, 0, 0, 0.25),
          inset 0px 0px 0px 1px rgba(255, 255, 255, 0.1);
      }

      .circle-icon:hover {
        background-color: #fff;
        text-decoration: none;
      }

      .icon-facebook {
        background-color: #3a5693;
      }

      .icon-facebook:hover {
        color: #3a5693;
      }

      .icon-youtube {
        background-color: #f60501;
      }

      .icon-youtube:hover {
        color: #f60501;
      }

      .icon-linkedin {
        background-color: #0074b1;
      }

      .icon-linkedin:hover {
        color: #0074b1;
      }

      .icon-snapchat {
        background-color: #cbcb21;
      }

      .icon-snapchat:hover {
        color: #cbcb21;
      }

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

General Profile Card

    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
      integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N"
      crossorigin="anonymous"
    />

  <div class="main-container d-flex justify-content-center align-items-center vh-100">
    <div class="container-fluid">
      <div class="card">
        <div class="image-container position-relative">
          <img
            src="https://images.unsplash.com/photo-1613339027986-b94d85708995?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OHx8bmF0dXJlJTIwYmFja2dyb3VuZHxlbnwwfHwwfHx8MA%3D%3D"
            class="card-img-top cover-image"
            alt="cover-image"
          />
          <img
            src="https://images.unsplash.com/photo-1584999734482-0361aecad844?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NDJ8fHByb2ZpbGUlMjBwaWN0dXJlfGVufDB8fDB8fHww"
            alt="profile-picture"
            class="profile-image position-absolute rounded-circle"
          />
        </div>

        <div class="card-body text-center">
          <h5 class="card-title font-weight-bold text-uppercase mt-5">
            Sergio De Paula
          </h5>

          <p class="card-text font-weight-bold mt-3">
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ut ratione
            officia, quasi impedit quidem dolorem voluptates esse mollitia
            corrupti cumque quas ipsa incidunt obcaecati necessitatibus maxime
            vel magni deserunt ipsam.
          </p>

          <div
            class="d-flex justify-content-center align-items-center Social-links mt-4"
          >
            <ul class="d-flex">
              <li>
                <a href="#" class="icon mr-4"
                  ><i class="fa-brands fa-facebook-f"></i
                ></a>
              </li>
              <li>
                <a href="#" class="icon mr-4"
                  ><i class="fa-brands fa-linkedin-in"></i
                ></a>
              </li>
              <li>
                <a href="#" class="icon mr-4"
                  ><i class="fa-brands fa-snapchat"></i
                ></a>
              </li>
              <li>
                <a href="#" class="icon"
                  ><i class="fa-brands fa-youtube"></i
                ></a>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <!-- .card -->
    </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>

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

      .card {
        width: 90%;
        min-width: 320px;
        max-width: 350px;
        margin: auto;
        background-color: #dddddd;
        border-radius: 10px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
      }

      .image-container .cover-image {
        height: 200px;
        border-top-left-radius: inherit;
        border-top-right-radius: inherit;
      }

      .image-container .profile-image {
        height: 125px;
        width: 125px;
        top: 100%;
        left: 50%;
        transform: translate(-50%, -50%);
        border: 5px solid white;
      }

      .card-title {
        font-size: 20px;
      }

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

      .Social-links ul {
        padding: unset;
      }

      .Social-links li {
        list-style: none;
      }

      .icon .fa-brands {
        font-size: 18px;
        color: #058376;
      }

      .icon .fa-brands:hover {
        color: #034e46;
      }

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

Product Card 1

    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
      integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N"
      crossorigin="anonymous"
    />
  
  <div class="main-container d-flex justify-content-center align-items-center vh-100">
    <div class="container-fluid">
      <div class="card">
        <div class="image-container">
          <div class="discount-and-wishlist-container">
            <div class="d-flex justify-content-between align-items-center">
              <span class="badge badge-danger p-1 discount">-25%</span>
              <a href="#" class="wishlist">
                <i class="fa-regular fa-heart"></i>
              </a>
            </div>
          </div>
          <img
            src="https://images.unsplash.com/photo-1591534577302-1696205bb2bc?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mzl8fGJhY2twYWNrfGVufDB8fDB8fHww"
            class="card-img-top product-image"
            alt="product-image"
          />
        </div>

        <div class="card-body">
          <div class="d-flex justify-content-between align-items-center">
            <h5 class="product-name">Backpack - Grey</h5>
            <div class="d-flex flex-column">
              <span class="new-price">Rs 5,999</span>
              <small class="old-price text-right">Rs 3,999</small>
            </div>
          </div>

          <div class="d-flex justify-content-between align-items-center mt-3">
            <div class="d-flex">
               <input type="button" class="btn-circle creme mr-2" />
              <input type="button" class="btn-circle red mr-2" />
              <input type="button" class="btn-circle blue" />
            </div>
            <div class="d-flex">
             <span class="item-size btn-circle mr-2" type="button">S</span>
              <span class="item-size btn-circle mr-2" type="button">M</span>
              <span class="item-size btn-circle" type="button">L</span>
            </div>
          </div>

          <div class="d-flex justify-content-between align-items-center mt-3">
            <div>
              <i class="fa-regular fa-star"></i>
              <span class="rating-number">4.5</span>
            </div>
            <span class="buy">BUY +</span>
          </div>
        </div>
        <!-- .card-body -->
      </div>
      <!-- .card -->
    </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>

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

      .card {
        width: 90%;
        min-width: 320px;
        max-width: 350px;
        margin: auto;
        background-color: #fff;
        border: none;
        border-radius: 10px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
          0 6px 20px 0 rgba(0, 0, 0, 0.19);
      }

      .image-container {
        position: relative;
      }

      .product-image {
        height: 350px;
        border-radius: 10px;
      }

      .discount-and-wishlist-container {
        position: absolute;
        width: 100%;
        padding: 9px 15px;
      }

      .discount {
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
          0 6px 20px 0 rgba(0, 0, 0, 0.19);
      }

      .wishlist {
        background-color: #eee;
        color: black;
        font-size: 20px;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
          0 6px 20px 0 rgba(0, 0, 0, 0.19);
      }
      .wishlist:hover {
        text-decoration: none;
        color: red;
      }

      .product-name {
        width: 70%;
        font-size: 18px;
        font-weight: bold;
      }

      .new-price {
        color: red;
        font-weight: bold;
      }

      .old-price {
        color: gray;
        font-weight: bold;
        font-size: 10px;
        padding-right: 2px;
      }

      .btn-circle {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        padding: 3px;
      }

      .creme {
        background-color: #fff;
        border: 2px solid gray;
      }

      .creme:hover {
        border: 3px solid gray;
      }

      .creme:focus {
        background-color: gray;
      }

      .red {
        background-color: #fff;
        border: 2px solid red;
      }

      .red:hover {
        border: 3px solid red;
      }

      .red:focus {
        background-color: red;
      }

      .blue {
        background-color: #fff;
        border: 2px solid #40c4ff;
      }

      .blue:hover {
        border: 3px solid #40c4ff;
      }

      .blue:focus {
        background-color: #40c4ff;
      }

      .item-size {
        width: 25px;
        height: 25px;
        background: #fff;
        color: gray;
        border: 1px solid gray;
        border-radius: 50%;
        font-size: 14px;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .rating-star {
        width: 15px;
        margin-top: -5px;
      }

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

      .buy {
        font-size: 18px;
        font-weight: 500;
        color: purple;
      }

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

Product Card 2

    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
      integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N"
      crossorigin="anonymous"
    />
 
  <div class="main-container d-flex justify-content-center align-items-center vh-100">
    <div class="container-fluid">
      <div class="card">
        <div class="image-container">
          <span class="badge mt-2 mr-2 p-2 brand-name">Asus</span>
          <img
            src="https://images.unsplash.com/photo-1575024357670-2b5164f470c3?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjJ8fGxhcHRvcHxlbnwwfHwwfHx8MA%3D%3D"
            class="card-img-top product-image"
            alt="product-image"
          />
        </div>

        <div class="card-body">
          <div class="d-flex justify-content-between align-items-center">
            <div class="badge badge-pill product-price">Rs 96,999</div>
            <div class="product-review">
              <a href="#">Reviews</a>
            </div>
          </div>

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

          <button class="check-offer-btn d-block mx-auto mt-4">
            Check Offer
          </button>
        </div>
        <!-- .card-body -->
      </div>
      <!-- .card -->
    </div>
</div>
    <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>

.main-container {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      }
      .card {
        width: 90%;
        min-width: 300px;
        max-width: 30rem;
        margin: auto;
        background-color: #fff;
        border: none;
        border-radius: 10px;
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 2px 2px rgba(0, 0, 0, 0.12);
      }
      .image-container {
        position: relative;
      }
      .brand-name {
        position: absolute;
        right: 0;
        text-transform: uppercase;
        background-color: #8bc34a;
        color: #fff;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
          0 6px 20px 0 rgba(0, 0, 0, 0.19);
      }
      .product-image {
        height: 200px;
        border-radius: 10px;
      }
      .product-price {
        background-color: rgb(247, 129, 10);
        color: #fff;
        font-size: 14px;
        padding: 5px 15px;
      }
      .product-review a {
        color: gray;
        text-decoration: underline;
      }
      .product-review a:hover {
        color: darkgray;
      }
      .check-offer-btn {
        width: 80%;
        border: none;
        border-radius: 50px;
        background-color: #f7810a;
        color: #fff;
        padding: 8px;
        text-transform: uppercase;
        box-shadow: 0 4px 4px 0 rgba(247, 129, 10, 0.2),
          0 4px 15px 0 rgba(247, 129, 10, 0.19);
      }
      .check-offer-btn:hover {
        background-color: #f7983a;
      }

CDN

ACTION

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

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

Travel Guide Card 1

    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
      integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N"
      crossorigin="anonymous"
    />

  <div class="main-container d-flex justify-content-center align-items-center vh-100">
    <div class="container-fluid">
      <div class="card">
        <div class="image-container">
          <button class="badge p-2 photos-button">Photos</button>
          <img
            src="https://images.unsplash.com/photo-1531213203257-16afb0eac95e?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTl8fGxhaG9yZSUyMG5pZ2h0fGVufDB8fDB8fHww"
            class="card-img-top cover-image"
            alt="cover-image"
          />
        </div>

        <div class="card-body">
          <div class="d-flex flex-column text-center">
            <h3 class="main-title">Lahore City Scape Night</h3>
            <h5 class="sub-title">A Historical City</h5>
          </div>

          <p class="card-text font-weight-bold mt-4 text-center">
            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 align-items-center mt-4">
            <button class="read-more-btn">Read More</button>
            <a href="#" class="like">
              <i class="fa-solid fa-heart"></i>
              <span>Like</span>
            </a>
          </div>

          <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>
        <!-- .card-body -->
      </div>
      <!-- .card -->
    </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>

  .main-container {
        font-family: "roboto", sans-serif;
      }

      .card {
        width: 350px;
        background-color: white;
        margin: auto;
      }

      .card:hover {
        box-shadow: 0 0 45px gray;
      }

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

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

      .photos-button {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100px;
        border: none;
        border-radius: unset;
        background-color: rgb(180, 46, 46);
        color: #fff;
        font-size: 16px;
      }

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

      .sub-title {
        color: rgb(174, 60, 60);
        font-size: 18px;
      }

      .read-more-btn {
        border: none;
        border-radius: none;
        background-color: #2a9c98;
        color: #fff;
        font-size: 14px;
        font-weight: 500;
        padding: 8px 20px;
        text-transform: uppercase;
        box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2),
          0 4px 15px 0 rgba(0, 0, 0, 0.19);
      }

      .read-more-btn:hover {
        background-color: #26938d;
        color: #b7dbd9;
      }

      .like {
        color: black;
        font-size: 20px;
        font-weight: 500;
      }

      .like:hover {
        color: #2a9c98;
        text-decoration: none;
      }

      .like:hover .like-icon {
        border: none;
        background-color: #2a9c98;
      }

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

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

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

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

Opening/Closing Travel Guide Card

    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
      integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N"
      crossorigin="anonymous"
    />

  <div class="main-container d-flex justify-content-center align-items-center vh-100">
    <div class="container-fluid pt-5">
      <div class="card">
        <div class="image-container">
          <img
            src="https://images.unsplash.com/photo-1602740337312-e28c0b7d27f9?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8N3x8a2FyYWNoaXxlbnwwfHwwfHx8MA%3D%3D"
            class="card-img-top cover-image"
            alt="cover-image"
          />
        </div>

        <div class="card-body">
          <div class="content">
            <h3 class="main-title">Karachi City</h3>
            <p class="card-text mt-2 text-center">
              Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ex, nemo
              deserunt tempore, vel neque necessitatibus recusandae animi est
              cum sunta.
            </p>
          </div>
        </div>
        <!-- .card-body -->
      </div>
      <!-- .card -->
    </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>

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap");

      .main-container {
        margin: 0;
        padding: 0;
        font-family: "Poppins", sans-serif;
      }

      .card {
        max-width: 300px;
        height: 215px;
        margin: auto;
        padding: 20px 15px;
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 2px 2px rgba(0, 0, 0, 0.12);
        transition: 0.3s ease-in-out;
      }

      .card:hover {
        height: 450px;
        box-shadow: 0 0 45px gray;
      }

      .image-container {
        position: relative;
        width: 250px;
        height: 250px;
        top: -50px;
        left: 10px;
        z-index: 1;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
      }

      .image-container .cover-image {
        max-width: 100%;
        border-radius: 4px;
      }

      .main-title {
        font-size: 20px;
        font-weight: bold;
      }

      .content {
        position: relative;
        margin-top: -140px;
        padding: 10px 15px;
        text-align: center;
        color: #111;
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        transition: 0.4s;
      }

      .card:hover .content {
        visibility: visible;
        opacity: 1;
        margin-top: -60px;
        transition-delay: 0.3s;
      }

CDN

ACTION

https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap

Copy CDN

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

Educational Card

    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
      integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N"
      crossorigin="anonymous"
    />

  <div class="main-container d-flex justify-content-center align-items-center vh-100">
    <div class="container-fluid">
      <div class="card">
        <div class="image-container">
          <img
            src="https://images.unsplash.com/photo-1506452305024-9d3f02d1c9b5?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8Zm9yZXN0JTIwbWlzdHxlbnwwfHwwfHx8MA%3D%3D"
            class="card-img-top cover-image"
            alt="cover-image"
          />
        </div>

        <div class="card-body p-4">
          <h2 class="h1 main-title font-weight-bold mb-3">Lorem Ipsum</h2>

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

          <hr class="border border-3 mt-4" />

          <div class="d-flex justify-content-between text-uppercase mt-4">
            <div class="w-50">
              <h2 class="footer-title">Author</h2>
              <p class="author-name">John Doe</p>
            </div>

            <div class="w-75">
              <h2 class="footer-title">Tags</h2>
              <div class="d-flex">
                <p class="tag-name mr-3">Design</p>
                <p class="tag-name">Front End</p>
              </div>
            </div>
          </div>
        </div>
        <!-- .card-body -->
      </div>
      <!-- .card -->
    </div>
</div>
    <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>

.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 3px 7px 0 rgba(0, 0, 0, 0.13),
          0 1px 2px 0 rgba(0, 0, 0, 0.11);
      }

      .image-container {
        height: 300px;
      }

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

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

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

      .footer-title {
        font-size: 13px;
        font-weight: bold;
        color: gray;
        letter-spacing: 0.5px;
        margin-bottom: 2px;
      }

      .author-name {
        font-size: 14px;
      }

      .tag-name {
        font-size: 14px;
        border-bottom: 3px solid orange;
      }

      @media (max-width: 991.98px) {
        .main-title {
          font-size: 20px;
        }

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

        .footer-title {
          font-size: 12px;
        }

        .author-name {
          font-size: 13px;
        }

        .tag-name {
          font-size: 13px;
        }
      }

CDN

ACTION

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

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

Travel Guide Card 3

    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
      integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N"
      crossorigin="anonymous"
    />

  <div class="main-container d-flex justify-content-center align-items-center vh-100">
    <div class="container-fluid">
      <div class="card">
        <div class="image-container">
          <button class="badge date-button">
            <div class="mb-1">14<sup>th</sup></div>
            <div>Aug</div>
          </button>
          <button
            class="badge p-2 photos-button"
            data-toggle="tooltip"
            data-placement="right"
            title="More Photos"
          >
            <i class="fa-regular fa-images"></i>
          </button>
          <img
            src="https://images.unsplash.com/photo-1595507205672-ae65e9fda540?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NTN8fHNoYW5ncmlsYSUyMHJlc29ydCUyMHNrYXJkdXxlbnwwfHwwfHx8MA%3D%3D"
            class="card-img-top cover-image"
            alt="cover-image"
          />
        </div>

        <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>
        <!-- .card-body -->
      </div>
      <!-- .card -->
    </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

View Details Product Card

    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
      integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N"
      crossorigin="anonymous"
    />
 
  <div class="main-container d-flex justify-content-center align-items-center vh-100">
    <div class="container-fluid">
      <div class="card">
        <div class="image-container">
          <img
            src="https://images.unsplash.com/photo-1523381294911-8d3cead13475?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8aGFuZ2luZyUyMHQlMjBzaGlydHxlbnwwfHwwfHx8MA%3D%3D"
            class="card-img-top product-image"
            alt="product-image"
          />
          <div
            class="view-details d-flex justify-content-center align-items-center"
          >
            <button class="text-uppercase font-weight-bold">
              View Details
            </button>
          </div>
        </div>

        <div class="card-body">
          <div class="d-flex justify-content-between align-items-center">
            <div class="d-flex flex-column">
              <h2 class="product-brand">Brand Original</h2>
              <small class="product-name">Men's Casual Full Sleve Shirt</small>
            </div>
            <div class="product-price">$18</div>
          </div>
          <div class="product-size mt-4">
            <h2 class="text-uppercase font-weight-bold">Sizes</h2>
            <span>XS, S, M, L, XL, XXL</span>
          </div>

          <div class="product-color mt-3">
            <h2 class="text-uppercase font-weight-bold">Colors</h2>
            <div class="d-flex">
              <span class="color-circle green mr-2"></span>
              <span class="color-circle purple mr-2"></span>
              <span class="color-circle white mr-2"></span>
              <span class="color-circle black mr-2"></span>
            </div>
          </div>

          <div class="d-flex justify-content-between align-items-center mt-3">
            <div class="rating">
              <span><i class="fa-regular fa-star"></i></span>
              <span>4.7</span>
            </div>
            <div class="sold">
              <span>Sold: </span>
              <span>27</span>
            </div>
          </div>
        </div>
        <!-- .card-body -->
      </div>
      <!-- .card -->
    </div>
    <!-- .container-fluid -->
</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>

.main-container {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      }
      .card {
        width: 90%;
        min-width: 300px;
        max-width: 350px;
        margin: auto;
        background-color: #fff;
        border-radius: 10px;
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.13),
          0 1px 1px 0 rgba(0, 0, 0, 0.11);
      }
      .image-container {
        position: relative;
      }
      .image-container .view-details {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(102, 255, 194, 0.7);
      }
      .view-details button {
        background-color: #fff;
        color: #00cc7a;
        width: 50%;
        height: 50px;
        border: none;
      }
      .view-details button:hover {
        background-color: lightgray;
        color: black;
      }
      .product-image {
        height: 300px;
      }
      .product-brand {
        font-size: 30px;
      }
      .product-name {
        font-size: 16px;
        color: gray;
      }
      .product-price {
        font-size: 25px;
        color: #00cc7a;
        margin-top: -35px;
      }
      .product-size h2 {
        font-size: 18px;
      }
      .product-size span {
        color: gray;
      }
      .product-color h2 {
        font-size: 18px;
      }
      .product-color .color-circle {
        width: 18px;
        height: 18px;
        border: 1px solid gray;
        border-radius: 50%;
      }
      .product-color .green {
        background-color: rgb(18, 144, 70);
      }
      .product-color .purple {
        background-color: rgb(111, 47, 161);
      }
      .product-color .white {
        background-color: white;
      }
      .product-color .black {
        background-color: black;
      }
      .product-color .skyblue {
        background-color: rgb(47, 166, 235);
      }
      .product-color .gray {
        background-color: rgb(148, 161, 168);
      }
      .product-color .darkblue {
        background-color: rgb(17, 56, 81);
      }
      .rating,
      .sold {
        font-size: 14px;
        color: gray;
      }
      @media (max-width: 991.98px) {
        .view-details button {
          font-size: 14px;
        }
        .product-brand {
          font-size: 28px;
        }
        .product-name {
          font-size: 14px;
        }
        .product-price {
          font-size: 22px;
        }
        .product-size h2 {
          font-size: 16px;
        }
        .product-color h2 {
          font-size: 16px;
        }
        .rating,
        .sold {
          font-size: 13px;
          color: gray;
        }
      }

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

Professional Profile Card

    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
      integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N"
      crossorigin="anonymous"
    />

  <div class="main-container d-flex justify-content-center align-items-center vh-100">
    <div class="container-fluid">
      <div class="card">
        <div class="profile-container text-center">
          <img
            src="https://images.unsplash.com/photo-1584999734482-0361aecad844?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NDN8fHByb2ZpbGUlMjBwaG90b3xlbnwwfHwwfHx8MA%3D%3D"
            class="profile-picture rounded-circle mt-5 mb-2"
            alt="profile-picture"
          />

          <h2 class="user-name font-weight-bold mt-1">Aiony Haust. Fonville</h2>

          <div>
            <span class="rank">@Founder |</span>
            <span class="email-address">Websitename.com</span>
          </div>

          <div class="d-flex justify-content-center mt-3">
            <span
              class="social-icon facebook rounded-circle d-flex justify-content-center align-items-center mr-2"
            >
              <i class="fa-brands fa-facebook-f"></i>
            </span>
            <span
              class="social-icon x-twitter rounded-circle d-flex justify-content-center align-items-center mr-2"
            >
              <i class="fa-brands fa-x-twitter"></i>
            </span>
            <span
              class="social-icon skype rounded-circle d-flex justify-content-center align-items-center"
            >
              <i class="fa-brands fa-skype"></i>
            </span>
          </div>
        </div>
        <!-- .profile-container -->

        <div class="card-body text-center">
          <button class="btn btn-primary rounded-pill mt-3">Message Now</button>

          <div class="d-flex justify-content-around mt-5">
            <div>
              <div class="figure">2762</div>
              <h2 class="figure-title">Wallets Balance</h2>
            </div>
            <div>
              <div class="figure">1762</div>
              <h2 class="figure-title">Income Amounts</h2>
            </div>
            <div>
              <div class="figure">1123</div>
              <h2 class="figure-title">Total Transactions</h2>
            </div>
          </div>
        </div>
        <!-- .card-body -->
      </div>
      <!-- .card -->
    </div>
    <!-- .container-fluid -->
</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>

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

      .card {
        width: 90%;
        min-width: 300px;
        max-width: 350px;
        margin-left: auto;
        margin-right: auto;
        background-color: #fff;
        box-shadow: 0 3px 7px 0 rgba(0, 0, 0, 0.13),
          0 1px 2px 0 rgba(0, 0, 0, 0.11);
      }

      .profile-picture {
        height: 95px;
        width: 95px;
        border: 5px double lightgray;
      }

      .user-name {
        font-size: 22px;
      }

      .rank {
        color: gray;
      }

      .email-address {
        color: rgb(163, 79, 206);
      }

      .social-icon {
        height: 30px;
        width: 30px;
        border: 1px solid gray;
        color: gray;
        cursor: pointer;
      }

      .facebook:hover {
        border: 1px solid #316ff6;
      }

      .facebook:hover .fa-facebook-f {
        color: #316ff6;
      }

      .x-twitter:hover {
        border: 1px solid black;
      }

      .x-twitter:hover .fa-x-twitter {
        color: black;
      }

      .skype:hover {
        border: 1px solid #009edc;
      }

      .skype:hover .fa-skype {
        color: #009edc;
      }

      .figure {
        font-size: 17px;
        font-weight: bold;
        color: rgb(163, 79, 206);
      }

      .figure-title {
        font-size: 14px;
        color: gray;
        line-height: 20px;
      }

      @media (max-width: 991.98px) {
        .profile-picture {
          height: 90px;
          width: 90px;
        }

        .user-name {
          font-size: 17px;
        }

        .rank {
          font-size: 15px;
        }

        .email-address {
          font-size: 15px;
        }

        .social-icon {
          height: 28px;
          width: 28px;
        }

        .figure {
          font-size: 15px;
        }

        .figure-title {
          font-size: 14px;
        }
      }

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

Social Profile Card

    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
      integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N"
      crossorigin="anonymous"
    />

  <div class="main-container d-flex justify-content-center align-items-center vh-100">
    <div class="container-fluid">
      <div class="card">
        <div class="profile-container">
          <img
            src="https://images.unsplash.com/photo-1607990281513-2c110a25bd8c?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTB8fHByb2ZpbGUlMjBwaG90b3xlbnwwfHwwfHx8MA%3D%3D"
            class="profile-picture rounded-circle"
            alt="profile-picture"
          />
        </div>
        <!-- .profile-container -->

        <div class="card-body text-center">
          <h2 class="user-name font-weight-bold mt-5">Aiony Haust. Fonville</h2>

          <p class="card-text mt-4">
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Animi ad
            quos fuga tempore voluptatum vitae dicta eum nulla officia eius.
            Nulla soluta, voluptatum accusantium repellat veniam vitae
            aspernatur quidem nemo.
          </p>

          <div class="d-flex justify-content-center mt-4 mb-3">
            <span
              class="social-icon facebook rounded d-flex justify-content-center align-items-center p-3 mr-2"
            >
              <i class="fa-brands fa-facebook-f"></i>
            </span>
            <span
              class="social-icon youtube rounded d-flex justify-content-center align-items-center p-3 mr-2"
            >
              <i class="fa-brands fa-youtube"></i>
            </span>
            <span
              class="social-icon x-twitter rounded d-flex justify-content-center align-items-center p-3 mr-2"
            >
              <i class="fa-brands fa-x-twitter"></i>
            </span>
            <span
              class="social-icon skype rounded d-flex justify-content-center align-items-center p-3 mr-2"
            >
              <i class="fa-brands fa-skype"></i>
            </span>
            <span
              class="social-icon whatsapp rounded d-flex justify-content-center align-items-center p-3 mr-2"
            >
              <i class="fa-brands fa-whatsapp"></i>
            </span>
            <span
              class="social-icon instagram rounded d-flex justify-content-center align-items-center p-3"
            >
              <i class="fa-brands fa-instagram"></i>
            </span>
          </div>
        </div>
        <!-- .card-body -->
      </div>
      <!-- .card -->
    </div>
    <!-- .container-fluid -->
</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>

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

      .card {
        width: 95%;
        min-width: 300px;
        max-width: 350px;
        margin: auto;
        background-color: #fff;
        border-radius: 25px;
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.13),
          0 1px 1px 0 rgba(0, 0, 0, 0.11);
      }

      .profile-container {
        position: relative;
        height: 120px;
        background-color: rgb(166, 142, 226);
        border-top-right-radius: inherit;
        border-top-left-radius: inherit;
      }

      .profile-picture {
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translate(-50%, -50%);
        height: 95px;
        width: 95px;
        box-shadow: 0 26px 58px 0 rgba(0, 0, 0, 0.22),
          0 5px 14px 0 rgba(0, 0, 0, 0.18);
      }

      .user-name {
        font-size: 18px;
      }

      .card-text {
        color: rgb(166, 142, 226);
        font-size: 15px;
      }

      .social-icon {
        height: 40px;
        width: 40px;
        color: white;
        cursor: pointer;
      }

      .social-icon:hover {
        background-color: lightgray;
      }

      .facebook {
        background-color: #316ff6;
      }

      .facebook:hover .fa-facebook-f {
        color: #316ff6;
      }

      .x-twitter {
        background-color: black;
      }

      .x-twitter:hover .fa-x-twitter {
        color: black;
      }

      .skype {
        background-color: #009edc;
      }

      .skype:hover .fa-skype {
        color: #009edc;
      }

      .youtube {
        background-color: #cd201f;
      }

      .youtube:hover .fa-youtube {
        color: #cd201f;
      }

      .whatsapp {
        background-color: #25d366;
      }

      .whatsapp:hover .fa-whatsapp {
        color: #25d366;
      }

      .instagram {
        background: radial-gradient(
            circle farthest-corner at 35% 90%,
            #fec564,
            transparent 50%
          ),
          radial-gradient(
            circle farthest-corner at 0 140%,
            #fec564,
            transparent 50%
          ),
          radial-gradient(
            ellipse farthest-corner at 0 -25%,
            #5258cf,
            transparent 50%
          ),
          radial-gradient(
            ellipse farthest-corner at 20% -50%,
            #5258cf,
            transparent 50%
          ),
          radial-gradient(
            ellipse farthest-corner at 100% 0,
            #893dc2,
            transparent 50%
          ),
          radial-gradient(
            ellipse farthest-corner at 60% -20%,
            #893dc2,
            transparent 50%
          ),
          radial-gradient(
            ellipse farthest-corner at 100% 100%,
            #d9317a,
            transparent
          ),
          linear-gradient(
            #6559ca,
            #bc318f 30%,
            #e33f5f 50%,
            #f77638 70%,
            #fec66d 100%
          );
      }

      .instagram:hover {
        background: lightgray;
      }

      .instagram:hover .fa-instagram {
        color: #833ab4;
      }

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

Elegant Social Account Card

    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
      integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N"
      crossorigin="anonymous"
    />
 
  <div class="main-container d-flex justify-content-center align-items-center vh-100">
    <div class="container-fluid">
      <div class="card">
        <div class="profile-container">
          <img
            src="https://images.unsplash.com/photo-1636990649778-fd699d27c875?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8ODN8fGFic3RyYWN0JTIwYmFja2dyb3VuZHxlbnwwfHwwfHx8MA%3D%3D"
            class="cover-picture"
            alt="cover-photo"
          />
          <img
            src="https://images.unsplash.com/photo-1607990281513-2c110a25bd8c?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTB8fHByb2ZpbGUlMjBwaG90b3xlbnwwfHwwfHx8MA%3D%3D"
            class="profile-picture rounded-circle"
            alt="profile-picture"
          />
        </div>
        <!-- .profile-container -->

        <div class="card-body">
          <h2 class="user-name mt-2">Alejandro Ortiz</h2>

          <p class="card-text mt-2">
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Animi ad
            quos fuga tempore voluptatum vitae dicta eum nulla officia eius.
            Nulla soluta, voluptatum accusantium repellat veniam vitae
            aspernatur quidem nemo.
          </p>

          <div class="d-flex mt-4 mb-3">
            <button class="btn btn-primary mr-2">
              <i class="fa-solid fa-user-plus"></i>
              Follow
            </button>
            <button class="btn btn-outline-primary">
              <i class="fa-solid fa-phone"></i>
              Contact info
            </button>
          </div>
        </div>
        <!-- .card-body -->
      </div>
      <!-- .card -->
    </div>
    <!-- .container-fluid -->

    <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>

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

      .card {
        width: 95%;
        min-width: 300px;
        max-width: 350px;
        margin: auto;
        background-color: #fff;
        border-radius: 5px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
      }

      .profile-container {
        position: relative;
        height: 200px;
        border-top-right-radius: inherit;
        border-top-left-radius: inherit;
      }

      .cover-picture {
        height: inherit;
        width: 100%;
        border-top-right-radius: inherit;
        border-top-left-radius: inherit;
      }

      .profile-picture {
        position: absolute;
        top: 60%;
        left: 20%;
        transform: translate(-50%, 0);
        height: 95px;
        width: 95px;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
      }

      .user-name {
        font-size: 22px;
      }

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

      @media (max-width: 991.98px) {
        .profile-picture {
          top: 65%;
          left: 15%;
          transform: translate(-50%, 0);
          height: 85px;
          width: 85px;
        }

        .user-name {
          font-size: 20px;
        }

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

        .btn {
          font-size: 14px;
        }
      }

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

Classic Package Plan Card

<link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
      integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N"
      crossorigin="anonymous"
    />

<div class="main-container d-flex flex-wrap justify-content-center align-items-center min-vh-100">
      <div class="card mx-auto p-3 mt-5">
        <div class="w-75 text-center mx-auto">
          <h1 class="main-title font-weight-bold m-0">Basic</h1>
          <hr class="mx-0 my-2 w-100" />
        </div>

        <h2 class="text-center font-weight-bold subscribtion-price">$29/mo</h2>

        <div class="px-4">
          <ul class="features-list">
            <li><span>100 GB Storage</span></li>
            <li><span>30 Mbps bandwidth</span></li>
            <li><span>24/7 Customer Support</span></li>
            <li class="cross"><span>PHP/MySQL Database</span></li>
            <li class="cross"><span>SSL Certificate</span></li>
            <li class="cross"><span>Unlimited Websites</span></li>
            <li class="cross"><span>Free Domain Included</span></li>
          </ul>
        </div>

        <button
          class="btn btn-outline-primary rounded-pill font-weight-bold w-75 mx-auto select-plan-btn mb-3"
        >
          SELECT PLAN
        </button>
      </div>
      <!-- .card -->

      <!-- ========================================== -->

      <div class="card mx-auto p-3 mt-5 active">
        <div class="w-75 text-center mx-auto">
          <h1 class="main-title font-weight-bold m-0">Standard</h1>
          <hr class="mx-0 my-2 w-100" />
        </div>

        <h2 class="text-center font-weight-bold subscribtion-price">$49/mo</h2>

        <div class="px-4">
          <ul class="features-list">
            <li><span>100 GB Storage</span></li>
            <li><span>30 Mbps bandwidth</span></li>
            <li><span>24/7 Customer Support</span></li>
            <li><span>PHP/MySQL Database</span></li>
            <li><span>SSL Certificate</span></li>
            <li class="cross"><span>Unlimited Websites</span></li>
            <li class="cross"><span>Free Domain Included</span></li>
          </ul>
        </div>

        <button
          class="btn btn-outline-primary rounded-pill font-weight-bold w-75 mx-auto select-plan-btn mb-3"
        >
          SELECT PLAN
        </button>
      </div>
      <!-- .card -->

      <!-- ========================================== -->

      <div class="card mx-auto p-3 mt-5">
        <div class="w-75 text-center mx-auto">
          <h1 class="main-title font-weight-bold m-0">Premium</h1>
          <hr class="mx-0 my-2 w-100" />
        </div>

        <h2 class="text-center font-weight-bold subscribtion-price">$69/mo</h2>

        <div class="px-4">
          <ul class="features-list">
            <li><span>100 GB Storage</span></li>
            <li><span>30 Mbps bandwidth</span></li>
            <li><span>24/7 Customer Support</span></li>
            <li><span>PHP/MySQL Database</span></li>
            <li><span>SSL Certificate</span></li>
            <li><span>Unlimited Websites</span></li>
            <li><span>Free Domain Included</span></li>
          </ul>
        </div>

        <button
          class="btn btn-outline-primary rounded-pill font-weight-bold w-75 mx-auto select-plan-btn mb-3"
        >
          SELECT PLAN
        </button>
      </div>
      <!-- .card -->
    </div>

    <script>
      document.addEventListener("DOMContentLoaded", function (event) {
        let cards = document.querySelectorAll(".card");

        if (cards) {
          cards.forEach(function (card, card_index) {
            card.addEventListener("click", function name(params) {
              card.classList.toggle("active");

              cards.forEach(function (other_card, other_card_index) {
                if (card_index !== other_card_index) {
                  other_card.classList.remove("active");
                }
              });
            });
          });
        }
      });
    </script>

    <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>

.main-container {
        background-color: #ddeaff;
      }
      .card {
        width: 95%;
        min-width: 180px;
        max-width: 250px;
        font-family: Arial, Helvetica, sans-serif;
        border: unset !important;
        border-radius: 20px !important;
        background-color: #ebf2ff !important;
        box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.075);
        cursor: pointer;
        transition: 0.5s ease;
      }

      .main-title {
        font-size: 25px;
        color: #399fff;
        transition: color 0.5s ease;
      }

      .card hr {
        border-bottom: 3px solid #399fff;
        transition: border 1s ease;
      }

      .subscribtion-price {
        font-size: 35px;
        color: #399fff;
        transition: color 0.5s ease;
      }

      .features-list {
        padding-left: 30px;
        list-style-type: none;
        text-indent: -11px;
        font-size: 12px;
        color: gray;
        transition: color 0.5s ease-in;
      }

      .features-list li {
        margin: 8px 0;
      }

      .features-list li::before {
        font-family: "Font Awesome 6 Free";
        content: "\f00c";
        color: #14b012;
        display: inline-block;
        padding-right: 10px;
        vertical-align: middle;
        font-weight: 900;
        font-size: 13px;
      }
      .features-list li.cross::before {
        content: "\f00d";
        color: #f10000;
      }
      .select-plan-btn {
        border: unset !important;
        color: #399fff !important;
        font-size: 12px !important;
        background-color: #fff !important;
        transition: color 0.5s ease-in, background-color 0.5s ease-in !important;
      }
      .select-plan-btn:hover {
        background-color: #fff;
        color: #399fff;
        box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
      }
      /******** Active card styles  *********/
      .card.active {
        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
      }

      .card.active .main-title {
        color: #396eff;
      }

      .card.active hr {
        border-bottom: 3px solid black;
      }

      .card.active .subscribtion-price {
        color: #396eff;
      }

      .card.active .features-list {
        color: black;
      }

      .card.active .select-plan-btn {
        color: #fff !important;
        background-color: #396eff !important;
      }

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

Stylish Detailed Package Plan Card

<link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
      integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N"
      crossorigin="anonymous"
    />

<div class="container-fluid main-container min-vh-100 d-flex flex-wrap justify-content-center align-items-center">
      <div class="card collaborator mx-auto py-3 px-4 my-2">
        <div class="title-container w-75 text-center mx-auto">
          <h1 class="main-title font-weight-bold m-0">Collaborator</h1>
          <h2 class="sub-title m-0 text-muted">Simple Polls and Surveys</h2>
        </div>

        <div class="text-center">
          <div class="d-flex justify-content-center subscribtion-price">
            <span class="font-weight-bold">$</span>
            <h3 class="m-0 font-weight-bold">49</h3>
          </div>
          <p class="font-weight-bold m-0">per user, per month</p>
          <div class="separator my-3">Or</div>
        </div>

        <div class="text-center">
          <div
            class="d-flex justify-content-center font-weight-bold yearly-subscribtion-price"
          >
            <span class="font-weight-bold">$</span>
            <h4 class="m-0 font-weight-bold">300</h4>
          </div>

          <p class="font-weight-bold m-0">per user, per year</p>
          <p class="text-muted saving-statement">
            That's a 49% savings per year
          </p>
        </div>

        <button
          class="btn rounded-pill font-weight-bold w-75 mx-auto buy-now-btn mb-3"
        >
          BUY NOW
        </button>

        <a href="#" class="text-center font-weight-bold trial-statement"
          >Start free trial</a
        >

        <hr />

        <div class="px-3">
          <ul class="features-list">
            <li><span class="text-muted">Unlimited surverys</span></li>
            <li><span class="text-muted">Unlimited questions</span></li>
            <li><span class="text-muted">No per response charges</span></li>
            <li><span class="text-muted">24 essential question types</span></li>
            <li>
              <span class="text-muted">Data exports (CSV, PDF, PPT, XLS)</span>
            </li>
            <li><span class="text-muted">Email support</span></li>
          </ul>
        </div>
      </div>
      <!-- .card -->

      <!-- ========================================== -->
      <div class="card professional mx-auto py-3 px-4 my-2">
        <div class="title-container w-75 text-center mx-auto">
          <h1 class="main-title font-weight-bold m-0">Professional</h1>
          <h2 class="sub-title m-0 text-muted">
            Powerful data collection and reporting
          </h2>
        </div>

        <div class="text-center">
          <div class="d-flex justify-content-center subscribtion-price">
            <span class="font-weight-bold">$</span>
            <h3 class="m-0 font-weight-bold">149</h3>
          </div>
          <p class="font-weight-bold m-0">per user, per month</p>
          <div class="separator my-3">Or</div>
        </div>

        <div class="text-center">
          <div
            class="d-flex justify-content-center font-weight-bold yearly-subscribtion-price"
          >
            <span class="font-weight-bold">$</span>
            <h4 class="m-0 font-weight-bold">1020</h4>
          </div>

          <p class="font-weight-bold m-0">per user, per year</p>
          <p class="text-muted saving-statement">
            That's a 43% savings per year
          </p>
        </div>

        <button
          class="btn rounded-pill font-weight-bold w-75 mx-auto buy-now-btn mb-3"
        >
          BUY NOW
        </button>

        <a href="#" class="text-center font-weight-bold trial-statement"
          >Start free trial</a
        >

        <hr />

        <div class="px-3">
          <p class="m-0 pr-3 font-weight-bold additional-pro-msg">
            Everything in Collaborator, plus:
          </p>
          <ul class="features-list">
            <li><span class="text-muted">Advance question types</span></li>
            <li>
              <span class="text-muted"
                >Advanced reports (profile, longitudinal)</span
              >
            </li>
            <li><span class="text-muted">Segment and filter report</span></li>
            <li><span class="text-muted">Email and phone support</span></li>
            <li><span class="text-muted">API access</span></li>
          </ul>
        </div>
      </div>
      <!-- .card -->

      <!-- ========================================== -->
      <div class="card full-access mx-auto py-3 px-4 my-2">
        <div class="title-container w-75 text-center mx-auto">
          <h1 class="main-title font-weight-bold m-0">Full Access</h1>
          <h2 class="sub-title m-0 text-muted">All our features in one plan</h2>
        </div>

        <div class="text-center">
          <div class="d-flex justify-content-center subscribtion-price">
            <span class="font-weight-bold">$</span>
            <h3 class="m-0 font-weight-bold">249</h3>
          </div>
          <p class="font-weight-bold m-0">per user, per month</p>
          <div class="separator my-3">Or</div>
        </div>

        <div class="text-center">
          <div
            class="d-flex justify-content-center font-weight-bold yearly-subscribtion-price"
          >
            <span class="font-weight-bold">$</span>
            <h4 class="m-0 font-weight-bold">1800</h4>
          </div>

          <p class="font-weight-bold m-0">per user, per year</p>
          <p class="text-muted saving-statement">
            That's a 40% savings per year
          </p>
        </div>

        <button
          class="btn rounded-pill font-weight-bold w-75 mx-auto buy-now-btn mb-3"
        >
          BUY NOW
        </button>

        <a href="#" class="text-center font-weight-bold trial-statement"
          >Start free trial</a
        >

        <hr />

        <div class="px-3">
          <p class="m-0 pr-3 font-weight-bold additional-full-access-msg">
            Everything in Professional, plus:
          </p>
          <ul class="features-list">
            <li class="full-access">
              <span class="text-muted">Max diff</span>
            </li>
            <li class="full-access">
              <span class="text-muted">Crosstab reports</span>
            </li>
            <li class="full-access">
              <span class="text-muted">TURF reports</span>
            </li>
            <li class="full-access">
              <span class="text-muted">R scripts</span>
            </li>
            <li class="full-access">
              <span class="text-muted">Image heatmap</span>
            </li>
            <li class="full-access">
              <span class="text-muted">Data-cleaning tool</span>
            </li>
            <li class="full-access">
              <span class="text-muted">Custom scripting</span>
            </li>
          </ul>
        </div>
      </div>
      <!-- .card -->
    </div>
    <!-- .container-fluid/.main-container -->

    <script>
      document.addEventListener("DOMContentLoaded", function (event) {
        let cards = document.querySelectorAll(".card");
        if (cards) {
          cards.forEach(function (card, card_index) {
            card.addEventListener("click", function () {
              card.classList.toggle("active");
              cards.forEach(function (other_card, other_card_index) {
                if (card_index !== other_card_index) {
                  other_card.classList.remove("active");
                }
              });
            });
          });
        }
      });
    </script>

    <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>

.main-container {
        background-color: #f3f3f3;
      }
      .card {
        width: 95%;
        min-width: 250px;
        max-width: 300px;
        height: 680px;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 14px !important;
        border-radius: unset !important;
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 2px 2px rgba(0, 0, 0, 0.12);
        cursor: pointer;
      }
      .card.collaborator {
        border-top: 6px solid #69c5c3;
      }
      .card.collaborator:hover {
        border: 1px solid #69c5c3;
        border-top: 6px solid #69c5c3;
        box-shadow: 0 1px 1px rgba(105, 197, 195, 0.15),
          0 2px 2px rgba(105, 197, 195, 0.15),
          0 4px 4px rgba(105, 197, 195, 0.15),
          0 8px 8px rgba(105, 197, 195, 0.15);
      }

      .card.collaborator.active {
        border: 2px solid darkgray;
        border-top: 6px solid #69c5c3;
        box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
      }
      .card.professional {
        border-top: 6px solid #41a3a1;
      }
      .card.professional:hover {
        border: 1px solid #41a3a1;
        border-top: 6px solid #41a3a1;
        box-shadow: 0 1px 1px rgba(65, 163, 161, 0.15),
          0 2px 2px rgba(65, 163, 161, 0.15), 0 4px 4px rgba(65, 163, 161, 0.15),
          0 8px 8px rgba(65, 163, 161, 0.15);
      }

      .card.professional.active {
        border: 2px solid darkgray;
        border-top: 6px solid #41a3a1;
        box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
      }
      .card.full-access {
        border-top: 6px solid #f7941e;
      }
      .card.full-access:hover {
        border: 1px solid #f7941e;
        border-top: 6px solid rgb(247, 148, 30);
        box-shadow: 0 1px 1px rgba(247, 148, 30, 0.15),
          0 2px 2px rgba(247, 148, 30, 0.15), 0 4px 4px rgba(247, 148, 30, 0.15),
          0 8px 8px rgba(247, 148, 30, 0.15);
      }

      .card.full-access.active {
        border: 2px solid darkgray;
        border-top: 6px solid rgb(247, 148, 30);
        box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
      }
      .title-container {
        height: 70px;
      }
      .main-title {
        font-size: 22px;
      }
      .sub-title {
        font-size: 12px;
      }
      .subscribtion-price span {
        font-size: 25px;
      }
      .subscribtion-price h3 {
        font-size: 50px;
      }
      /* Separator line with text between */
      .separator {
        display: flex;
        align-items: center;
        text-align: center;
        color: black;
        font-weight: bold;
      }
      .separator::before,
      .separator::after {
        content: "";
        flex: 1;
        border-bottom: 2px solid black;
      }

      .separator:not(:empty)::before {
        margin-right: 1em;
      }

      .separator:not(:empty)::after {
        margin-left: 1em;
      }
      /* Separator line with text between */

      .saving-statement {
        font-size: 12px;
      }
      .buy-now-btn {
        border: 2px solid #f7941e !important;
        color: black !important;
        font-size: 12px !important;
        box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
      }
      .buy-now-btn:hover {
        border: 2px solid #f7941e !important;
        background-color: #f7941e !important;
      }
      .trial-statement {
        color: purple;
        text-decoration: underline;
        transition: color 0.3s ease;
      }
      .trial-statement:hover {
        text-decoration: none;
        color: #f7941e;
      }
      .card hr {
        border-bottom: 2px solid black;
      }
      .additional-pro-msg {
        color: #69c5c3;
        font-size: 16px;
      }
      .additional-full-access-msg {
        color: #f7941e;
        font-size: 16px;
      }
      .features-list {
        padding-left: 25px;
        list-style-type: none;
        text-indent: -11px;
        font-size: 13px;
      }

      .features-list li {
        margin: 5px 0;
      }

      .features-list li::before {
        font-family: "Font Awesome 6 Free";
        content: "\f00c";
        color: #69c5c3;
        display: inline-block;
        padding-right: 10px;
        vertical-align: middle;
        font-weight: 900;
        font-size: 12px;
      }
      .features-list li.full-access::before {
        color: #f7941e;
      }

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

Colorful Package Plan Card

<link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
      integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N"
      crossorigin="anonymous"
    />

<div class="container-fluid min-vh-100 d-flex flex-wrap justify-content-center align-items-start">
      <div class="card free mx-auto p-3 mt-5">
        <div class="text-center p-2 pt-4">
          <h1 class="main-title">Free</h1>
          <h2 class="sub-title">Free-forever features for individual users</h2>
        </div>

        <div class="text-center">
          <h3 class="subscribtion-price m-0">$0</h3>
          <p class="m-0">per user/month</p>
          <p class="text-muted">No credit card required</p>
        </div>

        <button class="btn btn-outline-primary get-btn free mb-3">
          Get started
        </button>

        <div class="">
          <ul class="features-list">
            <li><span class="text-muted">Spans the DevOps lifecycle</span></li>
            <li>
              <span class="text-muted dotted">Open Source - MIT License</span>
            </li>
            <li>
              <span class="text-muted">Bring your own GitLab CI runners</span>
            </li>
            <li>
              <span class="text-muted">Includes free static websites</span>
            </li>
            <li>
              <span class="text-muted dotted">
                400 CI/CD minutes per month
                <a href="#" class="citation">[1]</a>
              </span>
            </li>
          </ul>
        </div>
      </div>
      <!-- .card -->

      <!-- ========================================== -->

      <div class="card premium mx-auto p-3 mt-5">
        <div class="text-center p-2 pt-4">
          <h1 class="main-title">Premium</h1>
          <h2 class="sub-title">Enhance team productivity and coordination</h2>
        </div>

        <div class="text-center">
          <h3 class="subscribtion-price m-0">$19</h3>
          <p class="m-0">per user/month</p>
          <p class="text-muted">Billed annually at $228 USD</p>
        </div>

        <button class="btn btn-outline-primary get-btn premium mb-3">
          Buy GitLab Premium
        </button>

        <div class="">
          <ul class="features-list">
            <li class="previous-feature premium">
              <span class="text-muted"> Everything from Free </span>
            </li>
            <li class="additional-feature premium">
              <span class="text-muted dotted"> Faster code reviews </span>
            </li>
            <li class="additional-feature premium">
              <span class="text-muted dotted"> Advanced CI/CD </span>
            </li>
            <li class="additional-feature premium">
              <span class="text-muted dotted"> Enterprise agile planning </span>
            </li>
            <li class="additional-feature premium">
              <span class="text-muted dotted"> Release controls </span>
            </li>
            <li class="additional-feature premium">
              <span class="text-muted dotted"> Self-managed reliability </span>
            </li>
            <li class="premium">
              <span class="text-muted dotted">
                10,000 CI/CD minutes per month
              </span>
            </li>
          </ul>
        </div>
      </div>
      <!-- .card -->

      <!-- ========================================== -->

      <div class="card ultimate mx-auto p-3 mt-5">
        <div class="text-center p-2 pt-4">
          <h1 class="main-title">Ultimate</h1>
          <h2 class="sub-title">
            Organization wide security, compliance, and planning
          </h2>
        </div>

        <div class="text-center">
          <h3 class="subscribtion-price m-0">$99</h3>
          <p class="m-0">per user/month</p>
          <p class="text-muted">Billed annually at $1,188 USD</p>
        </div>

        <button class="btn btn-outline-primary get-btn ultimate mb-3">
          Buy GitLab ultimate
        </button>

        <div class="">
          <ul class="features-list">
            <li class="previous-feature ultimate">
              <span class="text-muted"> Everything from Premium </span>
            </li>
            <li class="additional-feature ultimate">
              <span class="text-muted dotted"> Advanced security testing </span>
            </li>
            <li class="additional-feature ultimate">
              <span class="text-muted dotted"> Security risk mitigation </span>
            </li>
            <li class="additional-feature ultimate">
              <span class="text-muted dotted"> Compliance </span>
            </li>
            <li class="additional-feature ultimate">
              <span class="text-muted dotted"> Portfolio management </span>
            </li>
            <li class="additional-feature ultimate">
              <span class="text-muted dotted"> Value stream management </span>
            </li>
            <li class="ultimate">
              <span class="text-muted dotted"> Free guest users </span>
            </li>
            <li class="ultimate">
              <span class="text-muted dotted">
                50,000 CI/CD minutes per month
              </span>
            </li>
          </ul>
        </div>
      </div>
      <!-- .card -->
    </div>
    <!-- .container-fluid -->

    <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>

.container-fluid {
        background-image: url("https://images.unsplash.com/photo-1529686159790-3246c5082afb?q=80&w=1770&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
      }
      .card {
        width: 95%;
        min-width: 250px;
        max-width: 300px;
        font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
          "Lucida Sans", Arial, sans-serif;
        font-size: 14px !important;
        border-radius: 4px !important;
      }
      .card.free {
        border: 3px solid black;
        border-top: 12px solid black;
      }
      .card.premium {
        border: 3px solid #9b51e0;
        border-top: 12px solid #9b51e0;
      }
      .card.ultimate {
        border: 3px solid #fa7035;
        border-top: 12px solid #fa7035;
      }
      .sub-title {
        font-size: 20px;
      }
      .subscribtion-price {
        font-size: 55px;
      }
      .get-btn {
        box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px !important;
      }
      .get-btn.free {
        color: black !important;
        border: 2px solid black !important;
      }
      .get-btn.free:hover {
        color: #fff !important;
        background-color: blueviolet !important;
        border: 2px solid blueviolet !important;
      }
      .get-btn.premium {
        color: #fff !important;
        background-color: #9b51e0 !important;
        border: 2px solid #9b51e0 !important;
      }
      .get-btn.premium:hover {
        color: #000 !important;
        background-color: unset !important;
      }
      .get-btn.ultimate {
        color: #fff !important;
        background-color: #fa7035 !important;
        border: 2px solid #fa7035 !important;
      }
      .get-btn.ultimate:hover {
        color: #000 !important;
        background-color: unset !important;
      }
      .features-list {
        padding-left: 5px;
        list-style-type: none;
      }
      .features-list li {
        margin: 10px 0;
      }
      .features-list li::before {
        font-family: "Font Awesome 6 Free";
        content: "\f111";
        display: inline-block;
        padding-right: 10px;
        vertical-align: middle;
        font-weight: 900;
        font-size: 8px;
      }
      .features-list li.premium::before {
        color: #9b51e0;
      }
      .features-list li.ultimate::before {
        color: #fa7035;
      }
      .features-list li.previous-feature::before {
        content: "\f060";
        font-size: 12px;
      }
      .features-list li.additional-feature::before {
        content: "\2b";
        font-size: 12px;
      }
      .dotted {
        padding-bottom: 2px;
        border-bottom: 1px dotted black;
      }
      .citation {
        color: blueviolet;
      }
      .citation:hover {
        color: black;
        text-decoration: none;
      }

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

Employee Profile Card

General Profile Card

Product Card 1

Product Card 2

Travel Guide Card 1

Opening/Closing Travel Guide Card

Educational Card

Travel Guide Card 3

View Details Product Card

Professional Profile Card

Social Profile Card

Elegant Social Account Card

Classic Package Plan Card

Stylish Detailed Package Plan Card

Colorful Package Plan Card

AdBlock Detected!