Code working on codepen but not in my text editor

Question

The gradient degree on mouse movement isn't working in my text editor however it does in codepen.

https://codepen.io/glittergirl/pen/bjXOYd

I checked the console and it is coming up with: script.js:4 Uncaught ReferenceError: $ is not defined So I used

/*jslint browser: true*/
/*global $ */

However it is still coming up with the same error. Why is this?

HTML

<script language="JavaScript" type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs
/jquery/3.1.1/jquery.min.js"></script>
<script src="script.js"></script>

<link rel="stylesheet" href="style.css">

<link rel="stylesheet" type="text/css" href="jquery.fullPage.css" />
<link rel="stylesheet" type="text/css" 
href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.2/
fullpage.css"/>

<script 
  src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.2/
fullpage.js"></script>

<script>
    $(document).ready(function() {
    $('#fullpage').fullpage({
    css3: false
       });
    });
</script>

<div class="gradient">
</div>

Mousemove JS

$(".gradient").mousemove(function (event) {
'use strict';
var w = $(this).width(),
    pct = 360 * (+event.pageX) / w,
    bg = "linear-gradient(" + pct + "deg,#4ac1ff,#795bb0)";
$(".gradient").css("background-image", bg);
});

EDIT: after reordering jquery in html the console log no longer produces the error however code is still not working in my code editor