created animation (#2383)

* html file added * style files and gifnadded * Update include.js * Update style.css removed unnecessary comment * Update include.js restitute master card object order * Update include.js fix spacing --------- Co-authored-by: Laureline Paris <32878345+LaurelineP@users.noreply.github.com>
zero-to-mastery · Oct 29, 2023 · 9f44d85 · 9f44d85
1 parent 789ad1c
commit 9f44d85
Show file tree

Hide file tree

Showing 4 changed files with 91 additions and 0 deletions.
diff --git a/Art/varadtote/style.css b/Art/varadtote/style.css
@@ -0,0 +1,66 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+.wrapper {
+    height: 100vh;
+    width: 100vw;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.container {
+    height: 250px;
+    width: 250px;
+    background-color: wheat;
+    display: flex;
+    column-gap: 8px;
+    justify-content: center;
+    align-items: center;
+}
+
+.line {
+    width: 8px;
+    background-color: rgb(54, 205, 54);
+}
+
+.line-1 {
+    height: 10%;
+    animation: verticalMove 2s infinite cubic-bezier(0.02, -0.01, 0.98, 0.96);
+    animation-delay: 0.5s;
+}
+
+.line-2 {
+    height: 10%;
+    animation: verticalMove 2s infinite cubic-bezier(0.02, -0.01, 0.98, 0.96);
+    animation-delay: 1s;
+}
+
+.line-3 {
+    height: 10%;
+    animation: verticalMove 2s infinite cubic-bezier(0.02, -0.01, 0.98, 0.96);
+    animation-delay: 1.5s;
+}
+
+@keyframes verticalMove {
+
+    0%,
+    100% {
+        transform: translateY(0);
+    }
+
+    25% {
+        transform: translateY(100%);
+    }
+
+    50% {
+        transform: translateY(0);
+    }
+
+    75% {
+        transform: translateY(-100%);
+    }
+}
diff --git a/Art/varadtote/three_line_oscillation_vertical.gif b/Art/varadtote/three_line_oscillation_vertical.gif
diff --git a/Art/varadtote/three_line_oscillation_vertical.html b/Art/varadtote/three_line_oscillation_vertical.html
@@ -0,0 +1,18 @@
+<!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" />
+    <title>Three Line</title>
+  </head>
+  <body>
+    <div class="wrapper">
+      <div class="container">
+        <div class="line line-1"></div>
+        <div class="line line-2"></div>
+        <div class="line line-3"></div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/include.js b/include.js
@@ -13,6 +13,13 @@ let cards = [
     author: 'lio2011',
     githubLink: 'https://github.com/lio2011'
   },
+  {
+    artName: 'Three Line oscillation Vertical ', 
+    pageLink: './Art/varadtote/three_line_oscillation_vertical.html', 
+    imageLink: './Art/varadtote/three_line_oscillation_vertical.gif', 
+    author: 'Varad Tote', 
+    githubLink: 'https://github.com/varadtote'
+  },
   {
     artName: 'tilt-card-3d',
     pageLink: './Art/Bidexdablitz/index.html',