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

README.md

@@ -1 +1,5 @@
-# Natour
+# Natours
+
+A landing page for travel agencies. The design is created by Jonas Schmedtmann. I've implemented the webpage using React, SASS and HTML.
+
+[Live Demo](https://yusufipk.github.io/natours-react/)

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>

src/sass/abstracts/_mixins.scss

@@ -26,28 +26,28 @@ $breakpoint arguments:
 @mixin respond($breakpoint) {
   // 600px
   @if $breakpoint == phone {
-    @media (max-width: 37.5em) {
+    @media only screen and (max-width: 37.5em) {
       @content;
     }
   }
 
   // 900px
   @if $breakpoint == tab-port {
-    @media (max-width: 56.25em) {
+    @media only screen and (max-width: 56.25em) {
       @content;
     }
   }
 
   // 1200px
   @if $breakpoint == tab-land {
-    @media (max-width: 75em) {
+    @media only screen and (max-width: 75em) {
       @content;
     }
   }
 
   // 1800px
   @if $breakpoint == big-desktop {
-    @media (min-width: 112.5em) {
+    @media only screen and (min-width: 112.5em) {
       @content;
     }
   }

src/sass/base/_base.scss

@@ -30,3 +30,8 @@ body {
     padding: 0;
   }
 }
+
+::selection {
+  background-color: $color-primary;
+  color: $color-white;
+}

src/sass/components/_card.scss

@@ -177,7 +177,7 @@
     font-weight: 100;
   }
 
-  @include respond(tab-port) {
+  @media only screen and (max-width: 56.25em), only screen and (hover: none) {
     height: auto;
     border-radius: 3px;
     background-color: $color-white;

src/sass/components/_popup.scss

@@ -10,6 +10,18 @@
   visibility: hidden;
   transition: all 0.3s;
 
+  &__blocker {
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    content: " ";
+    background: rgba(0, 0, 0, 0.5);
+    cursor: default;
+    opacity: 0;
+  }
+
   @supports (-webkit-backdrop-filter: blur(10px)) or
     (backdrop-filter: blur(10px)) {
     -webkit-backdrop-filter: blur(10px);

src/sass/layout/_header.scss

@@ -16,8 +16,9 @@
     height: 95vh;
   }
 
-  @media (min-resolution: 192dpi) and (min-width: 37.5em),
-    (-webkit-min-device-pixel-ratio: 2) and (min-width: 125em) {
+  @media only screen and (min-resolution: 192dpi) and (min-width: 37.5em),
+    only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 37.5em),
+    only screen and (min-width: 125em) {
     background-image: linear-gradient(
         to right bottom,
         rgba($color-primary-light, 0.8),