-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathabout.html
282 lines (212 loc) · 10.1 KB
/
about.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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
<!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">
<!-- Start of Bootstrap -->
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<script
src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"
integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF"
crossorigin="anonymous"
></script>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.css "
/>
<link
href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,700"
rel="stylesheet"
type="text/css"
/>
<!-- End of Bootstrap -->
<link rel="stylesheet" href="css/about.css">
<title>About | Mint Scream</title>
</head>
<body id="home">
<!-- Start of Nav Bar -->
<nav class="navbar-collapse navbar-expand-lg navbar-light bg-light navigation">
<div class="container-fluid">
<button class="navbar-toggler mr-right" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNav">
<ul class="navbar-nav justify-content-end">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#characters">Characters</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#developers">Developers</a>
</li>
<li class="nav-item">
<a class="nav-link playButton" href="startGame/startGame.html">Play Game</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- End of Nav Bar -->
<!-- Video -->
<section class="container1" id="about" >
<div>
<h1>Mint Scream</h1>
</div>
<div class="container-fluid about">
<div class="row">
<div class="col-lg-6 " >
<img src="images/ghostTransparent.gif" alt="cartoon ghost" width="80%">
</div>
<div class="col-lg-6" id="about">
<h4>About the Game:</h4>
<p>Mint Scream is a 2D, multi level, scrolling game that includes animated sprites and parallax backgrounds. Built from scratch with only HTML5 Canvas, CSS, and JavaScript.</p>
<h4>How to Play:</h4>
<p>To rid your mansion of monsters, simply click on the enemy before they reach the edge of the screen. Destroy 10 monsters per level.</p>
<h4 id="demo">Video Demo:</h4>
<p>The demo shows level 1 one ghost being killed and one sneaking past and reaching the edge of the screen which triggers the game to end.</p>
</div>
</div>
<div class="col-lg-12 videoPlay" >
<video playsinline="playsinline" class="w-100" autoplay="autoplay" muted="muted" loop="loop">
<source src="https://i.imgur.com/JtdGeUx.mp4" type="video/mp4">
</video>
</div>
</div>
</section>
<!-- LEVELS -->
<div class="container2" id="characters">
<div>
<h3>Characters</h3>
</div>
<!-- Level 1 -->
<div class="row gx-4 gx-lg-5 align-items-right my-5">
<div class="col-md-5">
<img class="img-fluid rounded mb-5 mb-sm-2" src="images/ghostTransparent.gif" alt="simple white cartoony ghost" width="200" />
</div>
<div class="col-lg-7">
<h4>Name: Garvey Ghost</h4>
<h5>Appearance: Level 1</h5>
<p>
Garvey Ghost is often seen as shy because he likes to hide deep in the fog of the cemetery. He usually comes out to haunt after dark when the full moon shines off his pale skin. Unlike other ghosts, Garvey has vampire-like fangs, and he isn’t afraid to bite. Beware of this boo!</p>
</div>
</div>
<!-- Level 2 -->
<div class="row gx-4 gx-lg-5 align-items-right my-5">
<div class="col-lg-7">
<h4 class="font-weight-light text-align-right">Name: Banks “the bounce” Spider</h4>
<h5 class="font-weight-light text-align-right">Appearance: Level 2</h5>
<p>The only thing worse than a spider is a spider who knows how to jump, and you can be sure that Banks “the bounce” never skips leg day. Flexing all 8 and charging forward with two horns on top of his head, this little guy isn’t to be trusted. Watch out because he is fast and furious!
</p>
</div>
<div class="col-lg-5">
<img class="img-fluid rounded mb-5 mb-lg-2" src="images/spiderTransparent.gif" alt="a spider-ish monster, with 4 stick legs, 2 cone shaped horns, three closed eyes, and beige fuzzy fur." width="250" />
</div>
</div>
<!-- Level 3 -->
<div class="row gx-4 gx-lg-5 align-items-left my-5">
<div class="col-lg-5">
<img class="img-fluid rounded mb-5 mb-lg-2" src="images/batTransparent.gif" alt="round, cartoonish black bat with large eyes and small wings" width="250"/>
</div>
<div class="col-lg-7">
<h4 class="font-weight-light text-align-right">Name: Radley Bat</h4>
<h5 class="font-weight-light text-align-right">Appearance: Level 3</h5>
<p>Radley likes to raddle cages and scare the heebie-jeebies out of anyone in his path. Like other bats, his eyes are shot but his teeth are sharp. He has hidden talons at the tips of his wings that can slice and dice with the best of them. Look out Julia Child, there is a new chef in town. </p>
</div>
</div>
<!-- Level 4 -->
<div class="row gx-4 gx-lg-5 align-items-right my-5">
<div class="col-lg-7 align-right">
<h4 class="font-weight-light text-align-right">Name: Hazi</h4>
<h5 class="font-weight-light text-align-right">Appearance: Level 4</h5>
<p>It only takes one look at Hazi, short for “hazardous”, to understand how he earned his name so many years ago. Toxic to the core, he oozes clouds of chemicals that can even penetrate top-of-the-line gasmasks. If he is spotted, it means it’s time to run!</p>
</div>
<div class="col-lg-5">
<img class="img-fluid rounded mb-5 mb-lg-2" src="images/goblinTransparent.gif" alt="animated gif of cartoonish small child wearing a green onesie costume and opening and closing his mouth, with pointy teeth." width="240" />
</div>
</div>
</div>
<!-- Meet the Developers -->
<div class="container3" id="developers">
<div>
<h3>Meet the Developers</h3>
</div>
<div class="row text-center">
<!-- Tami -->
<div class="col-sm-5 mx-auto">
<div class="card">
<img class="card-img-top" src="images/tombstoneTamiBW.png" alt="Card image cap">
<div class="card-body">
<h5 class="card-title text-center">Tami Hughes</h5>
<p class="card-text text-center">After earning her degree from the University of Arizona, she quickly moved up the ranks to a director role in hospitality. It was her passion for learning and a love for Excel that helped her discover a home as a Software Engineer. </p>
<div class="social-links text-center">
<a href="https://www.tamsauce.com" target="_blank">
<img src="images/portfolioIcon.svg" alt="portfolio" class="social-emblem"/></a>
<a href="https://www.linkedin.com/in/tami-hughes-58074a72/" target="_blank">
<img src="images/linkedInIcon.svg" alt="linkedin" class="social-emblem"/></a>
<a href="https://github.com/Tamsauce" target="_blank">
<img src="images/githubIcon.svg" alt="github" class="social-emblem"/></a>
<a href="https://twitter.com/tamsaucce" target="_blank">
<img src="https://cdn.cdnlogo.com/logos/t/96/twitter-icon.svg" alt="twitter" class="social-emblem"/></a>
</div>
</div>
</div>
</div>
<!-- Katie -->
<div class="col-sm-5 ">
<div class="card">
<img class="card-img-top" src="images/tombstoneKatie.png" alt="Card image cap">
<div class="card-body">
<h5 class="card-title text-center">Katie Marie</h5>
<p class="card-text text-center">
Pivoting to software from a career in project-based education, Katie fell in love with coding while learning Lego robotics. She enjoys creative problem solving, exploring and discovering, and helping others succeed.</p>
<div class="social-links text-center">
<a href="https://www.katiemarie.dev" target="_blank">
<img src="images/portfolioIcon.svg" alt="portfolio" class="social-emblem"/></a>
<a href="https://www.linkedin.com/in/katiemariedev/" target="_blank">
<img src="images/linkedInIcon.svg" alt="linkedin" class="social-emblem"/></a>
<a href="https://github.com/kguite" target="_blank">
<img src="images/githubIcon.svg" alt="github" class="social-emblem"/></a>
<a href="https://twitter.com/KHtmlcssjs" target="_blank">
<img src="https://cdn.cdnlogo.com/logos/t/96/twitter-icon.svg" alt="twitter" class="social-emblem"/></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="navbar navbar-expand-lg navbar-light mr-auto row navi">
<div class="d-flex justify-content-start">
<ul class="navbar-nav mx-auto">
<li class="nav-item">
<a class="blogButton" href="https://hashnode.com/post/the-good-the-bad-and-the-ugly-hackathon-addition-ckt2krrly0bxd2is1ck2k7i8s">Tami's Blog</a>
</li>
<li class="nav-item copyright">
<p>Copyright © Team MintScream 2021</p>
</li>
<li class="nav-item">
<a class="blogButton" href="https://katiemarie.hashnode.dev/mint-scream">Katie's Blog</a>
</li>
</ul>
</div>
</footer>
</body>
</html>