packing-list.html

<!DOCTYPE html>
<html>

<head>
  <title>Packing List</title>
  <link rel="stylesheet" type="text/css" media="screen" href="css/reset.css" />
  <link rel="stylesheet" type="text/css" media="screen" href="css/style.css" />
  <link rel="stylesheet" type="text/css" media="screen" href="css/carousel.css" />
  <link href="https://fonts.googleapis.com/css?family=Fjalla+One|Spicy+Rice" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Leckerli+One|Playfair+Display|Yellowtail" rel="stylesheet">
</head>

<body>
  <header>
    <h1>Packing<img src="img/TravelBrain.png" alt="travel brain logo" id="logoimg" height="100px" width="100px">Planner</h1>
  </header>

  <nav>
    <ul>
      <li id="home"><a href="index.html">Home</a></li>
      <li id="packingList"><a class="active" href="packing-list.html">Packing List</a></li>
      <li id="aboutUs"><a href="about-us.html">About Us</a></li>
    </ul>
  </nav>



  <main>
    <h2>Final List Of Selected Items</h2>
    <!-- Slideshow container -->
    <div class="slideshow-container">

      <!-- Full-width images with number and caption text -->
      <div class="mySlides fade">
        <img src="img/vintageLuggage.png" alt="suit case" style="width:100%">
      </div>

      <div class="mySlides fade">
        <img src="img/luggage-clipart-vintage-suitcase-4.png" alt="suit case" style="width:100%">
      </div>

      <div class="mySlides fade">
        <img src="img/suitcase.png" alt="suit case" style="width:100%">
      </div>
    </div>
    <div>
      <ul id="finalSelection" class="output">
      </ul>
    </div>

    <div>
      <form id="additionForm">
        <fieldset>
          <input name="newItem" type="text" />
          <button type="type" class="button">Add to List</button>
          <ul id="list"></ul>
        </fieldset>
      </form>
    </div>
  </main>

  <script src="js/app.js"></script>
  <script src="js/packinglist.js"></script>

</body>

</html>