diff --git a/Art/hiteshbhor-bouncing-ball/index.html b/Art/hiteshbhor-bouncing-ball/index.html new file mode 100644 index 000000000..c436547ee --- /dev/null +++ b/Art/hiteshbhor-bouncing-ball/index.html @@ -0,0 +1,12 @@ + + + + + + Bouncing Ball + + + +
+ + diff --git a/Art/hiteshbhor-bouncing-ball/meta.json b/Art/hiteshbhor-bouncing-ball/meta.json new file mode 100644 index 000000000..7b6edd1fb --- /dev/null +++ b/Art/hiteshbhor-bouncing-ball/meta.json @@ -0,0 +1,4 @@ +{ + "artName": "bouncing-ball", + "githubHandle": "hiteshbhor" +} diff --git a/Art/hiteshbhor-bouncing-ball/styles.css b/Art/hiteshbhor-bouncing-ball/styles.css new file mode 100644 index 000000000..7b74a001f --- /dev/null +++ b/Art/hiteshbhor-bouncing-ball/styles.css @@ -0,0 +1,27 @@ +body { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + background: linear-gradient(to bottom, #1e3c72, #2a5298); + margin: 0; + overflow: hidden; +} + +.ball { + width: 60px; + height: 60px; + background-color: #ff4b5c; + border-radius: 50%; + position: relative; + animation: bounce 2s infinite ease-in-out; +} + +@keyframes bounce { + 0%, 100% { + transform: translateY(0); + } + 50% { + transform: translateY(-200px); + } +} diff --git a/hiteshbhor-bouncing-ball/meta.json b/hiteshbhor-bouncing-ball/meta.json new file mode 100644 index 000000000..7b6edd1fb --- /dev/null +++ b/hiteshbhor-bouncing-ball/meta.json @@ -0,0 +1,4 @@ +{ + "artName": "bouncing-ball", + "githubHandle": "hiteshbhor" +} diff --git a/hiteshbhor-bouncing-ball/styles.css b/hiteshbhor-bouncing-ball/styles.css new file mode 100644 index 000000000..7b74a001f --- /dev/null +++ b/hiteshbhor-bouncing-ball/styles.css @@ -0,0 +1,27 @@ +body { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + background: linear-gradient(to bottom, #1e3c72, #2a5298); + margin: 0; + overflow: hidden; +} + +.ball { + width: 60px; + height: 60px; + background-color: #ff4b5c; + border-radius: 50%; + position: relative; + animation: bounce 2s infinite ease-in-out; +} + +@keyframes bounce { + 0%, 100% { + transform: translateY(0); + } + 50% { + transform: translateY(-200px); + } +}