How can you merge two different HTML pages into one?

I'm building an HTML website for a simple game. The thing is I have the game coded and ready but the way I've set up the site is that there is a single button on the index.html that connects you to a page with a timed animation which then connects you to the game immediately. I have two different pages: one for the animation, the other for the actual game I've coded. The issue I'm trying to solve is that I want to merge them so that they are part of one and the same page, displayed in the same consecutive order. To illustrate this in terms of pathways:

Current set up: index.html -----> animation.html -----> game.html

Preferred set up: index.html ----> animationandgame.html

I'm not sure if there is quick and simple solution to do this but all suggestions are welcome. Kind of desperate to get this to work to be honest, I'm two days in and couldn't find anything that helps with giving me the proper solution that I'm looking for. Links and resources would also be highly appreciated!

tisuchi

2 years ago

Level 70

@gilcas What if you put all contents for both page (animation.html and game.html) in the index.html page?

For example:

index.html

<body>
  <!-- Your index.html content here -->

  <!-- Content from animation.html -->
  <div id="animation">
    <!-- Paste the content from animation.html here -->
  </div>

  <!-- Content from game.html -->
  <div id="game">
    <!-- Paste the content from game.html here -->
  </div>

  <!-- Include any JavaScript files needed -->
  <script src="script.js"></script>
</body>

gilcas

2 years ago

Level 1

Current set up: index.html -----> animation.html -----> game.html

Preferred set up: index.html ----> animationandgame.html https://100001.onl/

Please or to participate in this conversation.