Animation added (#2370)

* Update include.js * added animation * Update style.css Removed unnecessary comment * fix - removed inline style and added them into the css file --------- Co-authored-by: Laureline Paris <32878345+LaurelineP@users.noreply.github.com> Co-authored-by: Laureline <laurelinedev@gmail.com>
zero-to-mastery · Oct 27, 2023 · a5a743d · a5a743d
1 parent e52130d
commit a5a743d
Show file tree

Hide file tree

Showing 4 changed files with 113 additions and 1 deletion.
diff --git a/Art/rudrakushwaha/Arrows.gif b/Art/rudrakushwaha/Arrows.gif
diff --git a/Art/rudrakushwaha/index.html b/Art/rudrakushwaha/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Animated Bow</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <div class="diamond">
+      <div class="sparkle1"></div>
+      <div class="sparkle2"></div>
+      <div class="sparkle3"></div>
+      <div class="sparkle4"></div>
+    </div>
+  </body>
+</html>
diff --git a/Art/rudrakushwaha/style.css b/Art/rudrakushwaha/style.css
@@ -0,0 +1,88 @@
+body {
+    margin: 0;
+    overflow: hidden;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    background-color: #000;
+  }
+
+  .diamond {
+    width: 100px;
+    height: 100px;
+    position: relative;
+    transform: rotate(90deg);
+  }
+
+  .diamond:before,
+  .diamond:after {
+    content: '';
+    position: absolute;
+    width: 0;
+    border: 50px solid transparent;
+  }
+
+  .diamond:before {
+    border-bottom-color: #078ecd;
+    top: 25px;
+  }
+
+  .diamond:after {
+    border-top-color: rgb(255, 0, 76);
+    bottom: 25px;
+  }
+
+  /* Sparkling animation */
+  .sparkle1 {
+    top: 20px;
+    left: 20px;
+    position: absolute;
+    width: 10px;
+    height: 10px;
+    background-color: #cd4607;
+    animation: sparkleAnimation 2s infinite;
+  }
+
+  .sparkle2 {
+    top: 20px;
+    left: 60px;
+    position: absolute;
+    width: 10px;
+    height: 10px;
+    background-color: #c3cd07;
+    animation: sparkleAnimation 2s infinite;
+  }
+
+  .sparkle3 {
+    top: 60px;
+    left: 20px;
+    position: absolute;
+    width: 10px;
+    height: 10px;
+    background-color: #07cd28;
+    animation: sparkleAnimation 2s infinite;
+  }
+
+  .sparkle4 {
+    top: 60px;
+    left: 60px;
+    position: absolute;
+    width: 10px;
+    height: 10px;
+    background-color: #078ecd;
+    animation: sparkleAnimation 2s infinite;
+  }
+
+  @keyframes sparkleAnimation {
+    0% {
+      transform: translateY(15px);
+    }
+    50% {
+      transform: translateY(-15px);
+    }
+    100% {
+      transform: translateY(20px);
+    }
+  }
+
diff --git a/include.js b/include.js
@@ -2531,7 +2531,14 @@ let cards = [
     imageLink: './Art/johnpauljohnnes/animation-one-ball/Ball.gif',
     author: 'johnpauljohnnes',
     githubLink: 'https://github.com/johnpauljohnnes'
-  }
+  },
+  {
+    artName: 'Arrows',
+    pageLink: './Art/rudrakushwaha/index.html',
+    imageLink: './Art/rudrakushwaha/arrows.gif',
+    author: 'Rudraksh',
+    githubLink: 'https://github.com/rudrakushwaha'
+  },
 ];
 
 /* -------------------------------------------------------------------------- */