Merge pull request #1806 from zero-to-mastery/alexsatalan-animation

Alexsatalan animation
zero-to-mastery · Oct 2, 2023 · 2d0ae98 · 2d0ae98
2 parents 7c481b7 + da2659f
commit 2d0ae98
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 0 deletions.
diff --git a/Art/alexsatalan/index.html b/Art/alexsatalan/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="utf-8" />
+    <title>A shaking box</title>
+    <link href="./style.css" rel="stylesheet" />
+  </head>
+  <body>
+    <button>Shaking box</button>
+  </body>
+</html>
diff --git a/Art/alexsatalan/shaking.gif b/Art/alexsatalan/shaking.gif
diff --git a/Art/alexsatalan/style.css b/Art/alexsatalan/style.css
@@ -0,0 +1,54 @@
+/* Animation property */
+button {
+  animation: wiggle 3s linear infinite;
+}
+
+/* Keyframes */
+@keyframes wiggle {
+  0%,
+  7% {
+    transform: rotateZ(10deg);
+  }
+  15% {
+    transform: rotateZ(-15deg);
+  }
+  20% {
+    transform: rotateZ(10deg);
+  }
+  25% {
+    transform: rotateZ(-10deg);
+  }
+  30% {
+    transform: rotateZ(6deg);
+  }
+  35% {
+    transform: rotateZ(-4deg);
+  }
+  80%,
+  100% {
+    transform: rotateZ(0deg);
+  }
+}
+
+body {
+  background: #000;
+}
+
+button {
+  position: absolute;
+  left: calc(50% - 3em);
+  top: calc(50% - 2em);
+
+  height: 4em;
+  width: 7em;
+
+  background: #3ea47a;
+  background: linear-gradient(top, #4c2626, #996b6b);
+  border: none;
+  border-top: 3px solid orange;
+  border-radius: 0 0 0.2em 0.2em;
+  color: #fff;
+  font-family: Helvetica, Arial, Sans-serif;
+  font-size: 1em;
+  transform-origin: 50% 5em;
+}
diff --git a/include.js b/include.js
@@ -75,6 +75,13 @@ let cards = [
     imageLink: '',
     author: 'Anna',
     githubLink: 'https://github.com/anna-1980'
+  },
+  {
+    artName: 'Shaking box',
+    pageLink: './Art/alexsatalan/index.html',
+    imageLink: './Art/alexsatalan/shaking.gif',
+    author: 'AlexS',
+    githubLink: 'https://github.com/alexsatalan'
   }
 ];