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

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

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