File tree Expand file tree Collapse file tree
Art/Divinedew-Bouncingball Expand file tree Collapse file tree Original file line number Diff line number Diff line change 11<!DOCTYPE html>
22< html lang ="en ">
3- < head >
4- < meta charset ="UTF-8 ">
5- < meta name ="viewport " content ="width=device-width, initial-scale=1.0 ">
6- < link rel ="stylesheet " href ="styles.css ">
3+ < head >
4+ < meta charset ="UTF-8 " / >
5+ < meta name ="viewport " content ="width=device-width, initial-scale=1.0 " / >
6+ < link rel ="stylesheet " href ="styles.css " / >
77 < title > bouncing-ball-animation</ title >
8- </ head >
9- < body >
8+ </ head >
9+ < body >
1010 < div class ="container ">
11- < div class ="container2 ">
12- < div class ="ballImg ">
13- < img src ="ball.png " alt ="ball " class ="bounce-ball ">
14- </ div >
15- < div class ="ball ">
16- </ div >
17- </ div >
18- < div class ="container3 ">
19- < p > Loading...</ p >
11+ < div class ="container2 ">
12+ < div class ="ballImg ">
13+ < img src ="ball.png " alt ="ball " class ="bounce-ball " />
2014 </ div >
15+ < div class ="ball "> </ div >
16+ </ div >
17+ < div class ="container3 ">
18+ < p > Loading...</ p >
19+ </ div >
2120 </ div >
22-
23- </ body >
24- </ html >
21+ </ body >
22+ </ html >
Original file line number Diff line number Diff line change 11{
22 "artName" : " Bouncing-Ball" ,
33 "githubHandle" : " Divinedew"
4- }
4+ }
Original file line number Diff line number Diff line change 1- body {
1+ body {
22 background-color : # 000000 ;
33 justify-content : center;
44 align-items : center;
88 overflow : hidden;
99}
1010
11-
1211.container {
1312 display : flex;
1413 flex-direction : column;
2322 justify-content : flex-end;
2423 align-items : center;
2524}
26- img {
25+ img {
2726 width : 70px ;
2827 height : 50px ;
2928 margin-right : 25px ;
5352 letter-spacing : 5px ;
5453}
5554
56-
5755@keyframes bounce {
5856 0% {
5957 transform : translateY (0 );
7068 animation : bounce 1s ease-in-out infinite;
7169}
7270
73-
7471@keyframes expandshadow {
7572 0% {
7673 transform : scale (0.5 );
8683.ball {
8784 box-shadow : 0 0 25px rgba (138 , 43 , 226 , 0.9 );
8885 animation : expandshadow 1s ease-in-out infinite;
89- }
86+ }
You can’t perform that action at this time.
0 commit comments