diff --git a/Art/chaitraDev_gavel/index.html b/Art/chaitraDev_gavel/index.html new file mode 100644 index 000000000..d199846ec --- /dev/null +++ b/Art/chaitraDev_gavel/index.html @@ -0,0 +1,17 @@ + + + + + + Gavel animation + + + +
+
+
+
+
+
+ + \ No newline at end of file diff --git a/Art/chaitraDev_gavel/meta.json b/Art/chaitraDev_gavel/meta.json new file mode 100644 index 000000000..be886bf47 --- /dev/null +++ b/Art/chaitraDev_gavel/meta.json @@ -0,0 +1,4 @@ +{ + "artName": "gavel", + "githubHandle": "chaitraDev" +} \ No newline at end of file diff --git a/Art/chaitraDev_gavel/styles.css b/Art/chaitraDev_gavel/styles.css new file mode 100644 index 000000000..e0240e315 --- /dev/null +++ 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; +} \ No newline at end of file