似乎无法在我的HTML

Question

编码很新，只是想知道是否有人可以修改为什么我的.CSS＆amp; .JS文件没有链接到我的HTML？

这是线条＆amp;它应该是这样的：https://codepen.io/MatteoV/pen/aGqQBe

我也会尝试将此代码实现到Webflow中，有人知道我可以在哪些地方实现这些代码吗？

谢谢你们的帮助！ ：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>

注意：由于没有安装sass，css搞砸了。