LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

personalize your profile
CSS
*, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

body {
  color: #323232;
	font-weight: 300;
	font-style: normal;
	font-size: 100%;
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	line-height: 1.5;
}
.row {
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	max-width: 1056px;
	width: 100%;
	*zoom: 1;
}
.row:before, .row:after { display: table; content: " "; }
.row:after { clear: both; }
.column, .columns {
	position: relative;
	float: left;
	padding-right: 1.51516%;
	padding-left: 1.51516%;
	width: 100%;
}
.six { width: 75.00%; }


.ios7-icon {
	width: 12em;
	height: 12em;
	-webkit-border-radius: 22.53125%;
	-moz-border-radius: 22.53125%;
	border-radius: 22.53125%;
	border: 1px solid #74A0BE;
	position: absolute;
	top: 0;
	left: 35.26315%;
	margin-top: 2.5em;
	-webkit-animation: dev_icon 1s 2.1s linear;
	-webkit-animation-fill-mode: forwards;
	-moz-animation: dev_icon 1s 2.1s linear;
	-moz-animation-fill-mode: forwards;
	-o-animation: dev_icon 1s 2.1s linear;
	-o-animation-fill-mode: forwards;
	animation: dev_icon 1s 2.1s linear;
	animation-fill-mode: forwards;
}
.ios7-icon ul { list-style: none; margin: 0; padding: 0; }

.ios7-icon ul.others li:nth-child(3) {
	width: 0;
	height: 1px;
	position: absolute;
	top: 0.938em;
	left: -1em;
	background-color: #74A0BE;
	-webkit-animation: line1 0.5s 1.5s linear;
	-webkit-animation-fill-mode: forwards;
	-moz-animation: line1 0.5s 1.5s linear;
	-moz-animation-fill-mode: forwards;
	-o-animation: line1 0.5s 1.5s linear;
	-o-animation-fill-mode: forwards;
	animation: line1 0.5s 1.5s linear;
	animation-fill-mode: forwards;
}
.ios7-icon ul.others li:nth-child(4) {
	width: 0;
	height: 1px;
	position: absolute;
	top: 0.938em;
	right: -4px;
	background: #74A0BE;
	-webkit-animation: line1 0.5s 1.5s linear;
	-webkit-animation-fill-mode: forwards;
	-moz-animation: line1 0.5s 1.5s linear;
	-moz-animation-fill-mode: forwards;
	-o-animation: line1 0.5s 1.5s linear;
	-o-animation-fill-mode: forwards;
	animation: line1 0.5s 1.5s linear;
	animation-fill-mode: forwards;
}
.ios7-icon ul.others li:nth-child(9) {
	width: 0;
	height: 1px;
	position: absolute;
	bottom: 0.938em;
	left: -5px;
	background: #74A0BE;
	-webkit-animation: line1 0.5s 1.5s linear;
	-webkit-animation-fill-mode: forwards;
	-moz-animation: line1 0.5s 1.5s linear;
	-moz-animation-fill-mode: forwards;
	-o-animation: line1 0.5s 1.5s linear;
	-o-animation-fill-mode: forwards;
	animation: line1 0.5s 1.5s linear;
	animation-fill-mode: forwards;
}
.ios7-icon ul.others li:nth-child(10) {
	width: 0;
	height: 1px;
	position: absolute;
	bottom: 0.938em;
	right: -48px;
	background: #74A0BE;
	-webkit-animation: line1 0.5s 1.5s linear;
	-webkit-animation-fill-mode: forwards;
	-moz-animation: line1 0.5s 1.5s linear;
	-moz-animation-fill-mode: forwards;
	-o-animation: line1 0.5s 1.5s linear;
	-o-animation-fill-mode: forwards;
	animation: line1 0.5s 1.5s linear;
	animation-fill-mode: forwards;
}

