HTML

<!DOCTYPE html>
<html>
<head>
    <title>Best Game Servers - New Homepage!</title>
    <meta charset="utf-8">
    <link href="main.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="js/jquery-3.1.0.js"></script>
    <script type="text/javascript" src="js/jquery-3.1.0.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
      $("a").on('click', function(event) {

        if (this.hash !== "") {
          event.preventDefault();

          var hash = this.hash;

          $('html, body').animate({
            scrollTop: $(hash).offset().top
          }, 700, function(){

            window.location.hash = hash;
          });
        }
      });

      var arrow = $('#scroll-down');
      function runIt() {
          arrow.animate({top:'+=10'}, 800);
          arrow.animate({top:'-=10'}, 800, runIt);
      }

      runIt();
    });
    </script>
    <script type='text/javascript' data-cfasync='false'>window.purechatApi = { l: [], t: [], on: function () { this.l.push(arguments); } }; (function () { var done = false; var script = document.createElement('script'); script.async = true; script.type = 'text/javascript'; script.src = 'https://app.purechat.com/VisitorWidget/WidgetScript'; document.getElementsByTagName('HEAD').item(0).appendChild(script); script.onreadystatechange = script.onload = function (e) { if (!done && (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete')) { var w = new PCWidget({c: 'bcab4620-a068-4fee-a8d2-48ad77dae95b', f: true }); done = true; } }; })();</script>
</head>
<body>
    <div id="hero-image"></div>
    <div id="scroll-down">
        <a href="#features"><div id="scroll-arrow"></div></a>
    </div>

    <div id="hero-content">
        <div id="hero-title">Best Game Servers</div>
        <img id="hero-computers" src="img/hero-computer.png">
    </div>

    <div id="features">
        <h1>Test</h1>
    </div>
</body>
</html>