Completed 4 color animation project

zero-to-mastery · Sep 24, 2023 · f5e6322 · f5e6322
1 parent e7880c7
commit f5e6322
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 18 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
@@ -3,13 +3,16 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Document</title>
+    <title>Four Color Loader</title>
     <link href="./style.css" rel="stylesheet" />
   </head>
   <body>
-    <div id="Red">Red</div>
-    <div id="Blue">Blue</div>
-    <div id="Yellow">Yellow</div>
-    <div id="Green">Green</div>
+    <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
@@ -1,33 +1,64 @@
 body {
-  #background-color: bisque;
+  background-color: bisque;
   display: flex;
+  flex-direction: column;
   justify-content: center;
+  align-items: center;
+  height: 100vh;
+  margin: 0;
 }
 
-div {
-  align-items: center;
-  width: 300px;
-  height: 400px;
-  margin: 20px;
-  outline: auto;
+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;
 }
 
-div:hover {
-  transform: scale(1.1);
+.bounce {
+  animation: bounce 3s ease infinite;
 }
 
-#Red {
+.loader > #Red {
   background: red;
 }
 
-#Blue {
+.loader > #Blue {
   background: blue;
+  animation-delay: 0.2s;
 }
 
-#Yellow {
+.loader > #Yellow {
   background: yellow;
+  animation-delay: 0.3s;
 }
 
-#Green {
+.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
@@ -6,6 +6,15 @@ let cards = [
     author: 'aschwir',
     githubLink: 'https://github.com/aschwir'
   },
+
+  {
+    artName: '4 Color Loader',
+    pageLink: './Art/rstallings/index.html',
+    imageLink: './Art/rstallings/Animation.gif',
+    author: 'Roosevelt S.',
+    githubLink: 'https://github.com/rstallingsiii'
+  },
+
   {
     artName: 'Alright',
     pageLink: './Art/arjunan-k/index.html',