.ios7-icon ul.others li:nth-child(5) {
	width: 1px;
	height: 0;
	position: absolute;
	top: -3px;
	left: 0.938em;
	background: #74A0BE;
	-webkit-animation: line2 0.5s 1.5s linear;
	-webkit-animation-fill-mode: forwards;
	-moz-animation: line2 0.5s 1.5s linear;
	-moz-animation-fill-mode: forwards;
	-o-animation: line2 0.5s 1.5s linear;
	-o-animation-fill-mode: forwards;
	animation: line2 0.5s 1.5s linear;
	animation-fill-mode: forwards;
}
.ios7-icon ul.others li:nth-child(8) {
	width: 1px;
	height: 0;
	position: absolute;
	bottom: -17px;
	left: 0.938em;
	background: #74A0BE;
	-webkit-animation: line2 0.5s 1.5s linear;
	-webkit-animation-fill-mode: forwards;
	-moz-animation: line2 0.5s 1.5s linear;
	-moz-animation-fill-mode: forwards;
	-o-animation: line2 0.5s 1.5s linear;
	-o-animation-fill-mode: forwards;
	animation: line2 0.5s 1.5s linear;
	animation-fill-mode: forwards;
}
.ios7-icon ul.others li:nth-child(6) {
	width: 1px;
	height: 0;
	position: absolute;
	top: -10px;
	right: 0.938em;
	background: #74A0BE;
	-webkit-animation: line2 0.5s 1.5s linear;
	-webkit-animation-fill-mode: forwards;
	-moz-animation: line2 0.5s 1.5s linear;
	-moz-animation-fill-mode: forwards;
	-o-animation: line2 0.5s 1.5s linear;
	-o-animation-fill-mode: forwards;
	animation: line2 0.5s 1.5s linear;
	animation-fill-mode: forwards;
}
.ios7-icon ul.others li:nth-child(7) {
	width: 1px;
	height: 0;
	position: absolute;
	bottom: -7px;
	right: 0.938em;
	background: #74A0BE;
	-webkit-animation: line2 0.5s 1.5s linear;
	-webkit-animation-fill-mode: forwards;
	-moz-animation: line2 0.5s 1.5s linear;
	-moz-animation-fill-mode: forwards;
	-o-animation: line2 0.5s 1.5s linear;
	-o-animation-fill-mode: forwards;
	animation: line2 0.5s 1.5s linear;
	animation-fill-mode: forwards;
}
.ios7-icon ul.hashtag li:first-child {
	width: 0;
	height: 1px;
	position: absolute;
	top: 3.938em;
	left: 0;
	background-color: #74A0BE;
	-webkit-animation: line1 0.5s 0.5s linear;
	-webkit-animation-fill-mode: forwards;
	-moz-animation: line1 0.5s 0.5s linear;
	-moz-animation-fill-mode: forwards;
	-o-animation: line1 0.5s 0.5s linear;
	-o-animation-fill-mode: forwards;
	animation: line1 0.5s 0.5s linear;
	animation-fill-mode: forwards;
}
.ios7-icon ul.hashtag li:nth-child(4) {
	width: 0;
	height: 1px;
	position: absolute;
	top: 3.938em;
	right: 0;
	background: #74A0BE;
	-webkit-animation: line1 0.5s 0.5s linear;
	-webkit-animation-fill-mode: forwards;
	-moz-animation: line1 0.5s 0.5s linear;
	-moz-animation-fill-mode: forwards;
	-o-animation: line1 0.5s 0.5s linear;
	-o-animation-fill-mode: forwards;
	animation: line1 0.5s 0.5s linear;
	animation-fill-mode: forwards;
}

.ios7-icon ul.hashtag li:nth-child(2) {
	width: 0;
	height: 1px;
	position: absolute;
	left: 0;
	bottom: 3.938em;
	background: #74A0BE;
	-webkit-animation: line1 0.5s 0.5s linear;
	-webkit-animation-fill-mode: forwards;
	-moz-animation: line1 0.5s 0.5s linear;
	-moz-animation-fill-mode: forwards;
	-o-animation: line1 0.5s 0.5s linear;
	-o-animation-fill-mode: forwards;
	animation: line1 0.5s 0.5s linear;
	animation-fill-mode: forwards;
}

