CodePen Embed - Profile Card (Envato Codepen Remix)

<!-- 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 target="_blank" href="https://twitter.com/xxdionxx">
      <img src="https://www.dropbox.com/s/9upq789hxnhs361/ava.gif?raw=1">
    </a>

    <!-- the username -->
    <h1>Dion Pramadhan</h1>
    
    <!-- and role or location -->
    <h2>Product Designer</h2>
    
  </header>
  
  <!-- bit of a bio; who are you? -->
  <div class="profile-bio">
    
    <p>I’m half unicorn and half biscuits. I design <b>ui + ux</b>, i code the <b>frontend</b>, and i love
<b>motion design</b></p>
    
  </div>
  
  <!-- some social links to show off -->
  <ul class="profile-social-links">
    
    <!-- twitter - el clásico  -->
    <li>
      <a target="_blank" href="https://twitter.com/xxdionxx">
        <i class="fa fa-twitter"></i>
      </a>
    </li>
    
    <!-- envato – use this one to link to your marketplace profile -->
    <li>
      <a target="_blank" href="https://dribbble.com/xdionx">
        <i class="fa fa-dribbble"></i>
      </a>
    </li>
    
    <!-- codepen - your codepen profile-->
    <li>
      <a target="_blank" href="https://codepen.io/xdionx/">
        <i class="fa fa-codepen"></i>
      </a>
    </li>
    
    <!-- add or remove social profiles as you see fit -->
    
  </ul>
  
</aside>
<!-- that’s all folks! -->

@import url(https://fonts.googleapis.com/css?family=Roboto:400,500);
@import url(https://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css);

// mixin
@mixin keyframes($animation-name) {
  @-webkit-keyframes #{$animation-name} {
    @content;
  }
  @-moz-keyframes #{$animation-name} {
    @content;
  }  
  @-ms-keyframes #{$animation-name} {
    @content;
  }
  @-o-keyframes #{$animation-name} {
    @content;
  }  
  @keyframes #{$animation-name} {
    @content;
  }
}
@mixin animation($str...) {
  -webkit-animation: #{$str};
  -moz-animation: #{$str};
  -ms-animation: #{$str};
  -o-animation: #{$str};
  animation: #{$str};      
}
@mixin transition($val) {
	-webkit-transition: $val;
	   -moz-transition: $val;
	    -ms-transition: $val;
	     -o-transition: $val;
	        transition: $val;
}
@mixin transition-delay($val) {
	-webkit-transition-delay: $val;
	   -moz-transition-delay: $val;
	    -ms-transition-delay: $val;
	     -o-transition-delay: $val;
	        transition-delay: $val;
}
@mixin transform($val) {
	-webkit-transform: $val;
	   -moz-transform: $val;
	    -ms-transform: $val;
	     -o-transform: $val;
	        transform: $val;
}
@mixin transform-origin($val) {
	-webkit-transform-origin: $val;
	   -moz-transform-origin: $val;
	    -ms-transform-origin: $val;
	     -o-transform-origin: $val;
	        transform-origin: $val;
}
*, *:before, *:after {
	box-sizing: border-box;
	@include transition(all cubic-bezier(0.37, 0.15, 0.54, 1.99) .5s);
}
body {
	margin: 0;
	font-family: 'Roboto', sans-serif;
	position: relative;
	&:before {
		content: '';
		position: fixed;
		display: inherit;
		background-color: #29d08a;
		width: 2500px;
		height: 2500px;
		top: 0;
		border-radius: 50%;
		left: 50%;
		margin-left: -1250px;
		top: 50%;
		margin-top: -1200px;
		@include animation(closeBody 1s ease forwards 1s);
	}
}
// color control
$green: #29d08a; 
$white: #fff;
$black: #000;
$silver: #e6eef1;
$slate: #4e5b6b;

body {
  background-color: $silver;
  @include transform(translateZ(0));
}

