Can't seem to integrate my CSS and JS/Jquery files in my HTML

Question

Pretty new to coding, was just wondering if maybe someone could revise why my .CSS & .JS files are not linking with my HTML?

Here are the lines & this is what it's supposed to look like: https://codepen.io/MatteoV/pen/aGqQBe

I will also be trying to implement this code into Webflow, would anyone know where I can implement these lines?

Thank you guys for the help! :D

jQuery(document).ready(function($) {
 // Terms & Discounts
 var termArr = [1, 12, 24, 36],
  discArr = [0, 0.2, 0.25, 0.3];

 // Custom Region Pricing
 var prices = {
  ca: [0.12, 0.11, 0.1],
  az: [0.12, 0.11, 0.1],
  va: [0.12, 0.11, 0.1],
  sg: [0.2, 0.19, 0.18],
  th: [0.2, 0.19, 0.18],
  hk: [0.2, 0.19, 0.18]
 };

 // Exchange Rates & Symbols
 var exchange = {
  rates: {
   USD: 1,
   CNY: 6.92,
   THB: 35
  },
  symbol: {
   USD: "$",
   CNY: "¥",
   THB: "฿"
  }
 };

 // Total TB Slider
 $("#gb-slider")
  .slider({
   range: "min",
   value: 2000,
   step: 500,
   max: 10000,
   min: 1000,
   slide: function(event, ui) {
    if (ui.value < 10000) {
     $(".contact-us").fadeOut(200, function() {
      $(".price-wrap").fadeIn(200);
     });
     var term = $("#term-slider").slider("option", "value");
     $('[name="qty"]').val(ui.value);
     $("#total-price .price").text(calcPrice(ui.value, term));
     $("#price-per-gb .price").html(pricePerGB(ui.value).toFixed(2));
     $('[name="unit_price"]').val(pricePerGB(ui.value).toFixed(2));
    } else {
     $(".price-wrap").fadeOut(200, function() {
      $(".contact-us").fadeIn(200);
     });
    }
   }
  })
  .each(function() {
   var opt = $(this).data().uiSlider.options;
   var vals = (opt.max - opt.min) / 1000;
   for (var i = 0; i <= vals; i++) {
    var el = $('<label class="value-label">' + (i + 1) + "TB</label>").css(
     "left",
     "calc(" + i / vals * 100 + "% - 10px)"
    );
    $(this).append(el);
   }
  });

 // Contract Slider
 $("#term-slider")
  .slider({
   range: "min",
   max: termArr.length - 1,
   slide: function(event, ui) {
    var size = $("#gb-slider").slider("option", "value");
    $('[name="period"]').val(termArr[ui.value]);
    $("#total-price .price").text(calcPrice(size, ui.value));
    $('[name="discount_term"]').val(discArr[ui.value]);
   }
  })
  .each(function() {
   var opt = $(this).data().uiSlider.options;
   var vals = opt.max - opt.min;
   for (var i = 0; i <= vals; i++) {
    if (i == 0) {
     var el = $('<label class="value-label">Monthly</label>').css("left", "0%");
    } else {
     var el = $(
      '<label class="value-label">' + termArr[i] + " Mo.</label>"
     ).css("left", i / vals * 95 + "%");
    }
    $(this).append(el);
   }
  });

 // Calcutate Price Per GB
 function pricePerGB(value) {
  var region = $("#region").val();
  if (value <= 2000) {
   return prices[region][0];
  } else if (value <= 4999) {
   return prices[region][1];
  } else if (value <= 10000) {
   return prices[region][2];
  } else {
   return false;
  }
 }

 // Calculate Total Price
 function calcPrice(size, term) {
  var basePrice = size * pricePerGB(size),
   discount = basePrice - basePrice * discArr[term],
   rate = exchange.rates[$("#currency-select").val()],
   price = (discount * rate).toFixed(2);
  return price;
 }

 // Changing Currencies
 $("#currency-select, #region").change(function() {
  var pricePer = pricePerGB($("#gb-slider").slider("option", "value")).toFixed(
   2
  );
  $(".currency-symbol").text(exchange.symbol[$(this).val()]);
  $("#total-price .price").text(
   calcPrice(
    $("#gb-slider").slider("option", "value"),
    $("#term-slider").slider("option", "value")
   )
  );
  $('[name="unit_price"]').val(pricePer);
  $("#price-per-gb .price").text(pricePer);
 });

 // Load price when page does
 $("#total-price .price").text(
  calcPrice(
   $("#gb-slider").slider("option", "value"),
   $("#term-slider").slider("option", "value")
  )
 );
 $("#price-per-gb .price").html(
  pricePerGB($("#gb-slider").slider("option", "value")).toFixed(2)
 );
 $('[name="discount_term"]').val(
  discArr[$("#term-slider").slider("option", "value")]
 );

 $("#backup-form").submit(function(e) {
  console.log($(this).serialize());
  e.preventDefault();
 });
});

@import "susy"; Add
@import "breakpoint"; Add
@import "color-schemer"; Add
@import "bourbon@5.*"; Add
@import "neat@2.*"; Add
@import "modularscale@3.*";

*,
*:before,
*:after {
 box-sizing: border-box;
}

$yellow: #fdb022;
$yellow-alt: #eea61e;
$grey: #e6e6e6;

html,
body {
 font: 16px "Open Sans", Arial, sans-serif;
}

