fixed formatting issue in include.js

zero-to-mastery · Oct 2, 2023 · a1e9d08 · a1e9d08
2 parents 249a686 + 1379784
commit a1e9d08
Show file tree

Hide file tree

Showing 4 changed files with 87 additions and 0 deletions.
diff --git a/Art/MrA'sAnimation/Animation.gif b/Art/MrA'sAnimation/Animation.gif
diff --git a/Art/MrA'sAnimation/index.html b/Art/MrA'sAnimation/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" type="text/css" href="style.css">
+    <link rel="stylesheet" type="text/css" href="style.css">
+    <title>Mr.A's Animation</title>  
+</head>
+<body>
+    <div class="animation-container first"></div>
+    <div class="animation-container second"></div>
+    <div class="animation-container third"></div>
+</body>
+</html>
diff --git a/Art/MrA'sAnimation/style.css 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
@@ -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'
   }
 ];