Merge pull request #447 from RAHULBAWA777/patch-82

Jaideep25-tech · web-flow · commit f6b2dd99c9a4 · 2022-05-31T23:29:35.000+05:30
see saw game
diff --git a/see saw game/README.md b/see saw game/README.md
@@ -0,0 +1,20 @@
+
+# see saw game
+
+## 🚀 About Me
+I'm a full stack developer...you can follow me here -https://github.com/RAHULBAWA777
+
+
+## Run Locally
+
+Clone the project
+
+
+Start the live server
+
+
+## Used By
+
+This project is used by the following companies:
+
+-https://github.com/Dezenix/frontend-html-css-js
diff --git a/see saw game/index.html b/see saw game/index.html
@@ -0,0 +1,15 @@
+<!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>See Saw Game </title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <div class="sitting">
+      <div class="object"></div>
+    </div>
+  </body>
+</html>
diff --git a/see saw game/style.css b/see saw game/style.css
@@ -0,0 +1,45 @@
+body {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    background: #ebd4d4;
+  }
+  .object {
+    position: relative;
+    bottom: 100px;
+    left: calc(100% - 70px);
+    width: 100px;
+    height: 100px;
+    background: #affff2;
+    border-radius: 50%;
+    animation: play 3s ease-in-out 1s infinite alternate;
+  }
+ 
+  .sitting {
+    width: 700px;
+    height: 25px;
+    background: silver;
+    border-radius: 50px;
+    transform: rotate(35deg);
+    animation:bar 3s ease-in-out 1s infinite alternate;
+  }
+  @keyframes bar {
+    from {
+      transform: rotate(-10deg);
+    }
+    to {
+      transform: rotate(10deg);
+    }
+  }
+  @keyframes play {
+    from {
+      left: calc(100% - 70px);
+      transform: rotate(360deg);
+    }
+    to {
+      left: calc(0% - 35px);
+      transform: rotate(0deg);
+    }
+  }
+ 
