Merge pull request #1827 from zero-to-mastery/christine-aqui-hacktobe…

…r2023 Christine aqui hacktober2023
zero-to-mastery · Oct 3, 2023 · f84e8d8 · f84e8d8
2 parents a402d14 + 2b2d95a
commit f84e8d8
Show file tree

Hide file tree

Showing 4 changed files with 134 additions and 0 deletions.
diff --git a/Art/ChrisAqui/dog.css b/Art/ChrisAqui/dog.css
@@ -0,0 +1,108 @@
+body,
+html {
+  margin: 0;
+  height: 100%;
+}
+
+body {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #a0d8f1;
+}
+
+.dog {
+  position: relative;
+  width: 60px;
+  height: 40px;
+  animation: walk 5s linear infinite;
+}
+
+.body {
+  position: absolute;
+  width: 60px;
+  height: 40px;
+  background-color: brown;
+  border-radius: 30px;
+}
+
+.leg {
+  position: absolute;
+  width: 10px;
+  height: 40px;
+  background-color: brown;
+  border-radius: 5px;
+  animation: walkLegs 0.5s linear infinite;
+}
+
+.front-left {
+  top: 25px;
+  left: 10px;
+  animation-delay: 0.25s;
+}
+
+.front-right {
+  top: 25px;
+  left: 40px;
+}
+
+.back-left {
+  top: 25px;
+  left: 0;
+}
+
+.back-right {
+  top: 25px;
+  left: 50px;
+  animation-delay: 0.25s;
+}
+.head {
+  position: absolute;
+  width: 30px;
+  height: 30px;
+  background-color: brown;
+  border-radius: 50%;
+  top: -15px;
+  left: 50px;
+}
+
+.head::before,
+.head::after {
+  content: '';
+  position: absolute;
+  width: 20px;
+  height: 10px;
+  background-color: brown;
+  border-radius: 50%;
+}
+
+.head::before {
+  transform: rotate(45deg);
+  top: -5px;
+  left: -10px;
+}
+
+.head::after {
+  transform: rotate(-45deg);
+  top: -5px;
+  right: -10px;
+}
+
+@keyframes walk {
+  0% {
+    transform: translateX(-100px);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+@keyframes walkLegs {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(10px);
+  }
+}
diff --git a/Art/ChrisAqui/dog.gif b/Art/ChrisAqui/dog.gif
diff --git a/Art/ChrisAqui/dog.html b/Art/ChrisAqui/dog.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Dog Walking Animation</title>
+    <link rel="stylesheet" href="dog.css" />
+  </head>
+  <body>
+    <div class="dog">
+      <div class="body"></div>
+      <div class="head"></div>
+      <div class="leg front-left"></div>
+      <div class="leg front-right"></div>
+      <div class="leg back-left"></div>
+      <div class="leg back-right"></div>
+    </div>
+  </body>
+</html>
diff --git a/include.js b/include.js
@@ -187,6 +187,13 @@ let cards = [
     imageLink: './Art/Sheefa/QuadroHypnoSpin.gif',
     author: 'Sheefa',
     githubLink: 'https://github.com/sheefanaaz123'
+  },
+  {
+    artName: 'Walking Dog',
+    pageLink: './Art/ChrisAqui/dog.html',
+    imageLink: './Art/ChrisAqui/dog.gif',
+    author: 'Chris Aqui',
+    githubLink: 'https://github.com/christine-aqui'
   }
 ];