.ios7-icon ul.hashtag li:nth-child(3) {
	width: 0;
	height: 1px;
	position: absolute;
	right: 0;
	bottom: 3.938em;
	background: #74A0BE;
	-webkit-animation: line1 0.5s 0.5s linear;
	-webkit-animation-fill-mode: forwards;
	-moz-animation: line1 0.5s 0.5s linear;
	-moz-animation-fill-mode: forwards;
	-o-animation: line1 0.5s 0.5s linear;
	-o-animation-fill-mode: forwards;
	animation: line1 0.5s 0.5s linear;
	animation-fill-mode: forwards;
}
.ios7-icon ul.hashtag li:nth-child(5) {
	width: 1px;
	height: 0;
	position: absolute;
	top: 0;
	left: 3.938em;
	background: #74A0BE;
	-webkit-animation: line2 0.5s 0.5s linear;
	-webkit-animation-fill-mode: forwards;
	-moz-animation: line2 0.5s 0.5s linear;
	-moz-animation-fill-mode: forwards;
	-o-animation: line2 0.5s 0.5s linear;
	-o-animation-fill-mode: forwards;
	animation: line2 0.5s 0.5s linear;
	animation-fill-mode: forwards;
}
.ios7-icon ul.hashtag li:nth-child(6) {
	width: 1px;
	height: 0;
	position: absolute;
	bottom: 0;
	left: 3.938em;
	background: #74A0BE;
	-webkit-animation: line2 0.5s 0.5s linear;
	-webkit-animation-fill-mode: forwards;
	-moz-animation: line2 0.5s 0.5s linear;
	-moz-animation-fill-mode: forwards;
	-o-animation: line2 0.5s 0.5s linear;
	-o-animation-fill-mode: forwards;
	animation: line2 0.5s 0.5s linear;
	animation-fill-mode: forwards;
}
.ios7-icon ul.hashtag li:nth-child(7) {
	width: 1px;
	height: 0;
	position: absolute;
	top: 0;
	right: 3.938em;
	background: #74A0BE;
	-webkit-animation: line2 0.5s 0.5s linear;
	-webkit-animation-fill-mode: forwards;
	-moz-animation: line2 0.5s 0.5s linear;
	-moz-animation-fill-mode: forwards;
	-o-animation: line2 0.5s 0.5s linear;
	-o-animation-fill-mode: forwards;
	animation: line2 0.5s 0.5s linear;
	animation-fill-mode: forwards;
}
.ios7-icon ul.hashtag li:nth-child(8) {
	width: 1px;
	height: 0;
	position: absolute;
	bottom: 0;
	right: 3.938em;
	background: #74A0BE;
	-webkit-animation: line2 0.5s 0.5s linear;
	-webkit-animation-fill-mode: forwards;
	-moz-animation: line2 0.5s 0.5s linear;
	-moz-animation-fill-mode: forwards;
	-o-animation: line2 0.5s 0.5s linear;
	-o-animation-fill-mode: forwards;
	animation: line2 0.5s 0.5s linear;
	animation-fill-mode: forwards;
}
.ios7-icon ul.others li:first-child {
	width: 1px;
	height: 0;
	position: absolute;
	bottom: 0;
	left: -1px;
	background: #74A0BE;
	-webkit-transform: rotate(45deg);
	-webkit-transform-origin: left bottom;
	-webkit-animation: line3 0.5s 1s linear;
	-webkit-animation-fill-mode: forwards;
	-moz-transform: rotate(45deg);
	-moz-transform-origin: left bottom;
	-moz-animation: line3 0.5s 1s linear;
	-moz-animation-fill-mode: forwards;
	-o-transform: rotate(45deg);
	-o-transform-origin: left bottom;
	-o-animation: line3 0.5s 1s linear;
	-o-animation-fill-mode: forwards;
	transform: rotate(45deg);
	transform-origin: left bottom;
	animation: line3 0.5s 1s linear;
	animation-fill-mode: forwards;
}
.ios7-icon ul.others li:nth-child(2) {
	width: 1px;
	height: 0;
	position: absolute;
	bottom: 0;
	right: -1px;
	background: #74A0BE;
	-webkit-transform: rotate(-45deg);
	-webkit-transform-origin: right bottom;
	-webkit-animation: line3 0.5s 1s linear;
	-webkit-animation-fill-mode: forwards;
	-moz-transform: rotate(-45deg);
	-moz-transform-origin: right bottom;
	-moz-animation: line3 0.5s 1s linear;
	-moz-animation-fill-mode: forwards;
	-o-transform: rotate(-45deg);
	-o-transform-origin: right bottom;
	-o-animation: line3 0.5s 1s linear;
	-o-animation-fill-mode: forwards;
	transform: rotate(-45deg);
	transform-origin: right bottom;
	animation: line3 0.5s 1s linear;
	animation-fill-mode: forwards;
}
.ios7-icon ul.circles li:first-child {
	width: 2em;
	height: 2em;
	position: absolute;
	bottom: 0.938em;
	right: 4.813em;
	opacity: 0;
	border-radius: 100%;
	border: 1px solid #74A0BE;
	background-color: #74A0BE;
	-webkit-animation: circle1 0.5s 1.6s linear;
	-webkit-animation-fill-mode: forwards;
	-moz-animation: circle1 0.5s 1.6s linear;
	-moz-animation-fill-mode: forwards;
	-o-animation: circle1 0.5s 1.6s linear;
	-o-animation-fill-mode: forwards;
	animation: circle1 0.5s 1.6s linear;
	animation-fill-mode: forwards;
}
.ios7-icon ul.circles li:nth-child(2) {
	width: 4em;
	height: 4em;
	position: absolute;
	bottom: 3.938em;
	left: -1px;
	opacity: 0;
	border-radius: 100%;
	border: 1px solid #74A0BE;
	-webkit-animation: circle2 0.4s 1.6s linear;
	-webkit-animation-fill-mode: forwards;
	-moz-animation: circle2 0.4s 1.6s linear;
	-moz-animation-fill-mode: forwards;
	-o-animation: circle2 0.4s 1.6s linear;
	-o-animation-fill-mode: forwards;
	animation: circle2 0.4s 1.6s linear;
	animation-fill-mode: forwards;
}
.ios7-icon ul.circles li:nth-child(3) {
	width: 11.875em;
	height: 11.875em;
	position: absolute;
	bottom: 0;
	left: 0;
	opacity: 0;
	border-radius: 100%;
	border: 1em solid #74A0BE;
	-webkit-animation: circle3 0.2s 2.1s linear;
	-webkit-animation-fill-mode: forwards;
	-moz-animation: circle3 0.2s 2.1s linear;
	-moz-animation-fill-mode: forwards;
	-o-animation: circle3 0.2s 2.1s linear;
	-o-animation-fill-mode: forwards;
	animation: circle3 0.2s 2.1s linear;
	animation-fill-mode: forwards;
}

