generated from Code-Institute-Org/gitpod-full-template
-
Notifications
You must be signed in to change notification settings - Fork 6
/
index.html
417 lines (395 loc) · 21.7 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
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
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
<!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">
<meta name="description"
content="Charity Earth - Tell us what you value - The fun way to discover new environmental charities!
Take a short quiz and based on your areas of interest we will suggest a charity that would love a donation from you.">
<meta name="keywords" content="Earth Day, Earth Day 2022, Environmental Charities, Charity Selector, Quiz">
<meta name="author" content="5 Hackathon Newbies & Me!">
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://kera-cudmore.github.io/earth-day-hackathon-2022/">
<!-- Social Meta Tags for Facebook, LinkedIn & Google -->
<meta property="og:type" content="article" />
<meta property="og:title" content="Charity Earth" />
<meta property="og:description"
content="Charity Earth - Tell us what you value - The fun way to discover new environmental charities!
Take a short quiz and based on your areas of interest we will suggest a charity that would love a donation from you." />
<meta name="image" property="og:image" content="assets/images/charity-earth-responsive.png" />
<meta property="og:image:alt" content="Charity Earth site shown on a variety of devices" />
<meta property="og:url" content="https://kera-cudmore.github.io/earth-day-hackathon-2022/" />
<meta property="og:site_name" content="Charity Earth" />
<meta name="author" content="5 Hackathon Newbies & Me!">
<!-- Favicon -->
<link rel="apple-touch-icon" sizes="180x180" href="favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon/favicon-16x16.png">
<link rel="manifest" href="favicon/site.webmanifest">
<!-- Style Sheets -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" rel="stylesheet" />
<link href="assets/vendor/css/normalize.css" rel="stylesheet" type="text/css" />
<link href="assets/vendor/css/grid.css" rel="stylesheet" type="text/css" />
<link href="assets/css/style.css" rel="stylesheet" type="text/css" />
<title>Charity Earth</title>
</head>
<body>
<header>
<nav>
<div class="row">
<a href="#"><img src="assets/images/logo.png" class="logo" alt="Charity Earth logo"></a>
<a href="#"><img src="assets/images/logo.png" class="fixed-logo" alt="Charity Earth logo"></a>
<ul class="main-nav main-nav-js">
<li><a href="#">Home</a></li>
<li><a href="#quiz">Quiz</a></li>
<li><a href="#information">Information</a></li>
<li><a href="#contact">Contact Us</a></li>
</ul>
<a class="mobile-icon mobile-icon-js fixed-mobile-icon"><i class="fa-solid fa-bars"></i></a>
</div>
</nav>
<div class="hero-text">
<h1>Charity Earth</h1>
<p class="site-description">Tell us what you value.<br><br>
The fun way to discover new environmental charities! <br><br>
Take a short quiz and based on your areas of interest we will suggest a charity that would love a
donation from you.</p>
<a class="btn btn-full scroll-quiz" href="#quiz">Take quiz</a>
<a class="btn btn-blank scroll-infomation" href="#information">Show me more</a>
</div>
</header>
<section id="quiz" class="quiz-section nav-quiz-section">
<div class="row">
<h2>Take Our Quiz</h2>
</div>
<div class="row">
<div id="quiz-div-0" class="quiz-div">
<form id="location-selection-form">
<p>Choose your country, and lets get started!</p>
<br>
<input type="radio" id="scotland" name="location-radio" value="scotland">
<label for="scotland">Scotland</label>
<br>
<input type="radio" id="wales" name="location-radio" value="wales">
<label for="wales">Wales</label>
<br>
<input type="radio" id="ireland" name="location-radio" value="ireland">
<label for="ireland">Republic of Ireland</label>
<br>
<input type="radio" id="england" name="location-radio" value="england">
<label for="england">England</label>
<br>
<input type="radio" id="northern-ireland" name="location-radio" value="nireland">
<label for="northern-ireland">Northern Ireland</label>
<br>
</form>
<button class="start-button" data-type="button" id="location-selection-button">
Start the Quiz!
</button>
</div>
<div id="quiz-div-1" class="hidden quiz-div">
<form id="quiz-form-one">
<p>Which of these trips appeals to you the most?</p>
<br>
<input type="radio" name="quiz-radio-one" id="qr-one-a" value="a">
<label for="qr-one-a">A ski holiday in the Swiss alps, with accommodation in a luxurious
eco-chalet.</label>
<br>
<br>
<input type="radio" name="quiz-radio-one" id="qr-one-b" value="b">
<label for="qr-one-b"> A South African safari, that benefits local communities and animals
alike.</label>
<br>
<br>
<input type="radio" name="quiz-radio-one" id="qr-one-c" value="c">
<label for="qr-one-c">A scuba diving trip on the Caribbean coast of Costa Rica, with a sustainably
run diving school.</label>
<br>
</form>
<button data-type="button" id="quiz-one-button" class="theme-button">Next</button>
</div>
<div id="quiz-div-2" class="hidden quiz-div">
<form id="quiz-form-two">
<p>You’ve been invited to a picnic, what snacks are you going to bring?</p>
<br>
<input type="radio" name="quiz-radio-two" id="qr-two-c" value="c">
<label for="qr-two-c">I’ll stop by a greengrocer and get a nice mix of loose fruit, no packaging
means there’s less to carry to the bin.</label>
<br>
<br>
<input type="radio" name="quiz-radio-two" id="qr-two-d" value="d">
<label for="qr-two-d">I’ll go to my favourite organic bakery to pick up some sweet treats, all made
with locally sourced ingredients.</label>
<br>
<br>
<input type="radio" name="quiz-radio-two" id="qr-two-e" value="e">
<label for="qr-two-e">I’ll make my famous carrot cake, I've been waiting for an excuse to use some
veg from my allotment.</label>
<br>
</form>
<button data-type="button" id="quiz-two-button" class="theme-button">Next</button>
</div>
<div id="quiz-div-3" class="hidden quiz-div">
<form id="quiz-form-three">
<p>Where would you want to build your dream home?</p>
<br>
<input type="radio" name="quiz-radio-three" id="qr-three-a" value="a">
<label for="qr-three-a">By the seaside, you just can’t beat a walk on the beach.</label>
<br>
<br>
<input type="radio" name="quiz-radio-three" id="qr-three-b" value="b">
<label for="qr-three-b">Far away from the city, so I can step out my door and be surrounded by
nature.</label>
<br>
<br>
<input type="radio" name="quiz-radio-three" id="qr-three-e" value="e">
<label for="qr-three-e">Anywhere that has nice restaurants, and a good farmers market, is fine by
me</label>
<br>
</form>
<button data-type="button" id="quiz-three-button" class="theme-button">Next</button>
</div>
<div id="quiz-div-4" class="hidden">
<form id="quiz-form-four">
<p>Which natural wonder inspires you the most?</p>
<br>
<input type="radio" name="quiz-radio-four" id="qr-four-b" value="b">
<label for="qr-four-b">The Amazon Rainforest, home to more biodiversity than anywhere else on earth,
it's the greatest wilderness on earth.</label>
<br>
<br>
<input type="radio" name="quiz-radio-four" id="qr-four-c" value="c">
<label for="qr-four-c">The Great Barrier Reef, and the countless unique species that call it
home.</label>
<br>
<br>
<input type="radio" name="quiz-radio-four" id="qr-four-d" value="d">
<label for="qr-four-d">The Nile River, a force of nature that allowed Ancient Egypt to flourish, and
which still brings irrigation and drinking water to millions.</label>
<br>
</form>
<button data-type="button" id="quiz-four-button" class="theme-button">Next</button>
</div>
<div id="quiz-div-5" class="hidden">
<form id="quiz-form-five">
<p>You’ve been awarded a grant to make your home more eco-friendly, which renovation would you be
most excited about?</p>
<br>
<input type="radio" name="quiz-radio-five" id="qr-five-a" value="a">
<label for="qr-five-a">Installing a biogas generator. It gives me free heating fuel, and by burning
methane made by rotting food, I reduce my emissions while doing it!</label>
<br>
<br>
<input type="radio" name="quiz-radio-five" id="qr-five-d" value="d">
<label for="qr-five-d">Re-insulating, and triple glazing. I like my home to be warm and cosy, and
the money saved means it pays for itself!</label>
<br>
<br>
<input type="radio" name="quiz-radio-five" id="qr-five-e" value="e">
<label for="qr-five-e">Building my dream greenhouse in the garden, I’ll almost be self-sufficient
once I start harvesting all my home grown fruit and veg.</label>
<br>
</form>
<button data-type="button" id="quiz-five-button" class="theme-button">Next</button>
</div>
<div id="quiz-div-6" class="hidden">
<form id="donation-type-form">
<p>Are you looking for an organization you can donate to, or would you rather volunteer?</p>
<br>
<input type="radio" name="donation-type-radio" id="donation-radio-money" value="money">
<label for="donation-radio-money">Donations</label>
<br>
<br>
<input type="radio" name="donation-type-radio" id="donation-radio-time" value="time">
<label for="donation-radio-time">Volunteering</label>
</form>
<button data-type="button" id="donation-type-button" class="donation-button">Next</button>
</div>
<div id="quiz-div-7" class="hidden">
<form id="tiebreaker-form">
<p>Which one of these presents suits you best?</p>
<div id="tiebreaker-div-0" class="hidden">
<br>
<input type="radio" name="tiebreaker-radio" id="tr-a" value="a">
<label for="tr-a">An electric scooter!</label>
<br>
</div>
<div id="tiebreaker-div-1" class="hidden">
<br>
<input type="radio" name="tiebreaker-radio" id="tr-b" value="b">
<label for="tr-b">A membership to the zoo!</label>
<br>
</div>
<div id="tiebreaker-div-2" class="hidden">
<br>
<input type="radio" name="tiebreaker-radio" id="tr-c" value="c">
<label for="tr-c">A sewing machine.</label>
<br>
</div>
<div id="tiebreaker-div-3" class="hidden">
<br>
<input type="radio" name="tiebreaker-radio" id="tr-d" value="d">
<label for="tr-d">A year's subscription to National Geographic.</label>
<br>
</div>
<div id="tiebreaker-div-4" class="hidden">
<br>
<input type="radio" name="tiebreaker-radio" id="tr-e" value="e">
<label for="tr-e">A luxurious hamper of food and drink.</label>
</div>
<br>
</form>
<button data-type="button" id="tiebreaker-button">Next</button>
</div>
<form id="results-link" class=hidden>
<button type="submit">Click for your results!</button>
</form>
</div>
</section>
<section id="information" class="further-info-section">
<div class="row">
<h2>Find Out More</h2>
</div>
<div class="row">
<div class="col span-1-of-4 box">
<a href="https://www.earthday.org/earth-day-2022/" target="_blank">
<img src="assets/images/additional-4.jpg" alt="An arial view of coast">
<h3>Earth Day 2022</h3>
<div class="further-info">
<i class="fa-solid fa-earth-americas"></i>
</div>
<div class="further-info">
<i class=""></i>
Earth Day Official Site
</div>
</a>
</div>
<div class="col span-1-of-4 box">
<a href="https://www.globalrecyclingday.com/" target="_blank">
<img src="assets/images/additional-1.jpg" alt="A beach strewn with litter">
<h3>Global Recycling Day</h3>
<div class="further-info">
<i class="fa-solid fa-bottle-water"></i>
</div>
<div class="further-info">
Be a recycling hero
</div>
</a>
</div>
<div class="col span-1-of-4 box">
<a href="https://climate.nasa.gov/" target="_blank">
<img src="assets/images/additional-2.jpg" alt="An arial view of the tops of trees">
<h3>Climate Change</h3>
<div class="further-info">
<i class="fa-solid fa-wind"></i>
</div>
<div class="further-info">
NASA
</div>
</a>
</div>
<div class="col span-1-of-4 box">
<a href="https://www.bbc.co.uk/news/science-environment-46459714" target="_blank">
<img src="assets/images/additional-3.jpg" alt="A close up view of a wheat field">
<h3>BBC Food Calculator</h3>
<div class="further-info">
<i class="fa-solid fa-bowl-food"></i>
</div>
<div class="further-info">
Calculate your footprint
</div>
</a>
</div>
</div>
</section>
<!--Contact Form-->
<section class="contact-section" id="contact">
<form onsubmit="return sendMail(this);">
<h3 class="contact-heading">Get In Touch</h3>
<label for="name" hidden>Name:</label>
<input name="name" id="name" type="text" class="contact-input" placeholder="Name" required />
<label for="email" hidden>Email:</label>
<input name="email" id="email" type="email" class="contact-input" placeholder="Email" required />
<label for="message" hidden>Message:</label>
<textarea name="message" id="message" class="contact-input" placeholder="Type your message here" required></textarea>
<div class="submit-btn">
<input type="submit" value="SEND" />
</div>
</form>
</section>
<!-- footer -->
<footer>
<div class="row footer-row">
<h4>Charity Earth Contributors</h4>
</div>
<div class="contributors-container">
<div class="contributors-item">
<h5>Alaa Hijazi</h5>
<a href="https://github.com/Hijazi-alaa" target="_blank"><i aria-hidden="true"
class="fa-brands fa-github-square"><span class="sr-only">View Alaa Hijazi's GitHub
profile</span></i></a>
<a href="https://www.linkedin.com/in/alaa-hijazi-1901b2196/" target="_blank"><i aria-hidden="true"
class="fa-brands fa-linkedin"><span class="sr-only">View Alaa Hijazi's Linked In
Profile</span></i></a>
</div>
<div class="contributors-item">
<h5>Cillian Goan</h5>
<a href="https://github.com/Cillian-G" target="_blank"><i aria-hidden="true"
class="fa-brands fa-github-square"><span class="sr-only">View Cillian Goan's GitHub
profile</span></i></a>
<a href="https://www.linkedin.com/in/cillian-goan-65b100203/" target="_blank"><i aria-hidden="true"
class="fa-brands fa-linkedin"></i><span class="sr-only">View Cillian Goan's Linked In
profile</span></a>
</div>
<div class="contributors-item">
<h5>Janelle Macmillan</h5>
<a href="https://github.com/JanelleG51" target="_blank"><i aria-hidden="true"
class="fa-brands fa-github-square"><span class="sr-only">View Janelle Macmillan's GitHub
profile</span></i></a>
<a href="https://www.linkedin.com/in/janelle-macmillan-b0482a207/" target="_blank"><i aria-hidden="true"
class="fa-brands fa-linkedin"><span class="sr-only">View Janelle Macmillan's Linked In
profile</span></i></a>
</div>
<div class="contributors-item">
<h5>John Mclvor</h5>
<a href="https://github.com/johnjmci" target="_blank"><i aria-hidden="true"
class="fa-brands fa-github-square"><span class="sr-only">View John McIvor's GitHub
profile</span></i></a>
<a href=" https://www.linkedin.com/in/johnmcivor/" target="_blank"><i aria-hidden="true"
class="fa-brands fa-linkedin"><span class="sr-only">View John McIvor's Linked In
profile</span></i></a>
</div>
<div class="contributors-item">
<h5>Kera Cudmore</h5>
<a href="https://github.com/kera-cudmore" target="_blank"><i aria-hidden="true"
class="fa-brands fa-github-square"><span class="sr-only">View Kera Cudmore's GitHub
Profile</span></i></a>
<a href="https://www.linkedin.com/in/keracudmore/" target="_blank"><i aria-hidden="true"
class="fa-brands fa-linkedin"><span class="sr-only">View Kera Cudmore's Linked In
profile</span></i></a>
</div>
<div class="contributors-item">
<h5>Trevor Lehman</h5>
<a href="https://github.com/trevthedev777" target="_blank"><i aria-hidden="true"
class="fa-brands fa-github-square"><span class="sr-only">View Trevor Lehman's GitHub
profile</span></i></a>
<a href="https://www.linkedin.com/in/trevor-lehmann-webdev/" target="_blank"><i aria-hidden="true"
class="fa-brands fa-linkedin"><span class="sr-only">View Trevor Lehman's Linked In
profile</span></i></a>
</div>
</div>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="assets/vendor/js/jquery.waypoints.min.js"></script>
<script src="assets/js/script.js"></script>
<!-- EmailJs-->
<script src="https://cdn.jsdelivr.net/npm/@emailjs/browser@3/dist/email.min.js"></script>
<script>
(function () {
emailjs.init("w3qkNLW9_Pbkzonuw");
})();
</script>
<script src="assets/js/sendEmail.js"></script>
</body>
</html>