From 2b7e8c49679210d6249ac20bb0e2774fe4750ac5 Mon Sep 17 00:00:00 2001
From: Sam <74021826+x39OME@users.noreply.github.com>
Date: Thu, 27 Apr 2023 20:53:06 +0300
Subject: [PATCH] Add files via upload
---
.../index.html | 16 +++++++
.../style.css | 45 +++++++++++++++++++
2 files changed, 61 insertions(+)
create mode 100644 100_projects/65-burger-icon-transform-effects/index.html
create mode 100644 100_projects/65-burger-icon-transform-effects/style.css
diff --git a/100_projects/65-burger-icon-transform-effects/index.html b/100_projects/65-burger-icon-transform-effects/index.html
new file mode 100644
index 0000000..1fedd71
--- /dev/null
+++ b/100_projects/65-burger-icon-transform-effects/index.html
@@ -0,0 +1,16 @@
+
+
+
+
+
+ document
+
+
+
+
+
+
\ No newline at end of file
diff --git a/100_projects/65-burger-icon-transform-effects/style.css b/100_projects/65-burger-icon-transform-effects/style.css
new file mode 100644
index 0000000..4c9e1a7
--- /dev/null
+++ b/100_projects/65-burger-icon-transform-effects/style.css
@@ -0,0 +1,45 @@
+* {
+ box-sizing: border-box;
+}
+body {
+ margin: 0;
+ font-family: "Cairo", sans-serif;
+}
+.menu-icon {
+ margin: 60px auto;
+ width: 40px;
+ height: 14px;
+ cursor: pointer;
+ position: relative;
+}
+.menu-icon span {
+ background-color: black;
+ height: 4px;
+ position: absolute;
+ width: 100%;
+ left: 0;
+ transition: all 0.3s ease;
+}
+.menu-icon span:first-child {
+ top: -5px;
+}
+.menu-icon span:nth-child(2) {
+ top: 4px;
+}
+.menu-icon span:last-child {
+ top: 13px;
+}
+.menu-icon:hover span:nth-child(2) {
+ opacity: 0;
+}
+.menu-icon:hover span:first-child,
+.menu-icon:hover span:last-child {
+ top: 6px;
+ background-color: red;
+}
+.menu-icon:hover span:first-child {
+ transform: rotate(45deg);
+}
+.menu-icon:hover span:last-child {
+ transform: rotate(-45deg);
+}
\ No newline at end of file