diff --git a/Art/Rstallings/Animation.gif b/Art/Rstallings/Animation.gif new file mode 100644 index 000000000..463e9fe40 Binary files /dev/null and b/Art/Rstallings/Animation.gif differ diff --git a/Art/Rstallings/index.html b/Art/Rstallings/index.html new file mode 100644 index 000000000..88bb4ce6b --- /dev/null +++ b/Art/Rstallings/index.html @@ -0,0 +1,18 @@ + + + + + + Four Color Loader + + + +

Four Color Preloader

+
+
+
+
+
+
+ + diff --git a/Art/Rstallings/style.css b/Art/Rstallings/style.css new file mode 100644 index 000000000..89744f370 --- /dev/null +++ b/Art/Rstallings/style.css @@ -0,0 +1,64 @@ +body { + background-color: bisque; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; +} + +h1 { + font-family: Lato, 'Trebuchet MS', 'Verdana', 'sans-serif'; + text-align: center; + justify-content: center; + font-size: 44pt; + font-family: Lato, 'Trebuchet MS', 'Verdana', 'sans-serif'; +} +.loader { + display: flex; + justify-content: center; +} + +.box { + width: 50px; + height: 50px; + transform-origin: bottom; + border-radius: 50%; + margin-right: 1em; +} + +.bounce { + animation: bounce 3s ease infinite; +} + +.loader > #Red { + background: red; +} + +.loader > #Blue { + background: blue; + animation-delay: 0.2s; +} + +.loader > #Yellow { + background: yellow; + animation-delay: 0.3s; +} + +.loader > #Green { + background: green; + animation-delay: 0.4s; +} + +@keyframes bounce { + 0% { + transform: translateY(0); + } + 50% { + transform: translateY(100px); + } + 100% { + transform: translateY(0); + } +} diff --git a/include.js b/include.js index 1fe690f3b..efdddc7ef 100644 --- a/include.js +++ b/include.js @@ -19,6 +19,13 @@ let cards = [ imageLink: './Art/Ibaad/animationimagehover.gif', author: 'Ibaad', githubLink: 'https://github.com/ibaaddurrani' + }, + { + artName: '4 Color Loader', + pageLink: './Art/rstallings/index.html', + imageLink: './Art/rstallings/Animation.gif', + author: 'Roosevelt S.', + githubLink: 'https://github.com/rstallingsiii' } ];