diff --git a/Art/MrA'sAnimation/Animation.gif b/Art/MrA'sAnimation/Animation.gif new file mode 100644 index 000000000..fb68ec3ca Binary files /dev/null and b/Art/MrA'sAnimation/Animation.gif differ diff --git a/Art/MrA'sAnimation/index.html b/Art/MrA'sAnimation/index.html new file mode 100644 index 000000000..1c96fc2f8 --- /dev/null +++ b/Art/MrA'sAnimation/index.html @@ -0,0 +1,15 @@ + + + + + + + + Mr.A's Animation + + +
+
+
+ + diff --git a/Art/MrA'sAnimation/style.css b/Art/MrA'sAnimation/style.css new file mode 100644 index 000000000..15a56f20d --- /dev/null +++ b/Art/MrA'sAnimation/style.css @@ -0,0 +1,65 @@ + +body { + margin: 0; + overflow: hidden; + background-color: #000; +} + +.first { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 200px; + height: 200px; + background-color: #3498db; + border-radius: 50%; + animation: spin 5s linear infinite, color-change 10s alternate infinite; + width: 150%; +} +.second { + position: absolute; + top: 50%; + left: 25%; + transform: translate(-50%, -50%); + width: 200px; + height: 200px; + background-color: #3498db; + border-radius: 50%; + animation: spin 10s linear infinite, color-change 10s alternate infinite; + + width: 150%; +} +.third { + position: absolute; + top: 50%; + left: 75%; + transform: translate(-50%, -50%); + width: 200px; + height: 200px; + background-color: #3498db; + border-radius: 50%; + animation: spin 10s infinite, color-change 10s alternate infinite; + width: 150%; +} + +@keyframes spin { + 0% { + transform: translate(-50%, -50%) rotate(0deg); + } + 100% { + transform: translate(-50%, -50%) rotate(360deg); + } +} + +@keyframes color-change { + 0% { + background-color: #3498db; + } + 50% { + background-color: #e74c3c; + } + 100% { + background-color: #3498db; + } +} diff --git a/include.js b/include.js index efdddc7ef..8b61356cf 100644 --- a/include.js +++ b/include.js @@ -26,6 +26,13 @@ let cards = [ imageLink: './Art/rstallings/Animation.gif', author: 'Roosevelt S.', githubLink: 'https://github.com/rstallingsiii' + }, + { + artName: "Mr. A's Amimation", + pageLink: "./Art/Mr.A'sAnimation/index.html", + imageLink: "./Art/Mr.A'sAnimation/Animation.gif", + author: 'Mr. AnkitR', + githubLink: 'https://github.com/MrARawal' } ];