fixed formtting issues

zero-to-mastery · Oct 2, 2023 · 04c20cb · 04c20cb
2 parents 1c74958 + f3f4519
commit 04c20cb
Show file tree

Hide file tree

Showing 4 changed files with 89 additions and 0 deletions.
diff --git a/Art/Rstallings/Animation.gif b/Art/Rstallings/Animation.gif
diff --git a/Art/Rstallings/index.html b/Art/Rstallings/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Four Color Loader</title>
+    <link href="./style.css" rel="stylesheet" />
+  </head>
+  <body>
+    <h1>Four Color Preloader</h1>
+    <div class="loader">
+      <div id="Red" class="box bounce"></div>
+      <div id="Blue" class="box bounce"></div>
+      <div id="Yellow" class="box bounce"></div>
+      <div id="Green" class="box bounce"></div>
+    </div>
+  </body>
+</html>
diff --git a/Art/Rstallings/style.css 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
@@ -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'
   }
 ];