Elegant Social Profile Card Template for Your Website

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

.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

Bootstrap 4

Social Profile Card

AdBlock Detected!