diff --git a/dist/css/main.css b/dist/css/main.css
new file mode 100644
index 0000000..992de9d
--- /dev/null
+++ b/dist/css/main.css
@@ -0,0 +1,176 @@
+@import url("https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap");
+* {
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+.menu-btn {
+  position: absolute;
+  z-index: 1;
+  right: 1rem;
+  top: 1rem;
+  height: 20px;
+  width: 28px;
+  cursor: pointer;
+  -webkit-transition: all 0.25s ease-in-out;
+  transition: all 0.25s ease-in-out;
+}
+
+.menu-btn_burger {
+  position: absolute;
+  right: 0;
+  top: 0.5rem;
+  width: 28px;
+  height: 3px;
+  background: black;
+  -webkit-transition: all 0.25s ease-in-out;
+  transition: all 0.25s ease-in-out;
+}
+
+.menu-btn_burger::before {
+  content: '';
+  position: absolute;
+  top: -8px;
+  width: 28px;
+  height: 3px;
+  background-color: black;
+  -webkit-transition: all 0.25s ease-in-out;
+  transition: all 0.25s ease-in-out;
+}
+
+.menu-btn_burger::after {
+  content: '';
+  position: absolute;
+  top: 8px;
+  width: 20px;
+  height: 3px;
+  background-color: black;
+  -webkit-transition: all 0.25s ease-in-out;
+  transition: all 0.25s ease-in-out;
+}
+
+.menu-btn_burger.open {
+  -webkit-transform: rotate(720deg);
+          transform: rotate(720deg);
+  background: transparent;
+}
+
+.menu-btn_burger.open::before {
+  -webkit-transform: rotate(45deg) translate(5px, 8px);
+          transform: rotate(45deg) translate(5px, 8px);
+}
+
+.menu-btn_burger.open::after {
+  width: 28px;
+  -webkit-transform: rotate(-45deg) translate(3px, -7px);
+          transform: rotate(-45deg) translate(3px, -7px);
+}
+
+.nav {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  opacity: 0.98;
+  visibility: hidden;
+}
+
+.nav.open {
+  visibility: visible;
+}
+
+.nav .menu-nav {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-flow: column wrap;
+          flex-flow: column wrap;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  height: 100vh;
+  overflow: hidden;
+  background: #e1e1e1;
+  list-style-type: none;
+  padding-right: 1rem;
+  -webkit-transform: translateY(-100%);
+          transform: translateY(-100%);
+  -webkit-transition: all 0.25s ease-in-out;
+  transition: all 0.25s ease-in-out;
+}
+
+.nav .menu-nav.open {
+  -webkit-transform: translateY(0);
+          transform: translateY(0);
+}
+
+.nav .menu-nav_item {
+  -webkit-transform: translateX(100vw);
+          transform: translateX(100vw);
+  -webkit-transition: all 0.25s ease-in-out;
+  transition: all 0.25s ease-in-out;
+}
+
+.nav .menu-nav_item.open {
+  -webkit-transform: translateX(0);
+          transform: translateX(0);
+}
+
+.nav .menu-nav_item.active > a {
+  color: yellow;
+}
+
+.nav .menu-nav_link {
+  display: inline-block;
+  font-size: 2rem;
+  text-transform: uppercase;
+  padding: 2rem 0;
+  font-weight: 300;
+  -webkit-transition: all 0.25s ease-in-out;
+  transition: all 0.25s ease-in-out;
+}
+
+.nav .menu-nav_link:hover {
+  color: yellow;
+}
+
+.menu-nav_item:nth-child(1) {
+  -webkit-transition-delay: 0.3s;
+          transition-delay: 0.3s;
+}
+
+.menu-nav_item:nth-child(2) {
+  -webkit-transition-delay: 0.45s;
+          transition-delay: 0.45s;
+}
+
+.menu-nav_item:nth-child(3) {
+  -webkit-transition-delay: 0.6s;
+          transition-delay: 0.6s;
+}
+
+.menu-nav_item:nth-child(4) {
+  -webkit-transition-delay: 0.75s;
+          transition-delay: 0.75s;
+}
+
+body {
+  width: 1440px;
+  color: #e1e1e1;
+}
+
+a.menu-nav_link {
+  font-family: Raleway;
+  text-decoration: none;
+  color: #515151;
+  font-weight: 700;
+  font-size: 18px;
+}
+/*# sourceMappingURL=main.css.map */
\ No newline at end of file
diff --git a/dist/css/main.css.map b/dist/css/main.css.map
new file mode 100644
index 0000000..425c2bd
--- /dev/null
+++ b/dist/css/main.css.map
@@ -0,0 +1,11 @@
+{
+    "version": 3,
+    "mappings": "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",
+    "sources": [
+        "../scss/main.scss",
+        "../scss/_config.scss",
+        "../scss/_menu.scss"
+    ],
+    "names": [],
+    "file": "main.css"
+}
\ No newline at end of file
diff --git a/dist/index.html b/dist/index.html
new file mode 100644
index 0000000..406f8b8
--- /dev/null
+++ b/dist/index.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="css/main.css">
+  <link rel="preconnect" href="https://fonts.gstatic.com">
+  <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap" rel="stylesheet">
+  <title>Bussines Card</title>
+</head>
+<body>
+  <header>
+    <div class="menu-btn">
+      <span class="menu-btn_burger">
+
+      </div>
+      
+      <nav class="nav">
+        <ul class="menu-nav">
+          <li class="menu-nav_item">
+            <a href="#" class="menu-nav_link">
+              About Me
+            </a>
+          </li>
+          <li class="menu-nav_item">
+            <a href="#" class="menu-nav_link">
+              Skills
+            </a>
+          </li>
+          <li class="menu-nav_item">
+            <a href="#" class="menu-nav_link">
+              Portfolio
+            </a>
+          </li>
+          <li class="menu-nav_item">
+            <a href="#" class="menu-nav_link">
+              Contact Me
+            </a>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </header>
+
+  <script src="js/main.js"></script>
+  
+</body>
+</html>
\ No newline at end of file
diff --git a/dist/js/main.js b/dist/js/main.js
new file mode 100644
index 0000000..296e0ef
--- /dev/null
+++ b/dist/js/main.js
@@ -0,0 +1,27 @@
+const menuBtn = document.querySelector('.menu-btn');
+const hamburger = document.querySelector('.menu-btn_burger');
+const nav = document.querySelector('.nav');
+const menuNav = document.querySelector('.menu-nav');
+const navItems = document.querySelectorAll('.menu-nav_item');
+
+let showMenu = false;
+
+menuBtn.addEventListener('click', toggleMenu);
+
+function toggleMenu() {
+  if(!showMenu) {
+    hamburger.classList.add('open');
+    nav.classList.add('open');
+    menuNav.classList.add('open');
+    navItems.forEach(item => item.classList.add('open'));
+
+    showMenu = true;
+  } else {
+    hamburger.classList.remove('open');
+    nav.classList.remove('open');
+    menuNav.classList.remove('open');
+    navItems.forEach(item => item.classList.remove('open'));
+    
+    showMenu = false;
+  }
+}
\ No newline at end of file
diff --git a/dist/scss/_config.scss b/dist/scss/_config.scss
new file mode 100644
index 0000000..0b3f537
--- /dev/null
+++ b/dist/scss/_config.scss
@@ -0,0 +1,13 @@
+$background-color: #e1e1e1;
+$text-color: #515151;
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+@mixin transition-ease {
+  transition: all 0.25s ease-in-out;
+}
+
diff --git a/dist/scss/_menu.scss b/dist/scss/_menu.scss
new file mode 100644
index 0000000..1a88418
--- /dev/null
+++ b/dist/scss/_menu.scss
@@ -0,0 +1,117 @@
+.menu-btn {
+  position: absolute;
+  z-index: 1;
+  right: 1rem;
+  top: 1rem;
+  height: 20px;
+  width: 28px;
+  cursor: pointer;
+  @include transition-ease;
+
+  &_burger {
+    position: absolute;
+    right: 0;
+    top: 0.5rem;
+    width: 28px;
+    height: 3px;
+    background: black;
+    @include transition-ease; 
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: -8px;
+      width: 28px;
+      height: 3px;
+      background-color: black;
+      @include transition-ease;
+    }
+
+    &::after {
+      content: '';
+      position: absolute;
+      top: 8px;
+      width: 20px;
+      height: 3px;
+      background-color: black;
+      @include transition-ease;
+    }
+
+    &.open {
+      transform: rotate(720deg);
+      background: transparent;
+
+      &::before {
+        transform: rotate(45deg) translate(5px, 8px);
+      }
+
+      &::after {
+        width: 28px;
+        transform: rotate(-45deg) translate(3px, -7px);
+      }
+    }
+  }
+}
+
+.nav {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  opacity: 0.98;
+  visibility: hidden;
+
+  &.open {
+    visibility: visible;
+  }
+
+  .menu-nav {
+    display: flex;
+    flex-flow: column wrap;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+    overflow: hidden;
+    background: $background-color;
+    list-style-type: none;
+    padding-right: 1rem;
+    transform: translateY(-100%);
+    @include transition-ease;
+
+    &.open {
+      transform:translateY(0);
+    }
+
+    &_item {
+      transform: translateX(100vw);
+      @include transition-ease;
+
+      &.open {
+        transform: translateX(0);
+      }
+
+      &.active > a {
+        color: yellow;
+      }
+    }
+
+    &_link {
+      display: inline-block;
+      font-size: 2rem;
+      text-transform: uppercase;
+      padding: 2rem 0;
+      font-weight: 300;
+      @include transition-ease;
+
+      &:hover {
+        color: yellow;
+      }
+    }
+  }
+}
+
+@for $i from 1 through 4 {
+  .menu-nav_item:nth-child(#{$i}) {
+    transition-delay: ($i * 0.15s) + 0.15s;
+  }
+}
\ No newline at end of file
diff --git a/dist/scss/main.scss b/dist/scss/main.scss
new file mode 100644
index 0000000..04ea93f
--- /dev/null
+++ b/dist/scss/main.scss
@@ -0,0 +1,17 @@
+@import 'config';
+@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap');
+@import 'menu';
+
+body {
+  width: 1440px;
+  color: $background-color;
+}
+
+a.menu-nav_link {
+  font-family: Raleway;
+  text-decoration: none;
+  color: $text-color;
+  font-weight: 700;
+  font-size: 18px;
+}
+
diff --git a/index.html b/index.html
deleted file mode 100644
index 9733e74..0000000
--- a/index.html
+++ /dev/null
@@ -1,18 +0,0 @@
-<!DOCTYPE html>
-<html lang="pl">
-
-<head>
-    <!-- Required meta tags -->
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <title>CodersCamp | Projekt 1 - HTML i CSS</title>
-    <meta name="description" content="CodersCamp to darmowy, otwarty kurs programowania webowego we Wrocławiu. Sprawdź, czego nauczysz się na CodersCamp i spróbuj swoich sił w branży IT!">
-
-</head>
-
-<body>
-
-<p>CodersCamp - projekt 1. Tutaj możesz zacząć swoją zabawę!</p>
-<p>TEST commit</p>
-</body>
-</html>