diff --git a/css/background.jpg b/css/background.jpg
new file mode 100644
index 0000000..57528e2
Binary files /dev/null and b/css/background.jpg differ
diff --git a/css/bg.jpg b/css/bg.jpg
new file mode 100644
index 0000000..1438db5
Binary files /dev/null and b/css/bg.jpg differ
diff --git a/css/style.css b/css/style.css
index 6af2e5d..b4d7306 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,27 +1,43 @@
+body{
+    background-image: url(bg.jpg);
+    background-size: 100%;}
 .menu {
     width: 750px;
     height: 750px;
 }
 
-polygon {
+g {
     transition: all 0.5s;
 }
 
 .moveFirst {
-    transform: translate(70px, 10px) rotate(45deg);
+    transform: translate(70px, 10px) rotate(15deg);
 }
 .moveCss{
-    transform: translate(130px, 10px) rotate(60deg);
+    transform: translate(130px, 50px) rotate(30deg);
 }
 
 .moveHtml{
-    transform: translate(190px, 10px) rotate(60deg);
+    transform: translate(190px, 20px) rotate(45deg);
 }
 
 .moveKnow{
-    transform: translate(250px, 10px) rotate(60deg);
+    transform: translate(260px, 60px) rotate(60deg);
 }
 
 .movePipe{
-    transform: translate(310px, 10px) rotate(60deg);
+    transform: translate(300px, 20px) rotate(75deg);
+}
+.change{
+    opacity: 0;
+}
+.noarrow{
+    display: none;
+}
+.appear{
+    color: white;
+    display: block;
+}
+a:hover{
+    opacity: 0.8;
 }
diff --git a/css/triangle_final.svg b/css/triangle_final.svg
new file mode 100644
index 0000000..b10a03c
--- /dev/null
+++ b/css/triangle_final.svg
@@ -0,0 +1,16 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52.36 55.53">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #231f20;
+      }
+
+      .cls-2 {
+        fill: #939598;
+      }
+    </style>
+  </defs>
+  <title>triangle_final</title>
+  <polygon class="cls-1" points="0 27.77 0 0 26.18 13.88 52.36 27.77 26.18 41.65 0 55.53 0 27.77"/>
+  <path class="cls-2" d="M24.72,21.56a1.06,1.06,0,0,1-1.06,1.06H9.19a1.06,1.06,0,0,1-1.06-1.06V20.91a1.06,1.06,0,0,1,1.06-1.06H23.66a1.06,1.06,0,0,1,1.06,1.06v0.65Zm0,6.53a1.06,1.06,0,0,1-1.06,1.06H9.19a1.06,1.06,0,0,1-1.06-1.06V27.44a1.06,1.06,0,0,1,1.06-1.06H23.66a1.06,1.06,0,0,1,1.06,1.06v0.65Zm0,6.53a1.06,1.06,0,0,1-1.06,1.06H9.19a1.06,1.06,0,0,1-1.06-1.06V34a1.06,1.06,0,0,1,1.06-1.06H23.66A1.06,1.06,0,0,1,24.72,34v0.65Z" transform="translate(0)"/>
+</svg>
diff --git a/css/triangle_others.svg b/css/triangle_others.svg
new file mode 100644
index 0000000..30ef6f7
--- /dev/null
+++ b/css/triangle_others.svg
@@ -0,0 +1,63 @@
+<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52.36 55.53">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #414042;
+      }
+
+      .cls-2 {
+        fill: #6d6e71;
+      }
+
+      .cls-3 {
+        fill: #808285;
+      }
+
+      .cls-4 {
+        fill: #939598;
+      }
+
+      .cls-5 {
+        fill: #f0502a;
+      }
+
+      .cls-6 {
+        fill: #58595b;
+      }
+
+      .cls-7 {
+        fill: #27aae1;
+      }
+
+      .cls-8 {
+        fill: #cc2e2e;
+      }
+
+      .cls-9 {
+        fill: #dfe339;
+      }
+
+      .cls-10 {
+        fill: #006838;
+      }
+    </style>
+  </defs>
+  <title>triangle_others</title>
+  <polygon class="cls-1" points="0 27.77 0 0 26.18 13.88 52.36 27.77 26.18 41.65 0 55.53 0 27.77"/>
+  <polygon class="cls-2" points="0 27.77 0 0 26.18 13.88 52.36 27.77 26.18 41.65 0 55.53 0 27.77"/>
+  <polygon class="cls-3" points="0 27.77 0 0 26.18 13.88 52.36 27.77 26.18 41.65 0 55.53 0 27.77"/>
+  <polygon class="cls-4" points="0 27.77 0 0 26.18 13.88 52.36 27.77 26.18 41.65 0 55.53 0 27.77"/>
+  <g id="TeosiX.tif">
+    <path class="cls-5" d="M100,25.23l0.12,0.06,2.2,1.27a0.13,0.13,0,0,1,.07.14,1.47,1.47,0,1,0,1.31-1.37,1.38,1.38,0,0,0-.6.2,0.11,0.11,0,0,1-.14,0l-2.44-1.41a0.12,0.12,0,0,1-.07-0.13,1.46,1.46,0,0,0-1.89-1.42c-0.11,0-.21.1-0.32,0.14a0.15,0.15,0,0,1-.12,0l-2.57-1.48-0.07,0a0.61,0.61,0,0,0,.08-0.09l1.12-1.94a1.22,1.22,0,0,1,1.75-.47L108,24.17l0.63,0.36a1.22,1.22,0,0,1,.45,1.68l-5.85,10.13a1.22,1.22,0,0,1-1.72.43L93.23,32l-1.85-1.07a1.22,1.22,0,0,1-.46-1.73l4-6.85a0.79,0.79,0,0,0,0-.1L95,22.32l2.46,1.42a0.13,0.13,0,0,1,.08.15,1.46,1.46,0,0,0,1.16,1.53,0.15,0.15,0,0,1,.14.13l1.29,4.83a0.15,0.15,0,0,1-.05.18,1.46,1.46,0,0,0-.37,1.68,1.47,1.47,0,0,0,2.8-.77,1.42,1.42,0,0,0-1.08-1.24,0.14,0.14,0,0,1-.1-0.13l-1-3.76-0.26-1Z" transform="translate(-84 0)"/>
+  </g>
+  <polygon class="cls-6" points="0 27.77 0 0 26.18 13.88 52.36 27.77 26.18 41.65 0 55.53 0 27.77"/>
+  <path class="cls-7" d="M101.7,15.24l0.74,1.7,1.22,2.79,1.22,2.78,1.22,2.79,1.24,2.83c0.4,0.92.8,1.84,1.22,2.76a0.26,0.26,0,0,1-.06.35l-4.57,4.71a0.71,0.71,0,0,1-.32.19l-6.36,1.6a0.26,0.26,0,0,1-.33-0.12c-0.68-.94-1.37-1.86-2.05-2.79l-1.77-2.41L91,29.58l-1.77-2.41-2.07-2.81-0.38-.52Zm-8.5,11.7,6.24-3.6,0.91,1.89-4.16,2.4,1.12,1.73,4-2.29,0.06,0.07c0.31,0.63.63,1.27,0.93,1.91a0.26,0.26,0,0,1,0,.23q-0.64.75-1.29,1.48a0.44,0.44,0,0,1-.22.13l-1.95.38a0.26,0.26,0,0,1-.21-0.09c-0.18-.26-0.35-0.54-0.52-0.81a0.17,0.17,0,0,0-.29-0.07l-1.32.76-0.31.18,1.47,2.26a0.22,0.22,0,0,0,.28.09l3.89-.82a0.48,0.48,0,0,0,.24-0.13l2.7-3a0.21,0.21,0,0,0,0-.27l-2-4L100.55,21c-0.08-.17-0.19-0.33-0.28-0.49L92,25.23Z" transform="translate(-84 0)"/>
+  <path class="cls-8" d="M86.29,27L98.15,15.15l1,1.15,1.7,2,1.12,1.34,1.7,2,2.46,2.94,2.37,2.83c0.22,0.26.44,0.53,0.66,0.79a0.16,0.16,0,0,1,0,.22l-1.14,2-1.8,3.18c-0.15.26-.29,0.53-0.45,0.79a0.44,0.44,0,0,1-.16.15l-3.7,2.09L99.6,38a0.17,0.17,0,0,1-.23,0l-2.46-2.05L94.68,34l-2.26-1.89-2.25-1.89-1.92-1.59Zm12.13-7.17L91,27.29l4.89,4.09L101,26.24l0.09,0.09,1.61,1.92a0.12,0.12,0,0,1,0,.17l-1.09,1.91a0.49,0.49,0,0,1-.17.16l-1.74,1c-0.25.15-.25,0.14-0.47,0l-1.07-.89L98,30.71l-1.1,1.1c-0.29.3-.31,0.2,0,0.5l2,1.65c0.28,0.23.27,0.24,0.58,0.07l3.23-1.82a1.42,1.42,0,0,0,.59-0.6c0.34-.64.7-1.26,1.06-1.89l0.85-1.5a0.16,0.16,0,0,0,0-.23c-0.14-.14-0.26-0.3-0.39-0.45l-1.58-1.9-1.67-2-0.44-.51-0.61.61-4.68,4.68c-0.07.07-.12,0.14-0.24,0l-1.46-1.23-0.07-.08L94.24,27l5.4-5.4a0.16,0.16,0,0,0,0-.26c-0.27-.31-0.53-0.63-0.79-0.94Z" transform="translate(-84 0)"/>
+  <g>
+    <path class="cls-9" d="M90.64,23.33a7,7,0,0,1,1.78-1.16C94.28,21.08,96.16,20,98,18.93a1.49,1.49,0,0,1,1.59,0l6.88,4a1.48,1.48,0,0,1,.79,1.36q0,4,0,8a1.43,1.43,0,0,1-.77,1.31l-2.32,1.31a1.37,1.37,0,0,1-.28.09,2.45,2.45,0,0,1,0-.3c0-.3.07-0.59,0.08-0.89a0.38,0.38,0,0,1,.22-0.37l1.6-.89a0.37,0.37,0,0,0,.21-0.37q0-3.91,0-7.83a0.37,0.37,0,0,0-.21-0.36L99,20a0.37,0.37,0,0,0-.41,0l-6.76,3.9a0.41,0.41,0,0,0-.23.4q0,3.9,0,7.81a0.35,0.35,0,0,0,.2.34l6.8,3.93a0.35,0.35,0,0,0,.4,0l1.76-1a1.44,1.44,0,0,0,.66-0.71,0.88,0.88,0,0,0-.38-1.13l-0.69-.4-6.06-3.5C94,29.52,94,29.46,94.18,29.19l0.35-.61a0.22,0.22,0,0,1,.33-0.09L95,28.55l6.73,3.89a3.23,3.23,0,0,1,.73.57,1.75,1.75,0,0,1,.31,2,3.16,3.16,0,0,1-1.38,1.51l-1.79,1a1.46,1.46,0,0,1-1.21.12l-0.12,0-7.3-4.21a0.14,0.14,0,0,0,0,0,1.54,1.54,0,0,1-.55-1.27c0-2.36,0-4.72,0-7.08a3.9,3.9,0,0,1,.13-1.51Z" transform="translate(-84 0)"/>
+    <path class="cls-9" d="M96.36,24.34a6.11,6.11,0,0,1,1.44-1.77,2.59,2.59,0,0,1,2.91-.24,0.21,0.21,0,0,1,.11.31c-0.17.31-.34,0.61-0.53,0.9a0.54,0.54,0,0,1-.25.11H100a1.57,1.57,0,0,0-1.91.64,5.71,5.71,0,0,0-1,1.8,1.86,1.86,0,0,0-.07.57,0.9,0.9,0,0,0,.69.8,0.49,0.49,0,0,0,.47-0.13c0.33-.33.66-0.67,1-1,0.61-.7,1.2-1.43,1.8-2.14a2,2,0,0,1,.26-0.24,2,2,0,0,1,2.61-.15,2.35,2.35,0,0,1,1.07,2.32,5.37,5.37,0,0,1-.7,2.11,6.76,6.76,0,0,1-1.71,2.18,2.54,2.54,0,0,1-2.94.28,0.28,0.28,0,0,1-.14-0.44l0.44-.76a0.28,0.28,0,0,1,.39-0.14l0.19,0.07a1.34,1.34,0,0,0,1.49-.35,6.33,6.33,0,0,0,1.54-2.65,1,1,0,0,0-.39-1.24,0.64,0.64,0,0,0-.89,0,7.83,7.83,0,0,0-1,1c-0.55.66-1.06,1.36-1.61,2a3.3,3.3,0,0,1-.69.59,1.86,1.86,0,0,1-2.23,0,2.33,2.33,0,0,1-1-2.69A5.85,5.85,0,0,1,96.36,24.34Z" transform="translate(-84 0)"/>
+  </g>
+  <g id="vvSKCh.tif">
+    <path class="cls-10" d="M104.71,21.88c-0.62-.61-1.17-1.2-1.78-1.74A33.57,33.57,0,0,1,98,14.84a11,11,0,0,1-2-4.4,5,5,0,0,1-.09-0.73l0.4,1a12.67,12.67,0,0,0,1.19,2.24,6.29,6.29,0,0,0,2.66,2.19c0.4,0.18.79,0.39,1.17,0.6a3.24,3.24,0,0,1,1.61,2.14c0.05,0.21.12,0.42,0.16,0.63a4.24,4.24,0,0,0,1.29,2.31c0.29,0.29.59,0.57,0.89,0.85a0.34,0.34,0,0,1,.13.42,12.57,12.57,0,0,0-.39,5.47,32.37,32.37,0,0,0,1,4.13c0.12,0.42.23,0.84,0.35,1.25l0.08,0.26,0.08,0c-0.06-.53-0.11-1.06-0.19-1.59-0.17-1.17-.39-2.33-0.53-3.49a14.61,14.61,0,0,1,.13-3.84,15.72,15.72,0,0,1,.73-3,19.28,19.28,0,0,1,.79-1.78c0.09-.19.28-0.21,0.47,0,0.35,0.33.7,0.67,1,1l2,1.94a0.62,0.62,0,0,1,.19.94,15.9,15.9,0,0,0-1.22,3.51,34.77,34.77,0,0,0-.68,4.16c-0.15,1.46-.28,2.92-0.52,4.36A6.63,6.63,0,0,1,107.13,39a6.22,6.22,0,0,1-.75.64,1.11,1.11,0,0,1-.34.11c0.1-.53.19-1,0.29-1.53a14,14,0,0,0,.25-2.73,0.4,0.4,0,0,0-.15-0.25,18.59,18.59,0,0,1-4.19-4.9,8.1,8.1,0,0,1-1.2-3.9,4.75,4.75,0,0,1,1.06-3.25A3.64,3.64,0,0,1,104.3,22Z" transform="translate(-84 0)"/>
+  </g>
+</svg>
diff --git a/index.html b/index.html
index 2dbe43a..3b29423 100644
--- a/index.html
+++ b/index.html
@@ -11,30 +11,108 @@
 <body>
 
     <div id="burger" class="menu">
