-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.html
188 lines (163 loc) · 8.35 KB
/
script.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
<html>
<head>
<title>PotterSpot</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script src="myscripts.js"></script>
</head>
<body>
<div class="h">
<div class="head1" align="center"><img src="logo2.jpg" style="width:100px;">PotterSpot</div>
<div class="subtitle">Challenge your inner PotterHead</div>
</div>
<nav class="navbar navbar-expand-sm sticky-top justify-content-center" style="background-color: #FFE4B5">
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#" style="margin-left:50px;margin-right: 50px;color:black;" data-toggle="modal" data-target="#beasts">Beasts & Beings</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="margin-left:50px;margin-right: 50px;color:black;" data-toggle="modal" data-target="#potions">Potions</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#quiz" style="color:black;margin-left:50px;margin-right: 50px;">Quiz</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="margin-left:50px;margin-right: 50px;color:black;" data-toggle="modal" data-target="#spells">Spells</a>
</li>
</ul>
</nav>
<div class="modal" id="spells">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Just a Swish and Flick</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<ol id="menu">
<li>Accio</li> <li>Aguamenti</li> <li>Alohomora</li>
<li>Bat-Bogey Hex</li> <li>Confundo</li> <li>Diffindo</li>
<li>Dissendium</li><li>Expecto Patronum</li><li>Expelliarmus</li>
<li>Impedimenta</li><li>Incendio</li><li>Legilimens</li>
<li>Levicorpus</li><li>Lumos</li><li>Morsmordre</li>
<li>Muffliato</li><li>Nox</li><li>Obliviate</li>
<li>Protego</li><li>Reparo</li><li>Riddikulus</li>
<li>Sectumsempra</li><li>Sonorus</li><li>Stupefy</li>
<li>Tarantallegra</li><li>Wingardium Leviosa</li>
</ol>
</div>
</div>
</div>
</div>
<div class="modal" id="beasts">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Has no one found out how to open the Monster Book of Monsters?</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<ol>
<li>Acromantula</li><li>Abraxan</li><li>Banshee</li><li>Basilisk</li><li>Blast-Ended Skrewt</li><li>Boggart</li>
<li>Bowtruckle</li><li>Centaur</li><li>Cornish Pixies</li><li>Dementor</li><li>Demiguise</li><li>Doxy</li><li>Dragon</li>
<li>Erumpent</li><li>Flobberworm</li><li>Ghoul</li> <li>Giant</li> <li>Giant Squid</li> <li>Gnome</li> <li>Goblin</li> <li>Grindylow</li> <li>Hippogriff</li> <li>House Elf</li> <li>Kappa</li> <li>Kelpie</li> <li>Kneazle</li> <li>Merpeople</li> <li>Mooncalf</li> <li>Mountain Troll</li>
<li>Murtlap</li> <li>Niffler</li> <li>Owl</li> <li>Phoenix</li> <li>Puffskein</li> <li>Pygmy Puff</li> <li>Sphinx</li> <li>Thestral</li>
<li>Thunderbird</li> <li>Unicorn</li> <li>Werewolf</li>
</ol>
</div>
</div>
</div>
</div>
<div class="modal" id="potions">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">There will be no foolish wand waving in this class</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<ol>
<li>Ageing Potion</li><li>Amortentia</li> <li>Antidote toCommon Poisons</li><li>Babbling Beverage</li> <li>Cure for Boils</li><li>Calming Draught</li> <li>Deflating Draught</li><li>Doxycide</li> <li>Draught of Peace</li>
<li>Felix Felicis</li> <li>Forgetfulness Potion</li> <li>Herbicide Potion</li><li>Pepperup Potion</li> <li>Polyjuice Potion</li> <li>Sleeping Draught</li><li>Strengthening Solution</li> <li>Swelling Solution</li> <li>Veritaserum</li> <li>Wit-Sharpening Potion</li><li>Wolfsbane</li>
</ol>
</div>
</div>
</div>
</div>
<div class="layer"> </div>
<div class="contains">
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active" id="slide1">
<h2>THE NEW HOTSPOT FOR POTTERHEADS</h2><br>
<p>Welcome to PotterSpot where you can find all the spells, potions and fantastic beasts you might have overlooked in the films and books loved by all.
Also do give our Harry Potter trivial quiz a try. The questions get interesting, more trivial and even more difficult as you keep going forward.<br><br> Rules are simple: Attempt the question before moving to next and try to do your best. Share and compare your score with your friends and see who is the Ultimate Harry Potter Fan(Books and Films).</p> <br><br><br><br><br>
<a href="#quiz" style="text-align: center;"><button style="font-family: Garamond;background-color:#8B4726;color:#FFEFD5;margin-left:435px;">TAKE QUIZ</button></a>
</div>
<div class="carousel-item" id="slide2">
<div class="media border p-3" style="border-color:#8B4726; border:2px;">
<img src="bk.jpg" class="mr-3 mt-3" style="width:183px;">
<div class="media-body">
<h3>Where the journey for Harry begins<br><small><i>Chapter 4, Keeper of Keys, Harry Potter and the Philosopher's Stone</i></small></h3>
<p>"You never told him? Never told him what was in the letter Dumbledore left fer him? I was there! I saw Dumbledore leave it, Dursley! An' you've kept it from him all these years?"<br>
"Kept what from me?" said Harry eagerly.<br>
"STOP! I FORBID YOU!" yelled Uncle Vernon in panic.<br>
Aunt Petunia gave a gasp of horror.<br>
"Ah, go boil yer heads, both of yeh," said Hagrid. "Harry--yer a wizard."<br>
There was silence inside the hut. Only the sea and the whistling wind could be heard.</p>
</div>
</div>
</div>
<div class="carousel-item" id="slide3">
<img src="slide3.png" style="width:618px;" id="fin"><br>
<div class="caption" style="margin-top:5%;color:black">Created by a dedicated fan.
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
<div class="solid" id="quiz">
<h2 align="center"style="color:lightgray;font-family: Garamond;font-size:60px;">Ultimate Harry Potter Trivial Quiz</h2>
<p align="center"style="font-family: Garamond;color:white;font-size:30px;">No duelling, just pure trivial knowledge</p>
<div class="quizContainer" >
<div class="question"></div>
<ul class="choiceList"></ul>
<div class="quizMessage"></div>
<div class="result"></div>
<div class="nextButton"><a href="#">Next Question</a></div>
<br>
</div>
</div>
<div class="layer1"> </div>
<h3>
<div class="result1" id="res">
<img src="resimg.png" style="width:60px;">Remarks by the Professors will be given here!
</div>
</h3>
</body>