HTML/Bloxx.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1">
    <title>Bloxx — Keep Talking and Nobody Explodes Module</title>
    <link rel="stylesheet" type="text/css" href="css/font.css">
    <link rel="stylesheet" type="text/css" href="css/normalize.css">
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <script src="js/ktane-utils.js"></script>
</head>
<body>
    <div class="section">
        <div class="page page-bg-01">
            <div class="page-header">
                <span class="page-header-doc-title">Keep Talking and Nobody Explodes Mod</span>
                <span class="page-header-section-title">Bloxx</span>
            </div>
            <div class="page-content">
                <img src="img/Component/Bloxx.svg" class="diagram">
                <h2>On the Subject of Bloxx</h2>
                <p class="flavour-text">Thump, thump, thump, thump... That’s the sound a massive block does when he moves around.</p>

                <p>The module consists of a dark grey grid, a red 2×1 block, 4 direction buttons and a reset button.</p>
                <p>Move the red block in such a way that it stands upright on the green square to defuse the module.</p>
                <p>To move the block, press the direction buttons.</p>
                <p>If the block touches a square that is not part of the grid, the module will give a strike and reset the move.</p>
                <p>Pressing the red reset button will rewind all valid moves back to the beginning.</p>
            </div>
            <div class="page-footer relative-footer">Page 1 of 1</div>
        </div>
    </div>
</body>
</html>