-        <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 452.4 144.2" style="enable-background:new 0 0 52.4 44.2;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#FFFEFE;}
-</style>
-<polygon id="js" points="0,22.1 0,0 26.2,11.1 52.4,22.1 26.2,33.2 0,44.2 "/>
-    <polygon id="css" points="0,22.1 0,0 26.2,11.1 52.4,22.1 26.2,33.2 0,44.2 "/>
-    <polygon id="html" points="0,22.1 0,0 26.2,11.1 52.4,22.1 26.2,33.2 0,44.2 "/>
-    <polygon id="git" points="0,22.1 0,0 26.2,11.1 52.4,22.1 26.2,33.2 0,44.2 "/>
-        <polygon id="pp" points="0,22.1 0,0 26.2,11.1 52.4,22.1 26.2,33.2 0,44.2 "/>
-    <polygon id="topitem" points="0,22.1 0,0 26.2,11.1 52.4,22.1 26.2,33.2 0,44.2 "/>
-<g>
-	<path id="topitem" class="st0" d="M23,15.4c0,0.6-0.5,1.1-1.1,1.1H6.1c-0.6,0-1.1-0.5-1.1-1.1v-0.7c0-0.6,0.5-1.1,1.1-1.1h15.8
-		c0.6,0,1.1,0.5,1.1,1.1V15.4z M23,21.5c0,0.6-0.5,1.1-1.1,1.1H6.1c-0.6,0-1.1-0.5-1.1-1.1v-0.7c0-0.6,0.5-1.1,1.1-1.1h15.8
-		c0.6,0,1.1,0.5,1.1,1.1V21.5z M23,27.5c0,0.6-0.5,1.1-1.1,1.1H6.1c-0.6,0-1.1-0.5-1.1-1.1v-0.7c0-0.6,0.5-1.1,1.1-1.1h15.8
-		c0.6,0,1.1,0.5,1.1,1.1V27.5z"/>
-</g>
+        <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 452.36 155.53">
+  <defs>
+    <style>
+
+      .cls-12 {
+          fill: #939598;}
+      .cls-13 {
+        fill: #231f20;
+      }
+ .cls-1 {
+        fill: #414042;
+      }
+
+      .cls-2 {
+        fill: #6d6e71;
+      }
+
+      .cls-3 {
+        fill: #808285;
+      }
+
+      .cls-4 {
+        fill: #939598;
+      }
+
+      .cls-5 {
+        fill: #f0502a;
+      }
+
+      .cls-6 {
+        fill: #58595b;
+      }
+
+      .cls-7 {
+        fill: #27aae1;
+      }
+
+      .cls-8 {
+        fill: #cc2e2e;
+      }
+
+      .cls-9 {
+        fill: #dfe339;
+      }
+
+      .cls-10 {
+        fill: #006838;
+      }
+    </style>
+  </defs>
+  <title>triangle_final</title>
+            <a href="#">
+<g id="js">
+     <polygon  class="cls-1" points="0 27.77 0 0 26.18 13.88 52.36 27.77 26.18 41.65 0 55.53 0 27.77"/>
+    <path class="cls-5" d="M100,25.23l0.12,0.06,2.2,1.27a0.13,0.13,0,0,1,.07.14,1.47,1.47,0,1,0,1.31-1.37,1.38,1.38,0,0,0-.6.2,0.11,0.11,0,0,1-.14,0l-2.44-1.41a0.12,0.12,0,0,1-.07-0.13,1.46,1.46,0,0,0-1.89-1.42c-0.11,0-.21.1-0.32,0.14a0.15,0.15,0,0,1-.12,0l-2.57-1.48-0.07,0a0.61,0.61,0,0,0,.08-0.09l1.12-1.94a1.22,1.22,0,0,1,1.75-.47L108,24.17l0.63,0.36a1.22,1.22,0,0,1,.45,1.68l-5.85,10.13a1.22,1.22,0,0,1-1.72.43L93.23,32l-1.85-1.07a1.22,1.22,0,0,1-.46-1.73l4-6.85a0.79,0.79,0,0,0,0-.1L95,22.32l2.46,1.42a0.13,0.13,0,0,1,.08.15,1.46,1.46,0,0,0,1.16,1.53,0.15,0.15,0,0,1,.14.13l1.29,4.83a0.15,0.15,0,0,1-.05.18,1.46,1.46,0,0,0-.37,1.68,1.47,1.47,0,0,0,2.8-.77,1.42,1.42,0,0,0-1.08-1.24,0.14,0.14,0,0,1-.1-0.13l-1-3.76-0.26-1Z" transform="translate(-84 0)"/>
+
+
+    </g>
+            </a>
+            <a href="#">
+            <g id="css">
+            <polygon  class="cls-2" points="0 27.77 0 0 26.18 13.88 52.36 27.77 26.18 41.65 0 55.53 0 27.77"/>
+                <path class="cls-7" d="M101.7,15.24l0.74,1.7,1.22,2.79,1.22,2.78,1.22,2.79,1.24,2.83c0.4,0.92.8,1.84,1.22,2.76a0.26,0.26,0,0,1-.06.35l-4.57,4.71a0.71,0.71,0,0,1-.32.19l-6.36,1.6a0.26,0.26,0,0,1-.33-0.12c-0.68-.94-1.37-1.86-2.05-2.79l-1.77-2.41L91,29.58l-1.77-2.41-2.07-2.81-0.38-.52Zm-8.5,11.7,6.24-3.6,0.91,1.89-4.16,2.4,1.12,1.73,4-2.29,0.06,0.07c0.31,0.63.63,1.27,0.93,1.91a0.26,0.26,0,0,1,0,.23q-0.64.75-1.29,1.48a0.44,0.44,0,0,1-.22.13l-1.95.38a0.26,0.26,0,0,1-.21-0.09c-0.18-.26-0.35-0.54-0.52-0.81a0.17,0.17,0,0,0-.29-0.07l-1.32.76-0.31.18,1.47,2.26a0.22,0.22,0,0,0,.28.09l3.89-.82a0.48,0.48,0,0,0,.24-0.13l2.7-3a0.21,0.21,0,0,0,0-.27l-2-4L100.55,21c-0.08-.17-0.19-0.33-0.28-0.49L92,25.23Z" transform="translate(-84 0)"/>
+
+                </g>
+            </a>
+            <a href="#">
+            <g id="html">
+            <polygon  class="cls-3" points="0 27.77 0 0 26.18 13.88 52.36 27.77 26.18 41.65 0 55.53 0 27.77"/>
+                <path class="cls-8" d="M86.29,27L98.15,15.15l1,1.15,1.7,2,1.12,1.34,1.7,2,2.46,2.94,2.37,2.83c0.22,0.26.44,0.53,0.66,0.79a0.16,0.16,0,0,1,0,.22l-1.14,2-1.8,3.18c-0.15.26-.29,0.53-0.45,0.79a0.44,0.44,0,0,1-.16.15l-3.7,2.09L99.6,38a0.17,0.17,0,0,1-.23,0l-2.46-2.05L94.68,34l-2.26-1.89-2.25-1.89-1.92-1.59Zm12.13-7.17L91,27.29l4.89,4.09L101,26.24l0.09,0.09,1.61,1.92a0.12,0.12,0,0,1,0,.17l-1.09,1.91a0.49,0.49,0,0,1-.17.16l-1.74,1c-0.25.15-.25,0.14-0.47,0l-1.07-.89L98,30.71l-1.1,1.1c-0.29.3-.31,0.2,0,0.5l2,1.65c0.28,0.23.27,0.24,0.58,0.07l3.23-1.82a1.42,1.42,0,0,0,.59-0.6c0.34-.64.7-1.26,1.06-1.89l0.85-1.5a0.16,0.16,0,0,0,0-.23c-0.14-.14-0.26-0.3-0.39-0.45l-1.58-1.9-1.67-2-0.44-.51-0.61.61-4.68,4.68c-0.07.07-.12,0.14-0.24,0l-1.46-1.23-0.07-.08L94.24,27l5.4-5.4a0.16,0.16,0,0,0,0-.26c-0.27-.31-0.53-0.63-0.79-0.94Z" transform="translate(-84 0)"/>
+                </g>
+            </a>
+            <a href="#">
+            <g id="git">
+            <polygon  class="cls-6" points="0 27.77 0 0 26.18 13.88 52.36 27.77 26.18 41.65 0 55.53 0 27.77"/>
+                <path class="cls-9" d="M90.64,23.33a7,7,0,0,1,1.78-1.16C94.28,21.08,96.16,20,98,18.93a1.49,1.49,0,0,1,1.59,0l6.88,4a1.48,1.48,0,0,1,.79,1.36q0,4,0,8a1.43,1.43,0,0,1-.77,1.31l-2.32,1.31a1.37,1.37,0,0,1-.28.09,2.45,2.45,0,0,1,0-.3c0-.3.07-0.59,0.08-0.89a0.38,0.38,0,0,1,.22-0.37l1.6-.89a0.37,0.37,0,0,0,.21-0.37q0-3.91,0-7.83a0.37,0.37,0,0,0-.21-0.36L99,20a0.37,0.37,0,0,0-.41,0l-6.76,3.9a0.41,0.41,0,0,0-.23.4q0,3.9,0,7.81a0.35,0.35,0,0,0,.2.34l6.8,3.93a0.35,0.35,0,0,0,.4,0l1.76-1a1.44,1.44,0,0,0,.66-0.71,0.88,0.88,0,0,0-.38-1.13l-0.69-.4-6.06-3.5C94,29.52,94,29.46,94.18,29.19l0.35-.61a0.22,0.22,0,0,1,.33-0.09L95,28.55l6.73,3.89a3.23,3.23,0,0,1,.73.57,1.75,1.75,0,0,1,.31,2,3.16,3.16,0,0,1-1.38,1.51l-1.79,1a1.46,1.46,0,0,1-1.21.12l-0.12,0-7.3-4.21a0.14,0.14,0,0,0,0,0,1.54,1.54,0,0,1-.55-1.27c0-2.36,0-4.72,0-7.08a3.9,3.9,0,0,1,.13-1.51Z" transform="translate(-84 0)"/>
+                <path class="cls-9" d="M96.36,24.34a6.11,6.11,0,0,1,1.44-1.77,2.59,2.59,0,0,1,2.91-.24,0.21,0.21,0,0,1,.11.31c-0.17.31-.34,0.61-0.53,0.9a0.54,0.54,0,0,1-.25.11H100a1.57,1.57,0,0,0-1.91.64,5.71,5.71,0,0,0-1,1.8,1.86,1.86,0,0,0-.07.57,0.9,0.9,0,0,0,.69.8,0.49,0.49,0,0,0,.47-0.13c0.33-.33.66-0.67,1-1,0.61-.7,1.2-1.43,1.8-2.14a2,2,0,0,1,.26-0.24,2,2,0,0,1,2.61-.15,2.35,2.35,0,0,1,1.07,2.32,5.37,5.37,0,0,1-.7,2.11,6.76,6.76,0,0,1-1.71,2.18,2.54,2.54,0,0,1-2.94.28,0.28,0.28,0,0,1-.14-0.44l0.44-.76a0.28,0.28,0,0,1,.39-0.14l0.19,0.07a1.34,1.34,0,0,0,1.49-.35,6.33,6.33,0,0,0,1.54-2.65,1,1,0,0,0-.39-1.24,0.64,0.64,0,0,0-.89,0,7.83,7.83,0,0,0-1,1c-0.55.66-1.06,1.36-1.61,2a3.3,3.3,0,0,1-.69.59,1.86,1.86,0,0,1-2.23,0,2.33,2.33,0,0,1-1-2.69A5.85,5.85,0,0,1,96.36,24.34Z" transform="translate(-84 0)"/>
+            </g>
+        </a>
+            <a href="#">
+            <g id="pp">
+          <polygon  class="cls-4" points="0 27.77 0 0 26.18 13.88 52.36 27.77 26.18 41.65 0 55.53 0 27.77"/>
+                <path class="cls-10" d="M104.71,21.88c-0.62-.61-1.17-1.2-1.78-1.74A33.57,33.57,0,0,1,98,14.84a11,11,0,0,1-2-4.4,5,5,0,0,1-.09-0.73l0.4,1a12.67,12.67,0,0,0,1.19,2.24,6.29,6.29,0,0,0,2.66,2.19c0.4,0.18.79,0.39,1.17,0.6a3.24,3.24,0,0,1,1.61,2.14c0.05,0.21.12,0.42,0.16,0.63a4.24,4.24,0,0,0,1.29,2.31c0.29,0.29.59,0.57,0.89,0.85a0.34,0.34,0,0,1,.13.42,12.57,12.57,0,0,0-.39,5.47,32.37,32.37,0,0,0,1,4.13c0.12,0.42.23,0.84,0.35,1.25l0.08,0.26,0.08,0c-0.06-.53-0.11-1.06-0.19-1.59-0.17-1.17-.39-2.33-0.53-3.49a14.61,14.61,0,0,1,.13-3.84,15.72,15.72,0,0,1,.73-3,19.28,19.28,0,0,1,.79-1.78c0.09-.19.28-0.21,0.47,0,0.35,0.33.7,0.67,1,1l2,1.94a0.62,0.62,0,0,1,.19.94,15.9,15.9,0,0,0-1.22,3.51,34.77,34.77,0,0,0-.68,4.16c-0.15,1.46-.28,2.92-0.52,4.36A6.63,6.63,0,0,1,107.13,39a6.22,6.22,0,0,1-.75.64,1.11,1.11,0,0,1-.34.11c0.1-.53.19-1,0.29-1.53a14,14,0,0,0,.25-2.73,0.4,0.4,0,0,0-.15-0.25,18.59,18.59,0,0,1-4.19-4.9,8.1,8.1,0,0,1-1.2-3.9,4.75,4.75,0,0,1,1.06-3.25A3.64,3.64,0,0,1,104.3,22Z" transform="translate(-84 0)"/>
+                </g>
+            </a>
+
+            <g id="topitem">
+          <polygon class="cls-13" points="0 27.77 0 0 26.18 13.88 52.36 27.77 26.18 41.65 0 55.53 0 27.77"/>
+  <path id="bars" class="cls-12" d="M24.72,21.56a1.06,1.06,0,0,1-1.06,1.06H9.19a1.06,1.06,0,0,1-1.06-1.06V20.91a1.06,1.06,0,0,1,1.06-1.06H23.66a1.06,1.06,0,0,1,1.06,1.06v0.65Zm0,6.53a1.06,1.06,0,0,1-1.06,1.06H9.19a1.06,1.06,0,0,1-1.06-1.06V27.44a1.06,1.06,0,0,1,1.06-1.06H23.66a1.06,1.06,0,0,1,1.06,1.06v0.65Zm0,6.53a1.06,1.06,0,0,1-1.06,1.06H9.19a1.06,1.06,0,0,1-1.06-1.06V34a1.06,1.06,0,0,1,1.06-1.06H23.66A1.06,1.06,0,0,1,24.72,34v0.65Z" transform="translate(0)"/>
+
+             <g id="arrow" class="noarrow">
+                <path class="cls-12" d="M20.6,17.1c0.4,0.4,0.4,1.1,0,1.5L10.4,28.8c-0.4,0.4-1.1,0.4-1.5,0l-0.5-0.5C8,28,8,27.3,8.4,26.9l10.2-10.2
+	c0.4-0.4,1.1-0.4,1.5,0L20.6,17.1z"/>
+<path class="cls-12" d="M20.2,38.9c-0.4,0.4-1.1,0.4-1.5,0l0,0L8.4,28.6c-0.4-0.4-0.4-1.1,0-1.5l0,0l0.4-0.4c0.4-0.4,1.1-0.4,1.5,0l0,0
+	l10.2,10.2c0.4,0.4,0.4,1.1,0,1.5l0,0L20.2,38.9L20.2,38.9z"/>
+
+                </g>
+                </g>
+
 </svg>
+
     </div>
-    <!--
-    <div id="javascript" class="menu1"></div>
-    <div class="menu1"></div>
-    <div class="menu1"></div>
-    <div class="menu1"></div>
-    <div class="menu1"></div>-->
 
     <script src="java.js"></script>
 </body>
diff --git a/java.js b/java.js
index 88ee03a..b4ea687 100644
--- a/java.js
+++ b/java.js
@@ -1,10 +1,14 @@
 let menu = document.querySelector("#topitem");
 let triangles = document.querySelector("#navbar")
 //let javaScript = document.querySelector("#javascript")
+let arrow = document.querySelector ("#arrow")
+let bars = document.querySelector("#bars");
 menu.addEventListener('click', menuUnfolds);
 
 function menuUnfolds() {
     //javaScript.classList.add("js");
+    arrow.classList.toggle("appear");
+    bars.classList.toggle("change");
     console.log("clicked")
     let javaScript = document.querySelector('#js');
     javaScript.classList.toggle("moveFirst");
@@ -17,5 +21,13 @@ function menuUnfolds() {
     let pipePiper = document.querySelector('#pp');
     pipePiper.classList.toggle("movePipe");
 
+}
+
 
+/*
+function swapBars(){
+    console.log("bars");
+if (state == 'bar'){
+    myBar.setAttribute("#bars", "")
 }
+*/