Elegant Organizational Team Member Card

<div class="main-container d-flex flex-column flex-md-row justify-content-center align-items-center min-vh-100">
      <div class="card border border-0 shadow-sm m-2 text-center">
        <div class="container mt-4">
          <div class="row justify-content-center">
            <div class="col-auto">
              <img
                src="https://cdn.theorg.com/69212adb-32e1-4b01-a945-36b582797e54_thumb.jpg"
                class="rounded-circle p-1"
                alt="Profile Image"
                width="150"
                height="150"
              />
            </div>
          </div>
        </div>
        <div class="card-body text-secondary">
          <h3 class="card-title text-dark">Ben Johnson</h3>
          <p class="card-text">MUSICIAN</p>
          <p class="mb-2">
            Lorem Ipsum is simply dummy text of the printing and typesetting
            industry. Lorem Ipsum has been the industry's standard dummy text
            ever since the 1500s, when an unknown printer took a galley of type
            and scrambled it to make a type specimen book.
          </p>

<div class="card border border-0 shadow-sm m-2 text-center">
        <div class="container mt-4">
          <div class="row justify-content-center">
            <div class="col-auto">
              <img
                src="https://img.webmd.com/lhd/provider_prod/2258383_ProviderProfileImage_a747e2d0-dbba-47ae-a225-7a3cdec61688.jpg?resize=150px:*"
                class="rounded-circle p-1"
                alt="Profile Image"
                width="150"
                height="150"
              />
            </div>
          </div>
        </div>
        <div class="card-body text-secondary">
          <h3 class="card-title text-dark">Emily Clark</h3>
          <p class="card-text">ARTIST</p>
          <p class="mb-2">
            Lorem Ipsum is simply dummy text of the printing and typesetting
            industry. Lorem Ipsum has been the industry's standard dummy text
            ever since the 1500s, when an unknown printer took a galley of type
            and scrambled it to make a type specimen book.
          </p>

<div class="card border border-0 shadow-sm m-2 text-center">
        <div class="container mt-4">
          <div class="row justify-content-center">
            <div class="col-auto">
              <img
                src="https://media.licdn.com/dms/image/C5603AQF2Fz5-qMqu4Q/profile-displayphoto-shrink_800_800/0/1651266402958?e=2147483647&v=beta&t=KLmjj4-0oWdX1Hf2wafeuDHsBNKaEWG1oRlK9D2AhSM"
                class="rounded-circle p-1"
                alt="Profile Image"
                width="150"
                height="150"
              />
            </div>
          </div>
        </div>
        <div class="card-body text-secondary">
          <h3 class="card-title text-dark">Carl Kent</h3>
          <p class="card-text">STYLIST</p>
          <p class="mb-2">
            Lorem Ipsum is simply dummy text of the printing and typesetting
            industry. Lorem Ipsum has been the industry's standard dummy text
            ever since the 1500s, when an unknown printer took a galley of type
            and scrambled it to make a type specimen book.
          </p>

.main-container {
  background-color: rgb(243, 243, 243);
}

.card-title {
  font-family: "Times New Roman", Times, serif;
  font-weight: bold;
}

.card {
  width: 18rem;
}

.card-text {
  font-weight: bold;
  font-size: 15px;
  letter-spacing: 3px;
  color: gainsboro;
}

.social-icon {
  color: gainsboro;
  cursor: pointer;
}
.social-icon:hover {
  color: gray;
}

CDN

ACTION

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

Copy CDN

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

Copy CDN

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

Copy CDN

BootStrap 5

Corporate Team Card

AdBlock Detected!