index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <link rel="stylesheet" href="./styles.css">
        
    </head> 
    <body>
        <div class="container">
            <div >
                <h1 class = "header_text">HAII MARYSIA HONEY BUNNY</h1>
                <h1 class = "header_text">Will you take me to be your husband? 😺😺😺</h1>
            </div>
            <div class="gif_container">
                <img src="https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExcHRyaGRydjczM3ZyZXFoaGIzOHZ1anR6OW81dWU0OXo3M3FodjF3ZiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/6sR6SN270bSQVuMJrY/giphy.gif" width="387" height="455" allow="autoplay"></img>
            </div>
            <div class = "buttons">
                <button class="btn" id = "yesButton" onclick="nextPage()">Yes <33</button>
                <button class="btn" id="sillyButton" onmouseover="moveButton()" onclick="moveButton()">Silly button</button>
                <script>
                    function nextPage() 
                    {
                        window.location.href = "yes.html";
                    }
                    
                    function moveButton() {
                        var x = Math.random() * (window.innerWidth - document.getElementById('sillyButton').offsetWidth) - 85;
                        var y = Math.random() * (window.innerHeight - document.getElementById('sillyButton').offsetHeight) - 48;
                        document.getElementById('sillyButton').style.left = `${x}px`;
                        document.getElementById('sillyButton').style.top = `${y}px`;
                    }
                </script> 
            </div>
        </div>
       
    </body> 
</html>