Parrot - Real Helper

md.shakil hossain

1563

Parrot

<link href='http://fonts.googleapis.com/css?family=Roboto:100' rel='stylesheet' type='text/css'>
<h1>Parrot</h1>
<div id="parrot">
		<div id="header">
			<div id="peakt"></div>
			<div id="face"></div>
			<div id="eye"></div>
			<div id="peakf"></div>
		</div>
		<div id="body">
			<div id="wing1"></div>
			<div id="wing2"></div>
			<div id="wing3"></div>
			<div id="shadowing"></div>
		</div>
		<div id="foot"></div>
		<div id="tail"></div>
	</div>

Try it Yourself >>

html{
	width: 100%;
	height: 100%;
}
body{
  font-family: 'Roboto', sans-serif;
	padding: 0;
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	-webkit-justify-content: center;
	-ms-justify-content: center;
	justify-content: center;
	-webkit-align-items: center;
	-ms-align-items: center;
	align-items: center;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
	background-color: #A5D2F0;
	width: 100%;
	height: 100%;
	margin: 0;
}
h1{
   margin: 20px 0px;
  font-weight: 100;
  font-size: 5em;
  color:#4F4F4F;
}
#parrot{
	width: 220px;
	height: 240px;
  min-width: 220px;
	min-height: 240px;
	position: relative;
}
#header{
	position: absolute;
	width: 90px;
	height: 90px;
	border-radius: 50%;
	right: 0px;
}
#face{
	position: absolute;
	width: 90px;
	height: 90px;
	border-radius: 50%;
	right: 0px;
	background-color: white;
	background: linear-gradient(to right,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 51%,rgba(255,255,255,0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 );
	z-index: 20; 
}
#eye{
	position: absolute;
	left: 10px;
	top: 50%;
	margin-top: -12.5px;
	width: 25px;
	height: 25px;
	background-color: #4F4F4F;
	border-radius: 50%;
	z-index: 100;
}
#peakt{
	width: 110px;
	height: 110px;
	position: absolute;
	right: -21px;
	border-radius: 50%;
	background: linear-gradient(to bottom,  rgba(241,185,77,1) 0%,rgba(241,185,77,1) 7%,rgba(241,185,77,1) 26%,rgba(241,185,77,1) 39%,rgba(241,185,77,1) 47%,rgba(241,185,77,1) 50%,rgba(241,185,77,0) 51%,rgba(255,255,255,0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1b94d', endColorstr='#00ffffff',GradientType=0 );
}
#peakf{
	width: 70px;
	height: 70px;
	position: absolute;
	right: 12px;
	border-radius: 50%;
	background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(240,154,57,0) 49%,rgba(240,152,53,1) 50%,rgba(240,152,53,1) 76%,rgba(240,152,53,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#f09835',GradientType=0 );
	bottom: 0;
	z-index: 10;
}
#body{
	  position: absolute;
	  top: 0px;
	  z-index: 10;
	  width: 75px;;
	  background-color: #18A47E;
	  border-radius: 200px 0px;
	  right: 45px;
	  height: 180px;
}
#wing1,#wing2,#wing3,#shadowing{
	position: absolute;
	border-radius: 61%;
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */ /* FF3.6+ */ /* Chrome,Safari4+ */ /* Chrome10+,Safari5.1+ */ /* Opera 11.10+ */
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzE4YTQ3ZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjE3JSIgc3RvcC1jb2xvcj0iIzE4YTQ3ZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQwJSIgc3RvcC1jb2xvcj0iIzE4YTQ3ZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQxJSIgc3RvcC1jb2xvcj0iIzE4YTQ3ZSIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMCIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); /* IE10+ */
	background: linear-gradient(to right,  rgba(24,164,126,1) 0%,rgba(24,164,126,1) 17%,rgba(24,164,126,1) 40%,rgba(24,164,126,0) 41%,rgba(255,255,255,0) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#18a47e', endColorstr='#00ffffff',GradientType=1 ); /* IE6-8 */
	transform: rotate(-60deg);
	z-index: 200;
}
#wing1{
	z-index: 11;
	height: 130px;
	width: 100px;
	top: -25px;
	right: 30px;
	transform: rotate(-50deg);
	-webkit-animation: movewingp 10s infinite;
	-o-animation: movewingp 10s infinite;
	animation: movewingp 10s infinite;
	-webkit-animation-timing-function: linear;
	-o-animation-timing-function: linear;
	animation-timing-function: linear;
}
#wing2{
	z-index: 111;
	height: 130px;
	width: 100px;
	top: 5px;
	right: 25px;
	transform: rotate(-75deg);
	-webkit-animation: movewings 10s infinite;
	-o-animation: movewings 10s infinite;
	animation: movewings 10s infinite;
	-webkit-animation-timing-function: linear;
	-o-animation-timing-function: linear;
	animation-timing-function: linear;
}
#wing3{
	z-index: 11;
	height: 130px;
	width: 100px;
	top: 26px;
	right: 14px;
	transform: rotate(-100deg);
	-webkit-animation: movewingt 10s infinite;
	-o-animation: movewingt 10s infinite;
	animation: movewingt 10s infinite;
	-webkit-animation-timing-function: linear;
	-o-animation-timing-function: linear;
	animation-timing-function: linear;
}
#shadowing{
	z-index: 1;
	height: 130px;
	width: 100px;
	top: 37px;
	right: 13px;
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzIwOGU3MSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjIxJSIgc3RvcC1jb2xvcj0iIzIwOGU3MSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQwJSIgc3RvcC1jb2xvcj0iIzIwOGU3MSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQxJSIgc3RvcC1jb2xvcj0iIzIwOGU3MSIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMCIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(left,  rgba(32,142,113,1) 0%, rgba(32,142,113,1) 21%, rgba(32,142,113,1) 40%, rgba(32,142,113,0) 41%, rgba(255,255,255,0) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(32,142,113,1)), color-stop(21%,rgba(32,142,113,1)), color-stop(40%,rgba(32,142,113,1)), color-stop(41%,rgba(32,142,113,0)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left,  rgba(32,142,113,1) 0%,rgba(32,142,113,1) 21%,rgba(32,142,113,1) 40%,rgba(32,142,113,0) 41%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left,  rgba(32,142,113,1) 0%,rgba(32,142,113,1) 21%,rgba(32,142,113,1) 40%,rgba(32,142,113,0) 41%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left,  rgba(32,142,113,1) 0%,rgba(32,142,113,1) 21%,rgba(32,142,113,1) 40%,rgba(32,142,113,0) 41%,rgba(255,255,255,0) 100%); /* IE10+ */
	background: linear-gradient(to right,  rgba(32,142,113,1) 0%,rgba(32,142,113,1) 21%,rgba(32,142,113,1) 40%,rgba(32,142,113,0) 41%,rgba(255,255,255,0) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#208e71', endColorstr='#00ffffff',GradientType=1 );
	transform: rotate(-110deg); /* IE6-8 */
	-webkit-animation: shadow 10s infinite;
	-o-animation: shadow 10s infinite;
	animation: shadow 10s infinite;
	-webkit-animation-timing-function: linear;
	-o-animation-timing-function: linear;
	animation-timing-function: linear;
}
#shadowing:before{
	content: '';
	position: absolute;
	width: 30px;
	height: 30px;
	background: #A5D2F0;
	transform: rotate(47deg);
	top: -15px;
	left: 15px;
}
#foot{
	position: absolute;
	width: 125px;
	height: 125px;
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQ5JSIgc3RvcC1jb2xvcj0iIzFkYTY4MSIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzE4YTQ3ZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijc2JSIgc3RvcC1jb2xvcj0iIzE4YTQ3ZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxOGE0N2UiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(29,166,129,0) 49%, rgba(24,164,126,1) 50%, rgba(24,164,126,1) 76%, rgba(24,164,126,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(49%,rgba(29,166,129,0)), color-stop(50%,rgba(24,164,126,1)), color-stop(76%,rgba(24,164,126,1)), color-stop(100%,rgba(24,164,126,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(29,166,129,0) 49%,rgba(24,164,126,1) 50%,rgba(24,164,126,1) 76%,rgba(24,164,126,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(29,166,129,0) 49%,rgba(24,164,126,1) 50%,rgba(24,164,126,1) 76%,rgba(24,164,126,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(29,166,129,0) 49%,rgba(24,164,126,1) 50%,rgba(24,164,126,1) 76%,rgba(24,164,126,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(29,166,128,0) 49%, rgba(24,164,126,1)  50%,rgba(24,164,126,1) 76%, rgba(24,164,126,1)  100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#18a47e',GradientTy

Try it Yourself >>