created navigation section and styled navigation links

src/App.js

@@ -3,10 +3,12 @@ import "./App.scss";
 import Header from "./commons/header/header.jsx";
 import Main from "./commons/main/main";
 import Footer from "./commons/footer-section/footer";
+import Navigation from "./commons/navigation/navigation";
 
 function App() {
   return (
     <div>
+      <Navigation />
       <Header />
       <Main />
       <Footer />

src/App.scss

@@ -18,5 +18,6 @@
 @import "./sass/layout/header";
 @import "./sass/layout/grid";
 @import "./sass/layout/footer";
+@import "./sass/layout/navigation";
 
 @import "./sass/pages/home";

src/commons/footer-section/footer.jsx

@@ -41,7 +41,12 @@ function Footer() {
         <div className="col-1-of-2">
           <p className="footer__copyright">
             Design by Jonas Schmedtmann. Coded by{" "}
-            <a href="#" className="footer__link">
+            <a
+              href="https://github.com/yusufipk/natour"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="footer__link"
+            >
               Yusuf İpek
             </a>
             . You are allowed to use this webpage for personal and commercial

src/commons/navigation/navigation.jsx

@@ -0,0 +1,53 @@
+function Navigation() {
+  return (
+    <div className="navigation">
+      <input
+        type="checkbox"
+        className="navigation__checkbox"
+        id="navi-toggle"
+      />
+      <label for="navi-toggle" className="navigation__button">
+        Menu
+      </label>
+
+      <div className="navigation__background">&nbsp;</div>
+
+      <nav className="navigation__nav">
+        <ul className="navigation__list">
+          <li className="navigation__item">
+            <a href="" className="navigation__link">
+              <span>1</span>
+              About Natour
+            </a>
+          </li>
+          <li className="navigation__item">
+            <a href="" className="navigation__link">
+              <span>2</span>
+              Your Benefits
+            </a>
+          </li>
+          <li className="navigation__item">
+            <a href="" className="navigation__link">
+              <span>3</span>
+              Popular Tours
+            </a>
+          </li>
+          <li className="navigation__item">
+            <a href="" className="navigation__link">
+              <span>4</span>
+              Stories
+            </a>
+          </li>
+          <li className="navigation__item">
+            <a href="" className="navigation__link">
+              <span>5</span>
+              Book Now
+            </a>
+          </li>
+        </ul>
+      </nav>
+    </div>
+  );
+}
+
+export default Navigation;

src/commons/tours-section/tours.jsx

@@ -105,7 +105,7 @@ function Tours() {
       </div>
 
       <div className="u-center-text u-margin-top-huge">
-        <a href="#" className="btn btn--white">
+        <a href="#" className="btn btn--green">
           Discover all tours!
         </a>
       </div>

src/sass/abstracts/_mixins.scss

@@ -5,3 +5,10 @@
     clear: both;
   }
 }
+
+@mixin center-horizontal-vertical {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}

src/sass/abstracts/_variables.scss

@@ -22,6 +22,7 @@ $color-black: #000;
 // FONT CONTROL
 $default-font-size: 1.6rem;
 $normal-font-size: 1.4rem;
+$medium-font-size: 3rem;
 
 // GRID background
 $grid-width: 114rem;

src/sass/layout/_navigation.scss

@@ -0,0 +1,84 @@
+.navigation {
+  &__checkbox {
+    display: none;
+  }
+
+  &__button {
+    background-color: $color-white;
+    height: 7rem;
+    width: 7rem;
+    position: fixed;
+    top: 6rem;
+    right: 6rem;
+    border-radius: 50%;
+    z-index: 2000;
+  }
+
+  &__background {
+    height: 6rem;
+    width: 6rem;
+    border-radius: 50%;
+    position: fixed;
+    top: 6.5rem;
+    right: 6.5rem;
+    background-image: radial-gradient(
+      $color-primary-light,
+      $color-primary-dark
+    );
+    z-index: 1000;
+
+    transform: scale(100);
+  }
+
+  &__nav {
+    height: 100vh;
+    width: 100%;
+    position: fixed;
+    top: 0;
+    right: 0;
+    z-index: 1500;
+  }
+
+  &__list {
+    @include center-horizontal-vertical;
+    list-style: none;
+    text-align: center;
+  }
+
+  &__item {
+    margin: 1rem;
+  }
+
+  &__link {
+    &:link,
+    &:visited {
+      display: inline-block;
+      font-size: $medium-font-size;
+      font-weight: 300;
+      color: $color-white;
+      text-decoration: none;
+      text-transform: uppercase;
+      padding: 1rem 2rem;
+      background-image: linear-gradient(
+        120deg,
+        transparent 0%,
+        transparent 50%,
+        $color-white 50%
+      );
+      background-size: 230%;
+      transition: all 0.4s;
+
+      span {
+        margin-right: 1.5rem;
+        display: inline-block;
+      }
+    }
+
+    &:hover,
+    &:active {
+      background-position: 100%;
+      color: $color-primary;
+      transform: translateX(1rem);
+    }
+  }
+}