aside {
	text-align: center;
	display: block;
	background-color: $green;
	width: 284px;
	height: 380px;
	margin: auto;
	border: solid 10px $white;
	box-shadow: 0 0 10px transparentize($black, .8);
	position: relative;
	margin-top: 150px;
	@include animation(showAside .25s ease forwards 2s);
	opacity: 0;
	header {

	}
	&:hover, &:focus {
		margin-top: 100px;
		height: 530px;
		box-shadow: 0 0 25px transparentize($black, .8);

		.profile-bio {
			// top: -55px;
			// opacity: 1;
			// visibility: visible;
		}
		header {
			padding-top: 106px;
			h1 {
				top: 332px;
			}
			h2 {
				top: 390px;
			}
		}
		.profile-social-links {
			bottom: 0;
		}
	}

}
header {
	padding: 74px 0 35px;
	width: 100px;
	margin: auto;
	a {
		display: inline-block;
		text-align: center;
		position: relative;
		width: 100px;
		height: 208px;
		// border-bottom: solid 3px rgba(0, 0, 0, 0.15);
		border-bottom: solid 3px darken($green, 5%);
		// opacity: 0;
		@include transform(translateY(30px));
		@include animation(showAva .5s cubic-bezier(0.37, 0.15, 0.54, 1.99) forwards 2.75s);
		opacity: 0;
		img {
			width: 100px;
			height: auto;
			padding-bottom: 7px;
			position: absolute;
			left: 0;
			bottom: 4px;
			@include animation(movebody 1s ease infinite);
		}
		&:before, &:after {
			content: '';
			z-index: 5;
		}
		&:before {
			width: 17px;
			height: 40px;
			display: inline-block;
			background-color: #373737;
			background-image: linear-gradient(transparent 50%,rgba(255, 255, 255, 0.2)50%);
			background-size: 20px 5px;
			position: absolute;
			bottom: 0px;
			left: 0;
			right: 0;
			margin: auto;
			border-radius: 4px;
			@include animation(tire .8s linear infinite);
		}
		&:after {
			width: 28px;
			height: 32px;
			background-color: #DEE2EA;
			display: inline-block;
			position: absolute;
			bottom: 16px;
			left: 0;
			right: 0;
			margin: auto;
			border-radius: 10px 10px 0 0;
		}
		&:hover {
			@include transform(scale(1.05));
		}
	}
	h1, h2 {
		position: absolute;
		background-color: $slate;
		z-index: 20;
		left: 50%;
		right: 50%;
	}
	h1 {
		color: $white;
		height: 50px;
		top: 300px;
		text-align: center;
		font-size: 24px;
		padding: 20px 0 0;
		font-weight: 500;
		color: transparent;
		@include animation(showTitle .25s cubic-bezier(0.37, 0.15, 0.54, 1.99) forwards 2.25s, showTitle-1 .5s cubic-bezier(0.37, 0.15, 0.54, 1.99) forwards 2.75s);
		&:after, &:before {
			content: '';
			height: 0;
			width: 0;
			top: -20px;
			display: inline-block;
			position: absolute;
			@include transform(scaleY(0));
			@include transform-origin(center bottom);
			@include animation(showTips .25s cubic-bezier(0.37, 0.15, 0.54, 1.99) forwards 2.5s);
		}
		&:before {
			border-left: solid 15px transparent;
			border-right: solid 15px darken($slate, 5%);
			border-bottom: solid 10px darken($slate, 5%);
			border-top: solid 10px transparent;
			left: 0;
		}
		&:after {
			border-right: solid 15px transparent;
			border-left: solid 15px darken($slate, 5%);
			border-bottom: solid 10px darken($slate, 5%);
			border-top: solid 10px transparent;
			right: 0;	
		}
	}
	h2 {
		color: lighten($slate, 15%);
		height: 40px;
		top: 358px;
		text-align: center;
		font-size: 14px;
		font-weight: 500;
		color: transparent;
		@include animation(showTitle .25s cubic-bezier(0.37, 0.15, 0.54, 1.99) forwards 2.25s, showTitle-2 .5s cubic-bezier(0.37, 0.15, 0.54, 1.99) forwards 3s);
	}
	&:hover {
		~ .profile-bio {
			top: -55px;
			opacity: 1;
			visibility: visible;
		}
	}
}
.profile-bio {
	  position: absolute;
	  top: -55px;
	  background-color: #fff;
	  border-radius: 50%;
	  padding: 30px;
	  text-align: center;
	  font-size: 14px;
	  left: -110px;
	  width: 230px;
	  box-shadow: 0 0 25px rgba(0, 0, 0, 0.2);
	  top: 0;
	  opacity: 0;
	  visibility: hidden;
	  &:after {
	  	content: '';
		height: 0;
		width: 0;
		display: inline-block;
		position: absolute;
		border-left: solid 10px transparent;
		border-right: solid 10px $white;
		border-bottom: solid 15px transparent;
		border-top: solid 15px $white;
		right: 30px;
		@include transform(rotate(-25deg));
	  }
	p {
		color: $slate;
	}
}
.profile-social-links {
	list-style: none;
	position: absolute;
	padding: 0;
	bottom: -10px;
	left: 0;
	right: 0;
	text-align: center;
	opacity: 0;
	@include animation(showSoc .25s cubic-bezier(0.37, 0.15, 0.54, 1.99) forwards 2.5s);
	li {
		display: inline-block;
		a {
			display: inline-block;
			padding: 10px;
			i {
				&:before {
					color: darken($green, 10%);
					font-size: 20px;
				}	
			}
			&:hover {
				i {
					&:before {
						color: darken($green, 15%);
					}
				}
			}
		}
	}
}
@include keyframes(movebody)
{
	0%{bottom: 5px;}
    25%{bottom: 4px;}
    50%{bottom: 5px;}
    75%{bottom: 4px;}
    100%{bottom: 5px;}
}
@include keyframes(tire)
{
	from {  
        background-position: center top; 
    }  
    to {  
        background-position: center bottom;  
    }  
}
@include keyframes(showAside)
{
	0% {
		border-width: 0;
		opacity: 0;
	}
	1% {
		opacity: 1;
	}
	100% {
		border-width: 10px;
		opacity: 1;
	}
}
@include keyframes(showTitle) {
	0% {
		left: 50%;
		right: 50%;
	}
	100% {
		left: -40px;
		right: -40px;
	}
}
@include keyframes(showTitle-1) {
	0% {
		padding-top: 25px;
		color: transparent;
	}
	100% {
		padding-top: 20px;
		color: $white;
	}
}
@include keyframes(showTitle-2) {
	0% {
		padding-top: 5px;
		color: transparent;
	}
	100% {
		padding-top: 0px;
		color: lighten($slate, 20%);
	}
}
@include keyframes(showTips) {
	0% {
		@include transform(scaleY(0));
	}
	100% {
		@include transform(scaleY(1));
	}
}
@include keyframes(showAva) {
	0% {
		@include transform(translateY(30px));
		opacity: 0;
	}
	100% {
		@include transform(translateY(0));
		opacity: 1;
	}
}
@include keyframes(showSoc) {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@include keyframes(closeBody)
{
	0% {
		width: 2500px;
		height: 2500px;
		border-radius: 50%;
		left: 50%;
		margin-left: -1250px;
		top: 50%;
		margin-top: -1200px;
		right: auto;
	}
	50% {
		border-radius: 50%;
		width: 20px;
		height: 20px;
		left: 0;
		margin-left: auto;
		margin-right: auto;
		right: 0;
		top: 200px;
	}
	100% {
		width: 284px;
		height: 380px;
		border-radius: 0;
		left: 0;
		right: 0;
		margin: auto;
		top: -150px;
		margin-top: 150px;
		
	}
}

This Pen is owned by Dion Pramadhan on CodePen.

See more by @xdionx on CodePen

External CSS

External JavaScript