sei-project-1/index.html at main · timJFrame/sei-project-1 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="styles/main.css">
	<link rel="preconnect" href="https://fonts.gstatic.com">
	<link href="https://fonts.googleapis.com/css2?family=Xanh+Mono&display=swap" rel="stylesheet">
  <script src="./scripts/app.js" charset="utf-8"></script>
	<title>My Project</title>
</head>
<body>


<div class="landing-page">


	<img src="./images/characters/landing-page.gif" alt="intro image" class="landing-page-image">
	<button class="landing-page-button">Play Game</button>
</div>
	<main>
		<section class="game-options">
				<div class="quest">
					<h3 class="quest-heading">Your Quest</h3>
					<p class="quest-blurb">Harry the Dark Lord has returned. To defeat the Dark Lord you must collect all the tokens on the board. Avoid the Dark Lords ghost minions they are crafty and
					will not permit you more than three tries. Good luck Harry Paccer </p></div>
			 </div>
		</section>

		<section class="grid-wrapper">
			<div class="grid"></div>
			<div class="end-of-game-message-div">
				<p class="end-of-game-message"></p>
				<button class="end-of-game-button">Ok<Ok/button>
			</div>
		</section>


		<section class="game-info">
			<button class="start-button">Start Game</button>
			<div class="score">
				<h3 class="player-score">Score: <span></span> </h3>
			</div>
			<div class="game-tokens">
				<h3>Game Tokens</h3>
				<img src="images/characters/food.gif" alt="harry game token" class="token">
				<p>Purple Token 5 points</p>
				<img src="images/characters/special-food.gif" alt="harry-special-game-token" class="token">
				<p>Green Token 20 Points</p>
			</div>
			<div class='harrys-lifes'>
				<p class="remaining-lives-heading">Remaining Lives: </p>
				<img class="life1" src="images/characters/harrry.gif" alt="harry-1st-life">
				<img class="life2" src="images/characters/harrry.gif" alt="harry-2nd-life">
				<img class="life3" src="images/characters/harrry.gif" alt="harry-3rd-life">
			</div>
		</section>


	</main>
	<audio src="" ></audio>
	<footer>

	</footer>

</body>
</html>