Golden Coin Animation (#2413)

* Created GoldenCoin.html * Added CSS and GIF File * Update include.js * Update include.js * fix syntax error in include.js --------- Co-authored-by: Sophia Brandt <16630701+sophiabrandt@users.noreply.github.com>
zero-to-mastery · Oct 31, 2023 · cec6931 · cec6931
1 parent c7da44b
commit cec6931
Show file tree

Hide file tree

Showing 4 changed files with 99 additions and 3 deletions.
diff --git a/Art/stormworm9/GoldenCoin/GoldenCoin.gif b/Art/stormworm9/GoldenCoin/GoldenCoin.gif
diff --git a/Art/stormworm9/GoldenCoin/GoldenCoin.html b/Art/stormworm9/GoldenCoin/GoldenCoin.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="styles.css">
+  <title>Golden Coins Animation</title>
+</head>
+<body>
+  <div class="container">
+    <div class="coin"></div>
+    <div class="coin"></div>
+    <div class="coin"></div>
+    <div class="coin"></div>
+    <div class="coin"></div>
+  </div>
+</body>
+</html>
diff --git a/Art/stormworm9/GoldenCoin/styles.css b/Art/stormworm9/GoldenCoin/styles.css
@@ -0,0 +1,71 @@
+body {
+    background-color: #009688; 
+    margin: 0;
+    overflow: hidden;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+  }
+
+  .container {
+    position: relative;
+    width: 200px;
+    height: 400px;
+    border: 2px solid #333;
+    overflow: hidden;
+  }
+
+  .coin {
+    width: 40px;
+    height: 40px;
+    background-color: #FFD700; 
+    border-radius: 50%;
+    position: absolute;
+    top: -40px; 
+    animation: fall 2s linear infinite, rotate 4s linear infinite;
+  }
+
+  @keyframes fall {
+    0% {
+      top: -40px;
+    }
+    100% {
+      top: calc(100% - 40px); 
+    }
+  }
+
+  @keyframes rotate {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+  .coin:nth-child(1) {
+    left: 20px;
+    animation-delay: 0s;
+  }
+
+  .coin:nth-child(2) {
+    left: 60px;
+    animation-delay: 0.3s;
+  }
+
+  .coin:nth-child(3) {
+    left: 100px;
+    animation-delay: 0.6s;
+  }
+
+  .coin:nth-child(4) {
+    left: 140px;
+    animation-delay: 0.9s;
+  }
+
+  .coin:nth-child(5) {
+    left: 180px;
+    animation-delay: 1.2s;
+  }
+
diff --git a/include.js b/include.js
@@ -1,12 +1,19 @@
 let cards = [
-   {
+  {
+    artName: 'GoldenCoin',
+    pageLink: './Art/stormworm9/GoldenCoin/GoldenCoin.html',
+    imageLink: './Art/stormworm9/GoldenCoin/GoldenCoin.gif',
+    author: 'stormworm9',
+    githubLink: 'https://github.com/stormworm9'
+  },
+  {
     artName: 'CubeAnimation',
     pageLink: './Art/stormworm9/CubeAnimation/CubeAnimation.html',
     imageLink: './Art/stormworm9/CubeAnimation/CubeAnimation.gif',
     author: 'stormworm9',
-    githubLink: 'https://github.com/stormworm9
+    githubLink: 'https://github.com/stormworm9'
    },
-   {
+  {
     artName: 'RingAnimation',
     pageLink: './Art/stormworm9/RingAnimation/ring.html',
     imageLink: './Art/stormworm9/RingAnimation/ring.gif',