CSS PIGEON

CSS PIGEON

HTML:

	<html>

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

	<body>
	<div class="all">
	<div class="head">
	<div class="eye1"></div>
	<div class="eye2"></div>
	<div class="nose"></div>
	</div>
	<div class="neck"></div>
	<div class="bd1"></div>
	<div class="bd2"></div>
	<div class="bd3"></div>
	<div class="bd4"></div>
	<div class="tail"></div>
	<div class="leg"></div>
	</div>
	</body>

	</html>

view raw pigeon.html hosted with ❤ by GitHub

CSS:

	body {
	background: #ef7f67;
	}

	.all {
	width: 300px;
	height: 300px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	}

	.head {
	width: 85px;
	height: 95px;
	background: #464b5f;
	border-radius: 85px 85px 0 0;
	}

	.eye1 {
	width: 27px;
	height: 27px;
	background: white;
	border-radius: 27px;
	float: left;
	position: relative;
	top: 27px;
	left: 7px;
	}

	.eye1:before {
	content: " ";
	position: absolute;
	width: 18px;
	height: 18px;
	background: black;
	border-radius: 20px;
	left: 4.8px;
	top: 4.8px;
	}

	.eye1:after {
	content: " ";
	position: absolute;
	width: 5px;
	height: 5px;
	background: silver;
	border-radius: 5px;
	left: 10px;
	top: 10px;
	}
	.eye2 {
	width: 27px;
	height: 27px;
	background: white;
	border-radius: 27px;
	float: right;
	position: relative;
	top: 27px;
	right: 7px;
	}

	.eye2:before {
	content: " ";
	position: absolute;
	width: 18px;
	height: 18px;
	background: black;
	border-radius: 20px;
	left: 4.8px;
	top: 4.8px;
	}

	.eye2:after {
	content: " ";
	position: absolute;
	width: 5px;
	height: 5px;
	background: silver;
	border-radius: 5px;
	left: 10px;
	top: 10px;
	}

	.nose {
	width: 0px;
	height: 0px;
	position: relative;
	top: 63px;
	left: 40%;
	border-top: 25px solid #ff6e40;
	border-left: 9px solid transparent;
	border-right: 9px solid transparent;
	}

	.neck {
	width: 85px;
	height: 40px;
	background: linear-gradient(to top left, #71788b 50%, #464b5f 50%);
	}

	.bd1 {
	width: 85px;
	height: 100px;
	background: #71788b;
	border-radius: 0 0 0 75px;
	position: relative;
	float: left;
	z-index: 1;
	}

	.bd1:before {
	content: " ";
	position: absolute;
	width: 60px;
	height: 117px;
	background: #71788b;
	left: 63px;
	top: -17px;
	border-radius: 0 0 0 10px;
	}

	.bd2 {
	width: 0px;
	height: 0px;
	border-top: 73px solid transparent;
	border-bottom: 50px solid transparent;
	border-left: 160px solid #71788b;
	transform: rotate(17deg);
	position: relative;
	right: 40px;
	top: 3px;
	float: right;
	}

	.bd3 {
	position: relative;
	width: 60px;
	height: 103px;
	background: #8e97a8;
	transform: rotate(18deg);
	border-radius: 50px 0 0 50px;
	left: 47px;
	top: -30px;
	z-index: 5;
	}

	.bd4 {
	width: 0px;
	height: 0px;
	border-top: 63px solid transparent;
	border-bottom: 40px solid transparent;
	border-left: 160px solid #8e97a8;
	position: relative;
	transform: rotate(18deg);
	right: 40px;
	top: 90px;
	float: right;
	top: -120px;
	z-index: 2;
	}

	.bd4:before {
	content: " ";
	position: absolute;
	width: 80px;
	height: 20px;
	background: #464b5f;
	left: -160px;
	top: -40px;
	transform: skew(-40deg);
	border-radius: 10px 0 0 10px;
	transform: rotate(-18deg);
	box-shadow: inset 0px 0px 15px 3px black;
	}

	.bd4:after {
	content: " ";
	position: absolute;
	width: 120px;
	height: 20px;
	background: #464b5f;
	left: -150px;
	top: -10px;
	transform: skew(-40deg);
	border-radius: 10px 0 0 10px;
	transform: rotate(-18deg);
	box-shadow: inset 0px 0px 15px 3px black;
	}
	.tail {
	width: 60px;
	height: 80px;
	background: #464b5f;
	position: relative;
	top: -5px;
	left: 220px;
	transform: skew(40deg);
	border-radius: 0 0 10px 20px;
	z-index: 5;
	box-shadow: inset 0px 0px 15px 3px black;
	}

	.tail:before {
	content: " ";
	position: absolute;
	width: 25px;
	height: 70px;
	background: #ef7f67;
	top: -90px;
	left: 55px;
	transform: skew(-40deg);
	transform: rotate(-20deg);
	}

	.leg {
	width: 15px;
	height: 60px;
	background: #de652e;
	position: relative;
	top: -85px;
	left: 70px;
	}

	.leg:before {
	content: " ";
	position: absolute;
	width: 15px;
	height: 60px;
	background: #de652e;
	left: 60px;
	top: 2px;
	}