cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              %main.profile{:ontouchstart => true}
	.background
	%aside.avatar
	%section.info
		%h1 Gabrielle Wee
		%h2 UI Designer
		%a.follow + Follow
		%ul
			%li
				%a.link.portfolio{:href => "http://gabriellew.ee/", :target => "_blank"}
					%svg{:viewbox => "0 0 85 85"}
						%path{:d => "M18.3,22.8 L18.3,19.6 C18.3,12.7 24,7 30.9,7 L54.6,7 C61.5,7 67.2,12.7 67.2,19.6 L67.2,22.8 M32.9000008,49.0999985 L52.5000008,49.0999985 M3.00000001,61.5999985 L82.3000031,61.5999985 M70.9987628,78 L14.2997944,78 C8.09990721,78 3,72.9 3,66.7 L3,34.4 C3,28.2 8.09990721,23.1 14.2997944,23.1 L70.9987628,23.1 C77.19865,23.1 82.2985572,28.2 82.2985572,34.4 L82.2985572,66.7 C82.3985554,72.9 77.2986482,78 70.9987628,78 Z"}
			%li
				%a.link.codepen{:href => "https://codepen.io/gabriellewee/", :target => "_blank"}
					%svg{:viewbox => "0 0 85 85"}
						%path{:d => "M82.5,29.1666667 L42.5,2.5 L2.5,29.1666667 L2.5,55.8922001 L42.5,82.5 L82.5,55.8922001 L82.5,29.1666667 Z M42.5,2.9120677 L42.5,29.1666667 L42.5,2.9120677 Z M42.5,55.8922001 L42.5,82.5 L42.5,55.8922001 Z M2.5,29.1666667 L2.5,55.8922001 L42.5,29.1666667 L82.5,55.8922001 L82.5,29.1666667 L42.5,55.8922001 L2.5,29.1666667 Z"}
			%li
				%a.link.github{:href => "https://github.com/elletricity/", :target => "_blank"}
					%svg{:viewbox => "0 0 85 85"}
						%path.fill{:d => "M76.7 19c1.1-4.8 0.6-10.1-1.6-15 -0.7-1.7-2.3-2.9-4.2-3 -0.5-0.1-1.1-0.1-1.6-0.1 -4.6 0-10.7 1.6-15 5C50.4 5 46.4 4.6 42.5 4.6V4.4c-3.9 0-7.9 0.4-11.8 1.3 -4.3-3.4-10.4-5-15-5 -0.5 0-1.1 0-1.6 0.1 -1.9 0.1-3.5 1.3-4.2 3C7.7 8.7 7.2 14 8.3 18.8c-3.3 4.4-5 9.6-5 15.4 0 12.5 4.2 21.4 12.5 26.4 2.6 1.6 5.6 2.9 9 3.7 -0.6 1.7-0.9 3.7-0.9 6.1v11.2h0c0 1.4 1.1 2.5 2.5 2.5s2.5-1.1 2.5-2.5l0-11c0-4.5 1.5-7.7 4.5-9.7 -1.5-0.1-3.2-0.3-5.2-0.8 -3.8-0.7-7-1.9-9.7-3.6C11.6 52.4 8.3 45.1 8.3 34.4c0-5.6 1.9-10.3 5.6-14.3 -1.7-4.4-1.4-9.6 0.6-14.3 0.4 0 0.8 0 1.2 0 4.9 0 10.8 2.2 13.5 5.5 4.5-1.2 9-1.8 13.3-1.8v0.1c4.3 0 8.8 0.6 13.3 1.8 2.7-3.3 8.6-5.5 13.5-5.5 0.4 0 0.8 0 1.2 0 2 4.7 2.3 9.9 0.6 14.3 3.7 4 5.6 8.7 5.6 14.3 0 10.7-3.3 18-10.2 22.2 -2.7 1.7-5.9 2.9-9.7 3.6 -2 0.5-3.7 0.7-5.2 0.8 3 2 4.5 5.2 4.5 9.7l0 11c0 1.4 1.1 2.5 2.5 2.5s2.5-1.1 2.5-2.5h0V70.6c0-2.4-0.3-4.4-0.9-6.1 3.4-0.8 6.4-2.1 9-3.7 8.3-5 12.5-13.9 12.5-26.4C81.7 28.6 80 23.4 76.7 19z"}
            
          
!
            
              $red: #f5515f;
$blue: #05abe0;
$grey: #343434;

$font: "brandon-grotesque", "Brandon Grotesque", "Source Sans Pro", "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
$p: 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: $p;
	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/345377/selca-red.jpg') no-repeat top center / 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: $p $p 0;
		width: 100%;
		font-size: 24px;
		font-weight: 800;
		letter-spacing: 2px;
		text-transform: uppercase;
	}
	h2, a.follow {
		display: block;
		margin-top: $p/3;
		border-radius: 2px;
		padding: $p/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: $p;
		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: $p/2;
		width: 100%;
		li {
			padding: $p/2;
		}
	}
	a.link {
		display: block;
		border-radius: 100%;
		background: $blue;
		padding: $p*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); } 
}
            
          
!
            
              $(".profile").addClass("pre-enter");
setTimeout(function(){
	$(".profile").addClass("on-enter");
}, 500);
setTimeout(function(){
	$(".profile").removeClass("pre-enter on-enter");
}, 3000);
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console