CSS BOY PROFILE

HTML:

	<html>

	<head>
	<title></title>
	</head>

	<body>
	<div class="all">
	<div class="boy">
	<div class="hair"></div>
	<div class="face">
	<div class="eye1"></div>
	<div class="eye2"></div>
	</div>
	<div class="ear1"></div>
	<div class="ear2"></div>
	<div class="neck"></div>
	</div>
	<div class="boy_body">
	<div class="sc1"></div>
	<div class="sc2"></div>
	</div>
	<div class="pocket"></div>
	</div>
	<div class="frame"></div>

	</body>

	</html>

view raw boy.html hosted with ❤ by GitHub

CSS:

	body {
	background-color: #7a6289;
	}
	.tpp {
	text-align: center;
	}

	.botm {
	text-align: center;
	position: relative;
	top: -22px;
	font-size: 1.5em;
	font-weight: bolder;
	font-family: "Courier New", Courier, monospace;
	}
	.frame {
	width: 300px;
	height: 340px;

	background: linear-gradient(#ffd54f 0px 300px, #292e4c 300px 340px);
	position: absolute;
	top: 47%;
	left: 50%;
	transform: translate(-50%, -50%);
	border: 10px solid black;
	box-shadow: 0 0 30px #634f71;
	}

	.pocket {
	position: relative;
	content: "";
	width: 15px;
	height: 5px;
	border-radius: 5px;
	background-color: gray;
	top: -55px;
	left: 110px;
	z-index: 20;
	}

	.all {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;
	}

	.hair {
	width: 130px;
	height: 35px;
	background-color: black;
	border-radius: 30px 30px 0 0;
	}

	.hair:before {
	position: absolute;
	content: " ";
	width: 90px;
	height: 90px;
	border-radius: 90px;
	background: -webkit-linear-gradient(bottom right, black 50%, transparent 50%);
	left: 50px;
	top: -42px;
	}

	.face {
	width: 130px;
	height: 50px;
	/* border-radius:0 0 130px 130px;*/
	background-color: #f6caaf;
	z-index: 20;
	}

	.face:before {
	position: absolute;
	content: " ";
	width: 135.5px;
	height: 135px;
	border-radius: 80px;
	background: linear-gradient(transparent 0px 50px, #f6caaf 50px 135px);
	z-index: 20;
	left: -2.5px;
	top: 34px;
	}

	.ear1 {
	width: 40px;
	height: 40px;
	border-radius: 40px;
	background: -webkit-radial-gradient(left, #f6caaf 30%, #e9b699 80%);
	position: relative;
	left: -30px;
	top: 0px;
	z-index: 2;
	}

	.ear1:before {
	position: absolute;
	content: " ";
	width: 20px;
	height: 20px;
	border-radius: 30px;
	background-color: #e9b699;
	top: 10px;
	left: 10px;
	}

	.ear1:after {
	position: absolute;
	content: " ";
	width: 10px;
	height: 0px;
	border-left: 5px solid transparent;
	border-right: 0px solid blue;
	border-bottom: 45px solid #000000;
	transform: rotate(180deg);
	top: -51px;
	left: 30px;
	}

	.ear2 {
	width: 40px;
	height: 40px;
	border-radius: 40px;
	background: -webkit-radial-gradient(right, #f6caaf 30%, #e9b699 80%);
	position: relative;
	left: 120px;
	top: -42px;
	z-index: 2;
	}

	.ear2:before {
	position: absolute;
	content: " ";
	width: 20px;
	height: 20px;
	border-radius: 30px;
	background-color: #e9b699;
	top: 10px;
	left: 10px;
	}

	.ear2:after {
	position: absolute;
	content: " ";
	width: 10px;
	height: 0px;
	border-right: 5px solid transparent;
	border-left: 0px solid blue;
	border-bottom: 45px solid #000000;
	transform: rotate(180deg);
	top: -50px;
	left: -5px;
	}

	.eye1 {
	width: 15px;
	height: 15px;
	border-radius: 15px;
	background: black;
	position: relative;
	left: 30px;
	top: 40px;
	z-index: 25;
	}

	.eye1:before {
	width: 6px;
	height: 6px;
	border-radius: 6px;
	background: white;
	position: absolute;
	content: " ";
	left: 6px;
	top: 4px;
	z-index: 25;
	animation-name: bb;
	animation-duration: 5s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	}

	@keyframes bb {
	0% {
	background-color: white;
	}
	10% {
	background-color: white;
	}
	11% {
	background-color: transparent;
	}
	13% {
	background-color: transparent;
	}
	13% {
	background-color: white;
	}
	60% {
	background-color: white;
	}
	61% {
	background-color: white;
	left: 4px;
	}
	71% {
	background-color: white;
	left: 4px;
	}
	72% {
	background-color: transparent;
	left: 4px;
	}
	75% {
	background-color: transparent;
	left: 4px;
	}
	75% {
	background-color: white;
	left: 4px;
	}
	95% {
	background-color: white;
	left: 4px;
	}
	100% {
	left: 6px;
	}
	}

	.eye1:after {
	width: 20px;
	height: 8px;
	border-radius: 6px;
	background: #e9b697;
	position: absolute;
	content: " ";
	left: 24px;
	top: 30px;
	z-index: 25;
	}

	.eye2 {
	width: 15px;
	height: 15px;
	border-radius: 15px;
	background: black;
	position: relative;
	left: 80px;
	top: 25px;
	z-index: 25;
	}

	.eye2:before {
	width: 6px;
	height: 6px;
	border-radius: 6px;
	background: white;
	position: absolute;
	content: " ";
	left: 6px;
	top: 4px;
	z-index: 25;
	animation-name: cc;
	animation-duration: 5s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	}

	@keyframes cc {
	0% {
	background-color: white;
	}
	10% {
	background-color: white;
	}
	11% {
	background-color: transparent;
	}
	13% {
	background-color: transparent;
	}
	13% {
	background-color: white;
	}
	60% {
	background-color: white;
	}
	61% {
	background-color: white;
	left: 4px;
	}
	71% {
	background-color: white;
	left: 4px;
	}
	72% {
	background-color: transparent;
	left: 4px;
	}
	75% {
	background-color: transparent;
	left: 4px;
	}
	75% {
	background-color: white;
	left: 4px;
	}
	95% {
	background-color: white;
	left: 4px;
	}
	100% {
	left: 6px;
	}
	}

	.eye2:after {
	width: 25px;
	height: 15px;
	border: 5px solid #e9b697;
	border-radius: 0 0 15px 15px;
	background: #f15960;
	position: absolute;
	content: " ";
	left: -32px;
	top: 50px;
	z-index: 25;
	}

	.neck {
	position: relative;
	width: 40px;
	height: 40px;
	border-radius: 0 0 30px 30px;
	background: #f6caaf;
	left: 45px;
	top: -5px;
	z-index: 2;
	}

	.boy_body {
	width: 140px;
	height: 100px;
	background: linear-gradient(
	to right,
	#0d0d29 0px 44px,
	cornflowerblue 44px 92px,
	#0d0d29 92px 140px
	);
	border-radius: 100px 100px 0 0;
	position: relative;
	top: -35px;
	left: -5px;
	}

	.boy_body:before {
	position: absolute;
	content: "";
	width: 15px;
	height: 15px;
	background-color: #0d0d29;
	transform: rotate(45deg);
	left: 62px;
	top: 35px;
	}

	.boy_body:after {
	position: absolute;
	content: "";
	width: 0px;
	height: 0px;

	border-bottom: 60px solid #0d0d29;
	border-left: 12px solid transparent;
	border-right: 12px solid transparent;

	left: 57.4px;
	top: 50px;
	}
	.sc1 {
	width: 35px;
	height: 35px;
	background-color: #0759f1;
	position: relative;
	left: 30px;
	top: 4px;
	transform: rotate(-35deg);
	z-index: 1;
	}

	.sc1:before {
	width: 20px;
	height: 110px;
	background-color: #292e4c;
	position: absolute;
	content: "";
	left: -22px;
	top: -4px;
	transform: rotate(15deg);
	}

	.sc1:after {
	width: 15px;
	height: 0px;
	position: absolute;
	content: " ";
	left: -30px;
	top: 40px;
	border-top: 50px solid #292e4c;
	border-left: 8px solid transparent;
	transform: rotate(12deg);
	z-index: 1;
	}

	.sc2 {
	width: 35px;
	height: 35px;
	background-color: #0759f1;
	position: absolute;
	left: 75px;
	top: 5px;
	transform: rotate(30deg);
	z-index: 1;
	}

	.sc2:before {
	width: 20px;
	height: 110px;
	background-color: #292e4c;
	position: absolute;
	content: "";
	left: 30px;
	top: -4px;
	transform: rotate(-10deg);
	}

	.sc2:after {
	width: 15px;
	height: 0px;
	position: absolute;
	content: " ";
	left: 35px;
	top: 40px;
	border-top: 50px solid #292e4c;
	border-right: 8px solid transparent;
	transform: rotate(-10deg);
	z-index: 1;
	}