forked from sudz123/happy_hacking
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathhalloween.html
199 lines (188 loc) · 10.4 KB
/
halloween.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
<!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon" type="image/x-icon" href="./images/halloween/halloween.ico" />
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Welcome to Halloween Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Link for load boostrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
<!-- Link for load custom CSS-->
<link rel="stylesheet" type="text/css" media="screen" href="style/halloween/style.css" />
<!--Link for load Font Awesome-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz"
crossorigin="anonymous">
<!-- Link for load Griffy Google Font -->
<link href="https://fonts.googleapis.com/css?family=Griffy" rel="stylesheet">
<!-- Link for load Mali Google Font-->
<link href="https://fonts.googleapis.com/css?family=Mali" rel="stylesheet">
<script type="text/javascript" src="scripts/halloween/halloween.js"></script>
</head>
<body class="halloween-body" onload="myMove()">
<header id="header">
<div class="container">
<nav class="navbar navbar-expand-lg navbar-dark">
<a id="page-title" class="navbar-brand" href="#">🎃 Happy Halloween</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-brand mt-3">
<!--<h1 >🎃 Happy Halloween</h1>-->
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#origins">Origins</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#traditions">Traditions</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#trickortreat">Trick or Treat</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#today">Halloween Today</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#countdownheader">Countdown</a>
</li>
</ul>
</div>
</div>
</div>
</header>
<section id="jumbotron">
<div id="floatingwitch">
<img src="images/halloween/floatingwitch.png" style="box-shadow:none !important;">
</div>
</section>
<div class="body-bg">
<section class="mt-4 container">
<div class="row">
<div class="col-md-6">
<div class="container">
<h2 id = "origins" class="body-header">Halloween's Origins</h2>
<p class="mt-3 body-paragraph">
Halloween or Hallowe'en (a contraction of All Hallows' Evening), also known as
Allhalloween, All Hallows' Eve, or All Saints'
Eve, is a celebration observed in a number of countries on 31 October, the eve of the
Western
Christian feast of All Hallows' Day. It begins the three-day observance of Allhallowtide,
the
time in the liturgical year dedicated to remembering the dead, including saints (hallows),
martyrs,
and also known as Allhalloween, All Hallows' Eve, or All Saints' Eve, is a celebration
observed
in a number of countries on 31 October, the eve of the Western Christian feast of All
Hallows'
Day. <br><br>It begins the three-day observance of Allhallowtide,
the time in the liturgical year dedicated to remembering the dead, including saints
(hallows),
martyrs, and all the faithful departed. Despite its religious origin, Halloween has,
especially
in more recent years, stirred up some controversy among various religious groups. For many,
Halloween
represents a worship of evil forces, which some consider to be against the will of a
higher,
almighty power.
</p>
</div>
</div>
<div class="col-md-6 zoom-container">
<img src="images/halloween/spooky1.jpg" alt="Spooky Images" class="w-100 zoom">
</div>
</div>
</section>
<section class="mt-4 container">
<div class="row">
<div class="col-md-6 zoom-container">
<img src="images/halloween/spooky2.jpg" alt="Spooky Images" class="w-100 zoom">
</div>
<div class="col-md-6">
<div class="container">
<h2 id = "traditions" class="body-header">Halloween Traditions</h2>
<p class="mt-3 body-paragraph">
Halloween is the season for little ghosts and goblins to take to the streets, asking for candy and scaring one another silly.
Spooky stories are told around fires, scary movies appear in theaters and pumpkins are expertly
(and not-so-expertly) carved into jack-o'-lanterns. It is important to point that
this day is not tradional in some countries like Brazil, even though some brazilians
like to celebrate this date going to parties (mostly adults and teens).
</p>
</div>
</div>
</section>
<section class="mt-4 container">
<div class="row">
<div class="col-md-6">
<div class="container">
<h2 id = "today" class="body-header">Halloween Today</h2>
<p class="mt-3 body-paragraph">
These days Halloween is not usually considered a religious holiday. It is primarily a fun
day for children. Children dress
up in costumes like people did a thousand years ago. But instead of worrying about evil
spirits,
they go from house to house. They knock on doors and say "trick or treat." The owner of
each
house gives candy or something special to each trick or treater. Halloween is also often
synonymous
with horror movies and haunted houses.
</p>
</div>
</div>
<div class="col-md-6 zoom-container">
<img src="images/halloween/spooky3.png" class="w-100 zoom" alt="Spooky Images">
</div>
</div>
</section>
<section class="mt-4 container">
<div class="row">
<div class="col-md-6 zoom-container">
<img src="images/halloween/Halloween-decorations.jpg" alt="Spooky Images" class="w-100 zoom">
</div>
<div class="col-md-6">
<div class="container">
<h2 id="trickortreat" class="body-header">Trick or Treat !!</h2>
<p class="mt-3 body-paragraph">
Borrowing from Irish and English traditions, Americans began to dress up in costumes and go house to house
asking for food or money, a practice that eventually became today’s “trick-or-treat” tradition.
Young women believed that on Halloween they could divine the name or appearance of their future husband
by doing tricks with yarn, apple parings or mirrors.On Halloween, when it was believed that ghosts came
back to the earthly world, people thought that they would encounter ghosts if they left their homes.
To avoid being recognized by these ghosts, people would wear masks when they left their homes after dark
so that the ghosts would mistake them for fellow spirits.
</p>
</div>
</div>
</section>
<section class="mt-4 container">
<div class="row">
<div class="video">
<div class="col-md-12">
<iframe width="560" height="315" src="https://www.youtube.com/embed/-vnbaB0pAuE" frameborder="0" allowFullScreen></iframe>
</div>
</div>
</div>
</section>
<h1 id="countdownheader">Time left to Halloween</h1>
<p id="countdown"></p>
</div>
<div class="footer">
<div class="wrap">
<a id="back_to_top" href="#header"> <i class="fas fa-chevron-circle-up"></i> <span>Back to top</span> </a>
<a id="back_to_home" href="home.html"> <i class="fas fa-chevron-circle-left"> </i> <span>Back to home</span>
</a>
<div class="copyright">
<p>
<script>document.write(new Date().getFullYear());</script> ALL RIGHTS RESERVED
</p>
</div>
</div>
</div>
<div class="alert alert-warning alert-easter-egg" role="alert">
Only a real <a href="https://en.wikipedia.org/wiki/Konami_Code" target="_blank">konami</a> nerd can experience
true
horror.
</div>
</body>
</html>