-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
131 lines (131 loc) · 6.46 KB
/
index.html
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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/racetrack.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Fredericka+the+Great&family=Racing+Sans+One&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Mochiy+Pop+P+One&family=Neonderthaw&family=Roboto:ital,wght@0,100;1,300&family=Teko&display=swap" rel="stylesheet">
<title>Animal Racer!</title>
</head>
<body>
<header >
<div id="banner">
<img src="img/racer-img/cow_right.png" alt="">
<div>
<h1>Animal Racer<img src="img/racer-img/chicken_front.png" alt="" id="header-chicken"></h1>
</div>
<img src="img/racer-img/llama_left.png" alt="">
</div>
<nav id="navi">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="scorecard.html">Leaderboard</a></li>
<li><a href="about-us.html">About Us</a></li>
</ul>
</nav>
</header>
<main>
<section id="pregame">
<form id="player-select">
<div id="welcome-box">
<h2 id="welcome">Welcome to Animal Racer!</h2>
<p>This is a trivia race to the finish line!</p>
<p>Put your animal knowledge to the test!</p>
</div>
<div id="name-input">
<label>Your Name:
<input type="text" name="user-name" required="required">
</label>
</div>
<div id="player-choice">
<div id="selectR">
<label>Select a Racer:
</div>
<div id="choice">
<input type="radio" name="user-icon" value="chicken" required="required">Chicken
<input type="radio" name="user-icon" value="llama" required="required">Llama
<input type="radio" name="user-icon" value="cow" required="required">Cow
<input type="radio" name="user-icon" value="pig" required="required">Pig
<input type="radio" name="user-icon" value="sheep" required="required">Sheep
</div>
</label>
</div>
<button type="submit" value="submit">Start Race!</button>
</form>
</section>
<section id="live-play">
<div id="race">
<img id="topLeft" src="img/track-img/Road_02_Tile_02.png" alt="" class="track">
<img id="topCenter" src="img/track-img/Road_02_Tile_04.png" alt="" class="track">
<img id="topRight" src="img/track-img/Road_02_Tile_09.png" alt="" class="track">
<img id="start" src="img/track-img/Road_02_Tile_Start.png" alt="" class="track">
<div class="too-big"></div>
<img class="too-big track" src="img/track-img/Road_02_Tile_03.png" alt="">
<img id="bottomLeft" src="img/track-img/Road_02_Tile_01.png" alt="" class="track">
<img id="bottomCenter" src="img/track-img/Road_02_Tile_04.png" alt="" class="track">
<img id="bottomRight" src="img/track-img/Road_02_Tile_010.png" alt="" class="track">
<img id="player-racer" src="img/racer-img/chicken_rear.png" class="racer">
<img id="opponent-racer" src="img/racer-img/chicken_rear.png" class="racer">
</div>
<div id="quiz">
<div id="questions">
<h2 id="q-para"></h2>
</div>
<form id="input">
<fieldset>
<label id="answer-buttons"><p>Chose an answer:</p>
<input type="button" name="answer" value="a"> <span id="answer-a"></span>
<input type="button" name="answer" value="b"> <span id="answer-b"></span>
<input type="button" name="answer" value="c"> <span id="answer-c"></span>
<input type="button" name="answer" value="d"> <span id="answer-d"></span>
</label>
</fieldset>
</form>
</div>
<div id="correct" class="hidable">
<label id="correct-answer"><p>That is correct!</p>
<img src="img/track-img/correct-answer-clipart-1.png" alt="">
<input type="button" name="correct-answer" value="Next Question">
</label>
</div>
<div id="incorrect" class="hidable">
<label id="incorrect-answer"><p>That is incorrect!</p>
<img src="img/track-img/wrong-answer-clipart.png" alt="">
<input type="button" name="incorrect-answer" value="Next Question">
</label>
</div>
<div id="winner" class="hidable">
<div id="you-win"><p>Congratulations you win!</p>
<img src="img/track-img/Finish.png" alt="">
<div><a href="index.html">Play Again!</a></div>
<div><a href="scorecard.html">Click to see leaderboard!</a></div>
</div>
</div>
<div id="loser" class="hidable">
<div id="you-lose"><p>Sorry, you lost!</p>
<img src="img/track-img/game-lose-720x340.jpeg" alt="">
<div><a href="index.html">Play Again!</a></div>
<div><a href="scorecard.html">Click to see leaderboard!</a></div>
</div>
</div>
</section>
</main>
<footer id="footer">
<div id="right-footer" class="center">
Made at <a href="https://www.codefellows.org">CodeFellows</a>
</div>
<div id="left-footer" class="center">
©2022 The Go-Gitters
</div>
</footer>
<script src="js/app.js"></script>
</body>
</html>