added a new project Hamburger Animtion

pulkit-30 · Sep 6, 2021 · 962fd20 · 962fd20
1 parent b681a25
commit 962fd20
Show file tree

Hide file tree

Showing 8 changed files with 139 additions and 4 deletions.
diff --git a/HamburgerAnimation/Readme.md b/HamburgerAnimation/Readme.md
@@ -0,0 +1,3 @@
+# Hamburger Animation
+
+<img src="./pro.png"/>
diff --git a/HamburgerAnimation/index.html b/HamburgerAnimation/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <link rel="stylesheet" href="./style.css" />
+    <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>Hamburger Animation</title>
+  </head>
+  <body>
+    <h1>Hamburger Animation</h1>
+    <div class="box">
+      <div class="hamburger">
+        <div class="line"></div>
+        <div class="line"></div>
+        <div class="line"></div>
+      </div>
+    </div>
+
+    <footer>
+      <div>Credit: <a href="https://github.com/pulkit-30">PULKIT GUPTA</a></div>
+      <div>Date: 1 /08/ 2020</div>
+    </footer>
+  </body>
+  <script src="./script.js"></script>
+</html>
diff --git a/HamburgerAnimation/pro.png b/HamburgerAnimation/pro.png
diff --git a/HamburgerAnimation/script.js b/HamburgerAnimation/script.js
@@ -0,0 +1,7 @@
+const line = document.querySelectorAll(".line");
+const hamBurger = document.querySelector(".hamburger");
+hamBurger.addEventListener("click", () => {
+  line.forEach((Element) => {
+    Element.classList.toggle("active_line");
+  });
+});
diff --git a/HamburgerAnimation/style.css b/HamburgerAnimation/style.css
@@ -0,0 +1,88 @@
+* {
+  margin: 0;
+  padding: 0;
+}
+body {
+  height: 100vh;
+  width: 100%;
+  overflow: hidden;
+  background-color: #345b63;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-family: sans-serif;
+}
+h1 {
+  color: white;
+  position: absolute;
+  top: 10px;
+  text-align: center;
+}
+.box {
+  width: 200px;
+  height: 200px;
+  background-color: #d4ecdd71;
+  border-radius: 5px;
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  -ms-border-radius: 5px;
+  -o-border-radius: 5px;
+  box-shadow: inset 0px 0px 10px black;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.hamburger {
+  cursor: pointer;
+  width: 140px;
+  height: 100px;
+}
+.line {
+  border-radius: 4px;
+  width: 100px;
+  height: 4px;
+  background-color: black;
+  margin: 20px 0px;
+  transition: 0.3s;
+  -webkit-transition: 0.3s;
+  -moz-transition: 0.3s;
+  -ms-transition: 0.3s;
+  -o-transition: 0.3s;
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  -ms-border-radius: 4px;
+  -o-border-radius: 4px;
+}
+.line:nth-child(1) {
+  width: 50px;
+}
+.line:nth-child(2) {
+  width: 140px;
+}
+.active_line:nth-child(1) {
+  transform: translate(17.5px, -5px) rotate(50deg);
+  -webkit-transform: translate(17.5px, -5px) rotate(50deg);
+  -moz-transform: translate(17.5px, -5px) rotate(50deg);
+  -ms-transform: translate(17.5px, -5px) rotate(50deg);
+  -o-transform: translate(17.5px, -5px) rotate(50deg);
+}
+.active_line:nth-child(2) {
+  transform: rotate(-50deg);
+  -webkit-transform: rotate(-50deg);
+  -moz-transform: rotate(-50deg);
+  -ms-transform: rotate(-50deg);
+  -o-transform: rotate(-50deg);
+}
+.active_line:nth-child(3) {
+  transform: translate(33px, -5px) rotate(50deg);
+  -webkit-transform: translate(33px, -5px) rotate(50deg);
+  -moz-transform: translate(33px, -5px) rotate(50deg);
+  -ms-transform: translate(33px, -5px) rotate(50deg);
+  -o-transform: translate(33px, -5px) rotate(50deg);
+}
+footer {
+  position: absolute;
+  bottom: 5px;
+  left: 5px;
+  color: white;
+}
diff --git a/README.md b/README.md
@@ -34,13 +34,14 @@
 | Wave Animation                | https://pulkit203.github.io/Wave-Animation/              |
 | Menu Hover effect Animation   | https://lavishbansal17.github.io/Menu-Hover-Effect/      |
 | Button Animation              | https://palaksharma23.github.io/AnimatedButton/          |
-| Ring of Fire                  | https://lavishbansal17.github.io/Ring-of-fire/                         |
+| Ring of Fire                  | https://lavishbansal17.github.io/Ring-of-fire/           |
 | Moon Light                    | https://iamtushar11.github.io/MoonLight-Parallex-Effect/ |
 | Modal Animation               | https://pulkit203.github.io/Modal-Animation/             |
-| Gradient Drop Shadow          | https://lavishbansal17.github.io/Gradient-Drop-Box/                  |
-| Text Animation Effect         | https://lavishbansal17.github.io/Text-Animation-Effect/                 |
+| Gradient Drop Shadow          | https://lavishbansal17.github.io/Gradient-Drop-Box/      |
+| Text Animation Effect         | https://lavishbansal17.github.io/Text-Animation-Effect/  |
 | Animation Balls               | https://pulkit203.github.io/Windows-Loading-Animation/   |
-| Line Icon Effect | https://lavishbansal17.github.io/Line-Icon-Effect/
+| Line Icon Effect              | https://lavishbansal17.github.io/Line-Icon-Effect/       |
+| Hamburger Animation           | https://pulkit203.github.io/Hamburger-Animtion/          |
 
 ---
 

diff --git a/loadingBallsAnimation/index.html b/loadingBallsAnimation/index.html
@@ -17,5 +17,9 @@ <h1>Window'10 Loading Animation</h1>
       <div class="ball"></div>
       <div class="ball"></div>
     </div>
+    <footer>
+      <div>Credit: <a href="https://github.com/pulkit-30">PULKIT GUPTA</a></div>
+      <div>Date: 1 /08/ 2020</div>
+    </footer>
   </body>
 </html>
diff --git a/loadingBallsAnimation/style.css b/loadingBallsAnimation/style.css
@@ -86,3 +86,9 @@ h1 {
     margin: auto;
   }
 }
+footer {
+  position: absolute;
+  bottom: 5px;
+  left: 5px;
+  color: white;
+}