project done

Rishabh-Jain-Rj · Jan 12, 2023 · f5c538a · f5c538a
commit f5c538a
Show file tree

Hide file tree

Showing 5 changed files with 853 additions and 0 deletions.
diff --git a/animation.css b/animation.css
@@ -0,0 +1,160 @@
+
+/* leg animations */
+
+@keyframes left-leg-animation {
+    0%{
+        transform: rotateZ(25deg);
+    }
+    100%{
+        transform: rotateZ(-25deg);
+    } 
+}
+@keyframes right-leg-animation {
+    0%{
+        transform: rotateZ(-25deg);
+    }
+    100%{
+        transform: rotateZ(25deg);
+    } 
+}
+
+/* body animation */
+
+@keyframes stickman-animation-1 {
+    0%{
+        left:50px;    
+    }
+    100%{
+        left:600px;
+    } 
+}
+
+@keyframes stickman-animation-2 {
+    0%{
+        left:600px;    
+    }
+    100%{
+        left:-150px;
+    } 
+}
+@keyframes stickman-animation-3 {
+    0%{
+        left:1400px;   
+    }
+    100%{
+        left:300px;
+    } 
+}
+
+@keyframes stickman-animation-4 {
+    0%{
+        left:300px;
+    }
+    100%{
+        left:1400px;   
+    } 
+}
+
+
+@keyframes stickwoman-animation-1 {
+    0%{
+        right:400px;   
+    }
+    100%{
+        right:-150px;
+    } 
+}
+
+@keyframes rose-animation {
+    0%{
+        top: 67px;  
+    }
+    100%{
+        top: 270px;
+    } 
+}
+
+@keyframes thunder-animation {
+    0%,10%,12%,50%,53%,60%,64%,80%{
+   background-image: linear-gradient(rgb(0, 0, 0),black);
+    }
+    11%,52%,61%,63%{
+        background-image: linear-gradient(white,black);
+
+    }
+}
+
+
+
+@keyframes programmer-animation-1 {
+    0%{
+        left:1400px;    
+    }
+    100%{
+        left:1100px;
+    } 
+}
+@keyframes programmer-animation-2 {
+    0%{
+        left:1100px;    
+    }
+    100%{
+        left:500px;
+    } 
+}
+@keyframes programmer-animation-3 {
+    0%{
+        left:500px;   
+    }
+    100%{
+        left:1500px;
+    } 
+}
+
+/* animations */
+
+  .stickman-animation-1 {
+    animation: stickman-animation-1 17s linear 1 forwards;
+  }
+  .stickman-animation-2 {
+    animation: stickman-animation-2 15s linear 1 forwards;
+  }
+  .stickman-animation-3 {
+    animation: stickman-animation-3 20s linear 1 forwards;
+  }
+  .stickman-animation-4 {
+    animation: stickman-animation-4 15s linear 1 forwards;
+  }
+  .programmer-animation-1{
+    animation: programmer-animation-1 3s linear 1 forwards;
+  }
+  .programmer-animation-2{
+    animation: programmer-animation-2 5s linear 1 forwards;
+  }
+  .programmer-animation-3{
+    animation: programmer-animation-3 15s linear 1 forwards;
+
+  }
+
+  .right-leg-animation {
+    animation: right-leg-animation 2s linear alternate infinite;
+  }
+  .left-leg-animation {
+    animation: left-leg-animation 2s linear alternate infinite;
+  }
+  .right-leg-fast-animation {
+    animation: right-leg-animation 1s linear alternate infinite;
+  }
+  .left-leg-fast-animation {
+    animation: left-leg-animation 1s linear alternate infinite;
+  }
+
+  .stickwoman-move-forward {
+    animation: stickwoman-animation-1 7s linear 1 forwards;
+  }
+  .rose-animation {
+    animation: rose-animation 5s linear 1 forwards;
+  }
+  .thunder-animation {
+    animation: thunder-animation 1s linear alternate infinite;
+  }
diff --git a/audio.mp3 b/audio.mp3
diff --git a/index.html b/index.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Stickman Full Story</title>
+    <link rel="stylesheet" href="main.css" />
+    <link rel="stylesheet" href="animation.css" />
+  </head>
+
+  <!-- cool programming projects -->
+  <body id="body">
+    <div id="primary-container">
+      <!--  stickman container -->
+      <div id="stickman-container" class="character-container">
+        <div class="head" id="man-head"></div>
+        <div class="body" id="man-body"></div>
+        <div class="left-hand" id="man-left-hand"></div>
+        <div class="right-hand" id="man-right-hand"></div>
+        <div class="left-leg" id="man-left-leg"></div>
+        <div class="right-leg" id="man-right-leg"></div>
+        <div class="right-hand-fold" id="right-hand-fold">
+          <div id="hand1"></div>
+          <div id="hand2"></div>
+        </div>
+        <!-- rose -->
+        <div id="rose">🌹</div>
+      </div>
+      <!-- stickwoman container -->
+      <div id="stickwoman-container" class="character-container">
+        <div class="head woman"></div>
+        <div class="body woman">
+          <div id="first"></div>
+          <div id="second"></div>
+          <div id="third"></div>
+        </div>
+        <div class="left-hand woman"></div>
+        <div class="right-hand woman"></div>
+        <div class="left-leg" id="woman-right-leg"></div>
+        <div class="right-leg" id="woman-left-leg"></div>
+      </div>
+
+      <!-- programmer container -->
+      <div
+        id="programmer-container"
+        class="character-container"
+        style="display: none"
+      >
+        <div class="head"></div>
+        <div class="body"></div>
+        <div class="left-hand"></div>
+        <div class="right-hand"></div>
+        <div class="left-leg" id="programmer-left-leg"></div>
+        <div class="right-leg" id="programmer-right-leg"></div>
+      </div>
+      <!-- message box -->
+      <div id="msgBox">I Love You</div>
+      <!-- coding box -->
+      <div id="codingBox">console.log('hello world');</div>
+
+      <!-- box -->
+      <div id="box">After Few Days</div>
+      <!-- road -->
+      <div id="road"></div>
+      <button id="play-btn">play animation</button>
+    </div>
+    <div class="error-msg">this animation support extra large devices</div>
+    <script src="main.js"></script>
+    <!-- <script src="script.js"></script> -->
+  </body>
+</html>