<!-- 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="#!">
<img src="http://pimmey.com/envato/yegor.jpg" alt="Yegor">
</a>
<!-- the username -->
<h1>Yegor Borisenco</h1>
<!-- and role or location -->
<h2>Full Stack Developer</h2>
</header>
<!-- bit of a bio; who are you? -->
<div class="profile-bio">
<p>
Yegor enjoys a good design in everything, be it a user interface or a code pattern.
He’s also a big fan of all flying remote control toys, especially quadcopters and hexacopters.
His homepage — <a href="http://pimmey.com">pimmey.com</a>.
</p>
</div>
<!-- some social links to show off -->
<ul class="profile-social-links">
<!-- twitter - el clásico -->
<li>
<a href="https://twitter.com/pimmeythemes">
<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="http://themeforest.net/user/pimmey">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/social-envato.svg">
</a>
</li>
<!-- codepen - your codepen profile-->
<li>
<a href="https://codepen.io/pimmey/">
<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! -->
@import 'bourbon';
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300);
$easing: cubic-bezier(0.075, 0.820, 0.165, 1.000);
$white: #fefefe;
$black: #222222;
$blue: #2196f3;
html,
body {
text-rendering: geometricPrecision;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background: $white;
color: $black;
}
* {
@include prefixer(box-sizing, border-box, webkit moz spec);
}
@include keyframes(lineAppear) {
from {
width: 0;
margin-left: 50%;
} to {
opacity: 1;
width: 100%;
margin-left: 0;
}
}
@include keyframes(revealHeader) {
from {
opacity: 0;
@include transform(translate3d(0, 320px, 0));
} to {
opacity: 1;
@include transform(translate3d(0, 0, 0));
}
}
@include keyframes(revealBio) {
to {
opacity: 1;
}
}
@include keyframes(removeArtifacts) {
to {
height: 1px;
width: 1px;
}
}
body {
margin: 0;
padding: 0;
font-family: Roboto, sans-serif;
}
h1,
h2 {
margin: 0;
}
h1 {
margin-top: 20px;
font-size: 36px;
font-weight: 400;
letter-spacing: -2px;
&:first-letter {
letter-spacing: -6px;
}
}
h2 {
font-size: 24px;
font-weight: 300;
}
a,
a:visited {
color: $blue;
text-decoration: none;
}
aside {
width: 320px;
margin: 150px auto 0;
&:after {
z-index: 11; // highest
content: '';
display: block;
width: 320px;
height: 320px;
position: absolute;
top: 472px;
background: $white;
@include animation(removeArtifacts .01s linear 1s both);
}
&:hover {
header {
@include transform(rotate(90deg));
@include transition(all .5s $easing .3s);
}
header:after {
top: 0;
height: 100%;
@include transition-delay(0s);
}
.profile-social-links li {
img {
@include transform(scale(1));
}
&:nth-of-type(1) img {
@include transition-delay(.8s);
}
&:nth-of-type(2) img {
@include transition-delay(.9s);
}
&:nth-of-type(3) img {
@include transition-delay(1s);
}
&:hover:after,
&:hover:before {
@include transform(scale(1));
}
&:hover:before {
@include transition-delay(.15s);
}
}
}
}
header {
will-change: transform;
z-index: 10; // above .profile-social-links, below aside:after
position: relative;
width: 320px;
height: 320px;
text-align: center;
background: $white;
@include transform(rotate(0deg));
@include transform-origin(0 0);
@include transition(all .2s $easing);
a img,
h1,
h2 {
@include animation(revealHeader .75s $easing .5s both);
}
a {
cursor: default;
}
img {
border-radius: 100%;
width: 200px;
height: 200px;
}
&:after {
will-change: top, height;
content: '';
position: absolute;
top: 100%;
display: block;
width: 100%;
height: 1px;
background: $white;
border-top: 2px solid $black;
@include transition(all .2s $easing .2s);
@include animation(lineAppear 1s $easing);
}
}
.profile-bio {
opacity: 0;
z-index: 8; // lowest
width: 320px;
height: 320px;
position: absolute;
top: 150px;
left: 50%;
margin-left: -160px;
@include animation(revealBio 1s ease .5s both);
p {
font-size: 18px;
font-weight: 300;
line-height: 24px;
padding: 20px;
a {
border-bottom: 1px solid transparentize($blue, .5);
padding-bottom: 2px;
@include transition(border-bottom-color .3s linear);
&:hover {
border-bottom-color: $blue;
}
}
}
}
.profile-social-links {
z-index: 9; // below header, above .profile-bio
position: relative;
top: -70px;
margin: 0;
padding: 0 20px;
li {
position: relative;
display: block;
width: 30px;
height: 30px;
margin-right: 10px;
float: left;
&:nth-of-type(1) {
&:after {
background: #55acee;
}
&:before,
img {
background: #d3e4f1;
}
}
&:nth-of-type(2) {
&:after {
background: #82b541;
}
&:before,
img {
background: #cae5a9;
}
}
&:nth-of-type(3) {
&:after {
background: $black;
}
&:before,
img {
background: #e5e5e5;
}
}
img {
will-change: transform;
width: 30px;
border-radius: 100%;
padding: 3px;
@include transform(scale(0));
@include transition(all .3s $easing);
}
&:after,
&:before {
content: '';
z-index: -1;
position: absolute;
display: block;
border-radius: 100%;
@include transform(scale(0));
@include transition-property(transform);
@include transition-duration(.3s);
@include transition-timing-function($easing);
}
&:after {
width: 34px;
height: 34px;
top: -2px;
left: -2px;
}
&:before {
width: 40px;
height: 40px;
top: -5px;
left: -5px;
}
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.