diff --git a/Art/ball/bouncing-ball.gif b/Art/ball/bouncing-ball.gif new file mode 100644 index 000000000..ec8a9ceea Binary files /dev/null and b/Art/ball/bouncing-ball.gif differ diff --git a/Art/ball/index.html b/Art/ball/index.html new file mode 100644 index 000000000..2765106d4 --- /dev/null +++ b/Art/ball/index.html @@ -0,0 +1,10 @@ + + + + + Ball + + +
+ + diff --git a/Art/ball/style.css b/Art/ball/style.css new file mode 100644 index 000000000..eed5ef77e --- /dev/null +++ b/Art/ball/style.css @@ -0,0 +1,35 @@ +body { + margin: 0; + padding: 0; +} + +.ball { + width: 100px; + height: 100px; + border-radius: 50%; + background-color: red; + position: absolute; + top: 0; + left: 0; + margin-top: 100px; + position: absolute; + + left: 50%; + transform: translate(-50%, -50%); +} + +@keyframes bounce { + 0% { + top: 0; + } + 50% { + top: 100px; + } + 100% { + top: 0; + } +} + +.ball { + animation: bounce 2s infinite; +} diff --git a/include.js b/include.js index c2187bff5..cd92a221f 100644 --- a/include.js +++ b/include.js @@ -6567,6 +6567,13 @@ let cards = [ imageLink: './Art/AayushNair/3d/style.css', author: 'Aayush', githubLink: 'https://github.com/aayushnr' + }, + { + artName: 'Bouncing Ball', + pageLink: './Art/ball/index.html', + imageLink: './Art/ball/bouncing-ball.gif', + author: 'Varian1', + githubLink: 'https://github.com/varian1' } ];