generated from Code-Institute-Org/gitpod-full-template
-
Notifications
You must be signed in to change notification settings - Fork 1
/
evidence.html
457 lines (446 loc) · 30 KB
/
evidence.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
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Information site about ghosts and hauntings">
<meta name="keywords" content="ghosts, hauntings, paranormal, ghost stories">
<meta name="author" content="Natalie Kate Alexander">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css" />
<link rel="stylesheet" href="assets/css/style.css">
<title>Haunted- Ghosts, Hauntings and True Stories</title>
</head>
<body>
<!-- Header and Nav, modified bootstrap nav -->
<div class="header-container">
<header>
<nav class="navbar navbar-expand-md">
<a class="navbar-brand" href="index.html" aria-label="Logo and link to home page">Haunted</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navdropdownmenu"
aria-controls="navdropdownmenu" aria-expanded="false" aria-label="Toggle navigation">
<span><i class="fas fa-bars"></i></span>
</button>
<div class="collapse navbar-collapse" id="navdropdownmenu">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="index.html" aria-label="link to home page">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="index.html"
aria-label="dropdown menu for home page" id="navbardropdownmenu" role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">About</a>
<div class="dropdown-menu" aria-labelledby="navbardropdownmenu">
<a class="dropdown-item" href="index.html#about"
aria-label="link to about section">About</a>
<a class="dropdown-item" href="index.html#introduction"
aria-label="link to introduction section">Introduction</a>
<a class="dropdown-item" href="index.html#hauntings"
aria-label="link to hauntings section">Hauntings</a>
<a class="dropdown-item" href="index.html#ghosts"
aria-label="link to ghost section">Ghosts</a>
<a class="dropdown-item" href="index.html#theories"
aria-label="link to theories section">Theories</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link active dropdown-toggle" href="evidence.html" id="navbardropdownmenu2"
aria-label="opens dropdown menu for evidence page" role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">Evidence <sup
class="badge badge-info">New</sup><span class="sr-only">Current
page</span></a>
<div class="dropdown-menu" aria-labelledby="navbardropdownmenu2">
<a class="dropdown-item" href="evidence.html"
aria-label="link to evidence section">Evidence</a>
<a class="dropdown-item" href="evidence.html#true-stories"
aria-label="link to true stories section">True Stories <sup
class="badge badge-info">New</sup></a>
<a class="dropdown-item" href="evidence.html#pictures"
aria-label="link to picture evidence section">Pictures</a>
<a class="dropdown-item" href="evidence.html#videos"
aria-label="link to video evidence section">Videos</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="evidence.html#resources"
aria-label="link to resource section">Resources</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html" aria-label="link to contact page">Contact</a>
</li>
</ul>
</div>
</nav>
</header>
</div>
<div class="container-fluid">
<!-- True Stories section -->
<main>
<div class="row row-heading">
<div class="col-12 col-md-8 offset-md-2 col-lg-6 offset-lg-3 heading-row page-title">
<h1 class="text-center">Evidence</h1>
</div>
</div>
<section class="true-stories-section">
<div class="row row-heading">
<div class="col-12 section-title">
<h2 class="text-center" id="true-stories">True Stories <i class="fa fa-book"></i></h2>
</div>
</div>
<div class="row true-stories-row">
<div class="col-12 col-md-6 col-lg-4">
<h3 class="left-text">Old Building <sup class="badge badge-info">New</sup></h3>
<p>My friend and I were staying over at another friends for a night out. It was an old
building, used as student flats. We were getting ready to go out when I saw a wee
boy
walking behind me in the mirror, I instantly looked but there was no one there. I
never
said anything to anyone as I didn’t want to sound silly but in the middle of the
night
my friend woke up to the wee boy standing watching us sleep!
<br><small class="text-right">Scott, Croyden</small></p>
</div>
<div class="col-12 col-md-6 col-lg-4">
<h3 class="left-text">Ghost Colleague <sup class="badge badge-info">New</sup></h3>
<p>I was working the shop floor myself and my boss, (the only other person in) went
through
the back to do paperwork. It was quiet so I was reading a magazine at the checkout
when
I heard my boss walk through and I seen her standing at the other side of the desk
in my
peripheral vision. “You finished already?” I asked, she didn’t reply and so I
started to
repeat my question as I looked up. There was no one there, my boss was in her office
and
hadn’t left.
<br><small>Fraser, Perth</small></p>
</div>
<div class="col-12 col-md-6 col-lg-4">
<h3 class="left-text">Who's Home? <sup class="badge badge-info">New</sup>
</h3>
<p>I got home one night when I was still living with my mum and sister and all the
lights
were
off. So I settled down to watch a movie when I heard footsteps across my mums
bedroom
floor
and the distinctive sound of her wardrobe door opening, I went upstairs calling out
as I
went
“oh you are in!" When I got upstairs there was no one there, I was so scared. I
paced
the
floor, ready to run if I needed to, I just burst into tears when they finally walked
through
the door.<br><small>Naomi, Ayrshire</small></p>
</div>
<div class="d-none col-md-6 d-md-inline d-lg-none">
<img src="./assets/images/image4.jpg"
alt="small girl under a sheer sheet, with a torch on her face" width="347" height="339"
loading="lazy">
</div>
</div>
<!-- Hidden Stories -->
<div class="hidden">
<div class="row hidden-stories-row">
<input id="more-button" type="checkbox" role="button">
<label class="col-10 offset-1 text-center btn my-btn btn-lg hover"
aria-label="click for more true stories" for="more-button">Show me more awesome
stories!</label>
<div class="hide col-md-6 col-lg-4">
<h3 class="left-text">Cat Ghost</h3>
<p>My friend had bought a house and I had agreed to move in with him. When
we first
moved in
I kept seeing a cat out the corner of my eye in the house, I put it down to my
imagination until one night he asked me if I’d seen a cat in the house, turns out
he’d
been seeing it too and didn’t want to scare me.
<br><small>Leo, Lincoln</small></p>
</div>
<div class="hide col-md-6 col-lg-4">
<h3 class="left-text">Strathclyde uni halls</h3>
<p>I was saying over at a friends in her uni halls when I woke in the small hours
needing some water. As I walked towards the kitchen/living room area I could hear a
party going on, it wasn’t out of the ordinary I just wasn’t loving the idea of walking
into a party in my pj’s. I opened the door and the noise stopped abruptly, the lights
were out and there was no one there.
<br><small>Jacqueline, Glasgow</small></p>
</div>
<div class="hide col-md-6 col-lg-4">
<h3 class="left-text">Boy in the Cupboard</h3>
<p>I woke up in the middle of the night to a boy standing at the end of my bed, I started
kicking my legs out to get away, and he just walked backwards keeping his eyes on me the
whole time, and went into the cupboard. My
flat was in an old converted hospital, I think he must have been a patient and died
here. I never seen him again. Thankfully!.<br><small>Rachel, London</small></p>
</div>
<div class="hide col-md-6 col-lg-4">
<h3 class="left-text">Shoe Shop</h3>
<p>I used to work in a shoe shop and after I’d been on a night out, if the taxi queue
was too long or the weather was awful I would go into the shop (against the rules
I know but I was tipsy and had the keys). On <strong>two</strong> occasions I ran
out of there, there was a basement which was used as a stockroom, I would hear
banging and boxes falling, the second time piles of boxes upstairs also started
falling over. Didn’t even put them back I just jumped over them and bolted! This
as a very old street in an old market town, so not too surprising.
<br><small>Toni, Ayrshire</small></p>
</div>
<div class="hide col-md-6 col-lg-4">
<h3 class="left-text">Jamaica Lady</h3>
<p>I was staying in Jamaica at the Rose Hall resort, I was asleep and was woken by my
phone,
which was across the room. I got up to get it and I noticed that there looked to be
a
figure of a woman wearing a yellow top at the end of my bed, I thought that it was
clothes over the back of a chair that due to the dark looked like a figure. As I got
closer the figure didn’t transform into clothes like I assumed it would, instead she
turned her head to continue watching me cross the room. I freaked out and ran back
to
the bed and dove under the covers, I was awake for hours and didn’t re-emerge until
my
mum woke up for the toilet. Found out years later that the grounds of Rose Hall are
haunted as Ghost Adventures did a programme on it.<br><small>Lindsey,
Manchester</small>
</p>
</div>
<div class="hide col-md-6 col-lg-4">
<h3 class="text-left">Ghost Babysitter</h3>
<p>I used to babysit for a friend, the baby was maybe a year old at the time. One time I
went in to check on her and her dolls pram was inside her cot, there is no way she could
climb out her cot never mind back in carrying a pram. Another time I went in and the
wallpaper border had been ripped off all around the room! When she was a bit older she
kept staring into the corner of the room and it wasn’t until I asked what she was
looking
at that she replied “who’s that lady?” Didn’t babysit much after that!
<br><small>Suzanne, Reading</small></p>
</div>
<!-- Call to action button -->
<div class="col-10 offset-1 hide button text-center">
<a href="contact.html" aria-label="This link will take you to the contact page"
class="btn my-btn btn-lg hover">Share your experiences!
</a>
</div>
</div>
</div>
</section>
<!-- Media Evidence section -->
<section class="evidence">
<div class="row row-heading">
<div class="col-12 col-md-8 offset-md-2 col-lg-6 offset-lg-3 heading-row">
<h2 class="text-center">Media Evidence</h2>
</div>
</div>
<!-- Picture Evidence -->
<div class="row">
<div class="col-12 picture-evidence">
<h2 class="text-center" id="pictures">Pictures <i class="fas fa-camera-retro"></i></h2>
<img src="./assets/images/image15.jpeg" alt="Old group photo of some woman, circled in red is a hand that doesn't have an arm or body to go
with it as all the woman have their arms crossed in front of them." width="301"
height="402" loading="lazy">
<picture>
<source srcset="./assets/images/image7crop.jpeg" media="(max-width:500px)">
<img src="./assets/images/image7.jpeg" alt="Photo showing a group of military men, a close up of one of the men shows a face behind
him, absent of a body." width="300" height="220" loading="lazy">
</picture>
<picture>
<source srcset="./assets/images/image6crop.jpeg" media="(max-width:500px)">
<img src="./assets/images/image6.jpeg"
alt="Picture of a sitting room where there is the torso of a transparent man sitting in the chair."
width="317" height="226" loading="lazy">
</picture>
<img src="./assets/images/image8.jpeg" alt="Photo of an older woman in dark clothes and hat sitting for a portrait with what apears to be
the spirit of a man standing behind her with his hands on her shouders" width="335"
height="533" loading="lazy">
<img src="./assets/images/image10.jpeg"
alt="Photo of a woman with a mans face floating in a mist above." width="200" height="266"
loading="lazy">
<img src="./assets/images/image11.png"
alt="Photo of three people sitting for a picture with two faces floating above them."
width="299" height="400" loading="lazy">
<img src="./assets/images/image17.png"
alt="Photo of a man with a white apparition with no discernible features beside him"
width="283" height="382" loading="lazy">
<img src="./assets/images/image16.png"
alt="Photo of a woman and her large dog. On top of the dog is the face of another smaller dog, with no body."
width="320" height="398" loading="lazy">
<img src="./assets/images/image9.jpeg" alt="Photo of an older couple sitting for their picture with a womans face with a shroud round her head
floating above." width="325" height="349">
<picture>
<source srcset="./assets/images/image13crop.jpeg" media="(max-width:500px)">
<img src="./assets/images/image13.jpeg" alt="Picture taken at the front of a church where there appears to be a tall figure in a hooded cloak
with a long white goulish face." width="364" height="273" loading="lazy">
</picture>
<img src="./assets/images/image14.png"
alt="Picture of an older bearded gentleman sitting, there is a transparent figure in white beside him."
width="317" height="423" loading="lazy">
<img src="./assets/images/image12.jpeg"
alt="Photo of a transparent apparition coming down stairs" width="300" height="345"
loading="lazy">
</div>
</div>
<!-- Video Evidence -->
<div class="row video-evidence">
<div class="col-12">
<h2 class="text-center" id="videos">Videos <i class="fas fa-video"></i></h2>
</div>
<div class="col-12 col-md-6 col-lg-4 video">
<iframe src="https://www.youtube.com/embed/gj8z-3e5SsA"
aria-label="Video showing poltergeist activity and voices in an empty games room"
title="YouTube video player"
allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
loading="lazy" allowfullscreen>
</iframe>
<p>If video does not play, your browser may not support iframes.
<a href="https://www.youtube.com/embed/gj8z-3e5SsA" target="_blank" rel="noopener"
aria-label="link opens youtube video in a new window">View video here.</a>
</p>
</div>
<div class="col-12 col-md-6 col-lg-4 video">
<iframe src="https://www.youtube.com/embed/WHgHdhS5Oco"
aria-label="Video showing poltergeist activity in an appartment kitchen"
title="YouTube video player"
allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen loading="lazy">
</iframe>
<p>If video does not play, your browser may not support iframes.
<a href="https://www.youtube.com/embed/WHgHdhS5Oco" target="_blank" rel="noopener"
aria-label="link opens youtube video in a new window">View video here.</a>
</p>
</div>
<div class="col-12 col-md-6 col-lg-4 video">
<iframe src="https://www.youtube.com/embed/CgHVifwshdc?start=342&end=712"
aria-label="Video showing banging, doors opening, moaning and voices in an abandoned house recorded by the night cleaner."
title="Youtube video player"
allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen loading="lazy">
</iframe>
<p>If video does not play, your browser may not support iframes.
<a href="https://www.youtube.com/embed/CgHVifwshdc?start=342&end=712" target="_blank"
rel="noopener" aria-label="link opens youtube video in a new window">View video
here.</a>
</p>
</div>
<div class="col-12 col-md-6 col-lg-4 video">
<iframe src="https://www.youtube.com/embed/2mss495OpRs"
aria-label="Video showing a cupboard door opening repeatedly by itself"
title="YouTube video player"
allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen loading="lazy">
</iframe>
<p>If video does not play, your browser may not support iframes.
<a href="https://www.youtube.com/embed/2mss495OpRs" target="_blank" rel="noopener"
aria-label="link opens youtube video in a new window">View video
here.</a>
</p>
</div>
</div>
<!-- Call to action button -->
<div class="row">
<div class="col-10 offset-1 col-md-6 offset-md-3 col-lg-4 offset-lg-4">
<div class="button text-center">
<a href="contact.html" aria-label="This link will take you to the contact page"
class="btn my-btn btn-lg hover">Share your pictures and videos!
</a>
</div>
</div>
</div>
</section>
<!-- Further resource section -->
<section>
<div class="row row-heading">
<div class="col-12 col-md-8 offset-md-2 col-lg-6 offset-lg-3 heading-row">
<h2 id="resources" class="text-center">Further Resources</h2>
</div>
</div>
<!-- Picture -->
<div class="row">
<div class="d-none col-lg-4 d-lg-inline resource-image">
<img src="./assets/images/image18.jpg"
alt="Ghost (someone wearing a sheet) floating above forest floor">
<p>
<a href="https://www.pexels.com/@introspectivedsgn" target="_blank" rel="noopener"
aria-label="This link will open the photographers pexel page">Photo by Erik
Mclean from Pexels</a>
</p>
</div>
<!-- Resources -->
<div class="col-12 col-md-6 col-lg-4 text-center resources">
<h3>Check them out!</h3>
<ul>
<li><a href="http://www.unexplainedpodcast.com/episodes" target="_blank" rel="noopener"
aria-label="This will open the link in a new window">Unexplained podcast</a></li>
<li><a href="https://www.youtube.com/c/NukesTop5/videos" target="_blank" rel="noopener"
aria-label="This will open a link in a new window">Nukes top 5 youtube channel</a>
</li>
<li><a href="https://www.youtube.com/c/BenLainey/videos" target="_blank" rel="noopener"
aria-label="This will open a link in a new window">Ben & Lainey youtube channel</a>
</li>
<li><a href="https://www.youtube.com/playlist?list=PLD8iUdp33PqSmH4NjDm6lk1YiNUhLCxj4"
target="_blank" rel="noopener"
aria-label="This will open a link in a new window">Buzzfeed unsolved
supernatural</a></li>
<li><a href="https://en.wikipedia.org/wiki/Destination_Fear_(2019_TV_series)"
target="_blank" rel="noopener"
aria-label="This will open a link in a new window">Destination fear tv show</a></li>
<li><a href="https://en.wikipedia.org/wiki/Paranormal_Lockdown" target="_blank"
rel="noopener" aria-label="This will open a link in a new window">Paranormal
lockdown tv show</a></li>
</ul>
</div>
<!-- Fact box -->
<div class="col-12 col-md-6 col-lg-4">
<div class="resource fact-box">
<h4>Did you know?</h4>
<p>Harry Houdini was a sceptic and would seek out and expose mediums as frauds.<br>In
contrast
his friend Sir Arthur Conan Doyle was a staunch believer and actually fell in love with,
and
married a medium. </p>
</div>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer>
<div class="row">
<div class="col-10 col-md-8 offset-md-2 footer-social">
<span class="social">Follow us on social media</span>
<div>
<a class="social" target="_blank" href="https://www.facebook.com/" rel="noopener">
<i class="fab fa-facebook" aria-hidden="true"></i>
<span class="sr-only">Link will open Facebook in a new page</span>
</a>
<a class="social" target="_blank" href="https://www.twitter.com" rel="noopener">
<i class="fab fa-twitter" aria-hidden="true"></i>
<span class="sr-only">Link will open Twitter in a new page</span>
</a>
<a class="social" target="_blank" href="https://www.youtube.com" rel="noopener">
<i class="fab fa-youtube" aria-hidden="true"></i>
<span class="sr-only">Link will open Youtube in a new page</span>
</a>
<a class="social" target="_blank" href="https://www.instagram.com" rel="noopener">
<i class="fab fa-instagram" aria-hidden="true"></i>
<span class="sr-only">Link will open Instagram in a new page</span>
</a>
</div>
</div>
<div class="col-2 footer-link">
<a href="evidence.html" aria-label="Link back to top of page">Back To Top</a>
</div>
</div>
</footer>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"
integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF"
crossorigin="anonymous"></script>
</body>
</html>