31+ CSS Profile Card Examples

This post contains a total of 31+ Hand-Picked CSS Profile Card Examples with Source Code. All these Profile Cards are made using CSS.

You can use the source code of these examples with credits to the original owner.

Related Posts

CSS Profile Card Examples

1. Envato Remix contest Profile Card

Made by RaziTazi. Profile card with Hover sliding animation and Cool Video effect. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

<style>
@import url(https://fonts.googleapis.com/css?family=Khula:300,600,400);
html,
body {
  overflow: hidden;
  width: 100%;
  height: 100%;
  margin: 0;
}

body {
  font-family: Khula, sans-serif;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.5;
  color: #222;
  background: url('https://raziraz.github.io/codepen/envato_contest/bg-space.jpg') #222 center center;
  background-size: cover;
}

h1 {
  font-size: 18px;
  font-weight: 300;
  line-height: 1.2;
  margin: 4.5% 0 0 4.5%;
}

h2 {
  font-size: 13px;
  font-weight: 300;
  line-height: 1.5;
  margin: 0 0 4% 4.5%;
  color: #cc3638;
}

.profile-card {
  position: absolute;
  z-index: 100;
  top: 50%;
  left: 50%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  min-width: 290px;
  max-width: 450px;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-animation: bouncein 1s;
  animation: bouncein 1s;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.profile-card > header {
  display: block;
  line-height: 0;
  width: 88%;
  max-width: 88%;
  background: #fff;
}

.profile-card > header > a {
  line-height: 0;
  display: block;
  background-image: url('https://raziraz.github.io/codepen/envato_contest/avatar-down.gif');
  background-size: 100% 100%;
}

.profile-card > header a > img {
  width: 100%;
}

.profile-card:hover > header a > img {
  opacity: 0;
}

.profile-card:hover > header + .profile-bio {
  max-height: 200px;
  -webkit-transition: max-height .5s ease-in;
  transition: max-height .5s ease-in;
}

.profile-card:hover > header + .profile-bio p {
  -webkit-animation: fadein 2s;
  animation: fadein 2s;
}

.profile-bio {
  clear: both;
  overflow: hidden;
  box-sizing: border-box;
  max-width: 88%;
  width: 88%;
  max-height: 0;
  -webkit-transition: max-height .5s ease-out;
  transition: max-height .5s ease-out;
  color: #fff;
  background: #0f6dc5;
  -webkit-order: 1;
  -webkit-box-ordinal-group: 2;
  -ms-flex-order: 1;
  order: 1;
}

.profile-bio p {
  margin: 4.5%;
  -webkit-animation: fadeout 2s;
  animation: fadeout 2s;
}

.profile-social-links {
  line-height: 0;
  display: -webkit-flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  box-sizing: border-box;
  max-width: 12%;
  width: 12%;
  margin: 0;
  padding: 3.5%;
  list-style-type: none;
  text-align: center;
  background: url('https://raziraz.github.io/codepen/envato_contest/razi-logo.png') #cc3638 no-repeat center 7%;
  background-image: url('https://raziraz.github.io/codepen/envato_contest/razi-logo.svg');
  background-size: 40% auto;
  flex-direction: column-reverse;
  -ms-flex-direction: column-reverse;
  -webkit-flex-direction: column-reverse;
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
  -webkit-box-pack: end;
  -moz-box-pack: end;
  -webkit-flex-pack: end;
  -ms-flex-pack: end;
}

.profile-social-links img {
  width: 100%;
  height: auto;
  margin-top: 10px;
  -webkit-filter: saturate(0) brightness(100);
  filter: saturate(0) brightness(100);
}

.profile-social-links li:first-child {
  -webkit-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}

.profile-social-links li:first-child:hover {
  -webkit-transform: rotate(20deg);
  -ms-transform: rotate(20deg);
  transform: rotate(20deg);
}

.profile-social-links li:nth-child(2):hover {
  -webkit-animation: pulse .4s ease-in-out;
  animation: pulse .4s ease-in-out;
}

.profile-social-links li:last-child:hover {
  -webkit-animation: shake .7s ease-in-out;
  animation: shake .7s ease-in-out;
}

.profile-social-links li:last-child {
  -webkit-order: -1;  
  -webkit-box-ordinal-group: 0;
  -ms-flex-order: -1;
  order: -1;
}

.profile-social-links li:last-child img {
  width: 90%;
  -webkit-filter: saturate(0) invert(100%);
  filter: saturate(0) invert(100%);
}

@media (max-width: 480px) {
  .profile-card {
    flex-direction: column;
    -webkit-flerowx-direction: column;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
  }
  .profile-card > header,
  .profile-bio {
    max-width: 100%;
    width: 100%;
  }
  .profile-bio {
    max-height: 100%;
  }
  .profile-card:hover > header + .profile-bio p,
  .profile-bio p {
    -webkit-animation: none;
    animation: none;
  }
  h1 {
    font-size: 16px;
  }
  h2 {
    line-height: 1.2;
    margin-top: 0.5%;
  }
  .profile-social-links {
    display: -webkit-flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-direction: row;
    max-width: 100%;
    width: 100%;
    max-height: 70px;
    background: url('https://raziraz.github.io/codepen/envato_contest/razi-logo-mobile.png') #cc3638 no-repeat 4.5% center;
    background-image: url('https://raziraz.github.io/codepen/envato_contest/razi-logo-mobile.svg');
    background-size: auto 15px;
    -webkit-flex-direction: row;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    -webkit-order: -1;
    -webkit-box-ordinal-group: 0;
    -ms-flex-order: -1;
    order: -1;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
  }
  .profile-social-links img {
    width: auto;
    height: 18px;
    margin-top: 0;
    margin-left: 8px;
    -webkit-filter: saturate(0) brightness(100);
    filter: saturate(0) brightness(100);
  }
  .profile-social-links li:last-child img {
    width: auto;
  }
}

@-webkit-keyframes shake {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  20% {
    -webkit-transform: translateX(-1px);
    transform: translateX(-1px);
  }
  40% {
    -webkit-transform: translateX(2px);
    transform: translateX(2px);
  }
  60% {
    -webkit-transform: translateX(-1px);
    transform: translateX(-1px);
  }
}

@keyframes shake {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  20% {
    -webkit-transform: translateX(-1px);
    transform: translateX(-1px);
  }
  40% {
    -webkit-transform: translateX(2px);
    transform: translateX(2px);
  }
  60% {
    -webkit-transform: translateX(-1px);
    transform: translateX(-1px);
  }
}

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@-webkit-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@-webkit-keyframes fadeout {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes fadeout {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@-webkit-keyframes bouncein {
  0% {
    -webkit-transform: translate(-50%, -200%);
    transform: translate(-50%, -200%);
    opacity: 0;
  }
  50% {
    -webkit-transform: translate(-50%, -30%);
    transform: translate(-50%, -30%);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(-50%, -50%);
    transform: translateY(-50%, -50%);
  }
}

@keyframes bouncein {
  0% {
    -webkit-transform: translate(-50%, -200%);
    transform: translate(-50%, -200%);
    opacity: 0;
  }
  50% {
    -webkit-transform: translate(-50%, -30%);
    transform: translate(-50%, -30%);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(-50%, -50%);
    transform: translateY(-50%, -50%);
  }
}
</style>
</head>
<body>
  <!-- this is the markup. you can change the details (your own name, your own avatar etc.) but donโ€™t change the basic structure! -->

<aside class="profile-card">
  
  <header>
    
    <!-- hereโ€™s the avatar -->
    <a href="https://tutsplus.com">
      <img src="https://raziraz.github.io/codepen/envato_contest/avatar.gif">
    </a>

    <!-- the username -->
    <h1>Razi Kantorp Weglin</h1>
    
    <!-- and role or location -->
    <h2>Designer & Visual Developer</h2>
    
  </header>
  
  <!-- bit of a bio; who are you? -->
  <div class="profile-bio">
    
    <p>Hi. I'm a designer and front-end developer based in Sweden. But actually I wanted to be a astronaut.</p>
    
  </div>
  
  <!-- some social links to show off -->
  <ul class="profile-social-links">
    
    <!-- twitter - el clรกsico  -->
    <li>
      <a href="https://twitter.com/kantorpweglin">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/social-twitter.svg">
      </a>
    </li>
    
    <!-- envato โ€“ use this one to link to your marketplace profile -->
    <li>
      <a href="https://instagram.com/kantorpweglin">
        <img src="https://raziraz.github.io/codepen/img/instagram-icon.svg">
      </a>
    </li>
    
    <!-- codepen - your codepen profile-->
    <li>
      <a href="https://codepen.io/razitazi">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/social-codepen.svg">
      </a>
    </li> 
    <!-- add or remove social profiles as you see fit -->
  </ul>
  
</aside>
<!-- thatโ€™s all folks! -->
</body>
</html>

2. CSS Only Profile Card

Made by Lorenzo Zottar. CSS Profile card with Slide animation on hover. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Oswald:400,700,300|Source+Code+Pro:400,700'>
  
<style>
/* go on then, styles go here.. knock yourself out! */
/* go on then, styles go here.. knock yourself out! */
@-webkit-keyframes panning {
  0% {
    transform: translateX(-25%) translateY(-25%);
  }
  20% {
    width: 250%;
    transform: translateX(0) translateY(-50%);
  }
  40% {
    width: 230%;
    transform: translateX(-25%) translateY(-50%);
  }
  60% {
    width: 210%;
    transform: translateX(-50%) translateY(-25%);
  }
  70% {
    width: 240%;
    transform: translateX(-25%) translateY(-25%);
  }
  80% {
    width: 220%;
    transform: translateX(-25%) translateY(-50%);
  }
  100% {
    width: 210%;
    transform: translateX(-25%) translateY(-25%);
  }
}
@keyframes panning {
  0% {
    transform: translateX(-25%) translateY(-25%);
  }
  20% {
    width: 250%;
    transform: translateX(0) translateY(-50%);
  }
  40% {
    width: 230%;
    transform: translateX(-25%) translateY(-50%);
  }
  60% {
    width: 210%;
    transform: translateX(-50%) translateY(-25%);
  }
  70% {
    width: 240%;
    transform: translateX(-25%) translateY(-25%);
  }
  80% {
    width: 220%;
    transform: translateX(-25%) translateY(-50%);
  }
  100% {
    width: 210%;
    transform: translateX(-25%) translateY(-25%);
  }
}
@-webkit-keyframes slideFadeDown {
  0% {
    transform: translateY(-30px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes slideFadeDown {
  0% {
    transform: translateY(-30px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
*, *:after, *:before {
  box-sizing: border-box;
}

body {
  background-color: #ecf0f1;
}

.profile-card {
  position: relative;
  width: 400px;
  height: 400px;
  margin: 80px auto;
  padding-top: 20%;
  overflow: hidden;
  font-size: 14px;
  background-color: white;
  border-radius: 15px;
  box-shadow: 0 0 1px rgba(34, 34, 34, 0.5);
  transition: box-shadow 1s;
}

header, .profile-bio {
  position: absolute;
  top: 10px;
  right: 10px;
  bottom: 10px;
  left: 10px;
  overflow: hidden;
  line-height: 0;
}

header a {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  z-index: 8;
  overflow: hidden;
  border-radius: 10px;
  line-height: 0;
}
header a img {
  position: absolute;
  top: 0;
  right: auto;
  bottom: auto;
  left: 0;
  width: 210%;
  z-index: 3;
  line-height: 0;
  -webkit-animation: panning 50s infinite;
          animation: panning 50s infinite;
}
header a:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 4;
  background-color: rgba(44, 62, 80, 0.5);
  transition: background-color 1s;
}
header h1, header h2 {
  position: absolute;
  top: 40%;
  right: 0;
  bottom: auto;
  left: 0;
  z-index: 10;
  color: white;
  font-family: Oswald;
  line-height: 1em;
  text-transform: uppercase;
  text-align: center;
  transition: transform 1s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
header h1 {
  font-size: 2em;
  line-height: 1em;
  letter-spacing: 0.04em;
}
header h1:after {
  content: "";
  display: block;
  width: 50%;
  height: 1px;
  margin: 2px auto;
  background-color: white;
}
header h2 {
  top: 50%;
  font-weight: 300;
  line-height: 1em;
  letter-spacing: 0.22em;
  -webkit-animation: slideFadeDown 0.5s;
          animation: slideFadeDown 0.5s;
}

.profile-bio p {
  position: absolute;
  top: 55%;
  right: 0;
  bottom: auto;
  left: 0;
  z-index: 12;
  padding: 0 30px;
  color: white;
  font-family: Source Code Pro;
  line-height: 1.2em;
  text-align: center;
  transform: translateX(100%) translateY(-50%);
  transition: transform 1s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.profile-social-links {
  position: absolute;
  top: 40%;
  right: 0;
  bottom: auto;
  left: 0;
  z-index: 12;
  text-align: center;
  opacity: 0;
  transform: translateX(100%) translateY(-50%);
  transition: transform 1s cubic-bezier(0.785, 0.135, 0.15, 0.86), opacity 1.5s;
}
.profile-social-links li {
  display: inline-block;
  padding: 0 10px;
}
.profile-social-links li img {
  display: block;
  width: 100%;
  max-width: 40px;
  filter: grayscale(100%);
  transition: transform 0.5s, filter 5s;
}
.profile-social-links li img:hover {
  filter: grayscale(0);
  transform: scale(1.2);
}
.profile-social-links li:nth-child(3) img {
  filter: invert(60%);
}
.profile-social-links li:nth-child(3) img:hover {
  filter: invert(0);
}

.profile-card:hover {
  box-shadow: 0 0 20px rgba(34, 34, 34, 0.3);
}
.profile-card:hover header a:before {
  background-color: rgba(44, 62, 80, 0.8);
}
.profile-card:hover h1, .profile-card:hover h2 {
  transform: translateX(-100%);
}
.profile-card:hover .profile-bio p, .profile-card:hover .profile-social-links {
  transform: translateX(0) translateY(-50%);
  opacity: 1;
}
</style>
</head>
<body>
<aside class="profile-card">
  <header>
    <a href="https://tutsplus.com">
      <img src="https://scontent-mxp1-1.xx.fbcdn.net/hphotos-xpt1/v/t1.0-9/11061759_10153221081414344_3959406501494553717_n.jpg?oh=35c8dae36dc4f01362d3bbc75e5e7912&oe=561B8552">
    </a>
    <h1>Lorem</h1>
    <h2>Lorem</h2>  
  </header>
  <div class="profile-bio">
    <p>Lorem Ipsum</p>
  </div>
  <ul class="profile-social-links">
    <li>
      <a href="https://twitter.com/lordgiotto">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/social-twitter.svg">
      </a>
    </li>
    <li>
      <a href="https://themeforest.net/user/lordgiotto">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/social-envato.svg">
      </a>
    </li>
    <li>
      <a href="https://codepen.io/lordgiotto/">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/social-codepen.svg">
      </a>
    </li>
  </ul>
</aside>
</body>
</html>

3. Profile cards with hover effect

Made by Mike Young. Team Profile cards with Hover effect. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
  
<style>
body {
  background-color: #C0E5D9;
}

.container {
  padding: 20px;
}

.profile-card {
	background-color: #222222;
  margin-bottom: 20px;
			
		}
		
.profile-pic {
  border-radius: 50%;
  position: absolute;
  top: -65px;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 1;
  max-width: 100px;
		transition: all 0.4s;
				}

				
.profile-info {
		color: #BDBDBD;
		padding: 25px;
	    position: relative;
	    margin-top: 15px;
				}
		
.profile-info h2 {
	color: #E8E8E8;
    letter-spacing: 4px;
	  padding-bottom: 12px;
				}
				
.profile-info span {
	display: block;
    font-size: 12px;
    color: #4CB493;
	letter-spacing: 2px;
			}

.profile-info a {
	 color: #4CB493;
		}
.profile-info i {
	    padding: 15px 35px 0px 35px;
		}
		

.profile-card:hover .profile-pic {
	transform: scale(1.1);
		}

.profile-card:hover .profile-info hr  {
	opacity: 1;
		}
		
		
		
		
/* Underline From Center */
.hvr-underline-from-center {
  display: inline-block;
  vertical-align: middle;
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  overflow: hidden;
}
.hvr-underline-from-center:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 52%;
  right: 52%;
  bottom: 0;
  background: #FFFFFF;
  border-radius: 50%;
  height: 3px;
  transition-property: all;
  transition-duration: 0.2s;
  transition-timing-function: ease-out;
}
.profile-card:hover .hvr-underline-from-center:before, .profile-card:focus .hvr-underline-from-center:before, .profile-card:active .hvr-underline-from-center:before {
  left: 0;
  right: 0;
  height: 1px;
  background: #CECECE;
  border-radius: 0;
}
</style>
</head>
<body>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

<div class="container">
  <div class="row ">
    <div class="col-lg-12">
      <div>
        <div class="col-md-4">
          <div class="profile-card text-center">

            <img class="img-responsive" src="https://images.unsplash.com/photo-1454678904372-2ca94103eca4?crop=entropy&fit=crop&fm=jpg&h=975&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1925">
            <div class="profile-info">

              <img class="profile-pic" src="https://pbs.twimg.com/profile_images/910579937089859584/rbsL-1ze_400x400.jpg">

              <h2 class="hvr-underline-from-center">Rod<span>Digital / Design Consultant</span></h2>
              <div>Lorem ipsum.</div>
              <a href="https://www.twitter.com/mike_youngg"><i class="fa fa-twitter fa-2x"></i></a>
              <a href="/cdn-cgi/l/email-protection#e5888c868d848089ba9ca5898c9380cb868acb908e"><i class="fa fa-envelope-o fa-2x"></i></a>
              <a href="https://www.linkedin.com"><i class="fa fa-linkedin fa-2x"></i></a>
            </div>

          </div>
        </div>
        <div class="col-md-4">
          <div class="profile-card text-center">

            <img class="img-responsive" src="https://images.unsplash.com/photo-1451188502541-13943edb6acb?crop=entropy&fit=crop&fm=jpg&h=975&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1925">
            <div class="profile-info">

              <img class="profile-pic" src="https://pbs.twimg.com/profile_images/910579937089859584/rbsL-1ze_400x400.jpg">

              <h2 class="hvr-underline-from-center">Adam<span>Developer</span></h2>
              <div>Lorem ipsum</div>
              <a href="https://www.twitter.com/mike_youngg"><i class="fa fa-twitter fa-2x"></i></a>
              <a href="/cdn-cgi/l/email-protection#7d10141e151c181122043d11140b18531e12530816"><i class="fa fa-envelope-o fa-2x"></i></a>
              <a href="https://www.linkedin.com"><i class="fa fa-linkedin fa-2x"></i></a>
            </div>

          </div>
        </div>
        <div class="col-md-4">
          <div class="profile-card text-center">

            <img class="img-responsive" src="https://images.unsplash.com/photo-1447877085163-3cce903855cd?crop=entropy&fit=crop&fm=jpg&h=975&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1925">
            <div class="profile-info">

              <img class="profile-pic" src="https://pbs.twimg.com/profile_images/910579937089859584/rbsL-1ze_400x400.jpg">

              <h2 class="hvr-underline-from-center">Mike<span>Web Designer</span></h2>
              <div>Lorem ipsum</div>
              <a href="https://www.twitter.com/mike_youngg"><i class="fa fa-twitter fa-2x"></i></a>
              <a href="/cdn-cgi/l/email-protection#620f0b010a03070e3d1b220e0b14074c010d4c1709"><i class="fa fa-envelope-o fa-2x"></i></a>
              <a href="https://www.linkedin.com"><i class="fa fa-linkedin fa-2x"></i></a>
            </div>

          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</html>

4. Profile card

Made by Hรฅvard Brynjulfsen. Dark themed css profile card. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

<style>
@import url("https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,[email protected],100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
*,
*:before,
*:after {
  box-sizing: border-box;
}

/* Some basic CSS overrides */
body {
  line-height: 1.5;
  min-height: 100vh;
  font-family: "Be Vietnam Pro", sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #060606;
}

button,
input,
select,
textarea {
  font: inherit;
}

a {
  color: inherit;
}

/* End basic CSS override */
.profile {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 3rem;
  width: 90%;
  max-width: 300px;
  background-color: #1b2028;
  border-radius: 16px;
  position: relative;
  border: 3px solid transparent;
  background-clip: padding-box;
  text-align: center;
  color: #f1f3f3;
  background-image: linear-gradient(135deg, rgba(117, 46, 124, 0.35), rgba(115, 74, 88, 0.1) 15%, #1b2028 20%, #1b2028 100%);
}
.profile:after {
  content: "";
  display: block;
  top: -3px;
  left: -3px;
  bottom: -3px;
  right: -3px;
  z-index: -1;
  position: absolute;
  border-radius: 16px;
  background-image: linear-gradient(135deg, #752e7c, #734a58 20%, #1b2028 30%, #2c333e 100%);
}

.profile-image {
  border-radius: 50%;
  overflow: hidden;
  width: 175px;
  height: 175px;
  position: relative;
}
.profile-image img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}

.profile-username {
  font-size: 1.5rem;
  font-weight: 600;
  margin-top: 1.5rem;
}

.profile-user-handle {
  color: #7d8396;
}

.profile-actions {
  margin-top: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.profile-actions > * {
  margin: 0 0.25rem;
}

.btn {
  border: 0;
  background-color: transparent;
  padding: 0;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  line-height: 1;
  transition: 0.15s ease;
}
.btn--primary {
  border-radius: 99em;
  background-color: #3772ff;
  background-image: linear-gradient(135deg, #5587ff, #3772ff);
  color: #fff;
  padding: 0 1.375em;
}
.btn--primary:hover, .btn--primary:focus {
  background-size: 150%;
}
.btn--icon {
  height: 46px;
  width: 46px;
  border-radius: 50%;
  border: 3px solid #343945;
  color: #7d8396;
}
.btn--icon i {
  font-size: 1.25em;
}
.btn--icon:hover, .btn--icon:focus {
  border-color: #7d8396;
}

.profile-links {
  margin-top: 3.5rem;
}

.link {
  text-decoration: none;
  color: #7d8396;
  margin-left: 0.375rem;
  margin-right: 0.375rem;
}
.link i {
  font-size: 1.25em;
}
</style>
</head>
<body>
  <article class="profile">
	<div class="profile-image">
		<img src="https://assets.codepen.io/285131/neongirl.jpg" />
	</div>
	<h2 class="profile-username">Elena Zoldado</h2>
	<small class="profile-user-handle">@elena_zoldado</small>
	<div class="profile-actions">
		<button class="btn btn--primary">Follow</button>
		<button class="btn btn--icon">
			<i class="ph-export"></i>
		</button>
		<button class="btn btn--icon">
			<i class="ph-dots-three-outline-fill"></i>
		</button>
	</div>
	<div class="profile-links">
		<a href="#" class="link link--icon">
			<i class="ph-twitter-logo"></i>
		</a>
		<a href="#" class="link link--icon">
			<i class="ph-facebook-logo"></i>
		</a>
		<a href="#" class="link link--icon">
			<i class="ph-instagram-logo"></i>
		</a>
	</div>
</article>
  <script src='https://unpkg.com/phosphor-icons'></script>
</body>
</html>

5. Fairly Colourful Profile Card

Made by Takane Ichinose. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

<style>
@import url("https://fonts.googleapis.com/css?family=Montserrat:400,400i,700");
body {
  font-size: 16px;
  color: #404040;
  font-family: Montserrat, sans-serif;
  background-image: linear-gradient(to bottom right, #ff9eaa 0% 65%, #e860ff 95% 100%);
  background-position: center;
  background-attachment: fixed;
  margin: 0;
  padding: 2rem 0;
  display: grid;
  place-items: center;
  box-sizing: border-box;
}
.card {
  background-color: #fff;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 2rem;
  box-shadow: 0px 1rem 1.5rem rgba(0,0,0,0.5);
}
.card .banner {
  background-image: url("https://images.unsplash.com/photo-1545703549-7bdb1d01b734?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 11rem;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  box-sizing: border-box;
}
.card .banner svg {
  background-color: #fff;
  width: 8rem;
  height: 8rem;
  box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.3);
  border-radius: 50%;
  transform: translateY(50%);
  transition: transform 200ms cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
.card .banner svg:hover {
  transform: translateY(50%) scale(1.3);
}
.card .menu {
  width: 100%;
  height: 5.5rem;
  padding: 1rem;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  position: relative;
  box-sizing: border-box;
}
.card .menu .opener {
  width: 2.5rem;
  height: 2.5rem;
  position: relative;
  border-radius: 50%;
  transition: background-color 100ms ease-in-out;
}
.card .menu .opener:hover {
  background-color: #f2f2f2;
}
.card .menu .opener span {
  background-color: #404040;
  width: 0.4rem;
  height: 0.4rem;
  position: absolute;
  top: 0;
  left: calc(50% - 0.2rem);
  border-radius: 50%;
}
.card .menu .opener span:nth-child(1) {
  top: 0.45rem;
}
.card .menu .opener span:nth-child(2) {
  top: 1.05rem;
}
.card .menu .opener span:nth-child(3) {
  top: 1.65rem;
}
.card h2.name {
  text-align: center;
  padding: 0 2rem 0.5rem;
  margin: 0;
}
.card .title {
  color: #a0a0a0;
  font-size: 0.85rem;
  text-align: center;
  padding: 0 2rem 1.2rem;
}
.card .actions {
  padding: 0 2rem 1.2rem;
  display: flex;
  flex-direction: column;
  order: 99;
}
.card .actions .follow-info {
  padding: 0 0 1rem;
  display: flex;
}
.card .actions .follow-info h2 {
  text-align: center;
  width: 50%;
  margin: 0;
  box-sizing: border-box;
}
.card .actions .follow-info h2 a {
  text-decoration: none;
  padding: 0.8rem;
  display: flex;
  flex-direction: column;
  border-radius: 0.8rem;
  transition: background-color 100ms ease-in-out;
}
.card .actions .follow-info h2 a span {
  color: #1c9eff;
  font-weight: bold;
  transform-origin: bottom;
  transform: scaleY(1.3);
  transition: color 100ms ease-in-out;
}
.card .actions .follow-info h2 a small {
  color: #afafaf;
  font-size: 0.85rem;
  font-weight: normal;
}
.card .actions .follow-info h2 a:hover {
  background-color: #f2f2f2;
}
.card .actions .follow-info h2 a:hover span {
  color: #007ad6;
}
.card .actions .follow-btn button {
  color: inherit;
  font: inherit;
  font-weight: bold;
  background-color: #ffd01a;
  width: 100%;
  border: none;
  padding: 1rem;
  outline: none;
  box-sizing: border-box;
  border-radius: 1.5rem/50%;
  transition: background-color 100ms ease-in-out, transform 200ms cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
.card .actions .follow-btn button:hover {
  background-color: #efb10a;
  transform: scale(1.1);
}
.card .actions .follow-btn button:active {
  background-color: #e8a200;
  transform: scale(1);
}
.card .desc {
  text-align: justify;
  padding: 0 2rem 2.5rem;
  order: 100;
}
</style>
</head>
<body>
  <div class="card">
  <div class="banner">
    <svg viewBox="0 0 100 100">
      <path d="m38.977 59.074c0 2.75-4.125 2.75-4.125 0s4.125-2.75 4.125 0"></path>
      <path d="m60.477 59.074c0 2.75-4.125 2.75-4.125 0s4.125-2.75 4.125 0"></path>
      <path d="m48.203 69.309c1.7344 0 3.1484-1.4141 3.1484-3.1484 0-0.27734-0.22266-0.5-0.5-0.5-0.27734 0-0.5 0.22266-0.5 0.5 0 1.1836-0.96484 2.1484-2.1484 2.1484s-2.1484-0.96484-2.1484-2.1484c0-0.27734-0.22266-0.5-0.5-0.5-0.27734 0-0.5 0.22266-0.5 0.5 0 1.7344 1.4141 3.1484 3.1484 3.1484z"></path>
      <path d="m35.492 24.371c0.42187-0.35156 0.48047-0.98438 0.125-1.4062-0.35156-0.42188-0.98438-0.48438-1.4062-0.125-5.1602 4.3047-16.422 17.078-9.5312 42.562 0.21484 0.79688 0.85547 1.4062 1.6641 1.582 0.15625 0.035156 0.31641 0.050781 0.47266 0.050781 0.62891 0 1.2344-0.27344 1.6445-0.76562 0.82812-0.98828 2.0039-1.5391 2.793-1.8203 0.56641 1.6055 1.4766 3.3594 2.9727 4.9414 2.2852 2.4219 5.4336 3.9453 9.3867 4.5547-3.6055 4.5-3.8047 10.219-3.8086 10.484-0.011719 0.55078 0.42187 1.0078 0.97656 1.0234h0.023438c0.53906 0 0.98437-0.42969 1-0.97266 0-0.054688 0.17187-4.8711 2.9805-8.7773 0.63281 1.2852 1.7266 2.5 3.4141 2.5 1.7109 0 2.7578-1.2695 3.3398-2.6172 2.8867 3.9258 3.0586 8.8359 3.0586 8.8906 0.015625 0.54297 0.46094 0.97266 1 0.97266h0.023438c0.55078-0.015625 0.98828-0.47266 0.97656-1.0234-0.007812-0.26953-0.20703-6.0938-3.9141-10.613 7.0781-1.3086 10.406-5.4219 11.969-8.9766 1.0508 0.98828 2.75 2.1992 4.793 2.1992 0.078126 0 0.15625 0 0.23828-0.003906 0.47266-0.023438 1.5781-0.074219 3.4219-4.4219 1.1172-2.6406 2.1406-6.0117 2.8711-9.4922 4.8281-22.945-4.7852-30.457-9.1445-32.621-12.316-6.1172-22.195-3.6055-28.312-0.42188-0.48828 0.25391-0.67969 0.85938-0.42578 1.3477s0.85938 0.67969 1.3477 0.42578c5.7031-2.9688 14.934-5.3047 26.5 0.4375 7.1875 3.5703 9 11.586 9.2539 17.684 0.49609 11.93-4.2617 23.91-5.7344 25.062h-0.015626c-1.832 0-3.4102-1.5742-4.0352-2.2852 0.28906-0.99609 0.44531-1.8672 0.52734-2.5117 0.62891 0.16797 1.2812 0.27344 1.9727 0.27344 0.55469 0 1-0.44922 1-1 0-0.55078-0.44531-1-1-1-7.3203 0-10.703-13.941-10.734-14.082-0.097656-0.40625-0.4375-0.71094-0.85156-0.76172-0.43359-0.050781-0.82031 0.16406-1.0117 0.53906-1.8984 3.7188-1.4297 6.7539-0.67969 8.668-6.2383-2.2852-8.9766-8.6914-9.0078-8.7617-0.17969-0.43359-0.62891-0.68359-1.1016-0.60156-0.46094 0.082032-0.80469 0.47266-0.82422 0.94141-0.14062 3.3359 0.67188 5.75 1.5 7.3164-8.3125-2.4297-10.105-11.457-10.184-11.875-0.097656-0.51562-0.57422-0.86328-1.0898-0.8125-0.51953 0.054687-0.90625 0.50391-0.89062 1.0234 0.41406 13.465-1.8516 17.766-3.2383 19.133-0.66406 0.65625-1.1992 0.67188-1.2383 0.67188-0.53906-0.050781-1.0156 0.31641-1.0938 0.85156-0.078125 0.54688 0.29688 1.0547 0.84375 1.1328 0.03125 0.003906 0.11328 0.015625 0.23828 0.015625 0.36719 0 1.1016-0.09375 1.9414-0.66406 0.050781 0.38672 0.125 0.81641 0.21875 1.2656-1.0273 0.35156-2.6211 1.0781-3.7812 2.4648-0.015625 0.019532-0.054687 0.066406-0.15625 0.046875-0.039062-0.007812-0.13281-0.039062-0.16406-0.15234-2.1875-8.1094-5.7148-28.309 8.8867-40.496zm12.711 51.828c-1.0039 0-1.5898-1.207-1.8672-2.0117 0.48047 0.023438 0.95703 0.050781 1.4531 0.050781 0.74219 0 1.4453-0.035156 2.1289-0.082031-0.24219 0.83594-0.76172 2.043-1.7148 2.043zm-13.148-30.664c1.9531 3.6211 5.6367 7.9102 12.305 8.6992 0.43359 0.046875 0.83984-0.18359 1.0234-0.57422 0.18359-0.39062 0.089844-0.85938-0.22656-1.1523-0.074219-0.070312-1.2734-1.2227-1.9688-3.6367 2 2.6094 5.3359 5.6836 10.305 6.5664 0.42187 0.070312 0.83594-0.125 1.0469-0.49219 0.21094-0.36719 0.16406-0.82812-0.11719-1.1484-0.023437-0.027344-1.9414-2.2969-1.2891-5.8906 1.2227 3.5508 3.7461 9.2227 7.8945 11.551-0.03125 0.55859-0.14844 1.668-0.55078 3.0156-0.085937 0.13672-0.125 0.28516-0.13672 0.44531-1.3008 3.8906-5.0039 9.3281-15.547 9.3281-5.375 0-9.4414-1.418-12.086-4.2109-3.5664-3.7656-3.332-8.8477-3.332-8.8984v-0.011719c1.5898-2.7227 2.5-7.3203 2.6797-13.59z"></path>
    </svg>
  </div>
  <div class="menu">
    <div class="opener"><span></span><span></span><span></span></div>
  </div>
  <h2 class="name">Morgan Sweeney</h2>
  <div class="title">Ant Collector</div>
  <div class="actions">
    <div class="follow-info">
      <h2><a href="#"><span>12</span><small>Followers</small></a></h2>
      <h2><a href="#"><span>1000</span><small>Following</small></a></h2>
    </div>
    <div class="follow-btn">
      <button>Follow</button>
    </div>
  </div>
  <div class="desc">Lorem Ipsum</div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js'></script>
</body>
</html>

6. CFYE Profile Card

Made by Arden. Profile card with sliding effect. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

<style>
@import url(https://fonts.googleapis.com/css?family=Oswald:400,300,700|Merriweather);
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css);
* {
  box-sizing: border-box;
}

body {
  background-color: #fff;
  padding-top: 100px;
}

.profileCard {
  margin: 0 auto;
  padding-bottom: 60px;
  width: 350px;
  border: 1px solid #ccc;
  border-radius: 5px;
  overflow: hidden;
  background-color: #fff;
  position: relative;
}
.profileCard__imageWrap {
  background-size: cover;
  height: 100px;
  width: 100%;
  position: relative;
  transition: height 0.3s ease-in;
  will-change: height;
}
.profileCard__imageWrap:before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(51, 51, 51, 0.25);
  z-index: 1;
}
.profileCard__location {
  color: #fff;
  z-index: 20;
  position: absolute;
  top: 5px;
  right: 5px;
}
.profileCard__header {
  text-align: left;
  padding-left: 140px;
  position: absolute;
  bottom: -28px;
  left: 0;
  color: #fff;
  padding-left: 140px;
  z-index: 20;
  transition: transform 0.3s ease-in;
  will-change: transform;
}
.profileCard__title {
  margin: 0;
  color: #fff;
  font-size: 1.125em;
  font-weight: 400;
  font-family: "Oswald";
  font-weight: 400;
  z-index: 10;
  position: relative;
  padding-bottom: 6px;
}
.profileCard__subTitle {
  color: #999;
  font-size: 0.875em;
  padding-top: 12px;
  transition: transform 0.3s ease-in;
  will-change: transform;
}
.profileCard__thumbWrap {
  width: 110px;
  height: 110px;
  background-color: #fff;
  border-radius: 5px;
  padding: 3px;
  position: absolute;
  bottom: -55px;
  left: 15px;
  border-radius: 110px;
  z-index: 10;
  transition: transform 0.3s linear;
  will-change: transform;
}
.profileCard__thumb {
  width: 104px;
  height: 104px;
  display: block;
  border-radius: 84px;
}
.profileCard__contentWrap {
  padding-bottom: 0px;
  min-height: 50px;
  position: relative;
}
.profileCard__contentWrap::after {
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  z-index: 20;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 10px 10px 10px;
  border-color: transparent transparent #ffffff transparent;
  transform: translateY(10px);
  transition: transform 0.3s ease-in;
  margin-left: -10px;
}
.profileCard__content {
  padding: 20px 20px 0;
  text-align: left;
  line-height: 1.3;
  font-size: 1em;
  font-family: sans-serif;
  font-size: 0.875em;
  color: #666;
  max-height: 0;
  overflow: hidden;
  transform: translateY(-10%);
  transition: max-height 0.3s ease-in, opacity 0.3s ease-in;
  will-change: transform, opacity;
  opacity: 0;
  visibility: hidden;
}
.profileCard__content p {
  margin: 0;
}
.profileCard__social {
  position: absolute;
  bottom: 0;
  left: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: table;
  border-top: 1px solid #ccc;
  padding: 10px 0;
}
.profileCard__socialItem {
  display: table-cell;
  text-align: center;
}
.profileCard__socialLink {
  color: #999;
}
.profileCard:hover .profileCard__imageWrap {
  height: 150px;
}
.profileCard:hover .profileCard__contentWrap:after {
  transform: translateY(0);
}
.profileCard:hover .profileCard__content {
  max-height: 200px;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: max-height 0.3s ease-in, opacity 0.3s ease-in;
}
.profileCard:hover .profileCard__thumbWrap {
  transform: translateY(-70%);
}
.profileCard:hover .profileCard__header {
  transform: translateY(-110%);
}
.profileCard:hover .profileCard__subTitle {
  color: #fff;
  transform: translateY(-10px);
}
</style>
</head>
<body>
  <div class="profileCard">
  <div class="profileCard__imageWrap" style="background-image:url(https://farm9.staticflickr.com/8682/15309989834_7ef83fcfca_z.jpg);">
    <div class="profileCard__location"><i class="fa fa-map-pin"></i></div>
    <div class="profileCard__thumbWrap"><img class="profileCard__thumb" src="https://farm4.staticflickr.com/3022/3009079316_3caf8c7655_q.jpg"/></div>
    <header class="profileCard__header">
      <h1 class="profileCard__title">Carmelita Franco Anticio</h1>
      <div class="profileCard__subTitle">Fashion photographer</div>
    </header>
  </div>
  <div class="profileCard__contentWrap">
    <div class="profileCard__content"> 
      <p>Lorem ipsum</p>
    </div>
  </div>
  <ul class="profileCard__social">
    <li class="profileCard__socialItem"><a class="profileCard__socialLink" href="#"><i class="fa fa-facebook"></i></a></li>
    <li class="profileCard__socialItem"><a class="profileCard__socialLink" href="#"><i class="fa fa-twitter"></i></a></li>
    <li class="profileCard__socialItem"><a class="profileCard__socialLink" href="#"><i class="fa fa-instagram"></i></a></li>
    <li class="profileCard__socialItem"><a class="profileCard__socialLink" href="#"><i class="fa fa-link"></i></a></li>
    <li class="profileCard__socialItem"><a class="profileCard__socialLink" href="#"><i class="fa fa-envelope"></i></a></li>
  </ul>
</div>
</body>
</html>

7. Profile card [hover]

Made by Divya Mohan. Simple CSS Profile card with hover effects and social buttons. ( Source )

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
        
       <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        
    </head>
    <body>
    <div class="plot">
        <div class="card-wrapper">
          <div class="card">                                    
            <div class="border">
                <div class="icons">
                 
                  <i class="fa fa-linkedin" aria-hidden="true"></i> 
                    
                   <i class="fa fa-twitter" aria-hidden="true"></i>
                   
                    <i class="fa fa-github" aria-hidden="true"></i>
                    
                    <i class="fa fa-facebook" aria-hidden="true"></i>
                    
                </div>
            <div class="name">Ram Ghunni</div>
            </div>            
          </div>
       </div>        
    </div>        
    </body>
</html>


-------CSS-------

*{
   margin:0; 
   padding:0;
   box-sizing:border-box ;
}
.plot{
    height:100vh;
    width:100vw;
    display:flex;
    justify-content:center;
    align-items:center;
    background:#fff;
}
.card-wrapper{
    height:410px;
    width:310px;
    border-radius:5px;
    background:#000;
}
.card{
    height:410px;
    width:310px;
    border-radius:5px;
    background: url("https://images.pexels.com/photos/818261/pexels-photo-818261.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500");
    background-position:50% 50%;
    background-size:250px;
    background-repeat:no-repeat ;
    display:flex;
    justify-content:center;
    align-items:center;
    transition:all 1s ease-in;
}
.border{
    height:370px;
    width:270px;
  /*  border:5px solid #fff; */
    border-radius:5px;
    position:relative;
    opacity:0;
    transition:all 1s ease-in;
}
.name{
    height:30px;
    width:170px;
    text-align:center;
    position:absolute ;
    top:345px;
    left:50px;
    color:#fff;
    background:transparent ;
    display:flex;
    justify-content:center;
    align-items:center;
    font-weight:bolder;
    font-size:26px;
   /* backdrop-filter:blur(8px); */
}
.card:hover{
    background-size:500px;
    background-position:-40% 40%;
    box-shadow:4px 4px 16px rgba(0,0,0,1);
}
.card:hover .border{
    opacity:1;
}
.icons{
    display:flex;
    flex-flow:column nowrap;
    align-items:center;
    justify-content:space-evenly;
    height:350px;
    width:50px;
}
.icons i{
    color:#fff;
    font-size:32px;
}
.icons i:hover{
    color:#f00;
}

8. Beautiful profile card UI

Made by Jp (Jay ). A beautiful looking profile card with simple hover effects. ( Source )


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Profile Card Design</title>
    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.0/css/all.min.css'>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

<div class="card-container">
    <span class="pro">PRO</span>
    <img src="https://api.sololearn.com/Uploads/Avatars/14443763.jpg"/>
    <h3>Jp Suthar</h3>
    <h6>Jodhpur , Raj.</h6>
    <p>User interface designer and <br/> front-end developer</p>
    <div class="buttons">
        <button class="primary">
            Message
        </button>
        <button class="primary ghost"><a href="https://www.sololearn.com/Profile/14443763/?ref=app">
            Following</a>
        </button>
    </div>
    <div class="skills">
        <h6>Skills</h6>
        <ul>
            <li>UI / UX</li>
            <li>Front End Development</li>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
            <li>React</li>
            <li>Node</li>
        </ul>
    </div>
</div>
</body>
</html>


------CSS-------


@import url('https://fonts.googleapis.com/css?family=Montserrat');


* {
    box-sizing: border-box;
}

body {
    background-color:#54a0ff;
    font-family: Montserrat, sans-serif;
    
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    min-height: 100vh;
    margin: 0;
}

h3 {
    margin: 10px 0;
}

h6 {
    margin: 5px 0;
    text-transform: uppercase;
}

p {
    font-size: 14px;
    line-height: 21px;
}

.card-container {
    background-color: #231E39;
    border-radius: 25px;
    box-shadow: 10px 10px 15px rgba(0,0,0,0.35);
    color: #B3B8CD;
    padding: 30px 0 0;
    position: relative;
    width: 300px;
    max-width: 100%;
    text-align: center;
    margin: 20px 0;
    overflow: hidden;
}

.card-container .pro {
    color: #231E39;
    background-color: #FEBB0B;
    border-radius: 3px;
    font-size: 14px;
    font-weight: bold;
    padding: 3px 7px;
    position: absolute;
    top: 30px;
    left: 30px;
}

.card-container img {
    border: 2px solid #54a0ff;
    border-radius: 50%;
    padding: 7px;
    height: 150px;
    width: 150px;
}

button.primary {
    background-color: #54a0ff;
    border: 1px solid #54a0ff;
    border-radius: 3px;
    color: #fff;
    font-family: Montserrat, sans-serif;
    font-weight: 500;
    padding: 10px 25px;
}

button.primary.ghost {
    background-color: transparent;
    color: #54a0ff;
}

.skills {
    background-color: #1F1A36;
    text-align: left;
    padding: 15px;
    margin-top: 30px;
}

.skills ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.skills ul li {
    border: 1px solid #2D2747;
    border-radius: 2px;
    display: inline-block;
    font-size: 12px;
    margin: 0 7px 7px 0;
    padding: 7px;
}
li:hover {
    background-color:#54a0ff;
    color:#fff;
}
a {
    text-decoration:none;
    color:#54a0ff;
}

9. Cool Profile Card

Made by Sarfaraz Alam. Cool Profile card with slide down animation on hover. ( Source )

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Profile card</title>
   <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="main-container">
    <div class="container">
      <div class="profile-pic">
      </div>
    <div class="layer">
      </div>
      <div class="details">
       <p>Sarfaraz Stark</p>
       <p>Full Stack Developer</p>
       </div>
       <div class="skills">
      <i class="fab fa-html5"></i>
      <i class="fab fa-css3-alt"></i>
      <i class="fab fa-js"></i>
      <i class="fab fa-react"></i>
      <i class="fab fa-angular"></i>
       </div>
       <div class="btn">
         <a href="#">Hire me</a>
       </div>
    </div>
  </div>
</body>
</html>


-------CSS-------


body {
    font-family: 'Poppins', sans-serif;
}
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
.main-container{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}
.container{
  position:relative;
  width:280px;
  height:380px;
  background:#040404;
  box-shadow:0 15px 18px rgba(179,179,179,.6);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-evenly;
  overflow:hidden;
  z-index:-1;
  font-size:.9rem;
}
.profile-pic{
  width:100px;
  height:100px;
  background:url("https://telegra.ph/file/1548157134b7520d69837.jpg") 0 1px / cover;
  border-radius:50%;
  border:3px solid #fff;
}
.layer{
  position:absolute;
  top:21%;
  width:100%;
  height:3px;
  background:#fff;
  transition:.4s ease;
  z-index:-1;
  overflow:hidden;
}
.details{
  text-align:center;
  color:#fff;
  transition:.4s ease;
}
.skills{
  font-size:1.5rem;
}
.skills i{
  margin:0 .3rem;
  opacity:0;
  transition:.4s ease;
}
.fa-html5{
  color:#e34c26;
}
.fa-css3-alt{
  color:#0098ff;
}
.fa-js{
  color:#f0db4f;
}
.fa-react{
  color:#61dafb;
}
.fa-angular{
  color:#dd1b16;
}
.btn a{
  display:block;
  text-decoration:none;
  width:200px;
  height:50px;
  border:1px solid #fff;
  border-radius:35px;
  text-align:center;
  line-height:50px;
  color:#fff;
  letter-spacing:2px;
  transition:.4s ease;
}
.container:hover .layer{
  height:100%;
}
.container:hover .details{
  color:#040404;
}
.container:hover .btn a{
  border-color:#040404;
  color:#040404;
}
.container:hover .skills i{
  opacity:1;
}

10. Profile Card

Made by Clean Code. A simple profile card. ( Source )

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    
    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link
      href="https://fonts.googleapis.com/css2?family=Kumbh+Sans:[email protected];700&display=swap"
      rel="stylesheet"
    />    
  </head>
  <body>
    <div id="card">
      <div id="card-header">
        <div id="card-profile-image"></div>
      </div>
      <div id="card-body">
        <p id="card-name">Victor Crest <span>26</span></p>
        <p id="card-location">London</p>
        <div id="card-stats">
          <div class="stat">
            <p class="stat-count">80K</p>
            <p class="stat-for">Followers</p>
          </div>
          <div class="stat">
            <p class="stat-count">803K</p>
            <p class="stat-for">Likes</p>
          </div>
          <div class="stat">
            <p class="stat-count">1.4K</p>
            <p class="stat-for">Photos</p>
          </div>
        </div>
      </div>
    </div>    
  </body>
</html>


------CSS------


*
{
    padding: 0;
    margin: 0;
    list-style-type: none;
    outline: none;
    text-decoration: none;
    color: var(--dark);
    font-family: 'Kumbh Sans', sans-serif;
    font-weight: var(--bold);
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}
body
{    
    background-color: var(--cyan);
    height: 100%;
    width: 100%;
    overflow: hidden;    
    display: flex;
    justify-content: center;
    align-items: center;
}
html
{
    height: 100vh;
}
:root
{
    /* Colors */
    --cyan: #309e7f;
    --dark: hsl(229, 23%, 23%);
    --blue: hsl(227, 10%, 46%);
    --gray: hsl(227, 10%, 46%);
    --white: hsl(0, 0%, 100%);
    --black: hsl(0, 0%, 0%);
    --light-gray: #eee;

    /* Font Weights */
    --bold: 700;
    --light: 400;

    /* Font Sizes */
    --medium: 18px;
    --small: 14px;
    --xsmall: 12px;

    /* letter Spacings */
    --small-spacing: 2px;
}
::-moz-focus-inner, ::-moz-focus-outer
{
    border: none;
} 


#card
{
    background-color: var(--white);
    position: absolute;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 2px 2px 40px #00000040;
}
#card-header
{
    height: 130px;
    width: 320px;
    background-image: url("https://i.pinimg.com/564x/2a/18/9e/2a189ef2e8161db01ca2bb47a4d8f918.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: relative;
} 
#card-profile-image
{
    height: 80px;
    width: 80px;
    border: 5px solid var(--white);
    border-radius: 50%;
    position: absolute;
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%);
    background-color: white;
    background-image: url("https://images.unsplash.com/flagged/photo-1570612861542-284f4c12e75f?ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8cGVyc29ufGVufDB8fDB8fA%3D%3D&ixlib=rb-1.2.1&w=1000&q=80");
    background-size: cover;
    background-position: center;
}
#card-name
{
    font-size: var(--medium);
    margin-top: 60px;
    text-align: center;    
    animation: name-an .8s forwards;
    opacity: 0;
    transform: translateY(-20px);
} 
@keyframes name-an 
{
    to
    {
        transform: translateY(0);
        opacity: 1;
    }    
}
#card-name span
{
    font-weight: var(--light);
    color: var(--gray);
} 
#card-location
{
    font-weight: var(--light);
    color: var(--gray);
    text-align: center;
    margin-top: 10px;
    margin-bottom: 20px;
}
#card-stats
{
    padding: 20px 0;
    border: 0 solid var(--light-gray);
    border-top-width: 1px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.stat
{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 20px;
    cursor: pointer;       
    animation: stat-an .8s forwards;
    animation-delay: .2s;
    transform: scale(0);
    opacity: 0;
}
@keyframes stat-an 
{
    to
    {
        transform: scale(1);
        opacity: 1;
    }    
}
.stat:hover .stat-count
{
    color: var(--cyan);
}
.stat-count
{
    font-size: var(--medium); 
    transition: .3s;
}
.stat-for
{
    font-weight: var(--light);
    font-size: var(--xsmall);
    letter-spacing: var(--small-spacing);
    color: var(--gray);
    margin-top: 5px;
}
#card-footer
{
    
} 

11. Creative Profile Card UI design

Made by Joseph Michael [Makzo]. Profile Card UI design with little bit of effects. ( Source )


<!DOCTYPE html>
<html>
<head>
    <title>Profile Card UI design</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
</head>
<body>
    <div class="container">
        <div class="profile-card middle">
            <div class="top-section">
                <div class="profile-photo">
                    <a href="https://www.sololearn.com/Profile/9438786/?ref=app">
                        
                        <img src="https://api.sololearn.com/Uploads/Avatars/9438786.jpg" alt="">
                    <a href="https://www.sololearn.com/Profile/9438786/?ref=app">
                </div> <!-- End profile photo -->
                <div class="profile-name">
                    <span>Makzo</span>       
                </div> <!-- End name -->
            </div> <!-- End top section -->
            <div class="info-section">
                <h2>About
                    <div class="border"></div>
                </h2>
                <p class="hyphenate">Interested in UI/UX designs and software development. He loves to draw human portraits during leisure.</p>
                    
                <a href="https://www.sololearn.com/Profile/9438786/?ref=app" class="follow-link"><button class="btn">Follow</button></a>
                <h2>Contact
                    <div class="border"></div>
                </h2>
                <p></p>
                
                <div class="social">
                    <a href="" class="fab fa-facebook-f"></a>
                    <a href="" class="fab fa-twitter"></a>
                <a href="" class="fab fa-instagram"></a>
                    <a href="" class="fab fa-whatsapp"></a>
                    <a href="" class="fab fa-youtube"></a>
                </div>
            </div> <!-- End info section -->
        </div> <!-- End card -->
    </div> <!-- End container -->
</body>
</html>
</body>
</html>


-------CSS-------



@import url('https://fonts.googleapis.com/css?family=Montserrat|Roboto&display=swap');

:root {
    --black: #333;
    --mediumblue: rgba(9, 132, 227,0.9);
    --blue: rgba(9, 132, 227,1.0);
}

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    user-select: none;
}

body {
    background-color: var(--black);
    font-family: 'Montserrat', sans-serif;
    height: 100vh;
}

a {
    color: inherit;
    text-decoration: none;
    display: block;
}

.profile-card {
    width: 80%;
    max-width: 560px;
    background-color: #f1f1f1;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.7);
}

.middle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.top-section {
    position: relative;
    align-items: center;
    display: flex;
    justify-content: center;
    background-color: var(--mediumblue);
}

.profile-photo {
    width: 8rem;
    height: 8rem;
    border-radius: 50%;
    border: 4px solid var(--blue);
    overflow: hidden;
    margin: 1em;
}

.profile-photo img {
    width: 100%;
}

.profile-name {
    position: absolute;
    bottom: 1.25rem;
    left: 1.25rem;
    font-size: 1.1em;
    font-family: 'Roboto', sans-serif;
    font-weight: 900;
    opacity: 0.3;
    text-transform: uppercase;
}

.info-section {
    display: flex;
    flex-direction: column;
    color: #333;
    padding: 1.8em;
    padding-top: 0;
}

h2 {
    position: relative;
    font-size: 1em;
    margin-top: 1em;
}

.border {
    position: absolute;
    left: 0;
    bottom: -0.375rem;
    width: 1.875rem;
    height: 0.1875rem;
    background-color: var(--blue);
}

p {
    text-align: left;
    font-size: 0.875em;
    margin-top: 0.8em;
}

.hyphenate {
    overflow-wrap: break-word;
    word-wrap: break-word;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}

.social {
    display: flex;
    justify-content: space-around;
    margin-top: 0.2em;
}

.social a {
    color: var(--blue);
    text-decoration: none;
    font-size: 1.25em;
}

.follow-link {
    align-self: center;
}

.btn {
    position: relative;
    outline: 0;
    margin-top: 0.7em;
    padding: 0.8em 4em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--blue);
    border: 4px solid var(--blue);
    background: transparent;
}

.btn::before, .btn::after {
    position: absolute;
    content: '';
    width: 0.875em;
    height: 4px;
    background-color: #f1f1f1;
    transform: skewX(50%);
    transition: 0.4s linear;
}

.btn::before {
    top: -4px;
    left: 10%;
    animation: animate-left 5s infinite linear;
}

.btn::after {
    bottom: -4px;
    right: 10%;
    animation: animate-right 5s infinite linear;
}

.btn:hover::before {
    left: 80%;
}

.btn:hover::after {
    right: 80%;
}

@keyframes animate-left {
    0% {
        left: 10%;
    }
    50% {
        left: 80%;
    }
    
    100% {
        left: 10%;
    }
}

@keyframes animate-right {
    0% {
        right: 10%;
    }
    50% {
        right: 80%;
    }
    
    100% {
        right: 10%;
    }
}

@media screen and (min-width: 700px) {
    .profile-card {
        display: flex;
    }
    
    .profile-name {
        left: 50%;
        transform: translateX(-50%);
    }
            
    .follow-link {
        margin-top: 1.5em;
    }
}

12. Profile Card Tailwind CSS

Made by Safura Patel. CSS Profile card made using tailwind css. ( Source )


<html>
<head>
    <title>profile_Card</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        #dp {
            height: 100px;
            width: 100px;
            border-radius:50%;
            overflow: hidden;
            object-fit: cover;
            object-position:center;  
        }
    </style>
</head>

<body>
    <div class="flex justify-center items-center min-h-screen">
        <div class="card h-auto rounded-lg bg-black shadow-2xl">
           <!--dp_div -->
            <div class="flex pt-2 justify-center items-center">
                <img id="dp" src="https://api.sololearn.com/Uploads/Avatars/20717867.jpg" alt="safu">
            </div> 
            <!--dp_div end -->

            <!-- name -->
            <p class="flex justify-center items-center text-white font-medium text-xl p-6">Safura Patel</p>
           
            <!-- info_div -->
            <div class="flex justify-between items-center pt-0 p-7">
                <div class="flex gap-6  px-4">
                    <div class="flex flex-col items-center font-sans">
                        <p class="text-white">1.6k+</p> <span class="text-white">Followers</span>
                    </div>
                    <div class="flex flex-col items-center">
                        <p class="text-white">30+</p> <span class="text-white">Projects</span>
                    </div>
                    <div class="flex flex-col items-center">
                        <p class="text-white">30+</p> <span class="text-white">Following</span>
                    </div>
                </div>
                <div> <i class="fa fa-plus text-white"></i> </div>
            </div>
            <!-- info_div end -->

            <!-- contact_div -->
            <div class="pt-0 p-3 flex gap-5">
                <button class="h-8 w-full bg-red-400 rounded-lg text-white font-bold hover:text-gray-700 transition ease-in-out delay-50 hover:bg-green-200 duration-100"> <a href="https://www.sololearn.com/Profile/20717867/?ref=app" target="_blank">Follow</a></button>
                <button class="h-8 w-full bg-blue-400 rounded-lg text-white font-bold hover:text-gray-700 transition ease-in-out delay-50 hover:bg-green-200 duration-100"><a href="https://www.sololearn.com/Profile/20717867/?ref=app" target="_blank">Message</a></button>
            </div>
             <!-- contact_div end -->

             <div class="justify-center items-center text-white text-sm mx-4 p-2">
             <p style="text-align: center;">
                Always keep your face towards the sunlight ๐ŸŒ…<br> Then the black shadow will <br> remain behind you ๐ŸŒ–
             </p>
            </div>
           
            
            <div class="p-2 mt-4 mb-4 flex justify-between">
                <!-- facebook-->
                <div class="flex flex-col items-center"> 
                    <img class="h-7 w-7 rounded-full overflow-hidden flex object-cover" 
                    src="https://cdn3.iconfinder.com/data/icons/capsocial-round/500/facebook-1024.png"> 
                </div>

                <!-- whatsapp -->
                <div class="flex flex-col items-center"> 
                    <img class="h-7 w-7 flex" 
                    src="https://cdn.pixabay.com/photo/2021/05/22/11/38/whatsapp-6273368_1280.png"> 
                </div>

                <!-- mail -->
                <div class="flex flex-col items-center"> 
                    <img class="h-7 w-7 overflow-hidden flex object-cover" 
                    src="https://cdn.pixabay.com/photo/2016/01/26/17/15/gmail-1162901_1280.png"> 
                </div>

                <!-- telegram -->
                <div class="flex flex-col items-center"> 
                    <img class="h-7 w-7 overflow-hidden flex object-cover" 
                    src="https://cdn.pixabay.com/photo/2020/10/17/13/21/telegram-5662082_1280.png"> 
                </div>

                <!-- instagram -->
                <div class="flex flex-col items-center"> 
                    <img class="h-7 w-7 overflow-hidden flex object-cover" 
                    src="https://cdn.pixabay.com/photo/2016/08/01/21/00/icon-1562136_1280.png"> 
                </div>

                 <!-- guithub -->
                 <div class="flex flex-col items-center"> 
                    <img class="h-7 w-7 overflow-hidden flex object-cover" 
                    src="https://img.icons8.com/ios-glyphs/24/ffffff/github.png"> 
                </div>
            </div>
        </div>
    </div>
</body>

13. Profile card V.3

Made by Sohail. Profile card with wave animation and follow button. ( Source )


<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/style.css">
<title>Profile Card</title>
</head>
<body>
<div class="vcard">
<div class="header">
<div class="wave_bg">
<div class="wave-01"></div>
<div class="wave-02"></div>
<div class="wave-03"></div>
</div>

<div class="profile_pic_content">
<img class="profile_pic" src="https://www.dropbox.com/s/nrdkhkceprm95lv/IMG_20201011_182940.jpg?raw=1">
</div>
</div>
<div class="card_content">
<div class="name">
<h4>Md Sohail </h4>
</div>
<div class="info">
<h6 class="typed_text">
 Sololearner(becoming developer).
    <i><br> Level: 13</br>
        11000+ xps 
        99 Followers </i>
    <br>13 Projects | 7 Certificates<br/>
</h6>
</div>

<div class="social">
<a href="#"><i class="fa fa-github" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-facebook-f" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a>
<a href="https://studio.youtube.com/channel/UC-HKlsTMsTxFL1Bxe4qZ3xg"><i class="fa fa-youtube" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
</div>

<a href="https://www.sololearn.com/Profile/15378386"class="button">
Follow me
</a>
</div>
</div>
</body>
</html>


-------CSS-------


:root{
--back_color: #221F2E;
--front_color: #2E2B3F;
--purple: #6240F6;
--pink: #EB7AC8;
--blue: #2DB8E7;
}

*{
font-family: 'Poppins', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}

body{
background: var(--back_color);
width: 100vw;
height: 100vh;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}

.vcard{
width: 450px;
height: 550px;
background: var(--front_color);
border-radius: 8px;
box-shadow: 5px 0px 20px rgba(0,0,0,39%);
}

.header{
height: 40%;
position: relative;
}

.wave_bg{
border-radius: 8px;
position: relative;
height: 100%;
overflow: hidden;
}

.wave-01{
position: absolute;
width: 600px;
height: 600px;
background: linear-gradient(to top right, var(--purple), var(--pink));
border-radius: 50%;
top: -200%;
left: -20%;
animation: rotate 10s linear infinite;
}
.wave-02{
position: absolute;
width: 600px;
height: 600px;
background: linear-gradient(to top right, var(--purple), var(--pink));
border-radius: 40%;
top: -205%;
left: -22%;
opacity: 0.5;
animation: rotate 15s linear infinite;
}
.wave-03{
position: absolute;
width: 600px;
height: 600px;
background: linear-gradient(to top right, var(--purple), var(--pink));
border-radius: 45%;
top: -198%;
left: -18%;
opacity: 0.2;
animation: rotate 15s linear infinite;
}

@keyframes rotate{
100%{
transform: rotate(360deg);
}
}

.profile_pic_content{
width: 130px;
height: 130px;
border-radius: 50%;
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
top: 80%;
text-align: center;
}
.profile_pic_content::after{
content: '';
border-radius: 50%;
width: 100%;
height: 100%;
background: linear-gradient(to right, var(--purple), var(--pink));
position: absolute;
top: 8px;
left: 10px;
z-index: -1;
opacity: 0;
transition: all .7s;
}
.profile_pic_content:hover::after{
opacity: 0.2;
}

.profile_pic{
max-width: 100%;
max-height: 100%;
border-radius: 50%;
}

.card_content{
position: relative;
top: 7%;
text-align: center;
}

.name{
color: var(--blue);
font-weight: 700;
font-size: 1.4em;
}
.info{
margin-top: 5px;
color: white;
padding: 0px 10px;
}

.typed_text{
text-align: center;
}

.social{
color: white;
padding: 5px;
margin-top: 55px;
}
.social a{
text-decoration: none;
color: white;
}
.social i{
padding: 5px;
}
.button{
cursor: pointer;
display: block;
text-decoration: none;
width: 50%;
margin-top: 10px;
margin-left: 25%;
background: linear-gradient(to top right, var(--pink), var(--purple));
padding: 10px 20px;
border-radius: 20px;
color: white;
font-weight: bolder;
transition: all .7s;
}
.button:hover{
box-shadow: 0px 8px 20px rgba(0,0,0,39%);
}

14. Profile Card #2

Made by Ian_kafele. Profile Card with popup animation, hover over the image to show the social buttons. ( Source )


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Profile Card</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>


     <header>
         <h2>Tap The Picture</h2>
     </header>
    <div class="card">
        <div class="card-image">
            <img src="https://nomorsiapa.com/images/v/th/id/OIP.ytt_ceLy6UaXSD11mlR32AHaHT?w=650&h=940&c=7&r=0&o=5&pid=1.7" alt="">
        </div>
        <ul class="social-icons">
            <li>
                <a href="https://www.facebook.com/profile.php?id=100076021441931">
                    <i class='fa fa-facebook'></i>
                </a>
            </li>
            <li>
                <a href="https://wa.me/+6287818759942">
                    <i class='fa fa-whatsapp' ></i>
                </a>
            </li>

            <li>
                <a href="https://www.instagram.com/ian_kafele/">
                    <i class='fa fa-instagram' ></i>
                </a>
            </li>
        </ul>
        <div class="details">
            <h2>Ian_kafele</h2>
            <span class="job-title">UI Designer</span>
        </div>
    </div>
</body>
</html>


--------CSS--------



* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Open Sans', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center; 
    min-height: 100vh;
    background-image: linear-gradient(-20deg, #6944ff 0%, #f0f8ff 90%);
}

header {
    position:absolute ;
    top:70px;
    left:110px;
    color: #fff;
    text-decoration: underline ;
    color: #000000;
}

.card {
    position: relative;
    width: 320px;
    height: 310px;
    border-radius: 15px;
    overflow: hidden;
    cursor: pointer;
    transition: .5s;
}

.card-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    transition: .5s;
    overflow: hidden;
    object-fit: cover;
}
.card-image img {
    display: block;
    width: 100%;
}

.social-icons {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 30%);
    transition: .5s;
    display: flex;
    z-index: 3;
}

.fa.fa-facebook {
    color: #0000ff;
}

.fa.fa-whatsapp {
    color: #00ff00;
}

.fa.fa-instagram {
    color: #ff0000;
}

.social-icons li {
    list-style-type: none;
}

.social-icons li a {
    position: relative;
    display: block;
    width: 50px;
    height: 48px;
    line-height: 50px;
    text-align: center;
    background: none;
    font-size: 32px;
    color: #333;
    margin: 0 17px;
    transition: .5s;
    transform: translateY(200px);
    opacity: 0;
    visibility: hidden;
    
}

.details {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80px;
    z-index: 1;
    padding: 20px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: #fff;
}

.details h2 {
    margin: 0;
    color: #333;
}

.job-title {
    font-size: 1rem;
    line-height: 2.5rem;
    color: #333;
    font-weight: 300;
}

.card:hover img {
    opacity: .4;
    transition: .5s;
}

.card:hover li a {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}
.card:hover li:nth-child(1) a {
    transition-delay: .1s;
}
.card:hover li:nth-child(2) a {
    transition-delay: .2s;
}
.card:hover li:nth-child(3) a {
    transition-delay: .3s;
}
.card:hover li:nth-child(4) a {
    transition-delay: .4s;
}
.card:hover .card-image {
    transform: translateY(-80px);
    transition: .5s;
}

15. Simple Profile Card

Made by Alejandro Osorio. A Simple CSS Profile Card with button hover effect. ( Source )

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/style.css">
    <title></title>
  </head>
  <body>
    <div class="cont">
      <img src="https://blob.sololearn.com/avatars/95f7b709-5bb8-4058-aac1-450944d91afe.jpg" alt="">
      <h1>Alejandro Osorio</h1>
      <p>Web Designer</p>
      <p>Hello, i'm a web Designer.
Over 2 years of experience and passion in the work i do</p>
      <button type="button" name="button">MORE INFO</button>
    </div>

  </body>
</html>


------CSS------


body{
  margin: 0;
  padding: 0;
  background-color: #3598dc;
}
.cont{
  width: 255px;
  background-color: #fff;
  text-align: center;
  padding: 40px;
  margin: auto;
  margin-top: 5%;
  font-family: sans-serif;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
  border-radius: 3px;
  overflow: hidden;

}

img{
  width: 150px;
  height: 150px;
  border-radius: 50%;
  overflow: hidden;
}

h1{
  font-size: 25px;
  color: #292525;
}
p{
  font-size: 18px;
  color: #555;
  overflow: hidden;
  width: 255px;
}

button{
  background: #3598dc;
  border: none;
  width: 50%;
  height: 40px;
  color: #fff;
  border-radius: 3px;
  font-size: 13px;
  outline: none;
}
button:hover{
  background-color:#fff;
  border:2px solid #3598dc;
  color:Black;
  width: 50%;
  font-size: 14px;
}

16. PROFILE | CARD

Made by Subrahmanya Mayya. ( Source )

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
    </head>
    <body>
        <div class="box">
            <div class="proimg">
                <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSK_f6RCrLeoPOSVnGTNlY0FqFIrePO2i9ECh7JQ0fW6Tw_u-6fq6obqffW0g">
            </div>
            <div class="content" style="">
                <h1>John</h1>
                <h4><i class="en far fa-envelope"></i> <a href="#">[email protected]</a></h4>
                <h4><i class="mp fas fa-map-marker-alt"></i> London</h4>
                <p >CEO in GOOGLE company</p>
                follow<br/><br/>
                <i class="fb fab fa-facebook"></i>
                <i class="tw fab fa-twitter-square"></i>
                <i class="in fab fa-instagram"></i>
                <i class="wa fab fa-whatsapp"></i>
            </div>
        </div>
    </body>
</html>


-------CSS-------



@import url('https://fonts.googleapis.com/css?family=Raleway|Source+Sans+Pro');
body {
    margin:0;
    padding:0;
    color:#000;
    font-family:'Raleway', sans-serif;
    background:#3498db;
}
.box{
    position:absolute ;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:200px;
    padding:20px;
    text-align:center ;
    background:#fff;
    border-radius:8px;
}
.box img{
    position:relative  ;
    top:-70px;
    width:100px;
    border:2px solid #fff;
    border-radius:50%;
    
}
.box .content{
    position:relative ;
    top:-40px;
    text-align:center ;
}
.box .content i{
    font-size:20px;
}
p{
    font-size:15px;
}
.box a{
    text-decoration:none;
    color:#000;
}
.box a:hover{
    color:#3498db;
}
h1{
    color:#e74c3c;
    text-transform:uppercase ;
}
.wa{
    color:#4dc427;
}
.en,.mp,.tw{
    color:#3498db;
}
.in{
    color:#cd486b;
}
.fb{
    color:#3b5998;
}

17. Profile Card Dcoder App

Made by G O R D X R O H I T. Minimalistic profile card with hover effects. ( Source )

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Profile Card - Dcoder</title>
  <meta name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="./style.css">

</head>
<body>
<div class="wrapper">
  <div class="profile-card js-profile-card">
    <div class="profile-card__img">
      <img src="https://www.dropbox.com/s/thndv3ajfphaao0/IMG20211027075109.jpg?dl=1" alt="profile card">
    </div>

    <div class="profile-card__cnt js-profile-cnt">
      <div class="profile-card__name">G O R D X R O H I T</div>
      <div class="profile-card__txt"><strong>Front-end Developer </br> #1 India at Dcoder </strong> </div>
      <div class="profile-card-loc">
        <span class="profile-card-loc__icon">
          <svg class="icon"><use xlink:href="#icon-location"></use></svg>
        </span>

        <span class="profile-card-loc__txt">
          Dhanbad, India
        </span>
      </div>

      <div class="profile-card-inf">
        <div class="profile-card-inf__item">
          <div class="profile-card-inf__title">680</div>
          <div class="profile-card-inf__txt">Followers</div>
        </div>

        <div class="profile-card-inf__item">
          <div class="profile-card-inf__title">2</div>
          <div class="profile-card-inf__txt">Following</div>
        </div>

        <div class="profile-card-inf__item">
          <div class="profile-card-inf__title">715</div>
          <div class="profile-card-inf__txt">Stars</div>
        </div>

        <div class="profile-card-inf__item">
          <div class="profile-card-inf__title">653</div>
          <div class="profile-card-inf__txt">Forks</div>
        </div>
      </div>

      <div class="profile-card-social">
        <a href="https://www.facebook.com/rohit.mandal.56481379" class="profile-card-social__item facebook" target="_blank">
          <span class="icon-font">
              <svg class="icon"><use xlink:href="#icon-facebook"></use></svg>
          </span>
        </a>

        <a href="https://twitter.com/gordxrohit?t=ZDQFyiF45t9kxDGVtTbCmA&s=09" class="profile-card-social__item twitter" target="_blank">
          <span class="icon-font">
              <svg class="icon"><use xlink:href="#icon-twitter"></use></svg>
          </span>
        </a>

        <a href="https://www.instagram.com/ig.gordxrohit/" class="profile-card-social__item instagram" target="_blank">
          <span class="icon-font">
              <svg class="icon"><use xlink:href="#icon-instagram"></use></svg>
          </span>
        </a>


      </div>

      <div class="profile-card-ctr">
        <button class="profile-card__button button--blue js-message-btn">Message</button>
        <button class="profile-card__button button--orange">  <a href="https://www.instagram.com/ig.gordxrohit/" target="_blank"> Follow</a></button>
      </div>
    </div>

    <div class="profile-card-message js-message">
      <form class="profile-card-form">
        <div class="profile-card-form__container">
          <textarea placeholder="Say something..."></textarea>
        </div>

        <div class="profile-card-form__bottom">
          <button class="profile-card__button button--blue js-message-close">
            Send
          </button>

          <button class="profile-card__button button--gray js-message-close">
            Cancel
          </button>
        </div>
      </form>

      <div class="profile-card__overlay js-message-close"></div>
    </div>

  </div>

</div>
<svg hidden="hidden">
  <defs>

    <symbol id="icon-location" viewBox="0 0 32 32">
      <title>location</title>
      <path d="M16 31.68c-0.352 0-0.672-0.064-1.024-0.16-0.8-0.256-1.44-0.832-1.824-1.6l-6.784-13.632c-1.664-3.36-1.568-7.328 0.32-10.592 1.856-3.2 4.992-5.152 8.608-5.376h1.376c3.648 0.224 6.752 2.176 8.608 5.376 1.888 3.264 2.016 7.232 0.352 10.592l-6.816 13.664c-0.288 0.608-0.8 1.12-1.408 1.408-0.448 0.224-0.928 0.32-1.408 0.32zM15.392 2.368c-2.88 0.192-5.408 1.76-6.912 4.352-1.536 2.688-1.632 5.92-0.288 8.672l6.816 13.632c0.128 0.256 0.352 0.448 0.64 0.544s0.576 0.064 0.832-0.064c0.224-0.096 0.384-0.288 0.48-0.48l6.816-13.664c1.376-2.752 1.248-5.984-0.288-8.672-1.472-2.56-4-4.128-6.88-4.32h-1.216zM16 17.888c-3.264 0-5.92-2.656-5.92-5.92 0-3.232 2.656-5.888 5.92-5.888s5.92 2.656 5.92 5.92c0 3.264-2.656 5.888-5.92 5.888zM16 8.128c-2.144 0-3.872 1.728-3.872 3.872s1.728 3.872 3.872 3.872 3.872-1.728 3.872-3.872c0-2.144-1.76-3.872-3.872-3.872z"></path>
      <path d="M16 32c-0.384 0-0.736-0.064-1.12-0.192-0.864-0.288-1.568-0.928-1.984-1.728l-6.784-13.664c-1.728-3.456-1.6-7.52 0.352-10.912 1.888-3.264 5.088-5.28 8.832-5.504h1.376c3.744 0.224 6.976 2.24 8.864 5.536 1.952 3.36 2.080 7.424 0.352 10.912l-6.784 13.632c-0.32 0.672-0.896 1.216-1.568 1.568-0.48 0.224-0.992 0.352-1.536 0.352zM15.36 0.64h-0.064c-3.488 0.224-6.56 2.112-8.32 5.216-1.824 3.168-1.952 7.040-0.32 10.304l6.816 13.632c0.32 0.672 0.928 1.184 1.632 1.44s1.472 0.192 2.176-0.16c0.544-0.288 1.024-0.736 1.28-1.28l6.816-13.632c1.632-3.264 1.504-7.136-0.32-10.304-1.824-3.104-4.864-5.024-8.384-5.216h-1.312zM16 29.952c-0.16 0-0.32-0.032-0.448-0.064-0.352-0.128-0.64-0.384-0.8-0.704l-6.816-13.664c-1.408-2.848-1.312-6.176 0.288-8.96 1.536-2.656 4.16-4.32 7.168-4.512h1.216c3.040 0.192 5.632 1.824 7.2 4.512 1.6 2.752 1.696 6.112 0.288 8.96l-6.848 13.632c-0.128 0.288-0.352 0.512-0.64 0.64-0.192 0.096-0.384 0.16-0.608 0.16zM15.424 2.688c-2.784 0.192-5.216 1.696-6.656 4.192-1.504 2.592-1.6 5.696-0.256 8.352l6.816 13.632c0.096 0.192 0.256 0.32 0.448 0.384s0.416 0.064 0.608-0.032c0.16-0.064 0.288-0.192 0.352-0.352l6.816-13.664c1.312-2.656 1.216-5.792-0.288-8.352-1.472-2.464-3.904-4-6.688-4.16h-1.152zM16 18.208c-3.424 0-6.24-2.784-6.24-6.24 0-3.424 2.816-6.208 6.24-6.208s6.24 2.784 6.24 6.24c0 3.424-2.816 6.208-6.24 6.208zM16 6.4c-3.072 0-5.6 2.496-5.6 5.6 0 3.072 2.528 5.6 5.6 5.6s5.6-2.496 5.6-5.6c0-3.104-2.528-5.6-5.6-5.6zM16 16.16c-2.304 0-4.16-1.888-4.16-4.16s1.888-4.16 4.16-4.16c2.304 0 4.16 1.888 4.16 4.16s-1.856 4.16-4.16 4.16zM16 8.448c-1.952 0-3.552 1.6-3.552 3.552s1.6 3.552 3.552 3.552c1.952 0 3.552-1.6 3.552-3.552s-1.6-3.552-3.552-3.552z"></path>
    </symbol>

    <symbol id="icon-facebook" viewBox="0 0 32 32">
      <title>facebook</title>
      <path d="M19 6h5v-6h-5c-3.86 0-7 3.14-7 7v3h-4v6h4v16h6v-16h5l1-6h-6v-3c0-0.542 0.458-1 1-1z"></path>
    </symbol>

    <symbol id="icon-instagram" viewBox="0 0 32 32">
      <title>instagram</title>
      <path d="M16 2.881c4.275 0 4.781 0.019 6.462 0.094 1.563 0.069 2.406 0.331 2.969 0.55 0.744 0.288 1.281 0.638 1.837 1.194 0.563 0.563 0.906 1.094 1.2 1.838 0.219 0.563 0.481 1.412 0.55 2.969 0.075 1.688 0.094 2.194 0.094 6.463s-0.019 4.781-0.094 6.463c-0.069 1.563-0.331 2.406-0.55 2.969-0.288 0.744-0.637 1.281-1.194 1.837-0.563 0.563-1.094 0.906-1.837 1.2-0.563 0.219-1.413 0.481-2.969 0.55-1.688 0.075-2.194 0.094-6.463 0.094s-4.781-0.019-6.463-0.094c-1.563-0.069-2.406-0.331-2.969-0.55-0.744-0.288-1.281-0.637-1.838-1.194-0.563-0.563-0.906-1.094-1.2-1.837-0.219-0.563-0.481-1.413-0.55-2.969-0.075-1.688-0.094-2.194-0.094-6.463s0.019-4.781 0.094-6.463c0.069-1.563 0.331-2.406 0.55-2.969 0.288-0.744 0.638-1.281 1.194-1.838 0.563-0.563 1.094-0.906 1.838-1.2 0.563-0.219 1.412-0.481 2.969-0.55 1.681-0.075 2.188-0.094 6.463-0.094zM16 0c-4.344 0-4.887 0.019-6.594 0.094-1.7 0.075-2.869 0.35-3.881 0.744-1.056 0.412-1.95 0.956-2.837 1.85-0.894 0.888-1.438 1.781-1.85 2.831-0.394 1.019-0.669 2.181-0.744 3.881-0.075 1.713-0.094 2.256-0.094 6.6s0.019 4.887 0.094 6.594c0.075 1.7 0.35 2.869 0.744 3.881 0.413 1.056 0.956 1.95 1.85 2.837 0.887 0.887 1.781 1.438 2.831 1.844 1.019 0.394 2.181 0.669 3.881 0.744 1.706 0.075 2.25 0.094 6.594 0.094s4.888-0.019 6.594-0.094c1.7-0.075 2.869-0.35 3.881-0.744 1.050-0.406 1.944-0.956 2.831-1.844s1.438-1.781 1.844-2.831c0.394-1.019 0.669-2.181 0.744-3.881 0.075-1.706 0.094-2.25 0.094-6.594s-0.019-4.887-0.094-6.594c-0.075-1.7-0.35-2.869-0.744-3.881-0.394-1.063-0.938-1.956-1.831-2.844-0.887-0.887-1.781-1.438-2.831-1.844-1.019-0.394-2.181-0.669-3.881-0.744-1.712-0.081-2.256-0.1-6.6-0.1v0z"></path>
      <path d="M16 7.781c-4.537 0-8.219 3.681-8.219 8.219s3.681 8.219 8.219 8.219 8.219-3.681 8.219-8.219c0-4.537-3.681-8.219-8.219-8.219zM16 21.331c-2.944 0-5.331-2.387-5.331-5.331s2.387-5.331 5.331-5.331c2.944 0 5.331 2.387 5.331 5.331s-2.387 5.331-5.331 5.331z"></path>
      <path d="M26.462 7.456c0 1.060-0.859 1.919-1.919 1.919s-1.919-0.859-1.919-1.919c0-1.060 0.859-1.919 1.919-1.919s1.919 0.859 1.919 1.919z"></path>
    </symbol>

    <symbol id="icon-twitter" viewBox="0 0 32 32">
      <title>twitter</title>
      <path d="M32 7.075c-1.175 0.525-2.444 0.875-3.769 1.031 1.356-0.813 2.394-2.1 2.887-3.631-1.269 0.75-2.675 1.3-4.169 1.594-1.2-1.275-2.906-2.069-4.794-2.069-3.625 0-6.563 2.938-6.563 6.563 0 0.512 0.056 1.012 0.169 1.494-5.456-0.275-10.294-2.888-13.531-6.862-0.563 0.969-0.887 2.1-0.887 3.3 0 2.275 1.156 4.287 2.919 5.463-1.075-0.031-2.087-0.331-2.975-0.819 0 0.025 0 0.056 0 0.081 0 3.181 2.263 5.838 5.269 6.437-0.55 0.15-1.131 0.231-1.731 0.231-0.425 0-0.831-0.044-1.237-0.119 0.838 2.606 3.263 4.506 6.131 4.563-2.25 1.762-5.075 2.813-8.156 2.813-0.531 0-1.050-0.031-1.569-0.094 2.913 1.869 6.362 2.95 10.069 2.95 12.075 0 18.681-10.006 18.681-18.681 0-0.287-0.006-0.569-0.019-0.85 1.281-0.919 2.394-2.075 3.275-3.394z"></path>
    </symbol>

    <symbol id="icon-link" viewBox="0 0 32 32">
      <title>link</title>
      <path d="M17.984 11.456c-0.704 0.704-0.704 1.856 0 2.56 2.112 2.112 2.112 5.568 0 7.68l-5.12 5.12c-2.048 2.048-5.632 2.048-7.68 0-1.024-1.024-1.6-2.4-1.6-3.84s0.576-2.816 1.6-3.84c0.704-0.704 0.704-1.856 0-2.56s-1.856-0.704-2.56 0c-1.696 1.696-2.624 3.968-2.624 6.368 0 2.432 0.928 4.672 2.656 6.4 1.696 1.696 3.968 2.656 6.4 2.656s4.672-0.928 6.4-2.656l5.12-5.12c3.52-3.52 3.52-9.248 0-12.8-0.736-0.672-1.888-0.672-2.592 0.032z"></path>
      <path d="M29.344 2.656c-1.696-1.728-3.968-2.656-6.4-2.656s-4.672 0.928-6.4 2.656l-5.12 5.12c-3.52 3.52-3.52 9.248 0 12.8 0.352 0.352 0.8 0.544 1.28 0.544s0.928-0.192 1.28-0.544c0.704-0.704 0.704-1.856 0-2.56-2.112-2.112-2.112-5.568 0-7.68l5.12-5.12c2.048-2.048 5.632-2.048 7.68 0 1.024 1.024 1.6 2.4 1.6 3.84s-0.576 2.816-1.6 3.84c-0.704 0.704-0.704 1.856 0 2.56s1.856 0.704 2.56 0c1.696-1.696 2.656-3.968 2.656-6.4s-0.928-4.704-2.656-6.4z"></path>
    </symbol>
  </defs>
</svg>
</body>
</html>


-------CSS-------


@import url("https://fonts.googleapis.com/css?family=Quicksand:400,500,700&subset=latin-ext");
html {
  position: relative;
  overflow-x: hidden !important;
}

* {
  box-sizing: border-box;
}

body {
  font-family: "Quicksand", sans-serif;
  color: #324e63;
}

a, a:hover {
  text-decoration: none;
}

.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor;
}

.wrapper {
  width: 100%;
  width: 100%;
  height: auto;
  min-height: 100vh;
  padding: 50px 20px;
  padding-top: 100px;
  display: flex;
  background-image: linear-gradient(-20deg, blue 0%, pink 100%);
  display: flex;
  background-image: linear-gradient(-20deg, blue 0%, pink 100%);
}
@media screen and (max-width: 768px) {
  .wrapper {
    height: auto;
    min-height: 100vh;
    padding-top: 100px;
  }
}

.profile-card {
  width: 100%;
  min-height: 460px;
  margin: auto;
  box-shadow: 0px 8px 60px -10px rgba(13, 28, 39, 0.6);
  background: #fff;
  border-radius: 12px;
  max-width: 700px;
  position: relative;
}
.profile-card.active .profile-card__cnt {
  filter: blur(6px);
}
.profile-card.active .profile-card-message,
.profile-card.active .profile-card__overlay {
  opacity: 1;
  pointer-events: auto;
  transition-delay: 0.1s;
}
.profile-card.active .profile-card-form {
  transform: none;
  transition-delay: 0.1s;
}
.profile-card__img {
  width: 150px;
  height: 150px;
  margin-left: auto;
  margin-right: auto;
  transform: translateY(-50%);
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  z-index: 4;
  box-shadow: 0px 5px 50px 0px #6c44fc, 0px 0px 0px 7px rgba(107, 74, 255, 0.5);
}
@media screen and (max-width: 576px) {
  .profile-card__img {
    width: 120px;
    height: 120px;
  }
}
.profile-card__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.profile-card__cnt {
  margin-top: -35px;
  text-align: center;
  padding: 0 20px;
  padding-bottom: 40px;
  transition: all 0.3s;
}
.profile-card__name {
  font-weight: 700;
  font-size: 24px;
  color: #6944ff;
  margin-bottom: 15px;
}
.profile-card__txt {
  font-size: 18px;
  font-weight: 500;
  color: #324e63;
  margin-bottom: 15px;
}
.profile-card__txt strong {
  font-weight: 700;
}
.profile-card-loc {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  font-weight: 600;
}
.profile-card-loc__icon {
  display: inline-flex;
  font-size: 27px;
  margin-right: 10px;
}
.profile-card-inf {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: flex-start;
  margin-top: 35px;
}
.profile-card-inf__item {
  padding: 10px 35px;
  min-width: 150px;
}
@media screen and (max-width: 768px) {
  .profile-card-inf__item {
    padding: 10px 20px;
    min-width: 120px;
  }
}
.profile-card-inf__title {
  font-weight: 700;
  font-size: 27px;
  color: #324e63;
}
.profile-card-inf__txt {
  font-weight: 500;
  margin-top: 7px;
}
.profile-card-social {
  margin-top: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.profile-card-social__item {
  display: inline-flex;
  width: 55px;
  height: 55px;
  margin: 15px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: #405de6;
  box-shadow: 0px 7px 30px rgba(43, 98, 169, 0.5);
  position: relative;
  font-size: 21px;
  flex-shrink: 0;
  transition: all 0.3s;
}
@media screen and (max-width: 768px) {
  .profile-card-social__item {
    width: 50px;
    height: 50px;
    margin: 10px;
  }
}
@media screen and (min-width: 768px) {
  .profile-card-social__item:hover {
    transform: scale(1.2);
  }
}
.profile-card-social__item.facebook {
  background: linear-gradient(45deg, #3b5998, #0078d7);
  box-shadow: 0px 4px 30px rgba(43, 98, 169, 0.5);
}
.profile-card-social__item.twitter {
  background: linear-gradient(45deg, #1da1f2, #0e71c8);
  box-shadow: 0px 4px 30px rgba(19, 127, 212, 0.7);
}
.profile-card-social__item.instagram {
  background: linear-gradient(45deg, #405de6, #5851db, #833ab4, #c13584, #e1306c, #fd1d1d);
  box-shadow: 0px 4px 30px rgba(120, 64, 190, 0.6);
}
.profile-card-social__item.behance {
  background: linear-gradient(45deg, #1769ff, #213fca);
  box-shadow: 0px 4px 30px rgba(27, 86, 231, 0.7);
}
.profile-card-social__item.github {
  background: linear-gradient(45deg, #333333, #626b73);
  box-shadow: 0px 4px 30px rgba(63, 65, 67, 0.6);
}
.profile-card-social__item.codepen {
  background: linear-gradient(45deg, #324e63, #414447);
  box-shadow: 0px 4px 30px rgba(55, 75, 90, 0.6);
}
.profile-card-social__item.link {
  background: linear-gradient(45deg, #d5135a, #f05924);
  box-shadow: 0px 4px 30px rgba(223, 45, 70, 0.6);
}
.profile-card-social .icon-font {
  display: inline-flex;
}
.profile-card-ctr {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 40px;
}
@media screen and (max-width: 576px) {
  .profile-card-ctr {
    flex-wrap: wrap;
  }
}
.profile-card__button {
  background: none;
  border: none;
  font-family: "Quicksand", sans-serif;
  font-weight: 700;
  font-size: 19px;
  margin: 15px 35px;
  padding: 15px 40px;
  min-width: 201px;
  border-radius: 50px;
  min-height: 55px;
  color: #fff;
  cursor: pointer;
  backface-visibility: hidden;
  transition: all 0.3s;
}
@media screen and (max-width: 768px) {
  .profile-card__button {
    min-width: 170px;
    margin: 15px 25px;
  }
}
@media screen and (max-width: 576px) {
  .profile-card__button {
    min-width: inherit;
    margin: 0;
    margin-bottom: 16px;
    width: 100%;
    max-width: 300px;
  }
  .profile-card__button:last-child {
    margin-bottom: 0;
  }
}
.profile-card__button:focus {
  outline: none !important;
}
@media screen and (min-width: 768px) {
  .profile-card__button:hover {
    transform: translateY(-5px);
  }
}
.profile-card__button:first-child {
  margin-left: 0;
}
.profile-card__button:last-child {
  margin-right: 0;
}
.profile-card__button.button--blue {
  background: linear-gradient(45deg, #1da1f2, #0e71c8);
  box-shadow: 0px 4px 30px rgba(19, 127, 212, 0.4);
}
.profile-card__button.button--blue:hover {
  box-shadow: 0px 7px 30px rgba(19, 127, 212, 0.75);
}
.profile-card__button.button--orange {
  background: linear-gradient(45deg, #d5135a, #f05924);
  box-shadow: 0px 4px 30px rgba(223, 45, 70, 0.35);
}
.profile-card__button.button--orange:hover {
  box-shadow: 0px 7px 30px rgba(223, 45, 70, 0.75);
}
.profile-card__button.button--gray {
  box-shadow: none;
  background: #dcdcdc;
  color: #142029;
}
.profile-card-message {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  padding-top: 130px;
  padding-bottom: 100px;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s;
}
.profile-card-form {
  box-shadow: 0 4px 30px rgba(15, 22, 56, 0.35);
  max-width: 80%;
  margin-left: auto;
  margin-right: auto;
  height: 100%;
  background: #fff;
  border-radius: 10px;
  padding: 35px;
  transform: scale(0.8);
  position: relative;
  z-index: 3;
  transition: all 0.3s;
}
@media screen and (max-width: 768px) {
  .profile-card-form {
    max-width: 90%;
    height: auto;
  }
}
@media screen and (max-width: 576px) {
  .profile-card-form {
    padding: 20px;
  }
}
.profile-card-form__bottom {
  justify-content: space-between;
  display: flex;
}
@media screen and (max-width: 576px) {
  .profile-card-form__bottom {
    flex-wrap: wrap;
  }
}
.profile-card textarea {
  width: 100%;
  resize: none;
  height: 210px;
  margin-bottom: 20px;
  border: 2px solid #dcdcdc;
  border-radius: 10px;
  padding: 15px 20px;
  color: #324e63;
  font-weight: 500;
  font-family: "Quicksand", sans-serif;
  outline: none;
  transition: all 0.3s;
}
.profile-card textarea:focus {
  outline: none;
  border-color: #8a979e;
}
.profile-card__overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  opacity: 0;
  background: rgba(22, 33, 72, 0.35);
  border-radius: 12px;
  transition: all 0.3s;
}

18. Profile Card UwU

Made by Ayan Fox. Simple Card with no effects. ( Source )

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
    
    <title>aProfileCard</title>
    
    <!-- fullscreen : https://theRealAyan.github.io/aprofilecard/ -->
    
  <link rel="stylesheet" href="style.css" />
</head>
    
<body>
    
    <section id="card">
      <div class="btn">
        <i class="fa fa-plus"></i>
      </div>
      <div class="pfp">
        <img src="https://github.com/ayanispro/ayanispro.github.io/blob/master/aprofilecard/image/user.jpg?raw=true" alt="" />
      </div>
      <div class="name">
        <h2>Miyamizu Mitsuha</h2>
        <span class="bio">Character from "Your Name"</span>
      </div>
      <div class="location">
        <i class="fa fa-map-marker-alt"></i> Tokyo, Japan
      </div>
      <div class="quote">
        <i class="fa fa-quote-left"></i> People loves me but I don't exist  :)
      </div>
      <div class="social">
        <a href="https://mywaifulist.moe/waifu/mitsuha-miyamizu-your-name">Visit me on Mywaifulist</a>
      </div>
    </section>
    
  <script src="main.js"></script>
</body>
</html>


-------CSS-------


@import url('https://fonts.googleapis.com/css2?family=Montserrat:[email protected]&family=Poppins&display=swap');
/*@import "libs/fontawesome-free-5.13.1-web/css/all.min.css";*/
@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css";

* {
  margin: 0;
  padding: 0;
  outline: 0;
  text-decoration: none;
}
body {
  height: 100vh;
  width: 100vw;
  background: url('https://raw.githubusercontent.com/ayanispro/ayanispro.github.io/master/aprofilecard/image/bg.png') no-repeat center center fixed;
  background-size: cover;
  color: #fff;
  font-family: "Poppins";
  display: flex;
  justify-content: center;
  align-items: center;
}
#card {
  background: rgba(0, 0, 0, 0.6);
  padding: 15pt;
  margin: 25pt;
  border-radius: 7.5pt;
  backdrop-filter: blur(4px);
}
i {
  display: inline-block;
  padding: 2.5pt;
}
.btn {
  text-align: right;
}
.pfp {
  text-align: center;
}
.pfp img {
  height: 100pt;
  width: 100pt;
  border-radius: 50%;
  border: 1px solid #fff;
}
.name {
  font-family: "Montserrat";
  text-align: center;
  padding: 3.5pt;
  margin-bottom: 5pt;
}
.location {
  margin: 7.5pt;
}
.quote {
  margin: 7.5pt;
}
.social {
  padding: 2.5pt;
  text-align: center;
}
a {
  color: #FFF;
  display: block;
  padding: 5pt;
  margin: 5pt;
  border: 1px solid #FFF;
  border-radius: 2.5pt;
}

19. UI Profile Card Design

Made by Mark Foxx. A simple Profile card with background gif. ( Source )

<!DOCTYPE html>
<html>
    <head>
        <title>Card Profile Design by Mark Foxx</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <link href="https://fonts.googleapis.com/css?family=Titillium+Web" rel="stylesheet">
        <script src="https://use.fontawesome.com/a504074e42.js"></script>
    </head>
    <body>
        <div class="card">
            <a href="https://youtube.com/user/markfoxxonline?sub_confirmation=1" class="card-add-me">&plus;</a>
            <div class="card-top">
                <img src="https://49.media.tumblr.com/f1cf2baa42a56c17a6f5c805a8438171/tumblr_mobt38ByG71sv7ja8o1_500.gif" class="card-image-bg"></img>
                <img src="https://api.tumblr.com/v2/blog/markfoxx.tumblr.com/avatar/512" class="card-image"></img>
            </div>
            <div class="card-bottom">
                <h1>Mark Foxx</h1>
                <p>Mark Foxx is a recording artist, singer songwriter, <a href="https://youtube.com/markfoxxonline"> producer</a>, web developer and programmer from England.</p>
                <div class="social">
                    <a href="https://twitter.com/markfoxx13" class="fa fa-twitter"></a>
                    <a href="https://youtu.be/6DRxXNKUjuM" class="fa fa-youtube"></a>
                    <a href="https://facebook.com/markfoxx13" class="fa fa-facebook"></a>
                </div>
            </div>
        </div>
    </body>
</html>


-------CSS--------


* {
   margin: 0; 
   padding: 0;
   box-sizing: border-box;
}
body, html {
   font-family: "Titillium Web", sans-serif;
   background-color: #d8e0e5;
}
a {
   color: rgba(38,83,155,0.8);
   text-decoration: none;
}
.card {
   position: absolute;
   top: 50%;
   left: 50%;
   color: #666c74;
   width: 260px;
   height: 370px;
   background-color: #fff;
   border-radius: 5px;
   box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.2);
   transform: translate(-50%, -50%);
   -webkit-transform: translate(-50%, -50%);
   -moz-transform: translate(-50%, -50%);
   -ms-transform: translate(-50%, -50%);
   -o-transform: translate(-50%, -50%);
}
.card-top {
   height: 130px;
   width: 100%;
   padding: 0;
}
.card .card-add-me {
   position: absolute;
   top: -20px;
   right: -20px;
   width: 40px;
   height: 40px;
   font-size: 35px;
   color: #fff; 
   text-align: center;
   line-height: 30px;
   background-color: #0c9e01;
   border-radius: 50%;
   box-shadow: 0 3px 4px rgba(0,0,0,0.8);
}
.card-bottom { 
   height: 100%;
   text-align: center;
   padding: 10px 0;
}
.card-bottom h1 {
   font-size: 24px;
   letter-spacing: 4px;
   padding-bottom: 10px;
   margin-top: 50px;
}
.card-bottom p {
   font-size: 15px; 
   padding: 0px 10px;
}
.card-bottom .social {
   position: absolute;
   bottom: 10px;
   width: 100%;
   height: 50px;
   border-radius: 0 0 5px 5px;
}
.social a {
   display: inline-block;
   color: inherit;
   font-size: 30px;
   padding: 0px 25px;
   transform: translate(-5px, 50%);
   -webkit-transform: translate(-5px, 50%);
   -moz-transform: translate(-5px, 50%);
   -ms-transform: translate(-5px, 50%);
   -o-transform: translate(-5px, 50%);
}
.card-top .card-image {
   position: absolute;
   top: 71px;
   left: 50%;
   width: 110px;
   height: 110px; 
   border: 4px solid #fff;
   border-radius: 50%;
   box-shadow: 0 5px 5px rgba(0,0,0,0.4);
   transform: translateX(-50%);
   -webkit-transform: translateX(-50%);
   -moz-transform: translateX(-50%);
   -ms-transform: translateX(-50%);
   -o-transform: translateX(-50%);
}
.card-top .card-image-bg {
   position: absolute;
   top: 0;
   left: 50%;
   width: 100%;
   height: 130px; 
   border-radius: 5px 5px 0px 0px;
   z-index: -1;
   transform: translateX(-50%);
   -webkit-transform: translateX(-50%);
   -moz-transform: translateX(-50%);
   -ms-transform: translateX(-50%);
   -o-transform: translateX(-50%);
}

20. Profile Card v.2

Made by Sohail. CSS Profile card with cool hover effects. ( Source )

  
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css">
  </head>
  <body>
    <div class="profile-card">
      <div class="top-section">
        <i  class="message fas fa-envelope"></i>
        <i class="notif fas fa-bell"></i>
        <div class="pic">
          <img src="https://www.dropbox.com/s/2smq5zwoui962z6/IMG_20200421_120010.jpg?raw=1"alt="">
        </div>
        <div class="name">Mohd Suhail ๐Ÿ‡ฎ๐Ÿ‡ณ</div>
        <div class="tag">Sololearner and 
        developer</div>
        <div class="tag"> Level-13 (10000+ XPs)</div>
        
      </div>

      <div class="bottom-section">
        <div class="social-media">
          <a href="https://www.facebook.com/md.suhail.3760430><i class="fab fa-facebook"></i></a>
          <a href="#"><i class="fab fa-twitter"></i></a>
          <a href="#"><i class="fab fa-instagram"></i></a>
          <a href="https://www.sololearn.com/Profile/15378386/?ref=app"><i class="fas fa-link"></i></a>
        </div>

        <div class="videos"> 85+<span>Followers</span></div>
        <div class="border"></div>
        <div class="subscribers">8 <span>Courses</span></div>
        <div class="border"></div>
        <div class="views">15 <span>Codes</span></div>
      </div>
    </div>
  </body>
</html>



-------CSS--------



*{
  margin: 0;
  padding: 0;
  font-family: "Open Sans",sans-serif;
  box-sizing: border-box;
  text-decoration: none;
}

body{
  background: url(bg.jpg) no-repeat center;
  background-size: cover;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.profile-card{
  width: 420px;
  overflow: hidden;
  text-align: center;
  position: relative;
  box-shadow: 0 0 10px #2c3e50;
}

.top-section{
  padding: 60px 40px;
  background: #ff5050;
}

.message,.notif{
  position: absolute;
  top: 40px;
  font-size: 20px;
  cursor: pointer;
  color: #ffffff50;
}

.message{
  right: 40px;
}

.notif{
  left: 40px;
}

.pic{
  width: 150px;
  height: 150px;
  margin: auto;
  margin-bottom: 20px;
  border: 2px solid #2c3e50;
  border-radius: 50%;
  padding: 8px;
  position: relative;
}

.pic:after{
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  border: 1px solid #2c3e50;
  left: 0;
  top: 0;
  box-sizing: border-box;
  border-radius: 50%;
  animation: wave 1.5s infinite linear;
}

@keyframes wave {
  to{
    transform: scale(1.5);
    opacity: 0;
  }
}

.pic img{
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.name{
  color: #f1f1f1;
  font-size: 28px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.tag{
  font-size: 18px;
  color: #222;
}

.bottom-section{
  background: #f1f1f1;
  padding: 60px 40px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  text-transform: uppercase;
}

.border{
  width: 1px;
  height: 20px;
  background: #bbb;
  margin: 0 30px;
}

.bottom-section span{
  font-size: 14px;
  display: block;
}

.social-media{
  position: absolute;
  width: 100%;
  top: -30px;
  left: 0;
  z-index: 1;
}

.social-media i{
  width: 60px;
  height: 60px;
  background: #2c3e50;
  border-radius: 50%;
  color: #f1f1f1;
  font-size: 20px;
  line-height: 60px !important;
  margin: 0 10px;
  position: relative;
}

.social-media i:after{
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  background: #2c3e50;
  left: 0;
  top: 0;
  box-sizing: border-box;
  border-radius: 50%;
  z-index: -1;
  transition: 0.4s linear;
}

.social-media i:hover:after{
  transform: scale(1.4);
  opacity: 0;
}

21. Profile card Gradient

Made by Aman. Profile card with gradient background. ( Source )


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Profile card</title>
    <link rel="stylesheet" href="Profilecard.css">
</head>
<body>
    <div class="wrapper">
            <div class="card-background">        
                <img src="https://api.sololearn.com/Uploads/Avatars/19741401.jpg 19741401"

                class="img">
                
                <div class="card-desc">
                    
                    <h1>โ—ๅ‚ฯปเธ„แโ˜†</h1>
                    
                    <br>
                    
                    <p>WEB DEVELOPER</p>
                    
                </div>
                
            </div>
            <a href="https://www.sololearn.com/Profile/19741401/?ref=app"><button>FOLLOW ME</button></a>
            
            <div class="card-footer">
                
                <div class="numbers">
                    
                    <div class="info">
                        
                        <span>10</span>
                        codes
                        
                    </div>
                    
                    <div class="line"></div>
                    
                    <div class="info">
                        
                        <span>374</span>
                        followers
                        
                    </div>
                    
                    <div class="line"></div>
                    
                    <div class="info">
                        
                        <span>19</span>
                        following
                        
                    </div>
                    
                </div>
                
            </div>
            
        </div>
        
    </div>

</body>

</html>


------CSS-------



*{
    margin: 0;
    padding: 0;
    /* background-color: black; */
    font-family: emoji;
    box-sizing: border-box;

}

body{
    background: url(https://dl.dropbox.com/s/unnf9d8sws3e50a/photo-1579546929518-9e396f3cc809.jpeg?dl=0)no-repeat center center fixed;
    /* background-color: rgb(176, 191, 255); */
    background-size: cover;

}

.wrapper{
    background-color:#f4f3f3;
    height: 400px;
    width: 310px;
    text-align: center;
    margin: 20%;
    margin: auto;
    border-radius: 10px;
    box-shadow: 2px 2px 13px black;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    overflow: hidden;
    /* cursor: pointer; */
    transition: 0.5s;
}

.card-background{
    background: linear-gradient(to right,#de554b,#f5e136);
    height: 120px;
    width: 100%;
    border-top-left-radius:10px;
    border-top-right-radius:10px;
}

.img{
    width: 100px;
    border-radius: 50%;
    position: relative;
    top: 72px;
    border: 7px solid #f4f3f3;
}

.card-desc{
    margin-top: 100px;
    padding: 10px;
}

h1{
    color: rgb(230 91 82);
    font-size: 20px;
    margin-top: -50px;
}

p{
    color: gray;
    margin-top: -5px;
}

button{
    margin-top: 130px;
    border: 2px solid rgb(255, 177, 177);
    height: 40px;
    width: 120px;
    font-size: 15px;
    border-radius: 10px;
    cursor: pointer;
    background-color:#e8e5e0;
    transition: all .3s ease-in;
    color:#fd9712;
}

button:hover{
    background:transparent;
    color:#fd9712;
    border: 3px solid #fd9712;
}

.card-footer{
    background-color:#e85a5a;
    padding: 35px 30px ;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    margin-top: 20px;
}

.info{
    text-transform: uppercase;
    flex: 1;
    color: #efb868;
    font-size: 14px;
}

.info span{
    display: block;
    color:#f4f4f4;
}
.numbers{
    display: flex;
    align-items: center;
}

.line{
    width: 3px;
    height: 30px;
    background: #d8d2d2;
    margin: 5px;
}

22. Animated Profile Card

Made by Ace. Profile card with a cool loading animation. ( Source )

<!-- DONT COPYWRITE WITHOUT MY PERMISSION -->
<aside class="profile-card">
  <header>
    <!-- hereโ€™s the avatar -->
    <a target="_blank" href="#">
      <img src="https://i.pinimg.com/280x280_RS/bc/aa/2a/bcaa2a9e0f365ce06bef5b807d8b79fc.jpg" class="hoverZoomLink">
    </a>

    <!-- the username -->
    <h1>
            Ace[๐ŸŽญTheOppossites๐ŸŽญ]
          </h1>

    <!-- and role or location -->
    <h2>
            Followers: 160 /  Following 525
          </h2>

  </header>

  <!-- bit of a bio; who are you? -->
  <div class="profile-bio">

    <p>
      Give this a thumbs up๐Ÿ‘ and follow me ๐Ÿ˜Š
    </p>

  </div>

  <!-- some social links to show off -->
  <ul class="profile-social-links">
    <li>
      <a target="_blank" href="https://www.facebook.com/creativedonut">
        <i class="fa fa-facebook"></i>
      </a>
    </li>
    <li>
      <a target="_blank" href="https://twitter.com/dropyourbass">
        <i class="fa fa-twitter"></i>
      </a>
    </li>
    <li>
      <a target="_blank" href="https://github.com/vipulsaxena">
        <i class="fa fa-github"></i>
      </a>
    </li>
    <li>
      <a target="_blank" href="https://www.behance.net/vipulsaxena">
       
        <i class="fa fa-behance"></i>
      </a>
    </li>
  </ul>
</aside>


------CSS-------


html {
  height: 100%;
}

body {
  overflow: hidden;
  background: #bcdee7 url("../img/bg.jpg") no-repeat center center fixed;
  background-size: cover;
  position: fixed;
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 100%;
  font: normal 14px/1.618em "Roboto", sans-serif;
  -webkit-font-smoothing: antialiased;
}

body:before {
  content: "";
  height: 0px;
  padding: 0px;
  border: 130em solid #313440;
  position: absolute;
  left: 50%;
  top: 100%;
  z-index: 2;
  display: block;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-animation: puff 0.5s 1.8s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards, borderRadius 0.2s 2.3s linear forwards;
  animation: puff 0.5s 1.8s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards, borderRadius 0.2s 2.3s linear forwards;
}

h1,
h2 {
  font-weight: 500;
  margin: 0px 0px 5px 0px;
}

h1 {
  font-size: 24px;
}

h2 {
  font-size: 16px;
}

p {
  margin: 0px;
}

.profile-card {
  background: #FFB300;
  width: 56px;
  height: 56px;
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  overflow: hidden;
  opacity: 0;
  margin-top: 70px;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-border-radius: 50%;
  border-radius: 50%;
  -webkit-box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16), 0px 3px 6px rgba(0, 0, 0, 0.23);
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16), 0px 3px 6px rgba(0, 0, 0, 0.23);
  -webkit-animation: init 0.5s 0.2s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards, moveDown 1s 0.8s cubic-bezier(0.6, -0.28, 0.735, 0.045) forwards, moveUp 1s 1.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, materia 0.5s 2.7s cubic-bezier(0.86, 0, 0.07, 1) forwards;
  animation: init 0.5s 0.2s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards, moveDown 1s 0.8s cubic-bezier(0.6, -0.28, 0.735, 0.045) forwards, moveUp 1s 1.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, materia 0.5s 2.7s cubic-bezier(0.86, 0, 0.07, 1) forwards;
}

.profile-card header {
  width: 179px;
  height: 280px;
  padding: 40px 20px 30px 20px;
  display: inline-block;
  float: left;
  border-right: 2px dashed #EEEEEE;
  background: #FFFFFF;
  color: #000000;
  margin-top: 50px;
  opacity: 0;
  text-align: center;
  -webkit-animation: moveIn 1s 3.1s ease forwards;
  animation: moveIn 1s 3.1s ease forwards;
}

.profile-card header h1 {
  color: #FF5722;
}

.profile-card header a {
  display: inline-block;
  text-align: center;
  position: relative;
  margin: 25px 30px;
}

.profile-card header a:after {
  position: absolute;
  content: "";
  bottom: 3px;
  right: 3px;
  width: 20px;
  height: 20px;
  border: 4px solid #FFFFFF;
  -webkit-transform: scale(0);
  transform: scale(0);
  background: -webkit-linear-gradient(top, #2196F3 0%, #2196F3 50%, #FFC107 50%, #FFC107 100%);
  background: linear-gradient(#2196F3 0%, #2196F3 50%, #FFC107 50%, #FFC107 100%);
  -webkit-border-radius: 50%;
  border-radius: 50%;
  -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
  -webkit-animation: scaleIn 0.3s 3.5s ease forwards;
  animation: scaleIn 0.3s 3.5s ease forwards;
}

.profile-card header a > img {
  width: 120px;
  max-width: 100%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  -webkit-transition: -webkit-box-shadow 0.3s ease;
  transition: box-shadow 0.3s ease;
  -webkit-box-shadow: 0px 0px 0px 8px rgba(0, 0, 0, 0.06);
  box-shadow: 0px 0px 0px 8px rgba(0, 0, 0, 0.06);
}

.profile-card header a:hover > img {
  -webkit-box-shadow: 0px 0px 0px 12px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 0px 0px 12px rgba(0, 0, 0, 0.1);
}

.profile-card .profile-bio {
  width: 175px;
  height: 180px;
  display: inline-block;
  float: right;
  padding: 50px 20px 30px 20px;
  background: #FFFFFF;
  color: #333333;
  margin-top: 50px;
  text-align: center;
  opacity: 0;
  -webkit-animation: moveIn 1s 3.1s ease forwards;
  animation: moveIn 1s 3.1s ease forwards;
}

.profile-social-links {
  width: 218px;
  display: inline-block;
  float: right;
  margin: 0px;
  padding: 15px 20px;
  background: #FFFFFF;
  margin-top: 50px;
  text-align: center;
  opacity: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-animation: moveIn 1s 3.1s ease forwards;
  animation: moveIn 1s 3.1s ease forwards;
}

.profile-social-links li {
  list-style: none;
  margin: -5px 0px 0px 0px;
  padding: 0px;
  float: left;
  width: 25%;
  text-align: center;
}

.profile-social-links li a {
  display: inline-block;
  color: red;
  width: 24px;
  height: 24px;
  padding: 6px;
  position: relative;
  overflow: hidden!important;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}

.profile-social-links li a i {
  position: relative;
  z-index: 1;
}

.profile-social-links li a img,
.profile-social-links li a svg {
  width: 24px;
}

@-webkit-keyframes init {
  0% {
    width: 0px;
    height: 0px;
  }
  100% {
    width: 56px;
    height: 56px;
    margin-top: 0px;
    opacity: 1;
  }
}

@keyframes init {
  0% {
    width: 0px;
    height: 0px;
  }
  100% {
    width: 56px;
    height: 56px;
    margin-top: 0px;
    opacity: 1;
  }
}

@-webkit-keyframes puff {
  0% {
    top: 100%;
    height: 0px;
    padding: 0px;
  }
  100% {
    top: 50%;
    height: 100%;
    padding: 0px 100%;
  }
}

@keyframes puff {
  0% {
    top: 100%;
    height: 0px;
    padding: 0px;
  }
  100% {
    top: 50%;
    height: 100%;
    padding: 0px 100%;
  }
}

@-webkit-keyframes borderRadius {
  0% {
    -webkit-border-radius: 50%;
  }
  100% {
    -webkit-border-radius: 0px;
  }
}

@keyframes borderRadius {
  0% {
    -webkit-border-radius: 50%;
  }
  100% {
    border-radius: 0px;
  }
}

@-webkit-keyframes moveDown {
  0% {
    top: 50%;
  }
  50% {
    top: 40%;
  }
  100% {
    top: 100%;
  }
}

@keyframes moveDown {
  0% {
    top: 50%;
  }
  50% {
    top: 40%;
  }
  100% {
    top: 100%;
  }
}

@-webkit-keyframes moveUp {
  0% {
    background: #FFB300;
    top: 100%;
  }
  50% {
    top: 40%;
  }
  100% {
    top: 50%;
    background: #E0E0E0;
  }
}

@keyframes moveUp {
  0% {
    background: #FFB300;
    top: 100%;
  }
  50% {
    top: 40%;
  }
  100% {
    top: 50%;
    background: #E0E0E0;
  }
}

@-webkit-keyframes materia {
  0% {
    background: #E0E0E0;
  }
  50% {
    -webkit-border-radius: 4px;
  }
  100% {
    width: 440px;
    height: 280px;
    background: #FFFFFF;
    -webkit-border-radius: 4px;
  }
}

@keyframes materia {
  0% {
    background: #E0E0E0;
  }
  50% {
    border-radius: 4px;
  }
  100% {
    width: 440px;
    height: 280px;
    background: #FFFFFF;
    border-radius: 4px;
  }
}

@-webkit-keyframes moveIn {
  0% {
    margin-top: 50px;
    opacity: 0;
  }
  100% {
    opacity: 1;
    margin-top: -20px;
  }
}

@keyframes moveIn {
  0% {
    margin-top: 50px;
    opacity: 0;
  }
  100% {
    opacity: 1;
    margin-top: -20px;
  }
}

@-webkit-keyframes scaleIn {
  0% {
    -webkit-transform: scale(0);
  }
  100% {
    -webkit-transform: scale(1);
  }
}

@keyframes scaleIn {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

@-webkit-keyframes ripple {
  0% {
    transform: scale3d(0, 0, 0);
  }
  50%,
  100% {
    -webkit-transform: scale3d(1, 1, 1);
  }
  100% {
    opacity: 0;
  }
}

@keyframes ripple {
  0% {
    transform: scale3d(0, 0, 0);
  }
  50%,
  100% {
    transform: scale3d(1, 1, 1);
  }
  100% {
    opacity: 0;
  }
}

@media screen and (min-aspect-ratio: 4/3) {
  body {
    background-size: cover;
  }
  body:before {
    width: 0px;
  }
  @ -webkit-keyframes puff {
    0% {
      top: 100%;
      width: 0px;
      padding-bottom: 0px;
    }
    100% {
      top: 50%;
      width: 100%;
      padding-bottom: 100%;
    }
  }
  @keyframes puff {
    0% {
      top: 100%;
      width: 0px;
      padding-bottom: 0px;
    }
    100% {
      top: 50%;
      width: 100%;
      padding-bottom: 100%;
    }
  }
}

@media screen and (min-height: 480px) {
  .profile-card header {
    width: auto;
    height: auto;
    padding: 30px 20px;
    display: block;
    float: none;
    border-right: none;
  }
  .profile-card .profile-bio {
    width: auto;
    height: auto;
    padding: 15px 20px 30px 20px;
    display: block;
    float: none;
  }
  .profile-social-links {
    width: 100%;
    display: block;
    float: none;
  }
  @ -webkit-keyframes materia {
    0% {
      background: #E0E0E0;
    }
    50% {
      -webkit-border-radius: 4px;
    }
    100% {
      width: 280px;
      height: 440px;
      background: #FFFFFF;
      -webkit-border-radius: 4px;
    }
  }
  @keyframes materia {
    0% {
      background: #E0E0E0;
    }
    50% {
      border-radius: 4px;
    }
    100% {
      width: 280px;
      height: 440px;
      background: #FFFFFF;
      border-radius: 4px;
    }
  }
}

23. Dark Profile Card UI Design

Made by Rohit Kumar Mandal. CSS Profile card with Slide up animation. ( Source )


<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Orelega+One&display=swap" rel="stylesheet">
    <title>Dark profile card </title>
</head>

<body>
<!--<div class="card">-->
  <div class="toggle"></div> 
  <div class="container"> 
   <div class="card"> 
    <div class="box"> 
     <div class="content"> 
 <div class="img"><img src="https://www.sololearn.com/Icons/Avatars/10594543.jpg" alt="" /></div>
 <div class="content ">
   <h4>Rohit Kumar Mandal </h4>
   <h5>Self Learner</h5>
   <p>Skills:- <br />
   HTML <br /> CSS <br /> Javascript <br /> Python 
   </p>
 </div>
 
 <div class="message"> Message </div>
 <div class="follow">follow</div>
</div>
<a href="https://youtube.com/c/E4EDM">GORD X ROHIT</a>
</body>

</html>


-------CSS-------



@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap'); 
*{
  font-family: 'Source Sans Pro', sans-serif;
  margin:0px;
  padding:0px;
  color:#C0C1D4D9;
}
body
{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #222327;
}
.container
{
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 1200px;
  flex-wrap: wrap;
  padding: 100px 0 50px;
}
.container .card
{
  position: relative;
  min-width: 320px;
  height: 500px;
  box-shadow: inset 5px 5px 5px rgb(241, 0, 0),
              inset -5px -5px 15px rgba(255,255,255,0.1),
              5px 5px 15px rgba(7, 255, 20, 0.945),
              -5px -5px 15px rgba(255,255,255,0.1);
  border-radius: 15px;
  margin: 30px;
}
.container .card .box
{
  position: absolute;
  top: 20px;
  left: 20px;
  right: 20px;
  bottom: 20px;
  background: #2a2b2f;
  border-radius: 15px;
  border: 2px solid #1e1f23;
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
  transition: transform 0.4s, box-shadow 0.4s;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container .card:hover .box
{
  transform: translateY(-50px);
  box-shadow: 0 40px 70px rgba(0,0,0,0.5);
}
.container .card .box .content
{
  padding: 20px;
  text-align: center;
}
/*
body{
  background:url("https://i.postimg.cc/YqkRsPvh/Screenshot-20210421-203804-2.png");
  background-size:cover;
  
}
.card{
  width: 300px;
  height:400px;
  background-color:rgba(255,255,255,0.06);
  border:5px solid rgba(255,255,255,0.06);
  border-radius:5px;
  box-shadow:5px 5px 10px rgba(0,0,0,0.5);
  backdrop-filter:blur(15px);
  text-align:center;
      position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    top: -50px;
    bottom: 0;
*/

  
}
.img{
  /*width:130px;
  height:130px;*/
  width: 500px;
  height: 500px;
  background-color:rgba(255,255,255,0.06);
  border-radius:50%;
  margin-top:10px;
  margin-left:80px;
}
img{
  width:110px;
  height:110px;
  border-radius:50%;
  margin:10px;
}
h4{
  margin-top:10px;
  font-size:20px;
}
h5{
  margin-top:20px;
  font-size:18px;
}
p{
  margin-top:10px;
  margin-left:20px;
  margin-right:20px;
  font-family: 'Orelega One', cursive;
}
.message{
  width:100px;
  height:30px;
  background-color:rgba(255,255,255,0.06);
  border-radius:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:2px solid #C0C1D4D9;
  position:relative;
  top:10px;
  left:-15px;
  color: white ;
  text-transform:uppercase;
}
.follow{
  width:100px;
  height:30px;
  background-color:rgba(255,255,255,0.06);
  border-radius:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:2px solid #C0C1D4D9;
  position:relative;
  top:-24px;
  left:120px;
  text-transform:uppercase;
  color: white ;
}
a{
  width:250px;
  height:40px;
  background-color:rgba(255,255,255,0.06);
  text-align:center;
  position:absolute;
  font-family: 'Orelega One', cursive;
  display:flex;
  align-items:center;
  justify-content:center;
  text-transform: uppercase;
  text-decoration:none;
  backdrop-filter:blur(10px);
  position: absolute;
  margin: auto;
  left: 0;
    right: 0;
    top: -4;
    bottom: 0;
   /* border:5px solid #121debd9;
    border-radius:10px;
    left: 0;
    right: 0;
    top: -5;
    bottom: 0;
    color: white;*/
    box-shadow: inset 5px 5px 5px rgb(241, 0, 0),
              inset -5px -5px 15px rgba(255,255,255,0.1),
              5px 5px 15px rgba(7, 255, 20, 0.945),
              -5px -5px 15px rgba(255,255,255,0.1);
  border-radius: 10px;
  
}

24. Animated Profile Card

Made by SwapniL. Profile card with fade effect on hover. ( Source )


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>UnTitLed</title>
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Ubuntu:[email protected]&display=swap');
  </style>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <style>
    *{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Ubuntu', sans-serif;
    }
    body{
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: burlywood;
    }
    .card{
      height: 250px;
      width: 220px;
      display: flex;
      justify-content: center;
      background-color: yellowgreen;
      position: relative;
      overflow: hidden;
      box-shadow: 
      0em 0.6em 1.2em rgba(0, 0, 0, 0.3);
    }
    .dp{
      height: 100%;
      width: 100%;
      position: absolute;
      background-image: url('https://blob.sololearn.com/avatars/28fccba9-d1e4-4e0c-b228-c9ecc7cce0ac.jpg');
      background-position: center;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      transition: all 0.5s;
    }
    .card:hover .dp{
      width: 100px;
      height: 100px;
      border-radius: 50%;
    }
    .card:hover span{
      opacity: 1;
      transform:  translateY(0px);
    }
    .card:hover .content {
      opacity: 1;
      transform:  translateY(20px);
    }
    .connections{
      position: absolute;
      bottom: 0px;
      display: flex;
      align-items: flex-end;
    }
    .connections span{
      display: block;
      height: 50px;
      width: 50px;
      color: white;
      margin: 0.3em;
      padding: 0.27em;
      font-size: 2em;
      background-color: slateblue;
      border-radius: 50%;
      font-family: "Material Icons";
      opacity: 0;
      transition: all 1s var(--delay);
      transform:  translateY(50px);
    }
    .content{
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      transform: translateY(40px);
      opacity: 0;
      transition: all 1s 0.1s;
      font-size: 1.5em;
    }
    .connections span:nth-child(1){
      --delay : 0ms;
    }
    .connections span:nth-child(2){
      --delay : 200ms;
    }
    .connections span:nth-child(3){
      --delay : 400ms;
    }

/* CSS rules for youtube link (start) */
    .yt{
      height : 20px;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      bottom: 20px;
     }
    .yt > a{
      display : flex;
      align-items : center;
      text-decoration : none;
      color : white;
      font-size : 1.2em;
      border-radius: 0.5em;
      padding: 0.4em 1em;
      background-color: slateblue;
    }
/* CSS rules for youtube link (end) */
  </style>
</head>
<body>
  <div class="card">
    <div class="dp"></div>
    <div class="content">
      <h2>SwapniL</h2>
      <p>India</p>
    </div>
    <div class="connections">
      <span class="material-icons-outlined">
        person
      </span>
      <span class="material-icons-outlined">
        email
      </span>
      <span class="material-icons-outlined">
        whatsapp
      </span>
    </div>
  </div>
<!-- markup for youtube link (starts) -->
  <div class="yt">
    <a href="https://youtu.be/vjc2nwojR0E" target="_blank">let's learn</a>
  </div>
<!-- markup for youtube link (ends) -->
</body>
</html>

25. Cool Profile Card Effect

Made by Mitali. CSS Profile card with slide and hover effects. ( Source )

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Cool Profile Card</title>
  </head>
  <body>
    <div class="container">
      <div class="card">
        <img src="https://i.postimg.cc/wT8D7Rj0/Webp-net-compress-image.jpg" />
        <h5>Market Research Analyst</h5>
        <h3>Stephen Brown</h3>
      </div>
      <a href="https://youtu.be/TaaHqo9o3Bo" target="_blank"
        >My Youtube Channel</a
      >
    </div>
  </body>
</html>


-------CSS--------


* {
        padding: 0;
        margin: 0;
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        font-family: "Poppins", sans-serif;
      }
      body {
        background-color: #5ca3ff;
      }
      .container {
        width: 320px;
        position: absolute;
        -webkit-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
                transform: translateX(-50%);
        left: 50%;
        top: 30px;
      }

      .card {
        width: 100%;
        height: 450px;
        position: relative;
        overflow: hidden;
        background-color: #ffffff;
        -webkit-box-shadow: 0 35px 65px rgb(6, 34, 70, 0.6);
                box-shadow: 0 35px 65px rgb(6, 34, 70, 0.6);
      }
      a {
        display: block;
        background-color: #ffffff;
        text-align: center;
        padding: 15px 0;
        font-size: 18px;
        color: #000000;
        font-weight: 600;
        text-decoration: none;
        margin-top: 30px;
        -webkit-transform: skew(-5deg);
            -ms-transform: skew(-5deg);
                transform: skew(-5deg);
        -webkit-box-shadow: 0 35px 65px rgb(6, 34, 70, 0.6);
                box-shadow: 0 35px 65px rgb(6, 34, 70, 0.6);
      }
      .card img {
        width: 100%;
        -webkit-transition: 0.5s;
        -o-transition: 0.5s;
        transition: 0.5s;
      }
      h3 {
        background-color: #5ca3ff;
        width: 60%;
        padding: 10px 0;
        color: #ffffff;
        text-align: center;
        letter-spacing: 1px;
        font-size: 20px;
        font-weight: 600;
        position: absolute;
        bottom: 80px;
        right: -65%;
        -webkit-transform: skew(-5deg);
            -ms-transform: skew(-5deg);
                transform: skew(-5deg);
        -webkit-transition: 0.3s;
        -o-transition: 0.3s;
        transition: 0.3s;
      }
      h5 {
        background-color: #ffffff;
        padding: 12px 0;
        width: 80%;
        text-align: center;
        font-size: 16px;
        letter-spacing: 0.5px;
        position: absolute;
        right: -85%;
        bottom: 37px;
        -webkit-transform: skew(-5deg);
            -ms-transform: skew(-5deg);
                transform: skew(-5deg);
        -webkit-transition: 0.3s;
        -o-transition: 0.3s;
        transition: 0.3s;
      }
      .card:hover h3,
      .card:hover h5 {
        right: -2%;
      }
      .card:hover img {
        -webkit-transform: scale(1.15);
            -ms-transform: scale(1.15);
                transform: scale(1.15);
        -webkit-filter: contrast(120%);
                filter: contrast(120%);
      }

26. Animated Glass Profile Card

Made by Qasim. Animated Glass Profile Card with cool effects. ( Source )

<!DOCTYPE html>
<html>
    <head>
        <title>Profile Card</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" 
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet">
    </head>
    <!-- | CREATED BY QASIM | -->
    <body>
        <div class="card animated fadeInDown">
            <div class="profile animated zoomIn">
                <img src="https://dl.dropbox.com/s/6lav0v4cujyfmdn/Qasim_Profile.jpg">
            </div>
            <h2 class="animated fadeInRight">Qasim</h2>
            <p class="animated fadeInLeft">Web Designer</p>
            <a href="https://www.sololearn.com/Profile/18059019/?ref=app" class="btn btn1 animated fadeInLeft">Follow <i class="fa fa-user-plus"></i></a>
            <a href="https://www.sololearn.com/Profile/18059019/?ref=app" class="btn btn2 animated fadeInRight">Contact <i class="fa fa-info-circle"></i></a>
            <div class="social animated fadeInUp">
                <a href="https://www.facebook.com/qasim.sarwari.10"><i class="fa fa-facebook-official"></i></a>
                <a href="https://www.instagram.com/qa_sim345"><i class="fa fa-instagram"></i></a>
                <a href="https://www.twitter.com/QasimSarwari3"><i class="fa fa-twitter"></i></a>
                <a href="https://www.youtube.com/channel/UCRyEaWppR-X0AfXR6gFxbWw"><i class="fa fa-youtube-play"></i></a>
            </div>
        </div>
    </body>
</html>


------CSS-------


@import url(https://fonts.googleapis.com/css2?family=Roboto&display=swap);
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,[email protected],400;1,700&display=swap');
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Roboto';
}
/* CREATED BY QASIM */
body{
 background:url("https://i.postimg.cc/28qSKT1Q/Screenshot-20210209-172754.png");
  background-size:cover;
  display:flex;
  height:100vh;
  justify-content:center;
  align-items:center;
}
.card{
    width:320px;
    height:420px;
    text-align:center;
    overflow:hidden;
    color:#fff;
    backdrop-filter:blur(15px);
    border-radius:10px;
    border:0.5px solid #fff;
}
.card:before{
    position:fixed;
    content:'';
    top:-10%;
    left:-10%;
    width:120px;
    height:120px;
    border-radius:50%;
    background:linear-gradient(140deg,red,orange);
    z-index:-1;
}
.card .profile{
    width:130px;
    height:130px;
    margin:10% auto;
    margin-bottom:0;
    border:2px solid #fff;
    border-radius:50%;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    animation-delay:1s;
}
.card .profile img{
    width:100%;
    height:100%;
    border-radius:50%;
}
.card .profile:before{
    content:'';
    position:absolute;
    width:90%;
    height:90%;
    border-radius:50%;
    border:2px solid #fff;
    animation:rot 1s linear infinite ;
    z-index:-1;
}
.card h2{
    padding-top:20px;
    padding-bottom:10px;
    font-weight:600;
    animation-delay:1.5s;
}
.card p{
    font-size:20px;
    letter-spacing:1px;
    font-family:'Josefin Sans';
    animation-delay:1.5s;
}
.card .btn1{
    display:block;
    text-decoration:none;
    color:#000;
    background:#fff;
    padding:10px 15px;
    margin:15px 0;
    float:right;
    border-radius:20px 0 0 20px;
    margin-bottom:50px;
    direction:rtl;
    animation-delay:2s;
}
.card .btn2{
    display:block;
    text-decoration:none;
    color:#000;
    background:#fff;
    padding:10px 12px;
    margin:15px 0;
    float:left;
    border-radius:0 20px 20px 0;
    animation-delay:2s;
}
.card .btn:hover{
    background:#39f;
    padding:10px 20px;
    color:#fff;
    transition:0.5s;
}
.card .social{
    height:60px;
    width:100%;
    display:flex;
    justify-content:center ;
    animation-delay:2.5s;
}
.card .social a{
    padding:10px 12px;
    color:#fff;
    font-size:25px;
    text-decoration:none ;
}
@keyframes rot{
    0%{
        width:90%;
        height:90%;
        opacity:0;
    }
    100%{
        width:120%;
        height:120%;
        opacity:1;
    }
}

27. Glassmorphism Profile Card

Made by Rohit Sharma. Glassmorphism Profile Card without any effects. ( Source )

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="Card.css"/>
    <link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Orelega+One&display=swap" rel="stylesheet">
    <title>Glassmorphism profile card </title>
</head>

<body>
<div class="card">
 <div class="img"><img src="https://i.postimg.cc/yxTmKVDW/istockphoto-1077319784-612x612-2.jpg" alt="" /></div>
 <div class="content ">
   <h4>Rohit Sharma</h4>
   <h5>Front-end Developer</h5>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
 </div>
 <div class="message">Message </div>
 <div class="follow">follow</div>
</div>
<a href="https://youtu.be/Nrl6dkNR480">Learn to code </a>
</body>

</html>


------CSS------


@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap'); 
*{
  font-family: 'Source Sans Pro', sans-serif;
  margin:0px;
  padding:0px;
  color:#C0C1D4D9;
}
body{
  background:url("https://i.postimg.cc/YqkRsPvh/Screenshot-20210421-203804-2.png");
  background-size:cover;
  
}
.card{
  width: 300px;
  height:400px;
  background-color:rgba(255,255,255,0.06);
  border:2px solid rgba(255,255,255,0.06);
  border-radius:5px;
  box-shadow:5px 5px 10px rgba(0,0,0,0.5);
  backdrop-filter:blur(15px);
  text-align:center;
      position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    top: -50px;
    bottom: 0;

  
}
.img{
  width:130px;
  height:130px;
  background-color:rgba(255,255,255,0.06);
  border-radius:50%;
  margin-top:10px;
  margin-left:80px;
}
img{
  width:110px;
  height:110px;
  border-radius:50%;
  margin:10px;
}
h4{
  margin-top:10px;
  font-size:20px;
}
h5{
  margin-top:20px;
  font-size:18px;
}
p{
  margin-top:10px;
  margin-left:20px;
  margin-right:20px;
  font-family: 'Orelega One', cursive;
}
.message{
  width:100px;
  height:30px;
  background-color:rgba(255,255,255,0.06);
  border-radius:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid #C0C1D4D9;
  position:relative;
  top:10px;
  left:30px;
  color: white ;
  text-transform:uppercase;
}
.follow{
  width:100px;
  height:30px;
  background-color:rgba(255,255,255,0.06);
  border-radius:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid #C0C1D4D9;
  position:relative;
  top:-20px;
  left:170px;
  text-transform:uppercase;
  color: white ;
}
a{
  width:300px;
  height:40px;
  background-color:rgba(255,255,255,0.06);
  text-align:center;
  position:absolute;
  
  display:flex;
  align-items:center;
  justify-content:center;
  text-transform: uppercase;
  text-decoration:none;
  backdrop-filter:blur(10px);
     position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    top: 490px;
    bottom: 0;
    color: white;
}

28. Profile Card Spin Animation

Made by LynTon. Simple Profile Card. ( Source )

<!DOCTYPE HTML>
<html lang="en-GB">
<head>
    <meta charset="UTF-8" />
    <meta name="author" content="Lyndon Panton" />
    <meta name="description" content="A profile card made using css" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Profile Card</title>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.css" />
<!--     <link rel="stylesheet" type="text/css" href="./css/styles.css" /> -->
<!--     <script type="text/javascript" src="./js/app.js"></script> -->
</head>
<body>
    <main id="card">
        <section id="top">
            <!-- 
                Photographer: https://unsplash.com/@marcmarchal
                Source: https://unsplash.com/photos/aeQe__O0kS0
            -->
            <img id="profile-image" src="https://images.unsplash.com/photo-1507022693206-8e43713b264b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" alt="Template profile image" />
        </section>
        <section id="info">
            <p id="name" class="info-row"><i class="fas fa-signature"></i> <span class="info-label">Name:</span> <span id="name-value" class="info-value">LynTon</span></p>
            <p id="role" class="info-row"><i class="fas fa-briefcase"></i> <span class="info-label">Role:</span> <span id="role-value" class="info-value">Web Developer</span></p>
            <p id="location" class="info-row"><i class="fas fa-globe-europe"></i> <span class="info-label">Location:</span> <span id="location-value" class="info-value">London, England</span></p>
        </section>
        <section id="footer">
            <a id="more-github" class="more-link" href="https://github.com/LyndonPanton" target="_blank"><i class="fab fa-github"></i></a>
            <a id="more-codepen" class="more-link" href="https://codepen.io/LP4" target="_blank"><i class="fab fa-codepen"></i></a>
            <a id="more-sololearn" class="more-link" href="https://www.sololearn.com/Profile/4905163" target="_blank"><i class="fas fa-palette"></i></a>
        </section>
    </main>
</body>
</html>


------CSS------


@charset "UTF-8";

body, html {
    margin: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    background-color: lightblue;
    background: -ms-linear-gradient(to right, #224B8B 0%, #224B8B 10%, #3BABFD 10%, #3BABFD 20%, #6DC1FF 20%, #6DC1FF 30%, #06CDF4 30%, #06CDF4 40%, #B2DDFF 40%, #B2DDFF 50%, #B2DDFF 50%, #B2DDFF 60%, #06CDF4 60%, #06CDF4 70%, #6DC1FF 70%, #6DC1FF 80%, #3BABFD 80%, #3BABFD 90%, #224B8B 90%);
    background: -moz-linear-gradient(to right, #224B8B 0%, #224B8B 10%, #3BABFD 10%, #3BABFD 20%, #6DC1FF 20%, #6DC1FF 30%, #06CDF4 30%, #06CDF4 40%, #B2DDFF 40%, #B2DDFF 50%, #B2DDFF 50%, #B2DDFF 60%, #06CDF4 60%, #06CDF4 70%, #6DC1FF 70%, #6DC1FF 80%, #3BABFD 80%, #3BABFD 90%, #224B8B 90%);
    background: -o-linear-gradient(to right, #224B8B 0%, #224B8B 10%, #3BABFD 10%, #3BABFD 20%, #6DC1FF 20%, #6DC1FF 30%, #06CDF4 30%, #06CDF4 40%, #B2DDFF 40%, #B2DDFF 50%, #B2DDFF 50%, #B2DDFF 60%, #06CDF4 60%, #06CDF4 70%, #6DC1FF 70%, #6DC1FF 80%, #3BABFD 80%, #3BABFD 90%, #224B8B 90%);
    background: -webkit-linear-gradient(to right, #224B8B 0%, #224B8B 10%, #3BABFD 10%, #3BABFD 20%, #6DC1FF 20%, #6DC1FF 30%, #06CDF4 30%, #06CDF4 40%, #B2DDFF 40%, #B2DDFF 50%, #B2DDFF 50%, #B2DDFF 60%, #06CDF4 60%, #06CDF4 70%, #6DC1FF 70%, #6DC1FF 80%, #3BABFD 80%, #3BABFD 90%, #224B8B 90%);
    background: linear-gradient(to right, #224B8B 0%, #224B8B 10%, #3BABFD 10%, #3BABFD 20%, #6DC1FF 20%, #6DC1FF 30%, #06CDF4 30%, #06CDF4 40%, #B2DDFF 40%, #B2DDFF 50%, #B2DDFF 50%, #B2DDFF 60%, #06CDF4 60%, #06CDF4 70%, #6DC1FF 70%, #6DC1FF 80%, #3BABFD 80%, #3BABFD 90%, #224B8B 90%);
    text-align: center;
    font-family: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
    font-size: 16px;
    color: black;
}

p {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 2%;
    padding-bottom: 2%;
}

.fas {
    align-self: flex-start;

    width: 8%;
}

.info-label {
    align-self: flex-start;

    padding-left: 2%;
}

.info-row {
    display: flex;
    flex-direction: row;

    padding: 5% 0 5% 2%;
}

.info-value {
    position: absolute;
    right: 4%;
}

.more-link {
    width: 35px;
    height: 35px;
    color: black;
    -moz-transition: 1s;
    -ms-transition: 1s;
    -o-transition: 1s;
    -webkit-transition: 1s;
    transition: 1s;
}

.more-link:hover {
    color: blue;
    -moz-transition: 1s;
    -ms-transition: 1s;
    -o-transition: 1s;
    -webkit-transition: 1s;
    transition: 1s;
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    
}

#card {
    position: relative;
    top: 8%;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    border: 2px black solid;
    border-radius: 4%;
    width: 250px;
    height: 400px;
    background-color: indianred;
}

#footer {
    display: flex;
    flex-direction: row;
    justify-content: space-around;

    border-bottom-right-radius: 5%;
    border-bottom-left-radius: 5%;
    height: 40px;
    background-color: lightgreen;
    font-size: 1.2em;
}

#info {
    height: 160px;
    background-color: lightgreen;
}

#profile-image {
    border: 4px yellow solid;
    border-radius: 50%;
    margin-top: 5%;
    margin-bottom: 5%;
    width: 160px;
    height: 160px;
    transition: 0.5s all linear;
}

#profile-image:hover {
    transform: rotate(360deg);
    border-color: cyan;
}

#top {
    height: 200px;
}

29. Profile Card Basic

Made by Aditya. ( Source )

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <div class="Shreyash">
            <div class="top">
                <img class="dp" src="https://api.sololearn.com/Uploads/Avatars/23122139.jpg">
            </div><br><br>
            <h3>PassionateCoder</h3>
            <p>54 Followers | 16 following<br>
                3 Code Bits
            </p>
        </div>
    </body>
</html>


------CSS------


@import url('https://fonts.googleapis.com/css2?family=Poppins:[email protected]&display=swap');


body {
       font-family:'Poppins';
   background:#467F8E;

}
.Shreyash{
    height:80vh;
   min-width:85vw;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    background-color:white;

}
.top{
    height:30vh;
    border-bottom:10px solid #8B0000;
       background: #314469;
       margin-top:-0.1rem;
}

.dp{
    height:20vh;
    width:20vh;
    border-radius:50%;
    border:8px solid #8B0000;
    position:absolute;
    top:40%;
    left:50%;
    transform:translate(-50%,-50%);
    

}
h3{
     position:absolute;
    top:55%;
    left:50%;
    transform:translate(-50%,-50%);
    color:#8B0000;
   
}
p{
         position:absolute;
    top:70%;
    left:50%;
    transform:translate(-50%,-50%);
    width:80vw;
    text-align:center;
    color:grey;
}

30. ELON MUSK PROFILE CARD

Made by SPY CODER. Profile card with hover effect. ( Source )

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Profile card Hover Effect</title>
<link rel=stylesheet href="style.css">
        <body>
  <div class="profile-card">
  <div class="picture">
  </div>      
  <div class="bio">
  <h1>Elon Musk</h1>
      <h5>Co Founder</h5>
      <p>Elon Reeve Musk FRS  born June 28, 1971) is an entrepreneur and business magnate. He is the founder, CEO, and Chief Engineer at SpaceX; early-stage investor, CEO, and Product Architect of Tesla, Inc.; founder of The Boring Company; and co-founder of Neuralink and OpenAI.</p>
      </div>
      </div>
    
       <a href="https://youtu.be/exTouCKky8Q">Let,s Learn</a>
</body>
</html>


-----CSS-----


body{
  width:100%;
  height: 100vh;
    background-color:#000;
  display: flex;
  align-items:center;
  justify-content:center;
    
    
}

.profile-card{
    height: 260px;
    width: 240px;
    padding: 15px;
    margin: 100px auto;
    background-color:#FF8C00;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    position:relative;
    background-image:linear-gradient(45deg,rgb(255,0,0),rgba(0,0,255,0.65));
    opacity:.5;
    box-shadow:  0px 1px 40px rgba(255,0,0,0.65),0px  -1px 30px rgba(0,0,255,0.65);
    
    
    
}
.picture{
   width: 290px;
    height: 290px;
    background-image: url("https://media.architecturaldigest.com/photos/60e71db5ab269c67afc7e283/3:4/w_1500,h_2000,c_limit/GettyImages-1215628293.jpg");
    background-size: cover;
    border-radius: 10px;
    background-position: center;
    position: absolute;
    top: 0;
    z-index: 1;
    transition: .5s;
}

 

.bio{
  color: #fff;
    text-align: center;
    opacity: 0;
    
}
.bio h5{
margin-top: -15px;
}
.bio p{
    font-size: 13px;
    text-align: justify;
}
.profile-card:hover .picture{
    width: 50px;
    height: 50px;
    border: 1px solid rgb(21,2,131);
    border-radius: 50%;
    top: -30px;
}
.profile-card:hover .bio{
    transition: 1s;
    transform: scale(1);
    opacity: 1;
}

a{
  position:fixed ;
  top:90%;
  left:50%;
  transform:translate(-50%,-50%);
  background-color:#FFE419;
width:150px;
text-align:center;
  color:#000;
  font-weight:999;
  font-size:4vw;
  height:35px ;
  font-size:20px;
  padding-top:5px;
  border-radius:5px;
 margin-bottom:5vw;
}

31. Basic Profile Card

Made by Sneha. ( Source )

<!DOCTYPE html>
<html>
    <head>
        <title>My Profile Card</title>
    </head>
    <body>
    
        <div class="card">
            <img src="https://api.sololearn.com/Uploads/Avatars/11598174.jpg">
            <h2>Sneha.17</h2>
            <center><h3>ABOUT:<br/>My name is Sneha. Study in class 10. I love coding. I want to become a Web Designer.</h3>
                <h3>I Love:</br>Dogs๐Ÿ•</br>Cats๐Ÿˆ</br>Sketching.</h3>
            </center>
            <a href="https://www.sololearn.com/Profile/11598174/?ref=app">Follow me</a>
            
        </div>
    </body>
</html>


-----CSS-----


    body {
       margin:0;
       padding:0;
       background-color:#1A5276;
    }
   .card{
       height:320px;
       width:250px;
       background-color:white;
       border-radius:15px;
       position:absolute;
       margin:auto;
       box-shadow:2px 2px 6px 6px #1F618D;
       left:0;
       right:0;
       bottom:0;
       top:0;
    }
    img{
       border-radius:50%;
       height:34%;
       width:36%;
       position:relative;
       border:solid #1A5276 8px;
       left:75px;
       top:-60px;
      background-color:#1A5276;
    }
   h2{
       position:relative;
       left:75px;
       top:-75px;
       font-family:serif;
    }
    h3{
       font-family:monospace;
       position:relative;
       top:-75px;
    }
    a{
       position: relative;
       left:25px;
       display: block;
       bottom:85px;
       font-size: 25px;
       font-family: serif;
       color:purple;
       text-decoration: none;
       background-color:#F8C471;
       width: 80%;
       padding: 12px 0px;
       font-weight: 600;
       text-align: center;
       box-shadow:0px 0px 1px 1px #F5B041;
       }

32. Profile Card Minimalistic

Made by Ejiofor Celestine. Minimalistic CSS Profile Card with no effects. ( Source )

<!DOCTYPE html>
<html lang="en">
<head>
                <title>Profile Card</title>
                <link rel="stylesheet" href="/storage/emulated/0/Android/data/com.teejay.trebedit/files/TrebEdit user files/LIight mode dark mode Profile card/style.css">
                <link rel="preconnect" href="https://fonts.googleapis.com"> 
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 
                <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
                
                <div class="container">
                                <div class="intro">
                                                <img src="https://images.unsplash.com/photo-1459356979461-dae1b8dcb702?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80" alt="">        
                                                <h1>Ejiofor Celestine</h1>
                                                <h3>LEVEL 9</h3>
                                                <p>
                                                My name is Ejiofor Celestine. I am a web developer. I am from Nigeria
                                                </p>
                                                <span>
                                                                <button id="first-btn">Follow</button>
                                                                <button id="second-btn">Message</button>
                                                </span>
                                </div>
                                <span id="account">
                                                <i class="fa fa-facebook"></i>
                                                <i class="fa fa-instagram"></i>
                                                <i class="fa fa-twitter" aria-hidden="true"></i>        
                                </span>
                                </div>
                    </div>
</body>
</html>


-------CSS--------


*{
                font-family: Poppins;
                margin: 0;
                padding: 0;
                /* border: 2px solid white; */
}
body{
                background-color: #334756;
}

.container{
                display: flex;
                align-items: center;
                flex-direction: column;
                box-shadow:0px 30px 60px rgba(0,0,0,.5);
                width: 270px;
                height: 400px;
                padding:15px 10px;
                background-color: #33475b;
                color: white;background: ;
                position: absolute;     
                top:0;     
                bottom: 0;
                left: 0;     
                right: 0;      
                margin: auto;
}
.intro{
                display: flex;
                flex-direction: column;
                align-items: center;
                margin-top: 20px;
}
h1{
                margin:5px auto;
                font-size: 20px;
}
p{
                font-weight: light;
                font-size: 12px;
                margin: 7px auto;
                width: 80%;
                text-align: center;
}
h3{
                font-weight: light;
                font-size: 13px;
       color:#ff4c29;
}
img{
                border-radius: 55% 0%; 
                border:2px solid #ff4c29;
                width:120px;
                padding: 4px;
                margin-bottom: 30px;
}
button{
                outline: none;
                border: 1px solid #ff4c29;
                width: 90px;
                height: 30px;
                margin: 10px 5px;
                color: white;
                background: #33475b;
}
#first-btn{
                background-color: #ff4c29;
                color: white;
}
#account{        
                position: absolute;
                bottom: 0;
                margin-bottom: 10px;
}
#account i{
                margin: 20px;
                color: #ff4c29;
}