SCSS
$red: #f5515f;
$blue: #05abe0;
$grey: #343434;
ul {
list-style-type: none;
}
$font: "brandon-grotesque", "Brandon Grotesque", "Source Sans Pro", "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
$padding: 12px;
* { box-sizing: border-box; -webkit-tap-highlight-color: rgba(0,0,0,0); user-select: none; cursor: default; }
*:focus { outline: none!important; }
body, html { height: 100vh; }
a, a * { cursor: pointer!important; }
body {
display: flex;
align-items: center;
align-content: center;
justify-content: center;
padding: $padding;
background: mix($red, $blue);
background: linear-gradient(135deg, rgba($red,1) 0%,rgba($blue,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$red', endColorstr='$blue',GradientType=1 );
color: $grey;
font-family: $font;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}
.profile {
position: relative;
width: 100%;
max-width: 600px;
height: 100%;
background: rgba(white, .25);
border-radius: 2px;
overflow: hidden;
box-shadow: 0 0 20px rgba(darken($red, 40%), .2);
&.pre-enter {
transform-origin: center center;
transform: scaleY(0);
.avatar {
transform-origin: center top;
transform: scaleY(0);
}
h1, h2, a.follow, a.link {
opacity: 0;
transform: translateY(300px);
}
}
&.on-enter {
animation: scaleYIn 1000ms ease-out forwards;
.avatar {
animation: scaleYIn-small 750ms ease-out forwards 1000ms;
}
h1, h2, a.follow, a.link {
opacity: 1;
animation: slideInUp 1000ms ease-out forwards;
}
h1 {
animation-delay: 1050ms;
}
h2 {
animation-delay: 1100ms;
}
a.follow {
animation-delay: 1250ms;
}
li {
&:nth-child(1) {
a.link {
animation-delay: 1300ms;
}
}
&:nth-child(2) {
a.link {
animation-delay: 1350ms;
}
}
&:nth-child(3) {
a.link {
animation-delay: 1400ms;
}
}
}
}
}
.background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: white;
border-radius: 2px;
}
.avatar, .info {
width: 100%;
height: 50%;
}
.avatar {
background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/Group%20(1).png') no-repeat;
background-position: 85%;
background-size: cover;
clip-path: polygon(0 0, 100% 0, 100% 75%, 0% 100%);
}
.info {
display: flex;
flex-flow: row wrap;
align-items: center;
align-content: center;
justify-content: center;
position: relative;
text-align: center;
h1 {
padding: $padding $padding 0;
width: 100%;
font-size: 24px;
font-weight: 800;
letter-spacing: 2px;
text-transform: uppercase;
}
h2, a.follow {
display: block;
border-radius: 2px;
padding: $padding/2;
color: white;
font-size: 12px;
font-weight: 500;
letter-spacing: 1px;
text-transform: uppercase;
}
h2 {
background: $red;
background: linear-gradient(135deg, rgba(#f5825f,1) 0%,rgba(#f5005f,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5825f', endColorstr='#f5005f',GradientType=1 );
}
a.follow {
margin-left: $padding;
background: $blue;
background: linear-gradient(135deg, rgba(#05c8e0,1) 0%,rgba(#057fe0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#05c8e0', endColorstr='#057fe0',GradientType=1 );
&:hover, &:focus {
background: #05c8e0;
background: linear-gradient(135deg, rgba(lighten(#05c8e0, 10%),1) 0%,rgba(lighten(#057fe0, 10%),1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='lighten(#05c8e0, 10%)', endColorstr='lighten(#057fe0, 10%)',GradientType=1 );
}
&:active {
background: #057fe0;
background: linear-gradient(135deg, rgba(darken(#05c8e0, 5%),1) 0%,rgba(darken(#057fe0, 5%),1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='darken(#05c8e0, 5%)', endColorstr='darken(#057fe0, 5%)',GradientType=1 );
}
}
ul {
display: flex;
justify-content: center;
padding: $padding/2;
width: 100%;
li {
padding: $padding/2;
}
}
a.link {
display: block;
border-radius: 100%;
background: $blue;
padding: $padding*0.75;
transform-origin: center center;
svg {
width: 28px;
height: 28px;
*:not(.fill) {
fill: none;
stroke: white;
stroke-width: 5px;
stroke-linecap: round;
stroke-linejoin: round;
}
.fill {
fill: white;
stroke: none;
}
}
}
}
a.link {
&.portfolio {
background: #f5c8bf;
background: linear-gradient(135deg, rgba(#f5c8bf,1) 0%,rgba(#f58dbf,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5c8bf', endColorstr='#f58dbf',GradientType=1 );
box-shadow: inset 0 0 10px rgba(#f58dbf, .5);
&:hover, &:focus {
background: lighten(#f5c8bf, 5%);
background: linear-gradient(135deg, rgba(lighten(#f5c8bf, 5%),1) 0%,rgba(lighten(#f58dbf, 5%),1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='lighten(#f5c8bf, 5%)', endColorstr='lighten(#f58dbf, 5%)',GradientType=1 );
box-shadow: inset 0 0 10px rgba(lighten(#f58dbf, 5%), .5);
}
&:active {
background: darken(#f5c8bf, 5%);
background: linear-gradient(135deg, rgba(darken(#f5c8bf, 5%),1) 0%,rgba(darken(#f58dbf, 5%),1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='darken(#f5c8bf, 5%)', endColorstr='darken(#f58dbf, 5%)',GradientType=1 );
box-shadow: inset 0 0 10px rgba(darken(#f58dbf, 5%), .5);
}
}
&.codepen {
background: #fcd000;
background: linear-gradient(135deg, rgba(#fcd000,1) 0%,rgba(#fc9a00,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcd000', endColorstr='#fc9a00',GradientType=1 );
box-shadow: inset 0 0 10px rgba(#fc9a00, .5);
&:hover, &:focus {
background: lighten(#fcd000, 5%);
background: linear-gradient(135deg, rgba(lighten(#fcd000, 5%),1) 0%,rgba(lighten(#fc9a00, 5%),1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='lighten(#fcd000, 5%)', endColorstr='lighten(#fc9a00, 5%)',GradientType=1 );
box-shadow: inset 0 0 10px rgba(lighten(#fc9a00, 5%), .5);
}
&:active {
background: darken(#fcd000, 5%);
background: linear-gradient(135deg, rgba(darken(#fcd000, 5%),1) 0%,rgba(darken(#fc9a00, 5%),1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='darken(#fcd000, 5%)', endColorstr='darken(#fc9a00, 5%)',GradientType=1 );
box-shadow: inset 0 0 10px rgba(darken(#fc9a00, 5%), .5);
}
}
&.github {
background: #41adc4;
background: linear-gradient(135deg, rgba(#41adc4,1) 0%,rgba(#4183c4,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#41adc4', endColorstr='#4183c4',GradientType=1 );
box-shadow: inset 0 0 10px rgba(#4183c4, .5);
&:hover, &:focus {
background: lighten(#41adc4, 5%);
background: linear-gradient(135deg, rgba(lighten(#41adc4, 5%),1) 0%,rgba(lighten(#4183c4, 5%),1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='lighten(#41adc4, 5%)', endColorstr='lighten(#4183c4, 5%)',GradientType=1 );
box-shadow: inset 0 0 10px rgba(lighten(#4183c4, 5%), .5);
}
&:active {
background: darken(#41adc4, 5%);
background: linear-gradient(135deg, rgba(darken(#41adc4, 5%),1) 0%,rgba(darken(#4183c4, 5%),1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='darken(#41adc4, 5%)', endColorstr='darken(#4183c4, 5%)',GradientType=1 );
box-shadow: inset 0 0 10px rgba(darken(#4183c4, 5%), .5);
}
}
}
@media only screen and (min-width: 470px) {
.profile {
display: flex;
&.pre-enter {
transform: scaleX(0);
.avatar {
transform-origin: left center;
transform: scaleX(0);
}
h1, h2, a.follow, a.link {
transform: translateX(300px);
}
}
&.on-enter {
animation-name: scaleXIn;
.avatar {
animation-name: scaleXIn-small;
}
h1, h2, a.follow, a.link {
animation-name: slideInLeft;
}
}
}
.background {
mix-blend-mode: overlay;
}
.avatar, .info {
width: 50%;
height: 100%;
}
.avatar {
clip-path: polygon(0 0, 100% 0, 75% 100%, 0% 100%);
}
.svgclippaths .info {
position: absolute;
top: 0;
right: 0;
width: 56.25%;
}
}
@media only screen and (min-width: 470px) and (min-height: 600px) {
.profile {
max-height: 400px;
}
}
/* https://goo.gl/jIUq3E */
@keyframes scaleXIn {
0% { transform: matrix3d(0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
4.7% { transform: matrix3d(0.45, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
9.41% { transform: matrix3d(0.883, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
14.11% { transform: matrix3d(1.141, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
18.72% { transform: matrix3d(1.212, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
24.32% { transform: matrix3d(1.151, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
29.93% { transform: matrix3d(1.048, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
35.54% { transform: matrix3d(0.979, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
41.04% { transform: matrix3d(0.961, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
52.15% { transform: matrix3d(0.991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
63.26% { transform: matrix3d(1.007, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
85.49% { transform: matrix3d(0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
100% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
}
/* https://goo.gl/auuhcg */
@keyframes scaleYIn {
0% { transform: matrix3d(1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
4.7% { transform: matrix3d(1, 0, 0, 0, 0, 0.45, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
9.41% { transform: matrix3d(1, 0, 0, 0, 0, 0.883, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
14.11% { transform: matrix3d(1, 0, 0, 0, 0, 1.141, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
18.72% { transform: matrix3d(1, 0, 0, 0, 0, 1.212, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
24.32% { transform: matrix3d(1, 0, 0, 0, 0, 1.151, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
29.93% { transform: matrix3d(1, 0, 0, 0, 0, 1.048, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
35.54% { transform: matrix3d(1, 0, 0, 0, 0, 0.979, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
41.04% { transform: matrix3d(1, 0, 0, 0, 0, 0.961, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
52.15% { transform: matrix3d(1, 0, 0, 0, 0, 0.991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
63.26% { transform: matrix3d(1, 0, 0, 0, 0, 1.007, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
85.49% { transform: matrix3d(1, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
100% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
}
/* https://goo.gl/dNBqrt */
@keyframes scaleXIn-small {
0% { transform: matrix3d(0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
6.31% { transform: matrix3d(0.384, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
12.51% { transform: matrix3d(0.621, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
18.82% { transform: matrix3d(0.771, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
25.03% { transform: matrix3d(0.862, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
37.54% { transform: matrix3d(0.952, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
50.05% { transform: matrix3d(0.984, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
75.08% { transform: matrix3d(0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
100% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
}
/* https://goo.gl/jZL0uj */
@keyframes scaleYIn-small {
0% { transform: matrix3d(1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
6.31% { transform: matrix3d(1, 0, 0, 0, 0, 0.384, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
12.51% { transform: matrix3d(1, 0, 0, 0, 0, 0.621, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
18.82% { transform: matrix3d(1, 0, 0, 0, 0, 0.771, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
25.03% { transform: matrix3d(1, 0, 0, 0, 0, 0.862, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
37.54% { transform: matrix3d(1, 0, 0, 0, 0, 0.952, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
50.05% { transform: matrix3d(1, 0, 0, 0, 0, 0.984, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
75.08% { transform: matrix3d(1, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
100% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
}
/* https://goo.gl/Ne0Mkr */
@keyframes slideInLeft {
0% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 300, 0, 0, 1); }
6.31% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 184.858, 0, 0, 1); }
12.51% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 113.68, 0, 0, 1); }
18.82% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 68.663, 0, 0, 1); }
25.03% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 41.37, 0, 0, 1); }
37.54% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 14.382, 0, 0, 1); }
50.05% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 4.724, 0, 0, 1); }
75.08% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.381, 0, 0, 1); }
100% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
}
/* https://goo.gl/MSqtd5 */
@keyframes slideInUp {
0% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 300, 0, 1); }
6.31% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 184.858, 0, 1); }
12.51% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 113.68, 0, 1); }
18.82% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 68.663, 0, 1); }
25.03% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 41.37, 0, 1); }
37.54% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 14.382, 0, 1); }
50.05% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 4.724, 0, 1); }
75.08% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.381, 0, 1); }
100% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
}
