Added Slide-In Animation (#2381)

* Create index.html * Create style.css * Update index.html * Update style.css * uploaded gif * Updated include.js * change include.js
zero-to-mastery · Oct 29, 2023 · 6f98cc7 · 6f98cc7
1 parent d58db14
commit 6f98cc7
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 1 deletion.
diff --git a/Art/kalkeshwar/index.html b/Art/kalkeshwar/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Slide-In Animation</title>
+    <link rel="stylesheet" href="./style.css">
+</head>
+<body>
+    <div class="box"></div>
+</body>
+</html>
diff --git a/Art/kalkeshwar/sliderightanimation.gif b/Art/kalkeshwar/sliderightanimation.gif
diff --git a/Art/kalkeshwar/style.css b/Art/kalkeshwar/style.css
@@ -0,0 +1,29 @@
+*{
+    padding:0;
+    margin:0;
+    box-sizing: border-box;
+}
+body{
+    display:flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    background-color: black;
+}
+
+.box{
+    background-color: white;
+    border:1px solid black;
+    width:40%;
+    height:200px;
+    animation: slidein 3s cubic-bezier(0.4, 2.1, 0.8, 0.7) 0.3s
+}
+
+@keyframes slidein {
+    0%{
+        transform: translateX(-500px);
+    }
+   100%{
+        transform:translateX(0)
+   }
+}
diff --git a/include.js b/include.js
@@ -2572,7 +2572,14 @@ let cards = [
     imageLink: './Art/Asymtode712/circles_lines.gif',
     author: 'Asymtode712',
     githubLink: 'https://github.com/Asymtode712'
-  }
+  },
+  {
+    artName: 'Slide In Animation',
+    pageLink: './Art/kalkeshwar/index.html',
+    imageLink: 'Art/kalkeshwar/sliderightanimation.gif',
+    author: 'Kalkeshwar',
+    githubLink: 'https://github.com/kalkeshwar'
+  },
 ];
 
 /* -------------------------------------------------------------------------- */