diff --git a/my code/14-animated-navigation/index.html b/my code/14-animated-navigation/index.html
new file mode 100644
index 0000000..c62453f
--- /dev/null
+++ b/my code/14-animated-navigation/index.html
@@ -0,0 +1,30 @@
+
+
+
+
+
+
+
+ 14 animated naviagtion
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/my code/14-animated-navigation/script.js b/my code/14-animated-navigation/script.js
new file mode 100644
index 0000000..e1f712f
--- /dev/null
+++ b/my code/14-animated-navigation/script.js
@@ -0,0 +1,6 @@
+const btn = document.getElementById("toggle");
+const nav = document.getElementById("nav");
+
+btn.addEventListener("click", () => {
+ nav.classList.toggle("active");
+});
diff --git a/my code/14-animated-navigation/style.css b/my code/14-animated-navigation/style.css
new file mode 100644
index 0000000..ba5fce5
--- /dev/null
+++ b/my code/14-animated-navigation/style.css
@@ -0,0 +1,97 @@
+* {
+ margin: 0;
+ padding: 0;
+}
+body {
+ height: 100vh;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background: linear-gradient(
+ to bottom,
+ #eafbff 0%,
+ #eafbff 50%,
+ #5290f9 50%,
+ #5290f9 100%
+ );
+}
+
+nav {
+ width: 80px;
+ background-color: #fff;
+ padding: 20px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-family: sans-serif;
+ font-size: 20px;
+ border-radius: 3px;
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
+ transition: width 0.6s linear;
+}
+
+nav.active {
+ width: 350px;
+}
+
+nav ul {
+ display: flex;
+ list-style-type: none;
+ padding: 0;
+ margin: 0;
+ width: 0;
+ transition: width 0.6s linear;
+}
+
+nav.active ul {
+ width: 100%;
+}
+
+nav ul li {
+ transform: rotateY(0deg);
+ opacity: 0;
+ margin: 0 10px;
+ transition: transform 0.6s linear, opacity 0.6s linear;
+}
+
+nav.active ul li {
+ opacity: 1;
+ transform: rotateY(360deg);
+}
+
+.icon {
+ background-color: #fff;
+ border: unset;
+ cursor: pointer;
+ padding: 0;
+ position: relative;
+ height: 30px;
+ width: 30px;
+}
+
+.icon:focus {
+ outline: none;
+}
+
+.icon .line {
+ background-color: #5290f9;
+ height: 2px;
+ width: 20px;
+ position: absolute;
+ top: 10px;
+ left: 5px;
+ transition: transform 0.6s linear;
+}
+
+.icon .line2 {
+ top: auto;
+ bottom: 10px;
+}
+
+nav.active .icon .line1 {
+ transform: rotate(-765deg) translateY(5.5px);
+}
+
+nav.active .icon .line2 {
+ transform: rotate(765deg) translateY(-5.5px);
+}