We are going to build a center-aligned layout with a game title:
Open
index.htmlin a text editor. It is easier for us to style the layout with one grouping DOM element. We put all the elements inside the body into a section with theidpage. Replace the contents of the HTML file with the following:<section id="page"> <header> <h1>Untangle Puzzle Game in Canvas</h1> </header> <canvas id="game" width="768" height="400"> This is an interactive game with circles and lines connecting them. </canvas> <p>Puzzle <span id="level">0</span>, Completeness: <span id="progress">0</span>%</p> <footer> <p>This is an example of Untangle Puzzle Game in Canvas.</p> </footer> </section>Let's apply CSS to the page layout. Replace existing content in the
untangle.cssfile with the following code:html, body ...