Bootstrap 4

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

AdBlock Detected!

Our website is providing free tools to our users there is nothing
that you pay for. We only display advertisement ads. So Please
don’t use adBlocker, Keep visiting us thanks.