Gavel animation (#2744)

* added 2 animations * removed commented lines * added gavel animation
zero-to-mastery · Oct 14, 2024 · 1ae8d64 · 1ae8d64
1 parent 8821201
commit 1ae8d64
Show file tree

Hide file tree

Showing 3 changed files with 111 additions and 0 deletions.
diff --git a/Art/chaitraDev_gavel/index.html b/Art/chaitraDev_gavel/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>Gavel animation</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div id="hitter"> </div>
+    <div id="gavelStick">
+        <div id="top"></div>
+        <div id="holder"></div>
+        <div id="stick"></div>
+    </div>
+</body>
+</html>
diff --git a/Art/chaitraDev_gavel/meta.json b/Art/chaitraDev_gavel/meta.json
@@ -0,0 +1,4 @@
+{
+    "artName": "gavel",
+    "githubHandle": "chaitraDev"
+}
diff --git a/Art/chaitraDev_gavel/styles.css b/Art/chaitraDev_gavel/styles.css
@@ -0,0 +1,90 @@
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+:root{
+    --light-brown:#ffa449;
+    --dark-brown:#a85808;
+}
+body{
+    display: flex;
+    align-items: center;
+    justify-content:space-evenly;
+    height:100vh;   width:100vw;
+}
+#hitter{
+    height:20px; width: 180px;
+    position: relative;
+    left:42vw;  bottom:-100px;
+    background-color: var(--dark-brown);
+    border: 5px solid black;
+    border-radius: 20rem;
+    position: relative;
+}
+#hitter::before{
+    content: " ";
+    position: absolute;
+    border: 5px solid black;
+    border-radius: 20rem;
+    width:80%; height:100%;
+    top:-200%; left:6px;
+    background-color: var(--light-brown);
+}
+#gavelStick{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    height: 100vh;    width:100vw;
+    animation: thoko linear 1s infinite alternate-reverse;
+    border: none;
+    rotate:-90deg;
+}
+@keyframes thoko {
+    0%{
+        rotate:-90deg;
+    }
+    40%{
+        rotate:-10deg;
+    }    
+    100%{
+        rotate:0deg;
+    }
+}
+#gavelStick>*{
+    border: 5px solid black;
+}
+#stick{
+    border-top: 0px;
+    background-color: var(--light-brown);
+    height:25%;    width:50px;
+    border-radius: 0rem 0rem 10rem 10rem;
+}
+#top::before, #top::after{
+    border: 5px solid black;
+    content: " ";
+    position: absolute;
+    background-color: var(--dark-brown);
+    width:8%;  height: 130%;
+    top:-27%; 
+    border-radius: 0.7rem;
+}
+#top::before{
+    left: -5%;
+}
+#top::after {
+    right: -5%;
+}
+#top{
+    border-radius: 1rem;
+    background-color: var(--light-brown);
+    width: 150px;    height:70px;
+    position: relative;
+}
+#holder{
+    border-top: 0px;
+    border-radius:0rem 0rem 20rem 20rem;
+    background-color: var(--dark-brown);
+    width:80px; height:20px;
+}