<!doctype html>
<html>
<head>
<style>
/* Created by codinGyan */
body{background-color:#312546;}
.parrot{animation: move 1s linear -1s infinite;position:absolute; }
@keyframes move{
0% {top:10px}
20% {top:0px}
40% {top:10px}
60% {top:0px}
80% {top:10px}
100% {top:9px}
}
.box{position:absolute;left:20px;}
.parrothead1{width:40px;height:60px;background:#fff;border-radius:50px;position:absolute;top:100px;left:80px;}
.parrotbody1{width:60px;height:120px;background:#dd4d33;position:absolute;top:150px;left:70px;border-radius:40px 40px 0 50px}
.parrotbody2{width:60px;height:100px;background:#dd4d33;position:absolute;top:4px;left:-5px;border-radius:50%;}
.parrothead1::after{content:""; width:10px;height:50px;background:#dd4d33;position:absolute;border-right:10px;border:5px solid #dd4d33;left:20px;border-radius:0 50px }
.a{content:""; width:10px;height:50px;background:#dd4d33;position:absolute;border-right:10px;border:5px solid #dd4d33;left:10px;border-radius:0 50px;transform:rotateZ(45deg);top:10px; }
.b{content:""; width:5px;height:15px;background:#dd4d33;position:absolute;border-right:10px;border:5px solid #dd4d33;left:10px;border-radius:0 10px;transform:rotateZ(-70deg);top:-6px; }
.beak1{ width: 40px;
height: 40px;
border-radius: 50%;
box-shadow: 10px 10px 0 0 orange;transform:rotateX(140deg);transform:rotateZ(210deg);position:absolute;top:125px;left:70px;z-index:-1;}
.c{width: 29px;
height: 30px;
border-radius: 50%;
box-shadow: 10px 17px 0 0 #dd4d33;transform:rotateX(140deg);transform:rotateZ(270deg);position:absolute;top:7px;left:-10px;z-index:1;}
.beak2{width:30px;height:30px;background:black;border-radius:50%;position:absolute;top:115px;left:70px;z-index:-2;}
.eye1{width:8px;height:8px;background:black;border-radius:50%;position:absolute;top:117px;left:85px;animation: eye 1s linear -1s infinite;}
.eye{width:3px;height:3px;background:#fff;position:absolute;top:2px;left:1px;}
@keyframes eye{
0%{left:86px;}
30%{right:85px;}
60%{top:120px;}
}
.wing{position:absolute;top:0px;}
.wing1{width:40px;height:100px;background:steelblue;border-radius:100px 100px 0 250px;transform:rotateZ(-35deg);position:absolute;top:170px;left:104px;}
.wing2{width:42px;height:80px;background:olivedrab;border-radius:100px 100px 0 250px;transform:rotateZ(-35deg);position:absolute;top:170px;left:90px;}
.wing3{width:43px;height:60px;background:orange;border-radius:200px 100px 0 250px;transform:rotateZ(-30deg);position:absolute;top:170px;left:80px;}
.tail1{width:43px;height:120px;background:firebrick;border-radius:200px 100px 0 250px;transform:rotateZ(-30deg);position:absolute;top:230px;left:110px;z-index:-5;}
.tail2{width:33px;height:120px;background:#dd4d33;border-radius:200px 100px 0 250px;transform:rotateZ(-30deg);position:absolute;top:230px;left:120px;z-index:-5;}
.feet1{width:5px;height:20px;background:orange;border-radius:10px;position:absolute;top:266px;left:90px;}
.wood{width:200px;background:rosybrown;height:10px;position:absolute;top:270px;}
.feet2{width:5px;height:20px;background:sandybrown;border-radius:10px;position:absolute;top:266px;left:95px;}
.feet3{width:5px;height:20px;background:orange;border-radius:10px;position:absolute;top:266px;left:100px;}
.feet4{width:5px;height:20px;background:orange;border-radius:10px;position:absolute;top:266px;left:118px;}
.feet5{width:5px;height:20px;background:sandybrown;border-radius:10px;position:absolute;top:266px;left:123px;}
.feet6{width:5px;height:20px;background:orange;border-radius:10px;position:absolute;top:266px;left:128px;}
.leaf1 {
width: 40px; height: 50px;
background-color: #A0DE21;
-moz-border-radius: 100px 0px;
-webkit-border-radius: 100px 0px;
border-radius: 200px 0px;transform:rotateZ(90deg);position:absolute;top:230px;left:20px;animation: leaf1 1s linear -1s infinite;
}
.leaf2 {
width: 40px; height: 50px;
background-color: #A0DE21;
-moz-border-radius: 100px 0px;
-webkit-border-radius: 100px 0px;
border-radius: 200px 0px;transform:rotateZ(190deg);position:absolute;top:270px;left:30px;animation: leaf2 1s linear -1s infinite}
@keyframes leaf1{
0%{left:5px;}
30%{left:0px;}
60%{left:-5px;}
100%{left:5px;}}
.star {
position: relative;
display: inline-block;
width: 0;
height: 0;
margin-left: .9em;
margin-right: .9em;
margin-bottom: 1.2em;
border-right: .3em solid transparent;
border-bottom: .7em solid #FC0;
border-left: .3em solid transparent;
/* Controlls the size of the stars. */
font-size: 24px;
}
.moon{width:50px;height:50px;background:#fff;border-radius:50%;animation: neon1 1.5s ease-in-out infinite alternate;top:20px;position:absolute;left:10px}
@keyframes neon1 {
from {
box-shadow: 0 0 10px #eee, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ffffc6, 0 0 50px #ffffc6, 0 0 60px #ffffc6, 0 0 70px #ffffc6, 0 0 80px #ffffc6;
}
to {
box-shadow: 0 0 5px #fff, 0 0 1px #fff, 0 0 15px #fff, 0 0 20px #ffffc6, 0 0 35px #ffffc6, 0 0 40px #ffffc6, 0 0 50px #ffffc6, 0 0 75px #ffffc6;
}
}
h2 {position:absolute;
font: 400 30px/0.8 'Great Vibes', Helvetica, sans-serif;
color: #fff;
text-shadow: 4px 4px 3px rgba(0,0,0,0.1); top:330px;line-height:30px;
}
.circle1{width:5px;height:5px;background:#fff;border-radius:50%;position:absolute;top:100px;animation: neon1 1.5s ease-in-out infinite alternate;}
.circle2{width:5px;height:5px;background:#fff;border-radius:50%;position:absolute;top:70px;left:100px;animation: neon1 1.5s ease-in-out infinite alternate;}
.circle3{width:5px;height:5px;background:#fff;border-radius:50%;position:absolute;top:30px;left:130px;animation: neon1 1.5s ease-in-out infinite alternate;}
.circle4{width:5px;height:5px;background:#fff;border-radius:50%;position:absolute;top:130px;left:150px;animation: neon1 1.5s ease-in-out infinite alternate;}
.circle5{width:5px;height:5px;background:#fff;border-radius:50%;position:absolute;top:130px;left:10px;animation: neon1 1.5s ease-in-out infinite alternate;}
.circle6{width:5px;height:5px;background:#fff;border-radius:50%;position:absolute;top:170px;left:150px;animation: neon1 1.5s ease-in-out infinite alternate;}
.circle7{width:5px;height:5px;background:#fff;border-radius:50%;position:absolute;top:180px;left:20px;animation: neon1 1.5s ease-in-out infinite alternate;}
</style>
</head>
<body>
<div class="box">
<div class="content">
<h2>
By Pankaj</h2>
</div>
<div class="moon"></div>
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
<div class="circle5"></div>
<div class="circle6"></div>
<div class="circle7"></div>
<div class="circle8"></div>
<div class="circle9"></div>
<div class="circle10"></div>
<div class="parrot">
<div class="parrothead1">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
</div>
<div class="parrotbody1">
<div class="parrotbody2"></div></div>
<div class="beak1"></div>
<div class="beak2"></div>
<div class="eye1"><div class="eye"></div></div>
<div class="wing">
<div class="wing1"></div>
<div class="wing2"></div>
<div class="wing3"></div>
</div>
<div class="tail1"></div>
<div class="tail2"></div>
</div>
<div class="wood"></div>
<div class="feet1"></div>
<div class="feet2"></div>
<div class="feet3"></div>
<div class="feet4"></div>
<div class="feet5"></div>
<div class="feet6"></div>
<div class="leaf1"></div>
<div class="leaf2"></div>
</div>
</body>
</html>
Code For Beautifull Parrot using programming languages
Reviewed by Shaishav Anand
on
July 17, 2019
Rating:
Reviewed by Shaishav Anand
on
July 17, 2019
Rating:
Very nice Blog
ReplyDeleteTo know more about online coding for kids visit us