index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="index.js"></script>
    <link rel="stylesheet" href="style.css" />
    <!-- <script type="text/javascript"
        src="https://cdn.jsdelivr.net/npm/@emailjs/browser@3/dist/email.min.js">
      </script>
      <script type="text/javascript">
      (function(){
      emailjs.init("muUz-h4m7w4qbH_2P");
      })();
      
</script> -->
  </head>
  <body>
    <div class="container">
      <div>
        <h1 class="header_text">Oona, Will you go out on a Date with me?</h1>
      </div>
      
      <div class="gif_container">
        <img
          src="https://i.postimg.cc/pdNqPxx1/milk-and-mocha-cute.gif"
          alt="Cute animated illustration"
        />
      </div>
      <div class="buttons">
        <button class="btn" id="yesButton" onclick="nextPage()">Yes</button>
        <button
          class="btn"
          id="noButton"
          onmouseover="moveButton()"
          onclick="moveButton()"
        >
          No
        </button>

        <script>
          function nextPage() {
            window.location.href = "yes.html";
          }

          function moveButton() {
            var x =
              Math.random() *
              (window.innerWidth -
                document.getElementById("noButton").offsetWidth);
            var y =
              Math.random() *
              (window.innerHeight -
                document.getElementById("noButton").offsetHeight);
            document.getElementById("noButton").style.left = `${x}px`;
            document.getElementById("noButton").style.top = `${y}px`;
          }
        </script>
      </div>
    </div>
    <script src="index.js"></script>
  </body>
</html>