title: Why is my code from codepen not working?
body: <p>I've copied the code from my codepen into atom and saved it. I think i've correctly added the jquery script and linked the stylesheets but my page is still displayed different when I open from local.</p>
  
  <p>Codepen - <a href="http://codepen.io/jordan_miguel/pen/gLwJRb" rel="nofollow noreferrer">http://codepen.io/jordan_miguel/pen/gLwJRb</a></p>
  
  <p>Browser view</p>
  
  <p><a href="https://i.stack.imgur.com/k1jek.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/k1jek.png" alt="enter image description here"></a></p>
  
  <p>This is my console error</p>
  
  <p><a href="https://i.stack.imgur.com/JaOM5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JaOM5.png" alt="enter image description here"></a></p>
  
  <p>Folder structure<a href="https://i.stack.imgur.com/ocW1I.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ocW1I.png" alt="enter image description here"></a></p>
  
  <p>Html</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
      &lt;html &gt;
      &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Portfolio&lt;/title&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"&gt;
    &lt;link rel="stylesheet" href="css/style.css"&gt;
   &lt;/head&gt;
  
    &lt;body&gt;
    &lt;main id="main"&gt;
    &lt;nav class="nav"&gt;
    &lt;a href="#" class="nav-item active" data-rel="project"&gt;Jordan Miguel&lt;/a&gt;
  &lt;!-- when clicked will go to the option, so projects have to be the required option--&gt;
  &lt;a href="#" class="nav-item" data-rel="option-2"&gt;Personal&lt;/a&gt;
  &lt;a href="#" class="nav-item" data-rel="option-2"&gt;CV&lt;/a&gt;
  &lt;a href="#" class="nav-item" data-rel="option-3"&gt;Contact&lt;/a&gt;
       &lt;/nav&gt;
  
        &lt;ul class="portfolio"&gt;
        &lt;li class="project option-1"&gt;
       &lt;div class="project-image"&gt;&lt;a href="default.asp"&gt;&lt;img src="http://lorempixel.com/400/400/sports/1/" alt="Sports Image" /&gt;
      &lt;p&gt;some text to display here&lt;/p&gt;
      &lt;/div&gt;
       &lt;div class="project-info"&gt;
      &lt;h2 class="project-info-title"&gt;Cricket Journey&lt;/h2&gt;
      &lt;/a&gt;
      &lt;/div&gt;
     &lt;/li&gt;
  
    &lt;li class="project option-2"&gt;
    &lt;div class="project-image"&gt;&lt;a href="default.asp"&gt;&lt;img src="http://lorempixel.com/400/400/sports/2/" alt="Sports Image" /&gt;
      &lt;/div&gt;
    &lt;div class="project-info"&gt;
      &lt;h2 class="project-info-title"&gt;Swim&lt;/h2&gt;
      &lt;/a&gt;
      &lt;/div&gt;
   &lt;/li&gt;
  
  &lt;li class="project option-3"&gt;
    &lt;div class="project-image"&gt;&lt;a href="default.asp"&gt;&lt;img src="http://lorempixel.com/400/400/sports/3/" alt="Sports Image" /&gt;&lt;/div&gt;
    &lt;div class="project-info"&gt;
      &lt;h2 class="project-info-title"&gt;Tour De Force&lt;/h2&gt;
      &lt;/div&gt;
      &lt;/a&gt;
  &lt;/li&gt;
  
  &lt;li class="project option-2"&gt;
    &lt;div class="project-image"&gt;&lt;a href="default.asp"&gt;&lt;img src="http://lorempixel.com/400/400/sports/10/" alt="Sports Image" /&gt;&lt;/div&gt;
    &lt;div class="project-info"&gt;
      &lt;h2 class="project-info-title"&gt;Baseball Season&lt;/h2&gt;
     &lt;/div&gt;
      &lt;/a&gt;
  &lt;/li&gt;
  
  &lt;li class="project option-3"&gt;
    &lt;div class="project-image"&gt;&lt;a href="default.asp"&gt;&lt;img src="http://lorempixel.com/400/400/sports/5/" alt="Sports Image" /&gt;&lt;/div&gt;
    &lt;div class="project-info"&gt;
      &lt;h2 class="project-info-title"&gt;BMX Arrives&lt;/h2&gt;
      &lt;/div&gt;
      &lt;/a&gt;
  &lt;/li&gt;
  
  &lt;li class="project option-1"&gt;
    &lt;div class="project-image"&gt;&lt;a href="default.asp"&gt;&lt;img src="http://lorempixel.com/400/400/sports/6/" alt="Sports Image" /&gt;&lt;/div&gt;
    &lt;div class="project-info"&gt;
      &lt;h2 class="project-info-title" href="#"&gt;World Cup 2016&lt;/h2&gt;
     &lt;/div&gt;
      &lt;/a&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>
  </p>
  
  <p>
  </p>
  
  <p>Css </p>
  
  <pre><code>    body {
      font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
      }
  
      h1, h2, h3, h4, h5, h6 {
      font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
      font-size: 1em;
      font-weight: 450;
      color: #a6a6a6;
      text-decoration: none;
      line-height: 1.5;
      letter-spacing: 0.13em;
      margin: 0 5px;
      }
  
  
     a {
     text-decoration: none !important;
     }
  
     #main {
     display: -webkit-box;
     display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
     -ms-flex-direction: column;
        flex-direction: column;
     -webkit-box-pack: center;
     -webkit-justify-content: center;
     -ms-flex-pack: center;
        justify-content: center;
      width: 70%;
      max-width: 1260px;
      margin: 0 auto;
        }
  
      .nav {
      display: -webkit-box;
     display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
     -webkit-flex-flow: row wrap;
     -ms-flex-flow: row wrap;
        flex-flow: row wrap;
     -webkit-box-pack: center;
     -webkit-justify-content: center;
     -ms-flex-pack: center;
        justify-content: center;
      -webkit-box-flex: 1;
      -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
        flex: 1 1 auto;
       padding: 10px 20px;
      margin-top: 40px;
      }
  
     .nav-item {
      position: relative;
      padding: 0 20px;
      margin: 0 5px;
      font-size: 1em;
      font-weight: 450;
       color: #a6a6a6;
      text-decoration: none;
      line-height: 1.5;
      }
  
     .nav-item:before {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      width: 0;
     height: 2px;
     background: #595959;
     -webkit-transition: all 500ms;
     transition: all 500ms;
     }
     .nav-item.active {
      color: black;
     -webkit-transition: all 350ms;
      transition: all 350ms;
      }
  
     .portfolio {
      display: flex;
      flex-flow: row wrap;
      padding: 0;
      margin: 6;
      list-style: none;
      }
  
    .project {
     position: relative;
     flex: 1 0 calc(100% - 20px);
     margin: 10px;
  
      &amp;:hover {
      .project-info {
      }
      }
  
      @media (min-width: 520px) {
      flex: 0 0 calc((100% / 2) - 20px);
      }
  
  @media (min-width: 860px) {
      flex: 0 0 calc((100% / 3) - 20px);
  }
  }
  
   .project-image img {
    display: block;
    width: 100%;
    height: auto;
   padding: 30px;
   }
  
  
    p {
   /* position the text */
    position: absolute;
    display: none;
    left: 30px;
    width: 100%;
    text-align: center;
    top: 40%;
    }
    img:hover + p {
    display: block;
    }
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>     $(document).ready(function(){
  $('.nav-item').click(function(){
      // reset active class
      $('.nav-item').removeClass("active");
      // add active class to selected
      $(this).addClass("active");
      // return needed to make function work
      return false;
  });
  
  
  $(function() {
      // create an empty variable
      var selectedClass = "";
      // call function when item is clicked
      $(".nav-item").click(function(){
          // assigns class to selected item
          selectedClass = $(this).attr("data-rel");
          // fades out all portfolio items
          $(".portfolio li").fadeOut(300);
          // fades in selected category
          $(".portfolio li." + selectedClass).delay(300).fadeIn(300);
      });
  });
  
  }); // document ready
  </code></pre>