.profile-text {
	color: #74A0BE;
	font-size: 168.3%;
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	line-height: 1.1;
	font-weight: 100;
	position: absolute;
	text-decoration: none;
	text-transform: capitalize;
	top: 6.750em;
	left: 23%;
	opacity: 0;
	-webkit-animation: profile_txt 0.5s 2.8s linear;
	-webkit-animation-fill-mode: forwards;
	-moz-animation: profile_txt 0.5s 2.8s linear;
	-moz-animation-fill-mode: forwards;
	-o-animation: profile_txt 0.5s 2.8s linear;
	-o-animation-fill-mode: forwards;
	animation: profile_txt 0.5s 2.8s linear;
	animation-fill-mode: forwards;
}

@-webkit-keyframes line1 {
	0% { width: 0; }
	100% { width: 8em; }
}
@-moz-keyframes line1 {
	0% { width: 0; }
	100% { width: 8em; }
}
@-o-keyframes line1 {
	0% { width: 0; }
	100% { width: 8em; }
}
@keyframes line1 {
	0% { width: 0; }
	100% { width: 8em; }
}

@-webkit-keyframes line2 {
	0% { height: 0; }
	100% { height: 6.750em; }
}
@-moz-keyframes line2 {
	0% { height: 0; }
	100% { height: 6.750em; }
}
@-o-keyframes line2 {
	0% { height: 0; }
	100% { height: 6.750em; }
}
@keyframes line2 {
	0% { height: 0; }
	100% { height: 6.750em; }
}

@-webkit-keyframes line3 {
	0% { bottom: 0; height: 0; }
	100% { bottom: 0; height: 17em; }
}
@-moz-keyframes line3 {
	0% { bottom: 0; height: 0; }
	100% { bottom: 0; height: 17em; }
}
@-o-keyframes line3 {
	0% { bottom: 0; height: 0; }
	100% { bottom: 0; height: 17em; }
}
@keyframes line3 {
	0% { bottom: 0; height: 0; }
	100% { bottom: 0; height: 17em; }
}

