The animation delay property defines when the animation will start. I have given different time from all elements right, according to that time i have given animation will execute form those particular elements
@@CodingLabYT thank you sir and one more question is that when i am doing the step in 2:39(e.g. display: flex;) my function (flex) is not recognizable....can you pls help me out
![[안방1열 풀캠4K] 베이비몬스터 'DRIP' (BABYMONSTER FullCam)│@SBS Inkigayo 241110](http://i.ytimg.com/vi/AQ4RIghEvUs/mqdefault.jpg)
Any Question Related To This Tutorial? Please Let Me Know.
animation- delay
problem
The animation delay property defines when the animation will start. I have given different time from all elements right, according to that time i have given animation will execute form those particular elements
You need to code differently. These code won’t work because its js inline code
Friend, how do I make the calculator work with operations?
You are unbelievably talented, you deserve more followers and more people rooting you on
Thank you so much for your lovely words.
It's amazing, I'll try to do it soon thanks for your videos
Thank you ❤️😊 Carry on
very nice idea
Thanks a lot
Mine is turning out great!
Html calculator use in online only or coding install to pcb
Nice work. Please to make it easier can you just copy and paste the html and css code in the comments
@import url('fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins',sans-serif;
}
body{
height: 100vh;
width: 100%;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(#2196f3 , #e91e63);
}
.bubbles{
position: absolute;
bottom: -120px;
display: flex;
flex-wrap: wrap;
margin-top: 70px;
width: 100%;
justify-content: space-around;
}
.bubbles span{
height: 60px;
width: 60px;
background: rgba(255, 255, 255, 0.1);
animation: move 10s linear infinite;
position: relative;
overflow: hidden;
}
@keyframes move {
100%{
transform: translateY(-100vh);
}
}
.bubbles span.one{
animation-delay: 2.2s;
transform: scale(2.15)
}
.bubbles span.two{
animation-delay: 3.5s;
transform: scale(1.55)
}
.bubbles span.three{
animation-delay: 0.2s;
transform: scale(0.35)
}
.bubbles span.four{
animation-delay: 6s;
transform: scale(2.15)
}
.bubbles span.five{
animation-delay: 7s;
transform: scale(0.5)
}
.bubbles span.six{
animation-delay: 4s;
transform: scale(2.5)
}
.bubbles span.seven{
animation-delay: 3
transform: scale(1.5)
}
.bubbles span:before{
content: '';
position: absolute;
left: 0;
top: 0;
height: 60px;
width: 40%;
transform: skew(45deg) translateX(150px);
background: rgba(255, 255, 255, 0.15);
animation: mirror 3s linear infinite;
}
@keyframes mirror {
100%{
transform: translateX(-450px);
}
}
.bubbles span.one:before{
animation-delay: 1.5s;
}
.bubbles span.two:before{
animation-delay: 3.5s;
}
.bubbles span.three:before{
animation-delay: 2.5s;
}
.bubbles span.four:before{
animation-delay: 7.5s;
}
.bubbles span.five:before{
animation-delay: 4.5s;
}
.bubbles span.six:before{
animation-delay: 0.5s;
}
.bubbles span.seven:before{
animation-delay: 6s;
}
.container{
z-index: 12;
width: 360px;
padding: 15px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.1);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
border-top: 1px solid rgba(255, 255, 255, 0.5);
border-left: 1px solid rgba(255, 255, 255, 0.5);
}
.container input[type="text"]{
width: 100%;
height: 100px;
margin: 0 3px;
outline: none;
border: none;
color: #fff;
font-size: 20px;
text-align: right;
padding-right: 10px;
pointer-events: none;
background: transparent;
}
.container input[type="button"]{
height: 65px;
color: #fff;
width: calc(100% / 4 - 5px);
background: transparent;
border-radius: 12px;
margin-top: 15px;
outline: none;
border: none;
font-size: 20px;
cursor: pointer;
transition: all 0.3s ease;
}
.container input[type="button"]:hover{
background: rgba(255, 255, 255, 0.1);
}
It's awesome 🥰
Thank u soo much
Always welcome my friend ❤️😊
This one is the best man ❤️❤️
Thank you bro ❤️😊
Amazing project Sir
Sir pls quick question which extension did you use to show the color properties on atom
It's Pigment extension
@@CodingLabYT Thanks so much Sir love you you're amazing
Loved it
Amazing 👍
Thank you bro 😊❤️
Nice yaar legend coder
Thank you bro❤️😊
Friend, how do I make the calculator work with operations?
How do you learn to make such incredible animations ?
super !!!
Thank you
Can you explain how you are evaluating?
What is that man it's like i entered into another dimension 😁😁😁😁😁
😀😀✌️
19.42 is used to clear all value
Daami xa
Thank you bro ❤️😊
Hi! May I ask for your help with my homework? Thank you
For some reason, I can't click on the numbers and operators
Did I went something wrong? I did followed every step
You can re-write code or take codes from my website, link is in video description
Can u please make a video on the topic of music player
Is it responsive??
perfect ♥
Thank you 😊❤️
Hey bro.. Why my animation box moving left to right.. how can I fix it..?
Check out in your animation's keyframes bro..
Bro please upload some PHP tutorials with voice on this channel 🙏🙏
Will do soon
someone can tell me how to find link of he using in css file to import fonts.
In upcoming video i will show how to bring fonts. Don't worry
Can you please explain the step in 2:27?
I gave white color to the span using rgba. 255 means white colour's code and 0.1 is opacity for white color
@@CodingLabYT thank you sir and one more question is that when i am doing the step in 2:39(e.g. display: flex;) my function (flex) is not recognizable....can you pls help me out
Wow
Sir just wondering where is the javascript here?
Nvm found it but can it be put in a javascript file like an extension like with css?
My teacher might wonder where it is hehe
In html bro
% is not the percentage
Sir, Can you give me the source code please....
Source Code link is in TH-cam video description
98% calculator✓✓