diff --git a/Art/Venkateeshh/BounceBall.gif b/Art/Venkateeshh/BounceBall.gif new file mode 100644 index 000000000..f257587d4 Binary files /dev/null and b/Art/Venkateeshh/BounceBall.gif differ diff --git a/Art/Venkateeshh/BouncingBall.html b/Art/Venkateeshh/BouncingBall.html new file mode 100644 index 000000000..0eb6a828e --- /dev/null +++ b/Art/Venkateeshh/BouncingBall.html @@ -0,0 +1,12 @@ + + + + + + BouncingBall + + + +
+ + diff --git a/Art/Venkateeshh/style.css b/Art/Venkateeshh/style.css new file mode 100644 index 000000000..0ec56899e --- /dev/null +++ b/Art/Venkateeshh/style.css @@ -0,0 +1,64 @@ +body { + background: linear-gradient(90deg, #efd5ff 0%, #515ada 100%); +} + +.loader { + position: relative; + width: 120px; + height: 90px; + margin: 30% auto; +} + +.loader:before { + content: ''; + position: absolute; + bottom: 30px; + left: 50px; + height: 30px; + width: 30px; + border-radius: 50%; + background: #e3ca8a; + animation: loading-bounce 0.5s ease-in-out infinite alternate; +} + +.loader:after { + content: ''; + position: absolute; + right: 0; + top: 0; + height: 7px; + width: 45px; + border-radius: 4px; + box-shadow: 0 5px 0 #f2f2f2, -35px 50px 0 #f2f2f2, -70px 95px 0 #f2f2f2; + animation: loading-step 1s ease-in-out infinite; +} + +@keyframes loading-bounce { + 0% { + transform: scale(1, 0.7); + } + + 40% { + transform: scale(0.8, 1.2); + } + + 60% { + transform: scale(1, 1); + } + + 100% { + bottom: 140px; + } +} + +@keyframes loading-step { + 0% { + box-shadow: 0 10px 0 rgba(0, 0, 0, 0), 0 10px 0 #f2f2f2, + -35px 50px 0 #f2f2f2, -70px 90px 0 #f2f2f2; + } + + 100% { + box-shadow: 0 10px 0 #f2f2f2, -35px 50px 0 #f2f2f2, -70px 90px 0 #f2f2f2, + -70px 90px 0 rgba(0, 0, 0, 0); + } +} diff --git a/include.js b/include.js index ba3111a7c..ce6b8cd9c 100644 --- a/include.js +++ b/include.js @@ -145,6 +145,13 @@ let cards = [ imageLink: './Art/Alexandra2888/cup.gif', author: 'Alexandra2888', githubLink: 'https://github.com/Alexandra2888' + }, + { + artName: 'BouncingBall', + pageLink: './Art/Venkateeshh/BouncingBall.html', + imageLink: './Art/Venkateeshh/BounceBall.gif', + author: 'Venkatesh', + githubLink: 'https://github.com/Venkateeshh' } ];