@-webkit-keyframes circle1 {
	0% { width: 2em; height: 2em; bottom: 0.938em; right: 4.813em; background-color: #74A0BE; opacity: 0; }
	100% { width: 4em; height: 4em; bottom: 3.938em; right: 3.938em; background-color: transparent; opacity: 1; }
}
@-moz-keyframes circle1 {
	0% { width: 2em; height: 2em; bottom: 0.938em; right: 4.813em; background-color: #74A0BE; opacity: 0; }
	100% { width: 4em; height: 4em; bottom: 3.938em; right: 3.938em; background-color: transparent; opacity: 1; }
}
@-o-keyframes circle1 {
	0% { width: 2em; height: 2em; bottom: 0.938em; right: 4.813em; background-color: #74A0BE; opacity: 0; }
	100% { width: 4em; height: 4em; bottom: 3.938em; right: 3.938em; background-color: transparent; opacity: 1; }
}
@keyframes circle1 {
	0% { width: 2em; height: 2em; bottom: 0.938em; right: 4.813em; background-color: #74A0BE; opacity: 0; }
	100% { width: 4em; height: 4em; bottom: 3.938em; right: 3.938em; background-color: transparent; opacity: 1; }
}

@-webkit-keyframes circle2 {
	0% { width: 4em; height: 4em; bottom: 4em; left: -1px; opacity: 0; }
	100% { width: 10em; height: 10em; bottom: 0.938em; left: 0.938em; opacity: 1; }
}
@-moz-keyframes circle2 {
	0% { width: 4em; height: 4em; bottom: 4em; left: -1px; opacity: 0; }
	100% { width: 10em; height: 10em; bottom: 0.938em; left: 0.938em; opacity: 1; }
}
@-o-keyframes circle2 {
	0% { width: 4em; height: 4em; bottom: 4em; left: -1px; opacity: 0; }
	100% { width: 10em; height: 10em; bottom: 0.938em; left: 0.938em; opacity: 1; }
}
@keyframes circle2 {
	0% { width: 4em; height: 4em; bottom: 4em; left: -1px; opacity: 0; }
	100% { width: 10em; height: 10em; bottom: 0.938em; left: 0.938em; opacity: 1; }
}

@-webkit-keyframes circle3 {
	0% { width: 11.875em; height: 11.875em; bottom: 0; left: 0; border: 1em solid #74A0BE; opacity: 0; }
	100% { width: 12em; height: 12em; bottom: -1px; left: -1px; border: 1px solid #74A0BE; opacity: 1; }
}
@-moz-keyframes circle3 {
	0% { width: 11.875em; height: 11.875em; bottom: 0; left: 0; border: 1em solid #74A0BE; opacity: 0; }
	100% { width: 12em; height: 12em; bottom: -1px; left: -1px; border: 1px solid #74A0BE; opacity: 1; }
}
@-o-keyframes circle3 {
	0% { width: 11.875em; height: 11.875em; bottom: 0; left: 0; border: 1em solid #74A0BE; opacity: 0; }
	100% { width: 12em; height: 12em; bottom: -1px; left: -1px; border: 1px solid #74A0BE; opacity: 1; }
}
@keyframes circle3 {
	0% { width: 11.875em; height: 11.875em; bottom: 0; left: 0; border: 1em solid #74A0BE; opacity: 0; }
	100% { width: 12em; height: 12em; bottom: -1px; left: -1px; border: 1px solid #74A0BE; opacity: 1; }
}

@-webkit-keyframes dev_icon {
	0% { left: 35.26315%; }
	100% { left: 8.42105%; }
}
@-moz-keyframes dev_icon {
	0% { left: 35.26315%; }
	100% { left: 8.42105%; }
}
@-o-keyframes dev_icon {
	0% { left: 35.26315%; }
	100% { left: 8.42105%; }
}
@keyframes dev_icon {
	0% { left: 35.26315%; }
	100% { left: 8.42105%; }
}

@-webkit-keyframes profile_txt {
	0% { opacity: 0; left: 23%; }
	100% { opacity: 1; left: 35%; }
}
@-moz-keyframes profile_txt {
	0% { opacity: 0; left: 23%; }
	100% { opacity: 1; left: 35%; }
}
@-o-keyframes profile_txt {
	0% { opacity: 0; left: 23%; }
	100% { opacity: 1; left: 35%; }
}
@keyframes profile_txt {
	0% { opacity: 0; left: 23%; }
	100% { opacity: 1; left: 35%; }
}


@media only screen and (max-width: 800px) {
  body { font-size: 87.3%;
}

Description

Little reminder animation to update your avatar and personalize your profile page.
Term
Sat, 04/14/2018 - 20:45

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv