HTML and CSS Reference
In-Depth Information
<head>
<meta charset='utf-8'>
<title>Card Battle</title>
<link rel="stylesheet" href="game.css">
</head>
<body>
<header>
<div class="row">
<h1>Card Battle!</h1>
</div>
</header>
<section id="game" class="row"> <!-- The game section starts -->
<div id="start-scene" class="scene">
<a href="#" id="start-btn" class="button"></a>
</div>
<div id="game-scene" class="scene out"></div>
<div id="gameover-scene" class="scene out won loss">
<p><a href="#" id="back-to-menu-button" class="button"></
a></p>
</div>
</section> <!-- The game section ends -->
<section class='how-to-play row'>
<h2>How to Play?</h2>
<p>Pick one card and watch the battle result. Beat opponent
before you run out of HP.</p>
</section>
<footer>
<div class="row">
<p>Copyright goes here.</p>
</div>
</footer>
<!-- Loading all the JS logics -->
<script src='js/patch.js'></script>
<script src='js/scenes.js'></script>
<script src='js/game-scene.js'></script>
<script src='js/game.js'></script>
</body>
</html>
2. The HTML only defines how the content and game elements are grouped and
organized. The styling is always done in CSS. So, we have the following style rules
defined in the
game.css
file:
#game {
width: 480px;
