@lukli425
My man really wrote every bit of css into the html ๐ญ
@janarddanmandal2984
5% HTML + 95% CSS
@WhisperedLegends-84
<!doctype html>
<html>
<head>
<style>
body{background: black ;
display: grid ;
place-items: center;
height: 95vh;
}
.container{width: 60px;
height: 60px;
transform-origin: center bottom;
animation: flicker 3ms 200ms ease-in infinite alternate;
}
.flame{bottom: 0;
position: absolute;
border-bottom-right-radius: 50%;
border-bottom-left-radius: 50%;
border-top-left-radius: 50%;
transform: rotate(-45deg) scale(1.5, 1.5);
}
.yellow{left: 15px;
width: 30px;
height: 30px;
background: gold;
box-shadow: 0px 0px 9px 4px
gold;
}
.orange{left: 10px;
width: 40px;
height: 40px;
background-color: orange;
box-shadow: 0px 0px 9px 4px orange;
}
.red{left: 5px;
width: 50px;
height: 50px;
background: orangered;
box-shadow: 0px 0px 5px 4px orangered;
}
.white{
left: 15px;
bottom: -4px;
width: 30px;
height: 30px;
background: white;
box-shadow: 0px 0px 9px 4px white;
}
.circle{border-radius: 50%;
position: absolute;
}
.blue{width: 10px;
height: 10px;
left: 25px;
bottom: -25px;
background: slateblue;
}
.black{width: 40px;
height: 40px;
left: 10px;
bottom: -60px;
background: black;
box-shadow: 0px 0px 15px 10px
black;
}
@keyframes flicker
{0%{transform: rotate(-1deg);}
20%{transform: rotate(1deg);}
40%{transform: rotate(-1deg);}
60%{transform: rotate(1deg)
scaleY(1.04);}
80%{transform: rotate(-2deg)
scaleY(0.92);}
100%{transform: rotate(1deg);}
</style>
</div> </head>
<body>
<div class="container">
<div class="red flame"></div>
<div class="orange flame"></div>
<div class="yellow flame"></div>
<div class="white flame"></div>
<div class="blue flame"></div>
<div class="black circle"></div>
</div>
</body>
</html>
@abaddon6078
Very impressive CSS knowledge
@CanIHaveACookiee
really loving the oddly consistent typing speed and the seemingly realistic typing sounds to go with it, keep up the good work
@SanatanAtoZ-xh6db
I am beginner in coding this is useful for practical.....
@siddhubhai2508
I know they increased the speed of the typing video clip but just think about the person who is writing the code, how he writes with 100% accuracy.๐ฒ
@AmandaLo-i8i
Iโm absolutely obsessed with HTMLCSS and all that good stuff! I happen to find it super fun and super cool
@CrystalBroadcast
As a beginner programmer, First time to try out your code to see, if it will work with me....i am supper happy to gift a trial.... seeing the flame on my system made my dayโค๐๐๐๐
@abbesatty9498
Great effect with reasonable amount of keystrokes and the code is readable .
@murilofujita
Wow! Genius! Amazing! Sensational!
@DynamonsMagic
Normal people :buy a candle Web developer: spend whole night to create candle๐
@FutureAIDev2015
That is so cool
@kavierocks
HTML and CSS have come a long way since the stuff that I was doing back in 2000-2005.
@aswathibiju7231
I tried this html flame program, and it was awesome ๐ฅ
@armymdc4
That's some creative shtuff! Sweet!
@Juniper-x1
Wow so cool
@Fr1styy-rn8my
ะะพั ััะพ ััะพะฒะตะฝั ๐ฎ
@Geetanjali_Chauhan890
Very good ..I will try it too ๐
@learning-axis