created media queries, fixed nav links and some other links. Popup closes after clicking outside of the div, update readme

src/commons/about-section/about.jsx

@@ -7,7 +7,7 @@ import nat3 from "../../commons/images/nat-3.jpg";
 
 function About() {
   return (
-    <section className="section-about">
+    <section className="section-about" id="section-about">
       <div className="u-center-text u-margin-bottom-big">
         <h2 className="heading-secondary">
           Exciting tours for adventurous people
@@ -32,7 +32,7 @@ function About() {
             Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
             perferendis esse minima provident neque
           </p>
-          <a href="#" className="btn-text">
+          <a href="#section-tours" className="btn-text">
             Learn More ➯
           </a>
         </div>
@@ -41,7 +41,7 @@ function About() {
             <img
               srcSet={`${nat1} 300w, ${nat1Large} 1000w`}
               sizes="(max-width: 56.25em) 20vw, (max-width: 600px) 30vw, 300px"
-              alt="Photo 1"
+              alt="Nature 1"
               className="composition__photo composition__photo--p1"
               src={nat1Large}
             />
@@ -49,7 +49,7 @@ function About() {
             <img
               srcSet={`${nat2} 300w, ${nat2Large} 1000w`}
               sizes="(max-width: 56.25em) 20vw, (max-width: 600px) 30vw, 300px"
-              alt="Photo 2"
+              alt="Nature 2"
               className="composition__photo composition__photo--p2"
               src={nat2Large}
             />
@@ -57,7 +57,7 @@ function About() {
             <img
               srcSet={`${nat3} 300w, ${nat3Large} 1000w`}
               sizes="(max-width: 56.25em) 20vw, (max-width: 600px) 30vw, 300px"
-              alt="Photo 3"
+              alt="Nature 3"
               className="composition__photo composition__photo--p3"
               src={nat3Large}
             />

src/commons/booking-section/booking.jsx

@@ -2,7 +2,7 @@ import Form from "../form/form";
 
 function Booking() {
   return (
-    <section className="section-book">
+    <section className="section-book" id="section-book">
       <div className="row">
         <div className="book">
           <div className="book__form">

src/commons/feature-section/feature.jsx

@@ -1,6 +1,6 @@
 function Feature() {
   return (
-    <section className="section-features">
+    <section className="section-features" id="section-features">
       <div className="row">
         <div className="col-1-of-4">
           <div className="feature-box">

src/commons/footer-section/footer.jsx

@@ -55,7 +55,7 @@ function Footer() {
           <p className="footer__copyright">
             Design by Jonas Schmedtmann. Coded by{" "}
             <a
-              href="https://github.com/yusufipk/natour"
+              href="https://yusufipek.me"
               target="_blank"
               rel="noopener noreferrer"
               className="footer__link"

src/commons/header/header.jsx

@@ -11,7 +11,9 @@ function Header() {
           <span className="heading-primary--main">Outdoors</span>
           <span className="heading-primary--sub">is where life happens</span>
         </h1>
-        <a className="btn btn--white move-in--bottom">Discover our tours</a>
+        <a href="#section-tours" className="btn btn--white move-in--bottom">
+          Discover our tours
+        </a>
       </div>
     </header>
   );

src/commons/navigation/navigation.jsx

@@ -1,12 +1,19 @@
+import React, { useState } from "react";
 function Navigation() {
+  const [check, setCheck] = useState(false);
   return (
     <div className="navigation">
       <input
+        checked={check}
         type="checkbox"
         className="navigation__checkbox"
         id="navi-toggle"
       />
-      <label for="navi-toggle" className="navigation__button">
+      <label
+        for="navi-toggle"
+        className="navigation__button"
+        onClick={() => setCheck(!check)}
+      >
         <i className="fa fa-bars navigation__button--bars"></i>
         <i className="fa fa-times navigation__button--times"></i>
       </label>
@@ -16,31 +23,51 @@ function Navigation() {
       <nav className="navigation__nav">
         <ul className="navigation__list">
           <li className="navigation__item">
-            <a href="" className="navigation__link">
+            <a
+              href="#section-about"
+              className="navigation__link"
+              onClick={() => setCheck(!check)}
+            >
               <span>1</span>
               About Natour
             </a>
           </li>
           <li className="navigation__item">
-            <a href="" className="navigation__link">
+            <a
+              href="#section-features"
+              className="navigation__link"
+              onClick={() => setCheck(!check)}
+            >
               <span>2</span>
               Your Benefits
             </a>
           </li>
           <li className="navigation__item">
-            <a href="" className="navigation__link">
+            <a
+              href="#section-tours"
+              className="navigation__link"
+              onClick={() => setCheck(!check)}
+            >
               <span>3</span>
               Popular Tours
             </a>
           </li>
           <li className="navigation__item">
-            <a href="" className="navigation__link">
+            <a
+              href="#section-stories"
+              className="navigation__link"
+              onClick={() => setCheck(!check)}
+            >
               <span>4</span>
               Stories
             </a>
           </li>
           <li className="navigation__item">
-            <a href="" className="navigation__link">
+            <a
+              href="#section-book"
+              className="navigation__link"
+              onClick={() => setCheck(!check)}
+            >
               <span>5</span>
               Book Now
             </a>

src/commons/popup/popup.jsx

@@ -5,10 +5,13 @@ function Popup() {
   return (
     <div>
       <div className="popup" id="popup">
+        <a className="popup__blocker" href="#section-tours">
+          &nbsp;
+        </a>
         <div className="popup__content">
           <div className="popup__left">
-            <img src={nat8} alt="Tour photo" className="popup__img" />
-            <img src={nat9} alt="Tour photo" className="popup__img" />
+            <img src={nat8} alt="A guy on the tour" className="popup__img" />
+            <img src={nat9} alt="A lady on the tour" className="popup__img" />
           </div>
           <div className="popup__right">
             <a href="#section-tours" className="popup__close">

src/commons/stories-section/stories.jsx

@@ -5,7 +5,7 @@ import bgwebm from "../images/video.webm";
 
 function Stories() {
   return (
-    <section className="section-stories">
+    <section className="section-stories" id="section-stories">
       <div className="bg-video">
         <video className="bg-video__content" autoPlay muted loop>
           <source src={bgmp4} type="video/mp4" />

src/commons/tours-section/tours.jsx

@@ -1,6 +1,6 @@
 function Tours() {
   return (
-    <section className="section-tours">
+    <section className="section-tours" id="section-tours">
       <div className="u-center-text u-margin-bottom-big">
         <h2 className="heading-secondary">Most popular tours</h2>
       </div>