ball_animation (#2276)

* Create animation.html * Create animation.css * Add files via upload * Update include.js * Update include.js * Create styles.css * Delete Art/daemonvk18/animation.css
zero-to-mastery · Oct 27, 2023 · 5625d1d · 5625d1d
1 parent 68b7e86
commit 5625d1d
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 0 deletions.
diff --git a/Art/daemonvk18/animation.gif b/Art/daemonvk18/animation.gif
diff --git a/Art/daemonvk18/animation.html b/Art/daemonvk18/animation.html
@@ -0,0 +1,11 @@
+<!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="styles.css">
+</head>
+<body>
+    <div class="circle"></div>
+</body>
+</html>
diff --git a/Art/daemonvk18/styles.css b/Art/daemonvk18/styles.css
@@ -0,0 +1,24 @@
+body {
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+}
+
+.circle {
+    width: 50px;
+    height: 50px;
+    background-color: #3498db; /* Blue color for the circle */
+    border-radius: 50%;
+    position: absolute;
+    top: 50%;
+    animation: move 2s linear infinite;
+}
+
+@keyframes move {
+    0% {
+        left: 0;
+    }
+    100% {
+        left: calc(100% - 50px);
+    }
+}
diff --git a/include.js b/include.js
@@ -14,6 +14,14 @@ const cards = [
     author: 'Krish Gautam',
     githubLink: 'https://github.com/Kris248'
   },
+  {
+
+    artName: 'Ball Animation',
+    pageLink: './Art/daemonvk18/animation..html',
+    imageLink: './Art/daemonvk18/animation.gif',
+    author: 'navya preetham reddy',
+    githubLink: 'https://github.com/daemonvk18'
+  },
   {
     artName: 'Moving and Bouncing Rainbow ZTM Text',
     pageLink: './Art/Sayed-Afnan-Khazi/art.html',