#veeam-sliders {
 width: 72em;
 margin: 40px auto 0;

 h3 {
  font-weight: 600;
  font-size: 21px;
  margin: 0;
 }
 label {
  font: normal 16px/1 "Open Sans", Arial, sans-serif;
  text-transform: uppercase;
  color: #aaa;
 }
 button,
 .btn {
  text-decoration: none;
  border: none;
  background: $yellow;
  color: #fff;
  text-transform: uppercase;
  font: 700 14px "Open Sans", Arial, sans-serif;
  padding: 8px 20px;
  border-radius: 3px;
  box-shadow: 0 2px 0 0 darken($yellow-alt, 5%);
  cursor: pointer;
  &:active {
   position: relative;
   top: 2px;
   box-shadow: none;
  }
 }
 .select-wrap {
  margin-bottom: 40px;
  margin-left: 15px;
  display: inline-block;
  position: relative;
  &:after {
   position: absolute;
   top: 8px;
   right: 10px;
   content: "▾";
   color: black;
   display: block;
   z-index: -1;
   font-size: 20px;
  }
  #region,
  #currency-select {
   padding: 10px 30px 10px 10px;
   font-size: 16px;
   border-radius: 5px;
   border: 1px solid #ccc;
   margin: 0;
   appearance: none;
   position: relative;
   background: rgba(255, 255, 255, 0);
   color: #222;
   &:hover {
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15);
   }
  }
 }
 .sliders-wrap {
  width: 70%;
  padding-right: 100px;
  float: left;
  .slider {
   position: relative;
   margin: 25px 0;
  }
  #gb-slider {
   margin-bottom: 80px;
  }
 }
 .total-wrap {
  width: 30%;
  float: left;

  button {
   margin-top: 40px;
  }
  .price-wrap {
   h3 {
    margin-bottom: 10px;
   }
   #total-price {
    font-size: 42px;
    line-height: 1.15;
    color: #999;
    border-bottom: 1px solid $grey;
    padding: 0 0 20px;
    margin: 0 0 10px;
    span {
     color: #999;
    }
   }
   #price-per-gb {
    color: #222;
    font-size: 21px;
    clear: both;
    .price {
     color: #222;
    }
   }
  }
  .veeam-provider {
   float: right;
  }
 }
 .value-label {
  white-space: nowrap;
  position: absolute;
  top: 25px;
  font-size: 15px;
  color: #666;
  text-transform: none;
  font-weight: normal;
 }
 .contact-us {
  margin-top: 25px;
  display: none;
  h3 {
   margin: 0;
   line-height: 1;
  }
  p {
   margin: 10px 0 25px;
  }
 }

 /* jQuery UI Slider Theming */
 .ui-slider,
 .ui-slider-handle,
 .ui-slider-range {
  border-radius: 500px;
 }
 .ui-slider {
  background: $grey;
  border: none;
  height: 1em;
 }
 .ui-slider-handle {
  width: 1.8em;
  height: 1.8em;
  top: -0.4em;
  margin-left: -0.7em;
  cursor: grab;
  background: $yellow-alt;
  border-color: $yellow-alt;
 }
 .ui-slider-range {
  background: $yellow;
 }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<!DOCTYPE html>
<html lang "en">

<head>
  <meta charset="utf-8">
  <title>...</title>
  <link rel="stylesheet" type="text/css" href="https://raw.githubusercontent.com/Crackerzzzz/slider/master/slider.css" />
  <script type='text/javascript' src='https://raw.githubusercontent.com/Crackerzzzz/slider/master/Slider.js'></script>
</head>

<body>
  <section id="veeam-sliders" class="clearfix">
    <form id="backup-form">
      <div class="sliders-wrap">
        <label>Select Data Center:</label>
        <div class="select-wrap">
          <select id="region" name="idc">
            <option value="ca">Los Angeles, CA</option>
            <option value="az">Phoenix, AZ</option>
            <option value="va">Ashburn, VA</option>
            <option value="sg">Singapore, SG</option>
            <option value="th">Bangkok, TH</option>
            <option value="hk">Hong Kong, HK</option>
          </select>
        </div>
        <div class="tb-wrap">
          <h3>Total GB to Backup</h3>
          <div id="gb-slider" class="slider"></div>
          <input type="hidden" name="qty" value="2000">
        </div>
        <div class="contract-wrap">
          <h3>Contract Term Length</h3>
          <div id="term-slider" class="slider"></div>
          <input type="hidden" name="period" value="1">
        </div>
      </div>
      <div class="total-wrap">
        <label>Select Currency:</label>
        <div class="select-wrap">
          <select id="currency-select">
            <option value="USD">USD</option>
            <option value="CNY">CNY</option>
            <option value="THB">THB</option>
          </select>
        </div>
        <div class="price-wrap">
          <h3>Total:</h3>
          <div id="total-price">
            <span class="currency-symbol">$</span><span class="price">000.00</span> /m.
          </div>
          <div id="price-per-gb">
            <span>$</span><span class="price">0.00</span> /GB
            <input type="hidden" name="unit_price" value="0.12">
          </div>
          <button type="submit">Add To Cart</button>
          <img class="veeam-provider" src="/wp-content/uploads/veeam-gold-provider_x100.jpg">
        </div>
        <div class="contact-us">
          <h3>Contact Us</h3>
          <p>If you're interested in enterprise backup with over 10TB of space, please contact our sales agent for a custom quote based on your needs.</p>
          <a href="/contact/" class="btn" title="Contact Us">Contact Us</a>
        </div>
      </div>
      <input name="discount_term" type="hidden">
      <input name="id" value="621" type="hidden">
      <input name="option" value="7688:53546" type="hidden">
    </form>
  </section>
</body>

</html>

Note: the css is messed up due to not having sass installed.