So basically for fun I am making a spooky website. Once the user clicks on the enter button a scary face pops up. After 3 seconds of the image popping up I want another button that says "Continue" so the user can go on to the next html page but have no clue on how to do so. I am not great with Javascript or Jquery. Here is all I have so far....

```
    <html>
     <head>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <style>
      .header {
      justify-content: center;
      text-align: center;
      font-size: 170%; 
      color: black;
    font-family: Papyrus;

}

* {
  margin: 0;
  box-sizing: border-box;
}

body {
   padding: 70px 200px;
   margin: 59px;
   background-position: center top;
   background-repeat: no-repeat;
   background-image: url("https://i.postimg.cc/13dfXzBt/Shadow-Men.jpg");
   background-size: 950px 1000px;
   background-color: #000000;
}

button {
  background-color: red;
  border: none;
  color: black;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: block;
  font-size: 16px;
  font-family: Papyrus;
  font-weight : bold ;
  margin: 0 auto;
  cursor: pointer;
  position: center;
  justify-content: center;
}

#jumpscare{
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
visibility:hidden;
}

</style>

<body>

<div class="header">
     <h1><span style="color:red">T</span>he <span style="color:red">E</span>xorcist <span style="color:red">H</span>ouse</h1>
    </div>  

<button onclick="jumpscare();"> Enter </button>
<img id="jumpscare" src="img_scaryface.jpg"/>

<script>
function jumpscare(){
var jumpscare = document.getElementById("jumpscare");
jumpscare.style.visibility="visible";
}

</script>

 </body>  
</html>

```