diff --git a/Art/Piyush_Luitel/index.gif b/Art/Piyush_Luitel/index.gif new file mode 100644 index 000000000..6c54a2f9a Binary files /dev/null and b/Art/Piyush_Luitel/index.gif differ diff --git a/Art/Piyush_Luitel/index.html b/Art/Piyush_Luitel/index.html new file mode 100644 index 000000000..c668130e6 --- /dev/null +++ b/Art/Piyush_Luitel/index.html @@ -0,0 +1,12 @@ + + + + + + Simple Animation + + + +
+ + \ No newline at end of file diff --git a/Art/Piyush_Luitel/style.css b/Art/Piyush_Luitel/style.css new file mode 100644 index 000000000..787e98d49 --- /dev/null +++ b/Art/Piyush_Luitel/style.css @@ -0,0 +1,25 @@ +body { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; + background-color: #f0f0f0; +} + +.box { + width: 100px; + height: 100px; + background-color: #3498db; + animation: bounce 2s infinite; +} + +@keyframes bounce { + 0%, 100% { + transform: translateY(0); + } + 50% { + transform: translateY(-100px); + background-color: #e74c3c; + } +} diff --git a/include.js b/include.js index 34d52b806..6b4fed3ee 100644 --- a/include.js +++ b/include.js @@ -2683,6 +2683,13 @@ let cards = [ author: 'Christian', githubLink: 'https://github.com/cpasigna90' }, + { + artName: 'Moving square that changes color', + pageLink: './Art/Piyush_Luitel/index.html', + imageLink: './Art/Piyush_Luitel/index.gif', + author: 'Piyush_Luitel', + githubLink: 'https://github.com/PiyushLuitel-07' + } ]; /* -------------------------------------------------------------------------- */