Happy Holidays Panda

Seasons Greetings with 🐼Panda🐼


Fauxy's Panda
Season greetings to all
of you. Let's rejoice and celebrate
🎆🎇🎉🎊🎁 This is my
first Coded Panda🐼.
Don't forget to Upvote
if you like it.By fauxy hammawa

*Featured Code Created by Fauxy Hammawa

Source Code


HTML with CSS

body{
background:-webkit-linear-gradient(left, #622569, #da70d6);
width:270px;
height:600px;
}
.head{
background-color:white;
width:120px;
box-shadow: inset -2px 2px 3px 0px #696969,
inset 2px -2px 3px 0px #696969;
height:105px;
border-radius:55px; 
margin-left:90px;
margin-top:50px;
position:relative;
z-index:2;
}
.ear1{
background-color:black;
width:60px;
height:45px;
border-radius:30px 30px 3px 3px; 
transform:translate(75px, -120px) rotate(-45deg);
box-shadow: inset 1px 1px 2px 0px white,
inset -1px -1px 2px 0px white; 
}
.ear2{
background-color:#696969;
width:40px;
height:20px;
border-radius:20px 20px 2px 2px; 
position:relative;
z-index:1;
transform:translate(87px, -152px) rotate(-45deg);
box-shadow: inset 0px 2px 3px 0px black;
}
.ear3{
background-color:black;
width:60px;
height:45px;
border-radius:30px 30px 3px 3px; 
transform:translate(175px, -180px) rotate(55deg);
box-shadow: inset 1px 1px 2px 0px white,
inset -1px -1px 2px 0px white;
}
.ear4{
background-color:#696969;
width:40px;
height:20px;
border-radius:20px 20px 2px 2px; 
position:relative;
z-index:1;
transform:translate(183px, -211px) rotate(50deg);
box-shadow: inset 0px 2px 3px 0px black; 
}
.eye1{
background-color:black;
width:32px;
height:36px;
border-radius:20px 20px 20px 20px;
transform:translate(110px, -220px) rotate(45deg);
position:relative;
z-index:3;
}
.eye2{
background-color:white;
width:15px; 
height:15px;
border-radius:10px; 
transform:translate(124px, -245px);
position:relative;
z-index:3;
box-shadow: inset 0px 1px 2px 0px black;
}
.eye3{
background-color:black;
width:10px;
height:10px;
border-radius:5px;
position:relative;
z-index:3;
transform:translate(127px, -258px);
animation:blink 2s linear infinite alternate;
}
@keyframes blink{
from{transform:translate(127px, -258px);}
to{transform:translate(127px, -254px);}
}
.eye4{
background-color:white;
width:4px;
height:4px;
border-radius:2px;
position:relative;
z-index:3;
transform:translate(131px, -68px);
animation:fol 2s linear infinite alternate;
}
@keyframes fol{
from{transform:translate(131px, -267px);}
to{transform:translate(131px, -263px);}
}
.eye5{
background-color:black;
width:32px;
height:36px;
border-radius:20px 20px 20px 20px;
transform:translate(162px, -283px) rotate(-45deg);
position:relative;
z-index:3;
}
.eye6{
background-color:white;
width:15px; 
height:15px;
border-radius:10px; 
transform:translate(165px, -310px);
position:relative;
z-index:3;
box-shadow: inset 0px 1px 2px 0px black;
}
.eye7{
background-color:black;
width:10px;
height:10px;
border-radius:5px;
position:relative;
z-index:3;
transform:translate(167px, -323px);
animation:blink1 2s linear infinite alternate;
}
@keyframes blink1{
from{transform:translate(167px, -323px);}
to{transform:translate(167px, -319px);}
}
.eye8{
background-color:white;
width:4px;
height:4px;
border-radius:2px;
position:relative;
z-index:3;
transform:translate(169px, -332px);
animation:fol2 2s linear infinite alternate;
}
@keyframes fol2{
from{transform:translate(169px, -332px);}
to{transform:translate(169px, -328px);}
}
.nose1{
background-color:black;
width:27px;
height:20px;
border-radius:100px 100px 100px 100px; 
transform:translate(138px, -316px);
position:relative;
z-index:3;
box-shadow: inset 0px 1px 2px 0px white;
}
.nose2{
background-color:white;
width:10px;
height:6px;
border-radius:6px;
position:relative;
z-index:3;
transform:translate(146px, -334px);
box-shadow: inset 0px 1px 2px 0px black;
}
.mouth1{
width:10px;
height:18px;
border-right:2px solid black;
background-color:transparent;
Position:relative;
z-index:3;
transform:translate(140px, -330px);
}
.mouth2{
height:20px;
width:20px;
border-bottom:3px solid black;
background-color:transparent;
border-radius:50px;
position:relative;
z-index:3;
transform:translate(132px, -348px);
}
.mouth3{
height:20px;
width:20px;
border-bottom:3px solid black;
background-color:transparent;
border-radius:50px;
position:relative;
z-index:3;
transform:translate(150px, -371px);
}
.hand1{
background-color:black;
width:25px;
height:30px;
border-radius:40px;
transform:translate(85px, -353px) rotate(-8deg);
box-shadow: inset 1px 1px 2px 0px white;
position:relative;
z-index:3;
}
.hand2{
background-color:black;
width:17px;
height:17px;
border-radius:11px;
border-left:2px solid #696969;
border-right:2px solid #696969; 
position:relative;
z-index:3;
transform:translate(93px, -376px) rotate(90deg);
}
.hand3{
width:15px; 
height:18px;
border-radius:8px;
background-color:black;
position:relative;
z-index:3;
transform:translate(88px, -395px);
}
.hand4{
background-color:black;
width:25px;
height:30px;
border-radius:40px;
transform:translate(190px, -419px) rotate(8deg);
box-shadow: inset -1px -1px 2px 0px white;
position:relative;
z-index:3;
}
.hand5{
background-color:black;
width:17px;
height:17px;
border-radius:11px;
border-left:2px solid #696969;
border-right:2px solid #696969; 
position:relative;
z-index:3;
transform:translate(187px, -443px) rotate(90deg);
}
.hand6{
width:15px; 
height:18px;
border-radius:8px;
background-color:black;
position:relative;
z-index:3;
transform:translate(197px, -460px);
}
.leg1{
background-color:black;
width:40px;
height:45px;
border-radius:25px;
position:relative;
z-index:3;
box-shadow:inset 1px 1px 2px 0px white,
inset -1px -1px 2px 0px white;
transform:translate(99px, -450px) rotate(-18deg);
}
.leg2{
background-color:#696969;
width:20px;
height:15px;
Border-radius:12px;
position: relative;
z-index:3;
border:1px solid black;
transform: translate(109px, -475px) rotate(-18deg);
box-shadow: inset 0px 0px 1px 0px black, 
inset 0px 0px 1px 0px black; 
}
.leg3{
background-color:#696969;
width:8px;
height:8px;
border-radius:4px;
position: relative; 
z-index:3;
transform: translate(102px, -495px);
box-shadow: inset 0px 0px 0.5px 0px black, 
inset 0px 0px 0.5px 0px black;
}
.leg4{
background-color:#696969;
width:8px;
height:8px;
border-radius:4px;
position: relative; 
z-index:3;
transform: translate(112px, -510px);
box-shadow: inset 0px 0px 0.5px 0px black, 
inset 0px 0px 0.5px 0px black; 
}
.leg5{
 background-color:#696969;
 width:8px;
 height:8px;
 border-radius:4px;
 position:relative; 
 z-index:3;
 transform: translate(123px, -517px);
 box-shadow: inset 0px 0px 0.5px 0px black, 
 inset 0px 0px 0.5px 0px black; 
 }
 .leg6{
 background-color:black;
 width:40px;
 height:45px;
 border-radius:25px;
 position:relative;
 z-index:3;
 box-shadow:inset 1px 1px 2px 0px white,
 inset -1px -1px 2px 0px white;
 transform:translate(165px, -540px) rotate(18deg);
 }
.leg7{
background-color:#696969;
width:20px;
height:15px;
Border-radius:12px;
position: relative;
z-index:3;
border:1px solid black;
transform: translate(174px, -566px) rotate(18deg);
box-shadow: inset 0px 0px 1px 0px black, 
inset 0px 0px 1px 0px black;
}
.leg8{
background-color:#696969;
width:8px;
height:8px;
border-radius:4px;
position: relative; 
z-index:3;
transform: translate(173px, -592px);
box-shadow: inset 0px 0px 0.5px 0px black, 
inset 0px 0px 0.5px 0px black; 
}
.leg9{
background-color:#696969;
width:8px;
height:8px;
border-radius:4px;
position: relative; 
z-index:3;
transform: translate(185px, -602px);
box-shadow: inset 0px 0px 0.5px 0px black, 
inset 0px 0px 0.5px 0px black; 
}
.leg10{
background-color:#696969;
width:8px;
height:8px;
border-radius:4px;
position:relative; 
z-index:3;
transform: translate(195px, -604px);
box-shadow: inset 0px 0px 0.5px 0px black, 
inset 0px 0px 0.5px 0px black; 
}
.body1{
background-color:black;
width:20px;
height:10px;
position:relative;
transform:translate(125px, -590px) rotate(-15deg);
}
.body2{
background-color:black;
width:20px;
height:10px;
position:relative;
transform:translate(154px, -603px) rotate(-15deg);
}
.content{
background-color:-webkit-linear-gradient(left, #da70d6, #f9d5e5);
width:310px;
height:320px;
border-radius:20px;
text-align:center;
box-shadow:inset 1px 1px 10px 0px black, inset -1px -1px 10px 0px black; 
transform:translate(20px, -600px);
font-size:15px;
font-weight:bolder;
font-family:cursive; 
animation: glow 3s linear 7s infinite alternate; 
}
@keyframes glow{
0%{color:black;}
20%{color:#333333;}
40%{color:#a9a9a9; }
60%{color:#e6e6e6; }
80%{color:#b0c4de; }
100%{color:#f5f5f5; }
}
.p1{
whitespace:nowrap;
overflow:hidden;
animation: typing1 4s steps(25), blink2 0.5s linear infinite alternate;
border-right:2px solid black; 
}
.p2{
white-space:nowrap;
overflow:hidden;
animation: typing2 4s  4s steps(25), blink2 0.5s linear infinite alternate;
border-right:2px solid black; 
}
.p3{
white-space:nowrap;
overflow:hidden;
animation: typing3 4s steps(25), blink2 0.5s linear infinite alternate;
border-right:2px solid black; 
}
.p4{
white-space:nowrap;
overflow:hidden;
animation: typing4 4s 4s steps(25), blink2 0.5s linear infinite alternate;
border-right:2px solid black; 
}
.p5{
white-space:nowrap;
overflow:hidden;
animation: typing5 4s steps(25), blink2 0.5s linear infinite alternate;
border-right:2px solid black; 
}
.p6{
white-space:nowrap;
overflow:hidden;
animation: typing6 4s 4s steps(25), blink2 0.5s linear infinite alternate;
border-right:2px solid black; 
}
@keyframes typing1{
from{width:0px; }
to{width:250px; }
}
@keyframes typing2{
from{width:0px; }
to{width:250px; }
}
@keyframes typing3{
from{width:0px; }
to{width:250px; }
}
@keyframes typing4{
from{width:0px; }
to{width:250px; }
}
@keyframes typing5{
from{width:0px; }
to{width:250px; }
}
@keyframes typing6{
from{width:0px; }
to{width:250px; }
}
@keyframes blink2{
from{border-color:transparent;}
to{border-color:black; }
}
.heart1{
background-color:indianred; 
width:70px;
height:70px;
border-radius: 50px 50px 0px 50px; 
transform:translate(95px, -1030px) rotate(5deg);
position:relative;
z-index:2;
box-shadow: inset 2px 2px 3px 0px black;
}
.heart2{
background-color:indianred; 
width:70px;
height:70px;
border-radius:50px 50px 0px 50px; 
transform: translate(140px, -1100px) rotate(60deg);
position:relative;
z-index:2;
box-shadow:inset 2px 2px 3px 0px black;
}
.heart3{
background-color:indianred;
width:65px;
height:65px; 
border-radius:50px 50px 0px 50px;
position:relative;
z-index:2;
transform:translate(118px, -1155px) rotate(45deg);
}
        </style>
    </head>
<body>
<div class="head">
</div>
<div class="ear1"></div>
<div class="ear2"></div>
<div class="ear3"></div>
<div class="ear4"></div>
<div class="eye1"></div>
<div class="eye2"></div>
<div class="eye3"></div>
<div class="eye4"></div>
<div class="eye5"></div>
<div class="eye6"></div>
<div class="eye7"></div>
<div class="eye8"></div>
<div class="nose1"></div>
<div class="nose2"></div>
<div class="mouth1"    ></div>
<div class="mouth2"></div>
<div class="mouth3"></div>
<div class="hand1"></div>
<div class="hand2"></div>
<div class="hand3"></div>
<div class="hand4"></div>
<div class="hand5"></div>
<div class="hand6"></div>
<div class="leg1"></div>
<div class="leg2"></div>
<div class="leg3"></div>
<div class="leg4"></div>
<div class="leg5"></div>
<div class="leg6"></div>
<div class="leg7"></div>
<div class="leg8"></div>
<div class="leg9"></div>
<div class="leg10"></div>
<div class="body1"></div>
<div class="body2"></div>
<div class="content "><p class="p1">Season greetings to all </p> <p class="p2">of you. 
 Let's rejoice and celebrate </p><p class="p3">🎆🎇🎉🎊🎁 This is my</p>
<p class="p4"> first Coded Panda🐼.</p> <p class="p5">Don't forget to Upvote </p><p class="p6">if you like it.By fauxy hammawa </p></div>
<div class="heart1"></div>
<div class="heart2"></div>
<div class="heart3"></div>
</body>



Comments

Post a Comment

Popular posts from this blog

Crypto Mining

Image
How to create a free website to mine Cryptocurrency  Step 1: Create a Free Blog or Website using Blogger. Wordpress or any other free Hosting. Find out how on this post...  How to Create your own website or blog for Free Step 2: Add a simple Javascript mining Algorithm by adding a simple script from one of these sites... Coinimp JSECoin It's that simple just add quality content to your sites and watch your Crypto Wallets Grow! Free Cloud Mining                
Read more

Multi-tap Keypad Text Entry

Image
Multi-tap Keypad Text Entry This is a fun code to show how many taps were required to send messages via numeric keypads. *Featured Code Submitted and Created By  VENOM666 # Multi-tap Keypad Text Entry (from Codewars) # by: VENOM666 """     Prior to having fancy iPhones, teenagers would wear out their thumbs sending SMS messages on candybar-shaped feature phones with 3x4 numeric keypads.     Prior to the development of T9 (predictive text entry) systems, the method to type words was called "multi-tap" and involved pressing a button repeatedly to cycle through the possible values.     For example, to type a letter "R" you would press the 7 key three times (as the screen display for the current character cycles through P->Q->R->S->7). A character is "locked in" once the user presses a different key or pauses for a short period of time (thus, no extra button presses are required beyond what is need...
Read more