Merge pull request #1730 from ongoklevi/packman

added my animation to the project
zero-to-mastery · Oct 1, 2023 · d87c251 · d87c251
2 parents 8b89e75 + d729e09
commit d87c251
Show file tree

Hide file tree

Showing 4 changed files with 115 additions and 0 deletions.
diff --git a/Art/packman/giphy.gif b/Art/packman/giphy.gif
diff --git a/Art/packman/packman.html b/Art/packman/packman.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Animated Pacman Preloader</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+
+  <div class="pacman">
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+
+</body>
+</html>
diff --git a/Art/packman/style.css b/Art/packman/style.css
@@ -0,0 +1,91 @@
+
+body {
+  margin: 0;
+  padding: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  background-color: #ebf3eb;
+}
+
+.pacman {
+  position: relative;
+  width: 160px;
+  height: 160px;
+}
+
+.pacman:before, .pacman:after {
+  content: "";
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 0;
+  height: 0;
+  border: 80px solid #060af5;
+  border-radius: 50%;
+  border-right: 80px solid transparent;
+  animation: animate1 linear 0.5s infinite;
+}
+
+.pacman:after {
+  animation: animate2 linear 0.5s infinite;
+}
+
+.pacman div:nth-child(1), .pacman div:nth-child(2), .pacman div:nth-child(3) {
+  background-color: #0942df;
+  border-radius: 50%;
+  width: 25px;
+  height: 25px;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  right: -100px;
+  opacity: 0;
+}
+
+.pacman div:nth-child(1) {
+  animation: ball 1s 1s infinite linear;
+}
+
+.pacman div:nth-child(2) {
+  animation: ball 1s 0.5s infinite linear;
+}
+
+.pacman div:nth-child(3) {
+  animation: ball 1s 0s infinite linear;
+}
+
+@keyframes animate1 {
+  0% {
+    transform: rotate(270deg);
+  }
+  50% {
+    transform: rotate(360deg);
+  }
+  100% {
+    transform: rotate(270deg);
+  }
+}
+
+@keyframes animate2 {
+  0% {
+    transform: rotate(90deg);
+  }
+  50% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(90deg);
+  }
+}
+
+@keyframes ball {
+  20%, 80% {
+    opacity: 1;
+  }
+  100% {
+    transform: translate(-120px, -50%);
+  }
+}
diff --git a/include.js b/include.js
@@ -6,6 +6,13 @@ let cards = [
     author: 'Joy',
     githubLink: 'https://github.com/royranger'
   }
+  {
+    artName: 'Packman',
+    pageLink: './Art/packman/index.html',
+    imageLink: './Art/packman/giphy.gif',
+    author: 'Ochieng',
+    githubLink: 'https://github.com/ongoklevi'
+  }
 ];
 
 // +--------------------------------------------------------------------------------+