natours_nav_1.html

<!-- Navigation block start -->
    <div class="navigation">
      <input type="checkbox" class="navigation__checkbox" id="navi-toggle" />
      <label for="navi-toggle" class="navigation__button">MENU</label>

      <!-- Div for background start -->
      <!-- We will put the navigation on top of this -->
      <div class="navigation__background">&nbsp;</div>
      <!-- Div for background end -->

      <!-- In this nav, which will span the entire page we will vertically and horizontally center the links -->
      <!-- Actual nav start -->
      <nav class="navigation__nav">
        <ul class="navigation__list">
          <li class="navigation__item">
            <a href="#" class="navigation__link">
              <span>01</span> About Natours</a
            >
          </li>
          <li class="navigation__item">
            <a href="#" class="navigation__link">
              <span>02</span> Your benefits</a
            >
          </li>
          <li class="navigation__item">
            <a href="#" class="navigation__link">
              <span>03</span> Popular tours</a
            >
          </li>
          <li class="navigation__item">
            <a href="#" class="navigation__link"> <span>04</span> Stories</a>
          </li>
          <li class="navigation__item">
            <a href="#" class="navigation__link"> <span>05</span> Book now</a>
          </li>
        </ul>
      </nav>
      <!-- Actual nav end -->
    </div>
    <!-- Navigation block end -->