add my first animation work (#2373)

zero-to-mastery · Oct 29, 2023 · d5a95f3 · d5a95f3
1 parent 721dca5
commit d5a95f3
Show file tree

Hide file tree

Showing 4 changed files with 92 additions and 1 deletion.
diff --git a/Art/marjsky/awesome-2.gif b/Art/marjsky/awesome-2.gif
diff --git a/Art/marjsky/index.html b/Art/marjsky/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Sedgwick+Ave+Display&display=swap" rel="stylesheet">
+    <title>Text animation</title>
+</head>
+<body>
+    <div class="word">
+        <div class="letter">A</div>
+        <div class="letter">w</div>
+        <div class="letter">e</div>
+        <div class="letter">s</div>
+        <div class="letter">o</div>
+        <div class="letter">m</div>
+        <div class="letter">e</div>
+        <div class="letter">!</div>
+    </div>
+</body>
+</html>
diff --git a/Art/marjsky/style.css b/Art/marjsky/style.css
@@ -0,0 +1,60 @@
+body {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    font-family: 'Sedgwick Ave Display', cursive;
+    background-color: hsl(214, 15%, 91%);
+}
+
+.word {
+ display: flex;
+}
+
+.word .letter {
+    color: hsl(209, 14%, 37%);
+    font-size: 120px;
+    letter-spacing: 20px;
+    animation: lighting 2s linear infinite;
+}
+
+@keyframes lighting {
+    0% {
+        color: hsl(209, 14%, 37%);
+        text-shadow: none;
+    }
+    90% {
+        color: white;
+        text-shadow: none;
+    }
+    100% {
+        color: hsl(14, 89%, 55%);
+        text-shadow: 0 0 7px hsl(14, 89%, 55%), 0 0 50px hsl(218, 100%, 17%);
+    }
+}
+
+.word .letter:nth-child(1) {
+    animation-delay: 0;
+}
+.word .letter:nth-child(2) {
+    animation-delay: 0.1s;
+}
+.word .letter:nth-child(3) {
+    animation-delay: 0.2s;
+}
+.word .letter:nth-child(4) {
+    animation-delay: 0.3s;
+}
+.word .letter:nth-child(5) {
+    animation-delay: 0.4s;
+}
+.word .letter:nth-child(6) {
+    animation-delay: 0.5s;
+}
+.word .letter:nth-child(7) {
+    animation-delay: 0.6s;
+}
+.word .letter:nth-child(8) {
+    animation-delay: 0.7s;
+}
+
diff --git a/include.js b/include.js
@@ -2621,7 +2621,14 @@ let cards = [
     imageLink: 'Art/hfarah02/ezgif.com-video-to-gif.gif',
     author: 'Hassan',
     githubLink: 'https://github.com/hfarah02'
-  }
+  },
+  {
+    artName: 'Awesome',
+    pageLink: './Art/marjsky/index.html',
+    imageLink: './Art/marjsky/awesome-2.gif',
+    author: 'Marcus',
+    githubLink: 'https://github.com/marjsky'
+  },
 ];
 
 /* -------------------------------------------------------------------------- */